Como criar um ícone profissional para o seu jogo que atraia muito mais consumidores em 20 simples passos

/, Criação de Jogos/Como criar um ícone profissional para o seu jogo que atraia muito mais consumidores em 20 simples passos

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

Como desenvolvedores de jogos, nós sabemos que um ícone de um aplicativo é: um pequeno símbolo gráfico que representa um programa, jogo ou aplicativo. Nós também sabemos que um ícone de sucesso irá atrair mais consumidores para o seu jogo.

Quem não quer isso? Eu quero!

Bom então nesse tutorial eu usarei o Photoshop para te mostrar como fazer um ícone profissional para um jogo de sinuca, vou te apresentar técnicas que você poderá também utilizar para outros temas.

E a melhor parte: Eu vou te mostrar como produzir resultados impressionantes em um curto período de tempo.

Vamos lá!

1. Crie um novo documento

Nós faremos nosso ícone em um arquivo 1024×1024 pixels mas fique a vontade para fazer em outros tamanhos como 256×256 ou 512×512 pixels.

Como nosso icone será utilizado no computador temos que definir o modo de cor para RGB (não CMYK) e a resolução de 72 pixels (não 300).

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

2. Desenhe o primeiro shape na primeira layer

Pegue a ferramenta Rounded Rectangle (U), desenhe um shape como na figura abaixo e defina sua cor para #B67032 com radius 175px e renomeie a layer para “madeira-1”

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

3. Crie um efeito madeira

Crie um efeito madeira usando “Fibers” (fibras), mude a cor de primeiro plano (Foreground) para #B67032 e a cor de segundo plano (background) para #72391B, vá no menu Filter > Render > Fibers Converta para smart object e configure o valor para variance 19 e Strength 51.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

4. Desenhe o segundo Shape

Novamente, com a ferramenta Rounded Rectangle (U) desenhe o mesmo shape mas faça ele menor que o primeiro shape (mais ou menos uns 6 px na parte de baixo).

Use Linhas guias, se você tiver dificuldade para fazer os dois shapes com a mesma largura. Chame essa layer de “madeira-quadro”.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

5. Copie a primeira layer dentro da segunda

Segure o Ctrl e clique na miniatura da layer “madeira-quadro” para criar uma seleção. Agora clique na layer “madeira-1” e pressione Ctrl + J, foi criada uma layer nova com a mesma textura de madeira que a primeira, agora poderemos deletar a layer “madeira-quadro” e chamar a layer nova de “madeira-2”.

Agora temos duas layers de madeira uma com a altura maior e outra menor.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

6. Escurecendo a layer “madeira-1”

Use ajustes de Curvas na layer “madeira-1” para fazer uma camada mais escura do que a outra. (Ctrl + m).

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

7. Adicione Profundidade usando os estilos de camada

Dê um duplo clique na layer “madeira-1”, então defina os estios de camada como fiz abaixo.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

8. Adicione mais profundidade com a Ferramenta Brush

Adicione mais profundidade para a layer “madeira-1” utilizando um brush mais escuro, fazendo uma sombra abaixo da layer “madeira-2”.

Rasterize a layer madeira-1 clicando com o botão direito do mouse e selecione a opção Rasterize Layer. Agore mude a cor de primeiro plano (Foreground) para #261206 e configure o pincel para hardness 0% e tamanho 400px. Faça uma seleção da camada segurando o Ctrl e clicando no thumb da layer depois faça uma leve pintura dando uma ideia de sombra.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

9. Adicione estilos na camada “madeira-2”

Vamos agora aplicar o efeito Inner Glow para a layer “madeira-2”, clique duas vezes sobre a camada e coloque os valores como coloquei abaixo.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

10. Desenhe o 3º Shape

Crie uma nova layer e use as ferramentas Rounded Rectangle e a Ellipse para fazer dois novos shapes como na imagem abaixo. Atente que deve está marcado a opção combine shapes para que os dois se tornem uma só forma.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

11. Preenchendo a layer 3

Crie uma seleção do shape que você criou, segurando o Ctrl e clicando na miniatura da layer do shape, então clique na layer “madeira-2” e pressione Ctrl + j para criar uma layer nova copiando a área demarcada da layer “madeira-2”.

Delete a layer criada do shape e renomeie a layer nova que criou para “madeira-3”. Veja abaixo.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

Agora selecione a layer “madeira-3” e escureça utilizando o ajuste de curvas (ctrl + m).

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

12. Duplique a Layer “madeira-3”

Duplique a layer “madeira-3” (ctrl + j), crie uma seleção dessa camada e mude a cor do Foreground para #005e20, então mova um pouco para baixo. Chame essa layer de “verde-mesa”.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

13. Recorte o que está sobrando da mesa

Agora nós queremos deletar a área verde que está passando da área da mesa. Para fazer isso, crie uma seleção da layer “madeira-3” (com o Ctrl + clique na miniatura da layer).

Agora clique na layer verde-mesa, vá no menu Select > Inverse para inverter a seleção e só então aperte a tecla delete na layer verde-mesa.

Dessa forma a layer verde-mesa agora está delimitada pela layer madeira-3 como na imagem abaixo.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

14. Crie o buraco da mesa de sinuca

Agora, crie uma nova layer e renomeie essa layer para “buraco” e faça um shape usando a Ellipse Tool, defina a cor de preenchimento preto.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

15. Dê um efeito Outer Glow na layer “madeira-3”

Volte na layer “madeira-3” e aplique um estilo de camada Outer Glow como mostro abaixo.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

16. Adicione profundidade para a layer verde-mesa

Similar ao passo 8, adicione na camada verde-mesa uma sombra com uma tonalidade mais escura do verde com a ferramenta Brush (b), pincel suave e opacidade do pincel em 50%. Utilize a cor de Foreground #02230e.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

17. Adicione um filtro Noise

Então adicione o filtro Noise a layer “verde-mesa” vá no menu Filter > Noise > Add Noise e coloque 5% de Noise.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

18. Adicionar luzes e detalhes

Duplique a camada “buraco” com o Ctrl + j.

A layer que foi criada renomeie para “buraco” e na layer de baixo para “buraco-efeito”, diminua um pouco a altura do shape do buraco de cima para baixo. Na camada “buraco-efeito” clique com o botão direito do mouse e rasterize a layer, crie uma seleção da layer “buraco-efeito” e agora com um brush cinza claro suave dê um clique criando um efeito degradê radial como na imagem abaixo.

Depois adicione Noise a layer “buraco-efeito”.

Se preciso utilize a máscara para o buraco não ultrapassar os limites da mesa.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

19. Desenhe uma bola simples

1. Faça um círculo utilizando a Elliptical Marque Tool (m) e preencha com a cor branca.
2. Pegue uma cor mais escura (#9d956e) e com o brush suave faça um leve contorno criando um gradiente dando volume a bola.
3. Use um brush pequeno com a cor branca e adicione uma iluminação na borda da bola criando um segundo gradiente bem leve para iluminação.
4. Crie um reflexo utilizando a Pen Tool (p).
5. Use um Brush para pintar essa seleção de reflexo dando um brilho na bola.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

20. Crie uma sombra para a bola

Ultimo passo! Crie um circulo preto entre a bola e a mesa e aplique um efeito Blur, vá no menu Filter ? Blur > Gaussian Blur, coloque o radius em mais ou menos 22.

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

Terminamos! Aqui está o resultado final!

Criação de icones para games, jogos digitais, design de jogos, design de games, produção de jogos

Obrigado por ter lido o artigo 🙂

Se você gostou desse artigo e foi útil pra você, deixe um comentário pra mim aqui embaixo. Adoro ler os feedbacks dos meus leitores. E se tiver alguma dúvida durante o processo é só perguntar que terei o maior prazer em responder.

 

Quer receber conteúdos exclusivos, entrevistas, sacadas, dicas rápidas e tutoriais? Entra na lista VIP é grátis!

CONTEÚDO VIP!

Coloque o seu email abaixo para receber gratuitamente as atualizações do blog!


Professor, empreendedor e idealizador do Congames. É apaixonado por Criação de Jogos e quer ajudar você a construir o seu primeiro game.

Por | 2016-02-23T00:01:41+00:00 23/02/2016|Artigos, Criação de Jogos|

9 Comentários

  1. Obr Cristiano Camacho 24/02/2016 at 9:36 am - Reply

    Muito bom! Bem criativo como vc nao usou nenhuma textura, apenas os efeitos do PS.
    Sugestão: faça um tutorial sobre pixel art no PS, seria muto bacana! =D

    • Diemano 24/02/2016 at 10:32 am - Reply

      Obrigado Cristiano e valeu pela sugestão 😉
      Grande abraço.

  2. Fabio Vaz 06/07/2016 at 11:53 am - Reply

    Muita legal!! Parabéns, gostei da sugestão PIXEL ART. 🙂

    • Diemano 06/07/2016 at 12:45 pm - Reply

      Valeu Fabio, sugestão anotada! 😉

      • Fabio Vaz 06/07/2016 at 12:54 pm - Reply

        Obrigado a você pela dedicação, dando essas dicas! Abraço

        • Diemano 06/07/2016 at 1:02 pm - Reply

          😉

  3. Caio Cesar 10/08/2016 at 6:21 pm - Reply

    Na hora de aplica o efeito “Fibers” ele aplica no espaço todo e não só no quadrado, ai eu acabo perdendo a forma arredonda do quadrado, ja verifiquei e estou fazendo na layer certa, o que pode ser ?

    • Diemano 11/08/2016 at 10:47 am - Reply

      Olá Caio tudo blz? Você pode aplicar uma máscara se quiser para que fique delimitado ao espaço, crie um rounded rectangle e depois faça uma seleção dele, segurando o Ctrl + D e clicando no thum da layer e crie uma máscara na layer que fez o efeito.

      Qualquer dúvida é só falar ok? Grande abraço.

      • Caio Cesar 11/08/2016 at 3:55 pm - Reply

        otimo deu certo, gostaria de entender o pq do efeito mascara te dado esse resultado, o que ele fez basicamente pra sumir a outra forma e fica a desejada

Deixe um comentário