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).
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”
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.
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”.
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.
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).
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.
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.
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.
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.
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.
Agora selecione a layer “madeira-3” e escureça utilizando o ajuste de curvas (ctrl + m).
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”.
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.
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.
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.
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.
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.
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.
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.
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.
Terminamos! Aqui está o resultado final!
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!
Professor, empreendedor e idealizador do Congames. É apaixonado por Criação de Jogos e quer ajudar você a construir o seu primeiro game.
![[Infográfico] A Jornada do Game](https://unidigitaldobrasil.com.br/wp-content/uploads/2016/07/infografico-a-jornada-do-game222.jpg)
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
Obrigado Cristiano e valeu pela sugestão 😉
Grande abraço.
Muita legal!! Parabéns, gostei da sugestão PIXEL ART. 🙂
Valeu Fabio, sugestão anotada! 😉
Obrigado a você pela dedicação, dando essas dicas! Abraço
😉
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 ?
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.
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