Design & UX

31 jul, 2009

Setas em Estilo 3D [Glass]

Publicidade

1. Defina em um novo documento a cor de fundo desejada. Selecione a ferramenta Freeform Pen (path) e escolha a seta ou desenho de sua preferência na biblioteca de figuras personalizadas.

2. Desenhe a seta (ou outra figura) e preencha com a cor desejada, que será alterada quando aplicarmos os estilos de camada.

3. Nomeie a camada como “TOP SETA”.

Agora vamos criar a estrutura 3D: Pressione ALT + seta para baixo, em seguida, a tecla seta para esquerda ou direita, se preferir. Mantenha ALT pressionada e repita isso por mais ou menos 20 vezes até chegar à espessura desejada.

Agora selecione todas essas camadas duplicadas e mescle-as através do atalho “Ctrl+E”. Nomeie essa camada como “SETA 2”.

Recapitulando então, você deve ter 3 camadas: “background”, “SETA 2” e “TOP SETA”. Arraste a TOP SETA para o topo da paleta. Na figura abaixo, usei vermelho para a espessura e preto para a seta para facilitar a visualização.

4. Com um duplo-clique na camada TOP SETA adicione o estilo Gradient Overlay conforme a figura abaixo (ou com as cores de sua preferência).

5. Na camada SETA 2, aplique os estilos Drop Shadow e Gradient Overlay conforme figuras a seguir:

6. Sua imagem deve se parecer com esta:

7. Com a ferramenta Pen, crie uma seleção como esta:

8. Com a seleção ainda ativa crie uma nova camada acima de todas com o nome de “BRILHO”. Pinte de branco e regule a opacidade para cerca de 20%.

9. Crie uma nova camada abaixo da TOP SETA com o nome de BRILHO 2. Faça uma seleção em forma de círculo bem no final da seta (preste atenção no detalhe da figura abaixo) e regule a opacidade em cerca de 10%.

10. Agora selecione a ferramenta Brush (B). Com um pincel de 1 pixel na cor branca e 60% de opacidade pinte uma linha em algum lugar sobre a seta.

11. Repita o passo 10, mas desta vez em uma parte diferente da seta (neste caso, no lado direito).

12. Crie uma nova camada acima de todas e com a ferramenta de seleção elíptica crie 2 círculos brancos.

13. Vá em Filter > Blur > Gaussian Blur e ajuste o campo Radius em 3 pixels.

14. Feito!

Abraços e até a próxima!

Rodrigo Piva

Site de origem: http://hv-designs.co.uk/2008/07/23/3d-glossy-arrows/