Ícone Radar no Photoshop

Nós recebemos vários emails pedindo um tutorial para fazer design de ícones no Photoshop. Não sou um designer de ícones, no entanto adoro ícones bem feitos e admiro muito os caras que fazem isso, incluindo meu amigo Everaldo Coelho, que atualmente trabalha na Apple e que é inspiração para mim, inclusive para fazer esse tutorial.

Então neste tutorial vou mostrar a vocês como criar um ícone radar estilo Mac no Photoshop. Esse processo poderia ser facilmente feito no Fireworks e/ou no Illustrator, e estou pensando em fazer isso para praticar mais.

Passo 1

Abra o Photoshop e crie um novo documento, estou usando o tamanho de 1024x1024 pixels. Também adicionei um background estilo tecido que criei em um tutorial anterior, coloquei esse background para dar mais estilo.

Passo 2

Com a Ellipse Tool (U) crie um círculo no centro do documento. Você pode criá-lo com 500x500 pixels ou de acordo com o tamanho de ícone que quiser criar.

Passo 3

Duplique o círculo e o redimensione para criar um círculo interno, a ideia é criar uma borda em nosso ícnone. Assim que redimensioná-lo, clique com o botão direito do mouse no ícone da layer no Layers Panel e selecione "Select Pixel" para criar uma marquee selection daquela área.

Passo 4

Vá até Layer>Layer Mask>Hide selection.

Passo 5

Para criar o efeito de uma borda metálica vamos usar Layer Styles. Então vá até Layer>Layer Styles>Drop Shadow. Siga os valores da imagem abaixo como referência. Você vai usar Inner Shadow, Bevel and Emboss e Color Overlay

Passo 6

Aqui está o efeito que terá depois dos layer styles.

Passo 7

Adicione outro círculo usando a Ellipse Tool (U). Esse será preto e ficará no centro da borda metálica.

Passo 8

Duplique o círculo e o redimensione para que fique um pouco menor que o círculo preto, vá então até Layer>Layer Style>Gradient Overlay. Nas cores use #7a5511 como marrom claro e #180f00 no marrom escuro. Para os outros valores use a imagem abaixo como referência.

Passo 9

Adicione uma nova layer no círculo com o gradiente e vá até Layer>Create Clipping Mask. Agora com a Brush Tool (B) pinte usando um brush soft com a cor #7a5511for bem acima do círculo (1). Adicione também uma nova layer e pinte novamente com mesma cor com 5% de opacity na borda metálica para criar uma reflexão marrom.

Passo 10

Adicione um folder no layers palette e troque o blend mode desse folder para Color Dodge. Faça mask dessa layer usando a área do círculo interno como referência. Usando a Rectangle Tool (U) crie uma linha fina em branco, lembre de fazer a linha dentro do folder com color dodge. Vá até Filter>Blur>Gaussian Blur. Use 5 pixels em Radius. Depois disso troque a Opacity para 70%. Duplique essa linha e a gire 90º. Você terá um resultado como o da imagem abaixo.

Passo 11

Com a Ellipse Tool (U) adicione um círculo no meio do radar, a cor aqui não importa pois vamos usar layer styles para mudá-la.

Passo 12

Para esse círculo aprimeira coisa a fazer é trocar Fill Opacity para 0. Adicione então Outer Glow, Inner Shadow e Stroke. Para os valores use a imagem abaixo como referência.

Passo 13

Aqui está o resultado depois das layer styles.

Passo 14

Agora adicione uma nova layer dentro do folder com color dodge e com a Brush Tool (B) e a cor branca pinte alguns pontos brancos. Devido ao color dodge e ao brush suave, os círculos terão um efeito de luz bacana.

Passo 15

Adicione mais elementos para deixar o visual mais realista.

Passo 16

Crie um novo retângulo com a Rectangle Tool (U) e o gire 45º. Esse retângulo também ficará dentro do folder com color dodge que criamos no passo 10.

Passo 17

Agora com a Pen Tool (P) crie uma forma que cubra a área de um dos quadrantes mais os 45º do retângulo que criamos no passo anterior.

<h3>Passo 18

Vá até Layer>Layer Styles>Blending Options. Troque Fill Opacity para 0 e vá até Gradient Overlay. Use Angle em Style 50º angle e 55% Opacity, observem também como eu setei as cores do gradiente.

Passo 19

Esse é o resultado que terá depois das layer styles.

Passo 20

Repita o mesmo que fizemos nos passos 2-4 e crie outro círculo para usar de margem. Essa margem ficará entre o vidro do radar e o círculo preto, é o verde da imagem abaixo.

Passo 21

Agora vamos aplicar mais Layer Styes para dar um ar mais realista ao nosso design. Use a imagem abaixo como referência dos valores.

Passo 22

Abaixo você pode ver como ficou a margem depois do layer styles.

Passo 23

Agora crie um círculo com o mesmo diâmetro daquele que tem os elementos do radar, aplique então Gradient Overlay nele usando branco como cores de começo e fim, mas com opacidades diferentes. Como 0 no começo e 100 no fim. Depois disso redimensione um pouco apenas horizontalmente. Agora usando a Elliptical Marquee Tool (M) crie uma seleção como na imagem abaixo e esconda essa área da seleção com layer mask (Layer>Layer Mask>Hide Selection).

Passo 24

Selecione todas as layers usadas para criar a interface do radar, incluindo os círculos com gradient overlay. Depois disso as duplique e faça merge das layers duplicadas em uma layer. Vá até Filter>Blur>Gaussian Blur. Use 15 pixels em Radius. Troque a opacity dessa layer para Screen em 50%.

A ideia dessa layer é aumentar o efeito de brilho.

Passo 25

Com a Eraser Tool (E), delete as áreas escuras da interface do radar para aumentar o contraste.

Conclusão

Como vocês podem ver a ideia do tutorial foi mostrar como criar um ícone estilo Mac no Photoshop usando ferramentas e filtros básicos. Você pode ainda usar mais feautres 'não destrutivas' como smart objects para deixar mais fácil de redimensionar.

Versão Verde

Você pode criar diferentes esquemas de cores usando Hue and Saturation. Para fazer isso vá até Image>Adjustments>Hue and Saturation ou Layer>New Adjustment Layer.

Download do Arquivo Photoshop

Clique aqui para fazer o download do arquivo Photoshop usado nesse tutorial