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.

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

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.

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.

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.

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

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.

RESULTADO FINAL

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