Como algumas pessoas pediram no outro tutorial, vamos mostrar agora como criar o frame do iPhone. Não é tão complicado quanto parece, e acho esta solução que encontramos é a que mais se assemelha ao original.

Veja que vamos usar aqui basicamente retângulos e bevels, siga os passos e diga o boa sorte!

PASSO 1

Vamos abrir um documento de 800x800 com fundo #000. Crie um Rounded Rectangle de 280 x 557px. Note: Os rounds dos retanglos que vamos criar devem ser feitos de acordo com seu instinto. Não colocamos o raio certo aqui dos rounds para instigar você a mexer nas ferramentas!.

Depois vamos aplicar 2 bevels neste retângulo, vejas nas imagens como devem ser.

Crie o frame do iPhone no Fireworks

PASSO 2

O próximo retângulo será com round também como na figura, ficando por cima do anterior. Vamos aplicar um Gradiente Bars com as cores como na figura. Depois siga os passos e aplique 2 bevels também com os valores usados. Repare que neste usamos um feather de 1

Crie o frame do iPhone no Fireworks

PASSO 3

Agora temos que criar mais um retângulo em cima deles. Vamos usar a cor #FFF e os 2 bevels também, para dar o efeito nas laterais.

Crie o frame do iPhone no Fireworks

PASSO 4

Precisamos criar agora o úlimo retângulo da estrutura principal. Será o menor de todos e na cor #000. Repare que nele colocamos uma borda de 2px, isso dará um detalhe mais para frente.

Crie o frame do iPhone no Fireworks

PASSO 5

Vamos criar agora as partes de baixo de cima do nosso iPhone. Crie um retângulo (este sem round!) com Gradiente Radial nas cores como na figura. Na parte de cima ainda usamos uma linha de 1px na cor #0C1114.

Crie o frame do iPhone no Fireworks

PASSO 6

Agrupe estes elementos do passo 5 e vamos agora mascarar eles com o retângulo preto do passo 4. Para isso selecione o grupo, recorte (CTRL+X) selecione o retângulo preto e cole com o shift (CTRL+SHIFT+V).

Crie o frame do iPhone no Fireworks

PASSO 7

A estrutura ta pronta, agora só precisamos criar os elementos menores, que nada mais são que retângulos e círculos como mostram as figuras.

Crie o frame do iPhone no Fireworks

RESULTADO FINAL

Agora só pegamos a nossa interface que criamos no outro tutorial (Criando a interface do iPhone no Fireworks)!

Crie o frame do iPhone no Fireworks

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.