Algumas semanas atrás mostrei a vocês como criar um ícone no estilo Mac usando o Photoshop. Era um ícone radar inspirado no ícone Network Utility. Como gosto de brincar com várias ferramentas, resolvi fazer o ícone também no Pixelmator.

Neste tutorial vou mostrar a vocês como criar um belo ícone estilo Mac usando o Pixelmator. Vou mostrar como criar alguns bevels e light effects que são característicos de ícones como esse.

Passo 1

Abra o Pixelmator e crie um novo documento. Estou usando 1024x1024 pixels. Depois disso preencha o background com cinza escuro e adicione noise usando preto para o background. Assim que fizer o background, com a Ellipse Marquee Tool (M) crie um círculo e o preencha com um cinza 50%.

Radar Icon in Pixelmator

Passo 2

Duplique o círculo, vá até Edit>Free Transform e redimensione para que fique um pouco menor. Depois vá até Edit>Load Selection para criar uma marquee selection do círculo menor.

Radar Icon in Pixelmator

Passo 3

Selecione o círculo grande com a marquee selection ativada e pressione a tecla Delete para deletar o círculo maior. Se esconder o círculo menor terá p seguinte resultado:

Radar Icon in Pixelmator

Passo 4

Duplique a borda cinza que criamos no passo anterior e troque o Blending para Screen para deixar a imagem mais clara.

Radar Icon in Pixelmator

Passo 5

Duplique novamente a borda e a preencha com preto. Existem duas maneiras de fazer isso, uma é usar a Paint Bucket Tool (N) e outra, a que prefiro, é ir até Filter>Color>False Color e garantir que tenha um background preto antes de usar o filtro.

Depois vá até Filter>Blur>Gaussian Blur. Use 15 em amount e mova um pouco para baixo. Use a imagem abaixo como referência.

Radar Icon in Pixelmator

Passo 6

Duplique a borda cinza mais uma vez e use o filtro fake color mas dessa vez converta para branco. Vá novamente até Filter>Blur>Gaussian Blur. Use 15 em amount. Depois redimensione um pouco para deixar um pouco menor.

Outra coisa que vai precisar fazer aqui é adicionar uma nova layer e a preencher com preto. Essa layer ficará abaixo da borda branca. Depois faça merge das duas layers em uma e troque o blending da merged layer para Linear Dodge.

Radar Icon in Pixelmator

Passo 7

Agrupe todas as layers usadas para criar a borda metálica. Depois crie outro círculo que será o centro do nosso radar. Use a cor preta, e o posicione abaixo do grupo da borda.

Radar Icon in Pixelmator

Passo 8

Vá até View>Show Gradient. Crie um novo gradient preset e use radial em type e nas cores use preto e #926007 (na cor central).

Radar Icon in Pixelmator

Passo 9

Duplique o círculo preto do centro e redimensione para deixá-lo um pouco menor. Depois vá até Edit>Load Selection. Com a Gradient Tool (G) preencha o círculo com o gradiente onde o centro fique na parte de baixo do círculo. Use a imagem abaixo como referência.

Radar Icon in Pixelmator

Passo 10

Adicione uma nova layer, com a Brush Tool (B), um 'very soft brush' e a cor #926007 pinte um ponto de luz acima do centro do círculo com gradiente. Perceba que a marquee selection do círculo continua ativa.

Radar Icon in Pixelmator

Passo 11

Adicione uma nova layer acima das duas layers anteriores. Com a Brush Tool (B) e o mesmo 'very soft round brush', use preto para pintar as laterais do círculo para criar profundidade.

Radar Icon in Pixelmator

Passo 12

Adicione uma nova layer e a preencha com preto. Com a Rectangular Marquee Tool (M) crie um retângulo fino e o preencha com branco para criar uma linha.

Radar Icon in Pixelmator

Passo 13

Vá até Filter>Blur>Gaussian Blur e use 2 em Radius. Depois troque o Blending para Color Dodge. Você terá um belo efeito de luz. Duplique essa layer e a gire 90º.

Radar Icon in Pixelmator

Passo 14

Duplique as duas layers e aplique mais gaussian blur nelas para criar brilho.

Radar Icon in Pixelmator

Passo 15

Duplique o círculo preto que criamos no passo 7 e o coloque acima dos outros. Depois disso o redimensione para que fique menor, como na imagem abaixo. Para criar o efeito de luz é simples. O círculo já estará preto, então vá até Edit>Stroke. Use um inner stroke de 3 em branco. Depois troque o Blending da layer para Color Dodge e aplique Gaussian Blur de radius de 2 ou 3. Você também pode duplicar essa layer e aplicar mais blur para criar o mesmo brilho que fizemos no passo anterior.

Radar Icon in Pixelmator

Passo 16

Repita o mesmo que fizemos no passo anterior e adicione outro stroke branco no círculo.

Radar Icon in Pixelmator

Passo 17

Adicione uma nova layer e a preencha com preto. Perceba que essa layer ficará acima das outras mas abaixo da borda metálica. Depois disso, com a Brush Tool (B) e um 'very soft round brush' crie alguns pontos brancos.

Radar Icon in Pixelmator

Passo 18

Troque o Blending para Color Dodge e você terá um efeito de luz super legal.

Radar Icon in Pixelmator

Passo 19

Adicione uma nova layer e com a Rectangular Marquee Tool (M) crie uma seleção retangular e a preencha com preto. Depois crie outra seleção retangular, dessa vez fina sobre a área preta e a preencha com branco. Troque o Blending para Color Dodge e vá até Filter>Blur>Gaussian Blur. Use 5 em radius. Depois disso vá até Edit>Free Transform e gire 45º. Alinhe conforme fiz na imagem abaixo.

Radar Icon in Pixelmator

Passo 20

Para criar um efeito 'ghost tracking light' para o retângulo como se estivesse girando, vamos usar a Gradient Tool (G). Crie um novo gradient preset usando Angle no tipo e preto e branco nas cores. Assim que tiver o gradient preset, adicione uma nova layer e crie um círculo do tamanho daquele do centro do radar. Preencha esse círculo com o gradiente que criamos. Gire para que a parte branca fique exatamente na barra de rolagem.

Radar Icon in Pixelmator

Passo 21

Adicione uma nova layer acima dos elementos do radar mais abaixo da borda. Crie então uma 'elliptical selection' do centro do círculo, apenas selecione o centro do círculo e vá até Edit>Load Selection. Depois disso selecione a nova layer e com a Rectangular Marquee Tool (M) - troque o tipo para elipse - pressionando ALT crie outra seleção um pouco abaixo do centro da seleção anterior. use a imagem abaixo como referência.

Radar Icon in Pixelmator

Passo 22

Preencha a seleção com branco e reduza a opacidade para 10% e você criou um bom efeito de brilho.

Radar Icon in Pixelmator

Conclusão

Selecione todas as layers usadas para criar o centro da área do radar e as duplique. Depois faça merge delas em uma e vá até Filter>Blur>Gaussian Blur. Use 15 em radius e troque o Blending para Screen com 50% Opacity. Assim o efeito de brilho ficará ainda mais destacado.

Como puderam ver, criamos um ícone no estilo Mac usando apenas o Pixelmator. Nós não tínhamos nenhum filtro específico para bevels mas superamos isso. Agora é com vocês.

Radar Icon in Pixelmator

Download do Arquivo Pixelmator

Clique aqui para fazer o download do arquivo Pixelmator 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.