🤔 Para Refletir : "Não, não olhe para mim, olhe para seu mouse e teclado e comece a desenvolver!" - Victor Sena

Tutorial Como Personalizar sua Windowskin

Membro Membro
Há muito mais na realidade do que uma mente humana consegue imaginar
Postagens
226
Bravecoins
576
T%25C3%25ADtulo.png

Hallow, guys!

Aqui, quem tá falando é o InterPlay, e... Sério, eu tenho que parar com isso. Já dá pra ver quem foi que fez o tópico, mas eu insisto em dizer isso. Mania de Youtuber.

Bem... Vamos então ao tutorial. Talvez você esteja fazendo seu jogo e talz... Você até já baixou coisas novas para adicionar ao seu jogo, como ícones novos, telas de título, novas windowskins... Mas aí você percebe que, ao mudar uma windowskin, ela muda também uma área que você não queria que mudasse. Ou até queria que mudasse, mas que fosse diferente. Pois bem! Não sei se tem um tutorial desse aqui na academia gráfica, mas resolvi trazer um hoje!

É bem simples. Nós vamos usar o Photoshop, mas, se você não o tiver, pode usar o editor de imagens de sua preferência, pois os princípios aqui aplicados são os mesmo para outros softwares também. Então vamos lá?


1~ A Questão

Como você pode ver, aqui na pasta do meu projeto, já tenho muitas windowskins que foram baixadas daqui mesmo do fórum. (O que realmente recomendo que você faça também, caso não tenha esse acervo gráfico.)

Pasta%2BWindowskins.jpg


[info]O link da página do fórum é esse:
http://www.condadobraveheart.com/forum/index.php?action=downloads;sa=view;down=44
[/info]

Mas e se eu quisesse usar apenas as espadas de uma dessas windowskins?
Seta.jpg

Eu queria colocar essas espadinhas no lugar dessas setas laranjadas para que, no momento da batalha, as espadinhas apareçam, ao invés dessas setas.
Seta%2B2.jpg

E agora? O que fazer?
Muito simples! Literalmente falando, eu só preciso colocar as espadas no lugar das setas!


2~ A Solução

Eis o que vamos fazer:
a) Abra seu editor de imagens.
b) Se você estiver usando o Photoshop, arraste as duas imagens em questão para dentro do editor:

Abrir.jpg



[warning]Importante:
Para abrir o segundo arquivo no photoshop, é necessário arrastá-lo para a parte de cima da área de edição. Onde são exibidas abas referentes às imagens já abertas
:[/warning]
Exemplo:
Segunda.jpg

c) Aperte Ctrl+R para abrir a régua.
d) Clique na régua e arraste para demarcar a área correta da windowskin:
Primeiro arraste.

R%25C3%25A9gua.jpg
Até que fique assim:
Demarcado.jpg

e) Agora use a ferramente "Selecionar" para... Selecionar.  :nossa: Dorrrrr... E selecione uma das espadas, caso você queira uma imagem estática, ou selecione as duas, caso você queira com animação. No meu caso, vou selecionar as duas, pois quero com animação.
Assim:

Selecionar.jpg

[warning]Use a Ferramenta "Selecionar" no modo Quadrado. Para que você possa fazer uma seleção mais correta possível.[/warning]
f) Depois de selecionar cuidadosamente até as áreas marcadas, use a ferramenta "Mover" para arrastar a imagem para a outra aba.
Seleciona:

Ferramenta.jpg
Depois arrasta:
Arrasta.jpg

g) Agora você apaga a parte que você não quer da outra windowskin. (Simplesmente selecione e aperte "Delete", mesmo.)
h) Por fim, é só posicionar as espadas no local indicado:

Resultado.jpg

Agora é só clicar em "Arquivo", "Salvar como...", clicar no menu que fica logo abaixo do lugar onde você escolhe o nome do arquivo, escolher o formato ".PNG" e salvar. Depois, lá no seu projeto, é só usar a windowskin que você acabou de fazer!

E é isso, pessoal! Espero que esse tutorial esteja "entendível". Caso contrário, pode deixar aí nos comentários. Beleza? Então ok! Até mais! E fui!!!

(Não falei? Mania de Youtuber...  :vixi:)
 
Voltar
Topo