No último sábado nós vimos o lançamento do incrível telefone Palm Pre. Muitas pessoas já compraram o seu aparelho, mas se você quiser um, quer dizer, se quiser pelo menos ter o ícone de um, nós fizemos um para você. Este tutorial vai mostrar a você como criar no Fireworks um ícone para o Palm Pre.

Passo 1

Primeiro crie um retângulo arredondado com um gradiente cinza escuro. Agora precisamos editar o path, então desagrupe tudo e edite os pontos com a "Subselection Tool" (A) até que você tenha o formato certo. Depois disso aplique o Inner Bevel com os valores da imagem abaixo.

Creating the Palm Pre icon on Fireworks

Passo 2

Agora duplique o primeiro retângulo, diminua um pouco o tamanho dele e aplique a cor #000. Duplique esse último retângulo e faça o mesmo, diminua um pouco o tamanho dele (altura e largura) e aplique um gradiente bem escuro e 2 Inner Shadows como na imagem.

Creating the Palm Pre icon on Fireworks

Passo 3

Agora vamos criar a parte do telefone. Neste passo, nós desenhamos 4 elipses, cada uma com um estilo, tamanho e posição diferente. Observe a imagem e ajuste os valores de cada um como fiz.

Creating the Palm Pre icon on Fireworks

Passo 4

Para criar o botão, nós precisamos de 2 elementos: uma elipse e um círculo. O círculo será a mask para a elipse. Então primeiro desenhe o círculo, aplique um Linear Gradient como na imagem 2, também com um border de 2px. Depois disso desenhe uma elipse com um Linear Gradient escuro. Para adicionar a mask, corte a elipse (CTRL or Cmd + X) e cole dentro do círculo (selecione o círculo e CTRL or Cmd + V).

Creating the Palm Pre icon on Fireworks

Passo 5

Quase pronto. Dê uma olhada na imagem para ver os outros elementos que precisaremos criar para alcançar os detalhes do aparelho. O arquivo PNG tem todos os elementos já desenhados para você.

Creating the Palm Pre icon on Fireworks

Resultado Final

Aqui está o resultado. O processo é simples, mas precisamos prestar atenção em todos os detalhes porque isso é o que faz a diferença nesse tipo de projeto. Para que fique ainda mais realista, nós colocamos a interface doPalm Pre sobre o ícone. E fique atento pois farei essa interface em um próximo tutorial!

Creating the Palm Pre icon on Fireworks

Arquivo PNG para Download

Editado por GisMullr

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.