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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Kabeção em Qua 01 Set 2010, 15:31


Construção de cenários


Clique aqui para acessar a aula anterior.

Nesta aula vamos construir um cenário usando falso vetor no Photoshop.
Antes de mais nada:

  • Estou usando o Photoshop CS3 com a linguagem em inglês.
  • Esteja com o Game Maker 8 PRO pois as versões anterior não tem suporte nativo a imagens únicas com diversos canais de transparência.
  • Vamos usar backgrounds em resoluções bem grandes, mas um motivo para se ter o GM8 pois o famoso "Unspecified error" que ocorre quando se usa imagens muito

    grandes parece ter sido revolvido ou otimizado.
  • O cenário será construído para uma resolução em jogo de 640x480.
  • Esteja familiarizado com a ferramenta "Pen Tool", caso contrário veja esses tutoriais:
    http://www.tutoriaisphotoshop.net/2007/09/como-usar-pen-tool-ou-ferramenta-caneta.html
    http://www.youtube.com/watch?v=xR1jiYkAyfQ
  • Não se esqueça de salvar o projeto constantemente.

Ele será uma tela de seleção de planetas como em um jogo de nave espacial.
Então, vamos começar.
Abra o Photoshop aperte Ctrl+N e crie uma nova imagem com as dimensões 640x480 e passa para o próximo capítulo.

Fazendo o primeiro planeta


Selecione a ferramenta "Ellipse Tool" e defina a cor com um azul claro como na imagem abaixo.
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:



Construindo o espaço

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.


Última edição por Kabeção em Dom 03 Out 2010, 16:05, editado 7 vez(es) (Razão : Atualização)

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

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

Mensagem por vinians em Qua 01 Set 2010, 15:43

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!

vinians

Ranking : Nota B
Número de Mensagens : 2490
Idade : 27
Data de inscrição : 18/09/2008
Notas recebidas : B-C-A-C
Reputação : 52
Insignia 1 x 0 Insignia 2 x 1 Insignia 3 x 0
Prêmios
   : 0
   : 2
   : 1

http://xcreatorgames.weebly.com/

Voltar ao Topo Ir em baixo

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

Mensagem por †Ceifador em Qua 01 Set 2010, 15:58

Ó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.

†Ceifador

Número de Mensagens : 154
Data de inscrição : 28/08/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

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

Mensagem por Kabeção em Qua 01 Set 2010, 16:27

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.

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

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

Mensagem por correiajoao em Dom 05 Set 2010, 11:56

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

correiajoao

Número de Mensagens : 353
Idade : 20
Data de inscrição : 05/06/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

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

Mensagem por gerudoking em Qua 08 Set 2010, 17:00

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

gerudoking

Número de Mensagens : 467
Idade : 19
Data de inscrição : 07/07/2009
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

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

Mensagem por Kabeção em Qua 08 Set 2010, 17:25

gerudoking escreveu:Ei,tá mto bom o tutorial mas...como eu clico na camada?
Como assim?
Não seria com o mouse?

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

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

Mensagem por gerudoking em Qua 08 Set 2010, 20:46

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?

gerudoking

Número de Mensagens : 467
Idade : 19
Data de inscrição : 07/07/2009
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

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

Mensagem por Kabeção em Qui 09 Set 2010, 11:02

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

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

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

Mensagem por gerudoking em Qui 09 Set 2010, 18:53

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?

gerudoking

Número de Mensagens : 467
Idade : 19
Data de inscrição : 07/07/2009
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

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

Mensagem por Kabeção em Qui 09 Set 2010, 19:34

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

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

http://blackcapapps.blogspot.com.br/

Voltar ao Topo Ir em baixo

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

Mensagem por vitor_liminha123 em Qui 09 Set 2010, 19:40

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...

vitor_liminha123

Número de Mensagens : 510
Idade : 18
Data de inscrição : 16/08/2010
Reputação : 12
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.newgrounds.com/tanber

Voltar ao Topo Ir em baixo

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

Mensagem por Conteúdo patrocinado Hoje à(s) 15:40


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum