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.

Tutorial iPhone

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!

Tutorial iPhone

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.

Tutorial iPhone

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

Tutorial iPhone

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

Tutorial iPhone

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.

Tutorial iPhone

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.

Tutorial iPhone

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

Tutorial iPhone

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.

Tutorial iPhone
Tutorial iPhone

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.

Tutorial iPhone

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.

Tutorial iPhone

Faça o download do arquivo em PNG.

iPhone.png

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.