Como fazer Delicious French Fries Icon - Photoshop Tutorial
Bem-vindo ao Hongkiat Baking & Culinary Arts Class! Hoje vamos ensinar-lhe como fazer manualmente um ícone de batatas fritas visualmente gostoso usando apenas Photoshop!
Sim, você estará aprendendo a criar um delicioso ícone de batatas fritas com principalmente algumas criações de formas e estilos de camadas envolvidas, padeiro iniciante bem-vindo! Este tutorial definitivamente vai fazer você completo.
Começando
Para seguir este tutorial, você precisará do seguinte recurso:
- Font Ballpark Weiner de Mickey Rossi
- Reciclagem de fontes de Bartek Nowak
Ícone De Batatas Fritas
Passo 1: Desenhe Batata
Ativar a ferramenta caneta. Desenhe a forma básica da batata e defina sua cor para # e1cc7a. Observe que não usamos a ferramenta retângulo, em vez disso, usamos a ferramenta caneta para obter uma aparência natural.

No painel Camadas, clique duas vezes na camada para abrir a caixa de diálogo Estilo de camada. Adicionar seguinte sobreposição interna de sombra e degradê.


Aqui está o resultado.

Passo 2
Desenhe o lado da batata.

Adicionar os seguintes estilos de camada.


Esse é o resultado.

etapa 3
Finalmente, desenhe sua parte superior.

Adicionar os seguintes estilos de camada.


Nós temos uma batata frita agora.

Passo 4
Coloque todas as camadas em um grupo. Repita estes processos para desenhar mais batatas.

Etapa 5: balde
Desenhe uma forma de polígono vermelha. No topo, adicione o caminho elíptico e defina seu modo para Subtrair.

Passo 6
Desenhe listras com as cores # a60101 e # ff0302.

Passo 7
Coloque listras no topo do balde. Converta-o para Clipping Mask pressionando Ctrl + Alt + G. Realize a transformação (Ctrl + T) e, em seguida, arraste-o com a tecla Ctrl até que as listras correspondam à perspectiva do bucket.

Reduza a opacidade para 40%.

Passo 8
Faça uma nova camada no topo do balde. Pinte a mancha preta na parte inferior do balde. Converter camada para Clipping Mask (Ctrl + Alt + G).

Passo 9
Repita o processo anterior para a parte superior do balde.

Passo 10
Pressione Ctrl e clique na camada frontal do compartimento para fazer uma nova seleção com base em sua forma. Faça uma nova camada e preencha com preto. Adicionar ruído usando o filtro, Filter> Noise> Add Noise.

Alterar o modo de mesclagem da camada para Screen e reduzir sua opacidade para 70%.

Passo 11
Duplique a forma da camada do balde frontal e coloque-a acima de todas as camadas. Reduza seu preenchimento para 0%.

Adicione Inner Shadow com essa configuração.

Aqui está o resultado.

Passo 12
Vamos desenhar uma faixa horizontal no balde. Caminho duplicado da forma da camada do balde frontal. Selecione os dois caminhos e clique em Combinar. Ambos os caminhos serão mesclados em um único caminho.

Etapa 13
Clique no ícone Adicionar camada de ajuste e selecione Cor sólida para converter o caminho em uma forma de camada. Selecione # fedd19 por sua cor. Caminho duplicado e mova-o para baixo alguns pixels. Defina seu modo para Subtrair. Agora, você deve ter uma faixa horizontal amarela no balde.

Adicionar cobertura de gradiente e brilho interno.


Aqui está o nosso resultado.

Passo 14
Desenhe o polígono vermelho para o lado esquerdo do balde.

Clique duas vezes na camada e adicione Inner Shadow.

Etapa 15
Ctrl-clique na forma do lado do depósito. Faça uma nova camada e preencha com preto.

Passo 16
Clique em Filter> Noise> Add Noise.

Defina o modo de mesclagem para Screen e reduza sua opacidade para 60%.

17º passo
Desenhe uma faixa horizontal amarela no lado do balde.

Adicionar cobertura de gradiente e brilho interno. A configuração usada aqui é a mesma da faixa horizontal na face frontal do balde (Etapa 13).


Aqui está o resultado.

Passo 18
Use a mesma técnica para desenhar mais listras na parte inferior do balde.

19º passo
Vamos desenhar destaque no balde. Desenhe um retângulo branco na parte inferior do balde e reduza sua opacidade para 43%. No painel Camadas, clique no ícone Adicionar Máscara de Camada e pinte as extremidades com preto.

20º passo
Repita este procedimento para desenhar outro destaque.

21º passo
Desenhe a espessura do balde. Use vermelho para sua cor.

Adicionar cobertura de gradiente.

Passo 22
Em seguida, puxe o lado de trás do balde. Podemos simplesmente duplicar o lado da frente do balde e movê-lo para todas as camadas. Desta vez, defina seu modo de caminho para Adicionar à forma.

Adicionar os seguintes estilos de camada.


Esse é o resultado.

Passo 23
Desenhe o outro lado do balde.

Adicionar os seguintes estilos de camada.


Passo 24: Adicionar Batatas
Arraste a amostra de batatas que criamos anteriormente. Coloque-os dentro do balde. Organize-os em uma posição natural.

Passo 25
Faça sombra preta entre batatas e balde. Pinte de preto para adicionar sombra de balde nas batatas. Reduza sua opacidade para 12%.

Passo 26
Faça nova camada e desenhe individualmente a sombra em cada batata. Esta sombra subtil irá adicionar profundidade à posição das batatas.

Abaixo, você pode ver animação gif mostrando antes e depois de adicionar sombra sutil em cada batata.

Passo 27: Adicionar Mais Destaques no Balde
Vamos adicionar alguns destaques no balde. Desenhe um retângulo branco no lado da capa e reduza sua opacidade para 30%. Clique no ícone Add Layer Mask e pinte as duas bordas com preto.

Etapa 28
Pinte mais destaque nos outros lados.

Etapa 29: Logo
Desenhe uma elipse na face frontal do balde com a cor: # fcbe15.

Clique duas vezes na camada e adicione Drop Shadow.

Abaixo está o resultado da subtil Sombra para a elipse.

Etapa 30
Adicione texto "Hk's" no topo da elipse usando fonte, Ballpark Weiner. Pressione Ctrl + T para realizar a transformação. Segure Ctrl e arraste o lado para inclinar o texto.

Etapa 31
Adicione os seguintes estilos de camada ao logotipo de texto.



Abaixo está o resultado.

Passo 32
Você pode mais algumas coisas no balde. Você também pode adicionar o ícone de reciclagem usando o personagem da fonte livre.

Etapa 33: Antecedentes
Ativar a ferramenta de gradiente. Desenhe um gradiente radial de # f3f3f2 para # f4f5c9.

Etapa 34: Sombra
Use pincel macio e pequeno para desenhar uma sombra sob o balde.

Passo 35
Duplique a camada de sombra pressionando Ctrl + J. Clique em Filter> Blur> Gaussian Blur para suavizá-la. Você pode querer reduzir sua opacidade se a sombra ficar muito escura.

Resultado Final + Download
Finalmente, este é o nosso ícone de batatas fritas. Espero que goste deste tutorial. E lembre-se de não comer muita batata frita, só não é saudável! :)
Clique aqui para baixar o PSD final.

(Este tutorial foi feito em colaboração com o Syarip Yunus.)