[Aula - 02] Arte gráfica e efeitos especiais para Game Maker - Parte 1

Construção de cenários

Segure Shit+Alt, clique e arraste para fazer um círculo.
Escolha a "Pen Tool", segure Ctrl e clique duas vezes nos arredores do circulo para pode poder ver as ancoras de demarcação.
Ainda com o Ctrl pressionado clique segure e arraste os pontos para deformar um pouco o circulo.

Use a "Pen Tool" e faça algumas forma sobre o planeta para simular terra.

Clique na camada de alguma das formas que acabou de fazer, aperte Ctrl+J para duplicá-la e Ctrl+T para redimensioná-la.
Segure Ctrl+Alt e use as marcações nos pontos diagonais para aumentar o tamanho sem perder a proporção original.
Mude a cor da camada para branco e mova ela para baixo.

Faça o mesmo com todas as outras.
Clique com o botão direito do mouse na primeira camada acima do circulo azul e escolha "Create Clipping Mask" para a forma ficar dentro do planeta.

Faça o mesmo sempre com a camada acima até obter esse resultado:

Clique na primeira camada no topo da lista, selecione a "Pen Tool" e faça uma pequena onda na cor branca.

Use Ctrl+J para duplicá-la e Ctrl+T para redimensionar e espalhe as ondas pelo planeta.

Agora vamos texturiza-lo.
Selecione a camada do circulo azul, copie essa textura e cole no Photoshop:

Ela deve ficar dentro do planeta assim como as outras formas.
Com Ctrl+T redimensione a textura como quiser.

Ainda com a camada da textura selecionada, copie e cole mais esta:
Mude o "Blend Mode" para "Overlay" e diminua um pouco a opacidade da textura.
Temos então este resultado:

Selecione todas as camadas com a terra (menos as brancas) e pressione Ctrl+E para fundi-las.
Segure Ctrl e clique na imagem da mascara da camada do planeta para fazer uma seleção.

Tenha certeza de que a camada das terras que você acabou de fundir esta selecionada e pressione Shift+Ctrl+I para inverter a seleção e depois Delete.
Agora clique com o botão direito do mouse na camada e vá em "Release Clipping Mask".
Assim, podemos clicar uma textura a ela sem afetar as demais.

Copie e cole essa textura:
Clique com o botão direito nele e selecione "Create Clipping Mask", a redimensione e coloque o "Blend Mode" em "Hard Light".
Até agora nosso planeta esta assim:

Vamos apenas adicionar um efeito para simular a atmosfera dele.

Antes de prosseguir crie uma nova camada a araste para debaixo do planeta, com a cor em preto pressione Alt+Delete para preenche-la com a cor.
Agora podemos visualizar melhor o que vamos adicionar.

Selecione a "Ellipse Tool" e crie um círculo em cima do planeta, mude sua cor para branco.
Na caixa "Fill" que fica bem abaixo da opacidade da camada, mude para 0% para tornar a forma transparente.
Clique duas vezes na camada para abrir a janela "Layer Style", vá em "Inner Shadow", mude o cor para branco, o "Blend Mode" para "Screen", a opacidade pode ser 75%, "Size" em 54 e "Distance" em 5.
Em "Outer Glow" mude a cor para branco, opacidade para 21% e "Size" para 40.
Em "Gradient Overlay" use o gradiente padrão de preto a branco, mude o "Blend Mode" para "Screen", "Angle" para 0 e opacidade para 13%

Para maior organização selecione todas as camadas menos o fundo e pressione Ctrl+G para criar um grupo, nomeio como "Planeta 1"
E finalmente nosso planeta está pronto!


Vamos criar uma pequena lua também.
Faça um círculo em branco e depois outros pequenos círculos em cinza escuro que vão ser as crateras.
Marque todos com uma clipping mask e use essa textura com o "Blend Mode" em "Multiply" e também como clipping mask.

Repita o processo para fazer a atmosfera só que mudando os valores.
Crie um grupo para as camadas da lua e nomeie como "Lua 1" e a posicione perto do planeta.
A minha ficou assim:


Salve o processo atual e agora vamos fazer os background.
Para as estrelas tem dois tipo que gostaria mostrar: o tipo normal e o customizado.

No tipo normal, crie uma nova camada limpa encima do fundo preto.

Selecione a "Pencil Tool" e a cor branca é clique algumas vezes de forma uniforme na imagem para fazer pontos brancos.

O tipo customizado é o que eu prefiro.
Baixe essa custom shape: http://www.mediafire.com/?rfwyivdq9fu10qc
Vá na pasta do Photoshop -> Presets -> Custom Shapes e cole lá para instalar.
Reinicie o Photoshop e escolha a "Custom Shape Tool".

Clique com o botão direito sobre a imagem para aparecer o menu de seleção de shape e na seta no canto superior, escolha o "GX02Stars1" e se aparecer uma

mensagem clique em "OK".
Escolha um tipo de estrela de preferência uma não muito exagerada.
E bom sempre estar baixando custom shapes para ter cada vez mais opções de customização.

Com a cor branca faça uma pequena estrela, crie uma nova camada e use a "Pen Tool" ou a "Brush Tool" com um tamanho também pequeno e desenhe um laço ou

qualquer outra coisa que ache legal para dar aquele toque criativo.

Clique duas vezes sobre a camada da estrela, marque "Outer Glow", "Blend Mode" em "Screen" opacidade em 46%, "Size" 8 e o cor pode ser um amarelo claro

(#edffa5).

Selecione a camada do desenho e da estrela, clique com o botão direito em uma e escolha "Convert to Smart Object" para fundi-las de modo otimizado.
Agora com Ctrl+J e Ctrl+T as espalhe pela tela.
Tente não aumentar seu tamanho em relação a original, só diminuir.
Não se esqueça que mesmo que não aparece agora a parte de traz do planeta também pode ter estrelas pois no jogo o fundo se movimentará.

Agora use a "Crop Tool", selecione toda a area da imagem.

Segure Alt e gire o botão do mouse para mudar o zoom e aumente a area da imagem com o "Crop Tool", quando terminar pressione enter para aplicar a

modificação.
O tamanho da minha imagem foi para 1310x748, esse será o tamanho máximo da room no Game Maker.

Selecione o fundo preto com o cor preta selecionada e pressione Alt+Delete para preenche-lo dinovo.
Com a "Pen Tool" faça algumas formas abstratas em cor branca sobre o fundo, eu fiz algumas ondas.

Com Ctrl+E funda todas formas que criou e com Ctrl pressionado clique no quadrado que representa a imagem das formas na lista de camada para fazer uma

seleção.
Selecione o fundo preto e pressione Delete para apagar e delete a camada das formas ou apenas marque-a como invisível.
Por enquanto temos isso:

Aplique um efeito de "Drop Shadow" clicando duas vezes no fundo e "Outer Glow".

Copie e cole essa textura abaixo do fundo preto:
Não se preocupe em ocupar todo o mapa.
Lembre-se que vamos usar isso no Game Maker então temos a opção de repetir o background.

E é isso, crie mais uns dois planetas com texturas, tamanhos e formas diferentes e mude algo que não gostou.
Deixe todo muito bem organizado nomeando e fazendo grupos.
O meu resultado com o arquivo do Photoshop pode ser baixado aqui:

Código:

http://www.mediafire.com/?8xz362sg395v2rw

Na parte dois vamos exportar tudo isso para o GM, colocar um efeito de parallax, criar uma HUD entre outras coisas.

Excelente tutorial! Mesmo pra quem nao usa o Photoshop (como eu) a idéia de como criar os efeitos é válida pra maioria dos aplicativos gráficos, pois todos eles atualmente trabalham com camadas, blends, etc...
Eu por exemplo preciso aprender a desenhar e a trabalhar com esses programas, acho muito legal que sabe usar direitim o seu lado artistico!
Show!

Ótima aula! Depois de gerar os elementos finais é possível animá-los diretamente no photoshop abrindo o painel de frames e compondo os movimentos. Nesse caso poderia criar um efeito de giro no planeta (no sentido horizontal) variando a posição dos continentes.

vinians escreveu:Excelente tutorial! Mesmo pra quem nao usa o Photoshop (como eu) a idéia de como criar os efeitos é válida pra maioria dos aplicativos gráficos, pois todos eles atualmente trabalham com camadas, blends, etc...

Exatamente, pois o conceito é bem simples: criar formas, mascara-las uma com as outras, aplicar texturas e depois alguns efeitos a mais.
Prefiro começar com esse tipo de gráfico porque não é preciso ser um mestre em desenho para faze-lo.

†Ceifador escreveu:Ótima aula! Depois de gerar os elementos finais é possível animá-los diretamente no photoshop abrindo o painel de frames e compondo os movimentos. Nesse caso poderia criar um efeito de giro no planeta (no sentido horizontal) variando a posição dos continentes.

É uma ótima ideia animar o giro do planeta.
Graças as mascaras isso seria bem simples de se fazer.

Obrigado pelos comentários.

BELO TUTO ADOREI ISSO! ME AJUDOU MUITO EM AGULMAS DUVIDAS MINHAS! xD

Ei,tá mto bom o tutorial mas...como eu clico na camada?

gerudoking escreveu:Ei,tá mto bom o tutorial mas...como eu clico na camada?

Como assim?
Não seria com o mouse?

Eu digo usando que ferramenta?Eu so meio novato no photoshop,apesar de eu saber usar a pen tool,eu não consegui descobrir como selecionar as camadas.Pode me ajudar?

Para selecionar é só clicar com o mouse nela não importa a ferramenta.
Onde esta o problema nisso?

Kabeção não to entendendo O_o
eu clico com o mouse na imagem em cima dos continetes e não aparece nada!Como eu faço?

Explique-se mais.
Em que parte do tutorial você esta?
Esta tentando fazer o que? Porque? Pra que?

Ou, eu sei q n pode crackear programas, mas vc conhce algum jeito de deixar o photoshop free?
Eu bem q queria, mas demora tanto só pra eu usar isso por 30 dias?
Não vale kra...