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.

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.

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.

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

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

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!

Arquivo PNG para Download

Editado por GisMullr