c Criando sua skin personalizada

[DarkShade 45]

INTRODUÇÃO

 

Muitas pessoas por aí já devem ter pensado em algum momento, "como será que skins são criadas?", então venho através deste compartilhar meu método de criação, tentando deixar tudo de forma clara, porém direta e caso haja alguma dúvida durante o processo ou sobre a parte técnica de algo, basta deixar seu comentário que irei lhe responder com prazer. Então, vamos lá.

 

Assuntos a serem abordados:

1. Ferramentas utilizadas;
   
2. Criação do background;
   
3. Desenhando o layout;
   
4. Configurando o layout;
   
5. Limpando o projeto;
   
6. Colocando a mão na massa;
   
7. Download.
   

 

1. Ferramentas utilizadas

Neste tutorial irei utilizar os programas:

• Adobe Photoshop CS6

• Visual Studio 2008

 

2. Criação do background

O que você precisa ter em mente primeiramente é, quais cores você irá usar e qual o tamanho de sua aplicação.

No meu caso eu optei por uma escala de cinza entre #515151 (cinza médio) a #404040 (cinza escuro), para destaque #ff8703 (laranja) junto a #aeaeae (cinza claro) e com o tamanho de 250x300.

 

 

3. Desenhando o layout

 

Crie um novo projeto no PS com as dimensões escolhidas, faça um degradê (no meu caso optei por este método) com as cores desejadas e uma linha separando a barra de menus, a idéia segue abaixo:

 

 

 

Seguindo a base previamente criada, dei umas mexidas e ajeitei ao meu gosto para deixar bem simples e visível o que quero fazer, segue o exemplo:

 

 

Basta ressaltar que o exemplo acima não será usado no projeto, mas sim o mesmo sendo apenas um passo opcional e de pré visualização do resultado final.

Depois disso feito, converta a primeira imagem para as dimensões 1x300 (o que irá diminuir drasticamente o tamanho do arquivo) e salve como layout.bmp.

 

 

4. Configurando o projeto

 

Após feito o item 3, entre no VS2008 e crie um novo projeto Win32 Application e selecione Empty Project.

Crie dois arquivos, main.cpp em Source Files e resource.rc em Resource Files e neste arquivo, adicione a imagem layout.bmp e os ícones da DarkProgramming.

Neste exemplo, eu usei também uma biblioteca que criei tempos atrás para otimizar o tempo trabalhando com Win32App, adicione em Header Files:

 

[spoiler=DlgUtils.h]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

 

5. Limpando o projeto

Como já devem saber, várias IDEs costumam colocar "lixo" no meio das dos arquivos, então vamos limpá-lo e deixar tudo do jeito correto com apenas o necessário.

Primeiramente exclua o arquivo resource.h e então clique com o botão direito no arquivo resource.rc e apague tudo exceto as linhas referentes ao ícone e a imagem, ficando assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

6. Colocando a mão na massa

 

Seguem abaixo as sources do arquivos, em caso de quaisquer dúvidas, basta me perguntar que lhe responderei com prazer.

 

[spoiler=main.cpp]

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

7. Download

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

CONCLUSÃO

Tentei deixar tudo bem simples e direto, pois apesar de que a primeira vista isso parecer complexo, basta um pouco de prática que tudo se resolve. :)

 

 

Créditos

Nytex

[Incompetech 566]

Muito bom :o

Vou tentar criar algumas skins novas.

Sempre quis fazer uma só que não tinha a minima ideia de como criar uma, obrigado por compartilhar!