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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

Passo 4

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

Radar Icon in Photoshop

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

Radar Icon in Photoshop

Passo 6

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

Radar Icon in Photoshop

Passo 7

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

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

Passo 13

Aqui está o resultado depois das layer styles.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

Passo 15

Adicione mais elementos para deixar o visual mais realista.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

<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.

Radar Icon in Photoshop

Passo 19

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

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

Passo 22

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

Radar Icon in Photoshop

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).

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

Passo 25

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

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

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.

Radar Icon in Photoshop

Download do Arquivo Photoshop

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

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.