- Convidado
Procurar em : Tutoriais Oficiais
Tópico : Tutorial - Flat Shadow
Respostas : 5
Vistos : 2161
Tutorial - Flat Shadow em 21.02.17 20:31
[Tens de ter [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] para poderes visualizar esta imagem]
FLAT SHADOW
Todos apreciam os ícones flats com sua sombra incrível!
Mas como fazer? Hoje vou explicar num tutorial bem simples:
Necessário:
Photoshop
Um Documento no PS aberto
Um fundo (quadrado e etc)
Ícone em PNG
Action Flat Shadow
Long Shadow 2 Photoshop Action - Dribble
PSD
1. Abra seu Photoshop e crie seu documento do tamanho que preferir
Tenha nele um FUNDO da cor que preferir
Seja este feito com a ferramenta de retângulos ou não
https://gyazo.com/f0573b4c2005561c7c63c1ffe4359dac
https://gyazo.com/8c41bbdc1cc090903224ce57077f2beb
Após feito o retangulo com seu fundo, vá em Window> Action > Load Action
https://gyazo.com/7fba1c1b033f3e3f62013ca6505781de
E selecione o Long Shadow Baixado
Já com seu Ícone em .png em mãos, vamos fazer a parte principal!
https://gyazo.com/82fe51d87ed97657d09969e2987f1006
Antes de mais nada, vá em Window> Properties
https://gyazo.com/83b38811c4d9c0bdbd6caaea25980f35
Esta caixa servirá para mudar algumas coisas
Com a camada do retângulo selecionada:
https://gyazo.com/7f9004a14d684c44588d6ab1d3124f02
Arredondamos as pontas do nosso quadrado/retângulo, como pode ser visto acima
Agora posicionaremos nosso ícone/texto e adicionaremos um Color Overlay
https://gyazo.com/52de49db88c331704b690bcfc347f4b7
Ok, após essa etapa, voltaremos no Action
E selecionaremos um deles
Vimos que vieram diversos (num único arquivo)
Com a camada do seu ícone/texto selecionada
Escolha um, e aplique-o
https://gyazo.com/d9649b52f46a04d7d029329c20f37688
Vão ocorrer várias coisas automaticamente
Sendo este o resultado final:
https://gyazo.com/56be32f141800adf82f6a88f3ee4230d
É apenas isto :) O procedimento pode ser o mesmo em vários casos
Dicas: Use sempre imagens em .png
- Saiba posicionar o ícone/texto
- Para aparecer a caixa com Color Overlay:
- Clique duas vezes em sua layer
- Caso não ocorra nada
- Clique com o botão direito > Rasterize Layer
Cor usada: {#}252f3f{/#}
Ícone usado: http://download.seaicons.com/download/i90482/icons8/windows-8/icons8-windows-8-diy-paint-brush.ico
