Crie um Ícone Câmera no Fireworks

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.

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.

Passo 2

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

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.

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.

Passo 5

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

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.

Passo 7

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

Passo 8

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

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.

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.

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.

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.

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.

Passo 14

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

Passo 15

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

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.

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.

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.

Passo 19

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

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.

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.

Passo a Passo

Download Fireworks File

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