Tutorial de Windowskins

1 - Requerimentos
2 - Introdução
3 - Como Funciona?
4 - Dicas


Requerimentos

Um programa de edição de imagens que trabalhe com transparencia.
[Paint não serve]


Introdução

Pretendo ajudar o pessoal a entender como funciona a windowskin e como criar uma =]


Como Funciona?



1 - É a imagem que ficará de backround da sua janela, a imagem de fundo. Dependendo do tamanho da imagem, ela vai esticar.


2 - Representa a borda da janela e as "Scrow Arrows"
As Scrow Arrows servem para mostrar listagens, quando o conteúdo não cabe na janela. (valeu Louter)

Se dividirmos o quadrado em varios quadrados menores de 16x16 pixels:



Verde - extremidades da borda
Amarelo - parte do meio da borda
Azul - Scrow Arrows


3 - É uma imagem de backround secundária, que fica por cima da imagem 1.
Ao contrário da primeira, ela não estica, mas vai se repetindo ao longo da janela.


4 - Cursor de seleção, representa o iten do menu que está selecionado no momento. (aquele que fica piscando)
Estica dependendo do tamanho do tamanho da palavra selecionada


5 - É a seta que mostra nas mensagens de um personagem falando, quando a fala é muito grande, essa seta aparece para "mudar a página".
Feita por uma animação de 4 imagens menores.


6 - As cores do texto de seu jogo. Tente ver o menu (usando a window do RTP) e repare nas cores usadas. Qual é a cor dos itens do menu, qual a cor do nome do herói, a cor da palavra "Nv", "HP", etc... Então mude a cor correspondente para a que você quiser.


Dicas

Não colocar desenhos na imagem 1, pois ela estica e pode danificar a qualidade do desenho.

A imagem 3 deve estar com um pouco de transparencia, caso contrário, ela fica totalmente sobre a imagem 1. Então, se for deixar ela sem transparencia, não se preocupe em mudar a imagem 1.

Se estiver usando o photoshop, não use a brush tool, e sim a pencil tool. Pois a primeira modifica os pixels perto do selecionado, e a pencil tool só muda um pixel a cada vez.


________________________________________________________________

É isso, espero que gostem.

Em breve vou adicionar mais algumas imagens de exemplo.