Criando a interface do iPhone no Fireworks

Você com certeza ou tem um ou quer ter um desses. É um belo aparelho, mas a interface do iPhone também é algo que nos dá prazer de navegar. Pensando nisso que vamos nesse tutorial mostrar como fazer esta interface no Fireworks.

Procurei detalhar bem nesse tutorial como fazer esse visual glossy e talvez em um outro eu mostro como podemos criar o próprio aparelho no Fireworks, mas isso ainda estou pensando se vocês irão querer...Vamos então ao que interessa!

PASSO 1

Para começar então baixe as 2 imagens que servirão de base. Imagem do iPhone Imagem do background colorido

Crie um documento novo de 800x800px e fundo preto, e importe as 2 imagens.

PASSO 2

Agora coloque o layer da imagem dos peixes para traz do iPhone e reduza a imagem, tente enquadre até ficar parecido com a imagem abaixo. Dica: vamos usar a imagem do telefone com a parte central recortada como layer acima de todos os outros, desta forma podemos ter mais liberdade para trabalhar com as formas por trás dele!

PASSO 3

Vamos criar um retangulo de 255 x 380px, ele servirá para mascarar a imagem de fundo. Agora selecione a imagem, recorte e cole dentro do retângulo (CTRL+SHIFT+V). Agora posicione para ficar nos limites do visor e por trás.

PASSO 4

Para criar a interface, vamos usar basicamente retângulos e aplicar alguns gradientes e trasnparências. O processo é simples, e devem haver diversas maneiras de criarmos esses efeitos. Vamos começar entao criando um retângulo na parte superior de 255 x 20px, na cor #000 e use como transparência 55%. Copie este retângulo, mova 20px para baixo e coloque na altura 76px. Crie depois mais uma linha abaixo, de 1px na cor #000 e com uma trasnparência de 50%.

PASSO 5

Agora vamos criar o efeito de relevo. Crie um retângulo de 255 x 38px na cor #FFF e posicione no topo do último retângulo criado como mostra a figura. Agora aplique um gradiente linear do #FFF para o #FFF nele e use as transparências no próprio gradiente como mostramos nos detalhes (note q criarmos um ponto a mais de trasnparência para dar o efeito de feather somente na parte de baixo).

PASSO 6

Ja temos a parte superior pronta, agora copie os dois retângulos criados por último para a parte de baixo. E crie outra linha de #000 e 50% de trasnparência acima deles, da mesma forma q fizemos antes.

PASSO 7

Vamos fazer agora o botao de "slide to unlock". Crie um retângulo de 215 x 39px sem preenchimento e com borda de 1px na cor #CCC, use um round de 50. Duplique este retângulo e com ele vamos cortar a parte de baixo do gradiente branco. Selecione retângulo e o gradiente, vá em Modify > Combine Paths > Punch.

PASSO 8

Depois disso duplique novamente o retângulo e mova este de cima 1px para cima, aplique um gradiente linear da cor #000 para a #000, e com uma trasnparência de 24 na parte de baixo do gradiente. Depois em todo o retângulo aplique uma trasnparência de 80%.

PASSO 9

Para o botão, crie outro retângulo de 53 x 35px, e round de 43. Aplique um gradiente liear da forma como está a figura. Depois vamos colocar uma seta acima dele, use a ferramente Arrow, e deixe no formato como estamos usando. Use na seta a cor #979797 e aplique um Inner Shadow nos valores 0 30% 2.

PASSO 10

Agora vamos começar a colocar os textos. Aqui usamos a Helvetica, mas se não tiver pode usar a Arial sem problemas. O texto da hora está na cor #FFF no tamanho 50. Duplique esse layer do texto e no de baixo aplique a cor #000 e mova 1px para cima. Esse efeito fica melhor que o Inner Shadow, pois mantém a fonte no aparência normal. No texto da data usamos a cor #CCC no tamanho 13. Para o "slide to unlock" usamos a cor #FFF com trasnparência de 25% e no tamanho 20.

RESULTADO FINAL

Para finalizar, aplique os ícones e nome da sua opradora no topo, por cima do retângulo de 20px de altura. Todos os ícone criamos também somente como retângulos e linhas, brinque um pouco com isso! No PNG está tudo que foi feito também.

Faça o download do arquivo em PNG.

iPhone.png