Algumas semanas atrás resolvi criar um ícone de uma câmera. Geralmente eu faria isso no Illustrator ou Photoshop, no entanto, como uso bastante o Fireworks, resolvi criar o ícone com ele. O legal do Fireworks é que você tem as 'vector features' encontradas no Illustrator com 'bitmaps features' do Photoshop, especialmente layer style filters.

Então neste tutorial vou mostrar para vocês como criar um ícone de uma câmera no Fireworks.

Referencias

A primeira coisa a fazer é encontrar algumas referências para que possamos observar detalhes, iluminação, sombras e textura. Para o meu ícone quis recriar a Sigma DP2s.

Easy Camera Icon in Fireworks

Passo 1

Abra o Fireworks e comece um novo documento. Estou usando o tamanho 1024x1024 pixels. Você pode fazer o mesmo usando Illustrator ou Photoshop. Depois disso, com a Ellipse Tool (U), crie um círculo.

Easy Camera Icon in Fireworks

Passo 2

Crie mais círculos usando a foto como referência.

Easy Camera Icon in Fireworks

Passo 3

Agora vamos criar os círculos menores que serão as lentes. Quando você vê essas lentes elas parecem bastante complexas, mas na verdade é simples de criar o efeito, são apenas círculos.

Easy Camera Icon in Fireworks

Passo 4

Agora temos todos os círculos necessários para criar a lente. Como podem ver estamos apenas brincando com black outlines, nada de cores.

Easy Camera Icon in Fireworks

Passo 5

Com a Rounded Rectangle tool crie o corpo da câmera. Depois clique no controller amarelo para trocar o tipo de canto.

Easy Camera Icon in Fireworks

Passo 6

Agora vamos dar um visual mais realista para a lente. Selecione o círculo maior e aplique um gradiente. Use o tipo Cone com as cores cinza e preto. Use a imagem abaixo como referência.

Easy Camera Icon in Fireworks

Passo 7

No segundo círculo apenas use a cor preta com #333 de stroke.

Easy Camera Icon in Fireworks

Passo 8

No terceiro círculo use #1B1C1C na cor e #333 no stroke.

Easy Camera Icon in Fireworks

Passo 9

Use a cor preta e a mesma cor de stroke no próximo. Para o outro use o mesmo do terceiro para alternar as cores.

Easy Camera Icon in Fireworks

Passo 10

Para os próximos 4 círculos use #1B1C1C na cor com #333 em stroke. No quinto use pretp na cor. Depois disso use #999 no stroke do sexto. Precisamos de um pouco de luz na parte do centro. Adicione então 3 novos círculos, usando um linear gradient no último.

Easy Camera Icon in Fireworks

Passo 11

Preencha o círculo do centro com preto. Como você pode ver na imagem abaixo, até agora não fizemos nada muito difícil, foram apenas repetições.

Easy Camera Icon in Fireworks

Passo 12

Agora adicione 4 círculos no centro do documento. O maior em roxo (1), outro em verde amarelo eescuro (2), outro menor bem no centro em amarelo claro (3) e outro em verde (4). Use a imagem abaixo como referência. Troque o Edge Type para Feather com 3pt.

Easy Camera Icon in Fireworks

Passo 13

Adicione 2 círculos, um maior e um menor. Depois vá até Modify>Ungroup. Com a Subselection Tool (A) edite os círculos para deixá-los mais parecidos com elipses. Troque Fill color para Linear Gradient e use #728EA6 na cor com 100% transparency no começo e 0% no final. Deixe a parte totalmente transparente no centro da lente.

Easy Camera Icon in Fireworks

Passo 14

Adicione uma elipse para usar como mask. Isso é importante para criar o reflexo na lente.

Easy Camera Icon in Fireworks

Passo 15

Recorte a elipse e comece a selecionar os círculos coloridos. Selecione o amarelo escuro e vá até Edit>Past as Mask.

Easy Camera Icon in Fireworks

Passo 16

Repita a mesma coisa nos outros círculos. Agora, para o reflexo maior, selecione o círculo como fiz na imagem abaixo e copie. Selecione a elipse grande com gradiente e vá até Edit>Paste as Mask. Faça o mesmo na elipse menor com gradiente.

Easy Camera Icon in Fireworks

Passo 17

Agora vamos adicionar alguns efeitos no corpo da câmera. Tínhamos um retângulo arredondado. Para adicionar um pouco de 3D apenas adicione dois retângulos, uma em baixo, um em cima. Aplique um gradiente neles para que as margens da esquerda e da direita fique transparentes.

Easy Camera Icon in Fireworks

Passo 18

Adicione 2 retângulos nos dois lados da câmera. Aplique então um gradiente usando a cor branca e 100% transparent no começo e fim e 0% transparency no meio.

Easy Camera Icon in Fireworks

Passo 19

Mova a lente para o corpo. Você pode adicionar efeitos como sombras e elementos.

Easy Camera Icon in Fireworks

Passo 20

Aqui estão outras partes da câmera que criei. São basicamente retângulos com gradientes e tamanhos diferentes. Eles são básicos mas em conjunto criam um efeito bacana.

Easy Camera Icon in Fireworks

Conclusão

Selecione todas as layers menos as do centro da lente. Vá até Add Filters button no Properties panel. Clique e selecione Noise>Add Noise. Use 2 Amount para dar uma textura legal.

Como você pode ver, criar a câmera e a lente é super simples, o importante é prestar atenção nos detalhes para alcançar o resultado que quiser.

Easy Camera Icon in Fireworks

Passo a Passo

Easy Camera Icon in Fireworks

Download Fireworks File

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