iPhone

Este novo gadget da Apple, é sem dúvida uma revolução. Lançado em julho do ano
passado, consegue ser uma mistura de avanço tecnológico e estilo, integrando o que
existe de melhor. Hoje iremos aprender um pouco mais sobre o iPhone e tentar recriar
seu design.
Primeiramente, vamos nos habituar um pouco mais com o produto.

Esta é a parte da frente do iPhone, nota-se que existe apenas um botão embaixo para o
retrocesso das ações de seu sistema.

Aqui procurei focar o botão lateral que serve para deixá-lo em "stand-by", o encaixe do
chip e a entrada de fone de ouvido.
Está é a parte de baixo do aparelho. Os pequenos furos laterais servem como saída de
som, e a entrada central é o encaixe do cabo de dados e carregamento de energia (bem
compacto e funcional como geralmente são os hardwares da apple).

Esta é a parte de trás do aparelho. (Detalhe para a câmera no canto superior esquerdo.)
Bem, agora iremos aos dados técnicos.
O iPhone possui 11,3 cm de altura e 6,0 cm de largura.
1º Passo: Crie um arquivo de 28 cm x 32 cm com o nome de "iPhone".
2º Passo: Clique sobre a ferramenta Rounded Rectangle Tool (U)

3º Passo: Na barra de opções, altere o valor de "Radius" para 30 pixels. Com isso
estamos aumentando o valor do raio das curvas.

4º Passo: Em seguida clique na paleta "Info" indicada pelo icone "i" azul. Caso não o
visualize, vá até Window > Info.

5º Passo: Clique sobre o botão indicado abaixo, onde mostra uma setinha apontada para
baixo e três linhas horizontais. Em seguida clique em "Palette Option":
6º Passo: Verifique se suas configurações estão como abaixo. Importante lembrar que
em "Mouse Coordinates"-"Ruler Units" é preciso alterar para "Centimeters".

7º Passo: Feito isso, repita o 2º Passo e clique sobre a ferramenta Rounded Rectangle
Tool (U)

8º Passo: Agora crie um retângulo com as seguintes medidas:

11,3 cm de altura
6,0 cm de largura.
Para ter certeza, consulte a paleta "Info" e, se necessário, pressione "ctrl + T" para
redimensionar seu retângulo até atingir o tamanho determinado.
9º Passo: Nesse momento duplique a camada que criamos com o formato do iPhone.
(Nomeie como iPhone_centro)

10º Passo: Preencha a cor da nova camada de preto, clicando em sua thumbnail.

11º Passo: Clique sobre a camada "iPhone" e em seguinda no botão "add a layer style".
Feito isso vá até "Stroke".
12º Passo: Altere suas configurações como abaixo:

13º Passo: Clique novamente na camada "iPhone_centro" e em seguinda sobre a

ferramenta "Direct Selection Tool (A)"

14º Passo: Selecione os 4 pontos superiores pressionando "shift" para selecioná-los em

conjunto. Em seguida, pressione uma única vez a setinha para baixo para alterarmos sua
posição.
15º Passo: Em seguida repita o mesmo passo com os pontos inferiores:

16º Passo: Por último, selecione os pontos do lado esquerdo e mova-os uma única vez
para a direita e repita a mesma coisa com os pontos do lado direit,o movimentando-os
para o lado esquerdo.
Pronto, a primeira vista de nosso iPhone. Claro que ainda estamos no início, mas já da
para ter uma idéia de seu formato final.
17º Passo: Selecione a camada "iPhone" e em seguida sobre a ferramenta "Direct
Selection Tool (A)"

18º Passo: Feito isso, selecione os pontos de cima de nosso "shape" e pressione o botão
"Subtract from shape area (-)"

19º Passo: Em seguida, crie uma elipse na posição indicada abaixo, para simbolizarmos
a entrada de fone de ouvido.
20º Passo: Repita o passo. Porém, desta fez faça um retângulo como mostrado abaixo:

21º Passo: Neste momento, pressione e segure a tecla "ctrl" e clique sobre a thumbnail
da camada "iPhone_centro", trazendo assim a seleção da camada superior.
22º Passo: Em seguida, pressione "ctrl" + "shift"+"i" para invertermos a seleção.
23º Passo: Finalmente pressione o botão "Add layer mask".

24º Passo: Pronto, com isso suas camadas devem ficar como abaixo, ou seja, a camada
"iPhone" agora possui uma máscara inversa com a forma da camada "iPhone_centro".

25º Passo: Nesse momento clique sobre no botão "add a layer style" e em seguida vá
em "Blending Option" para criarmos o estilo da parte de fora de nosso iPhone.

26º Passo: Altere seus valores como abaixo:

Drop Shadow:
Inner Shadow

Inner Glow
Bevel and Emboss

Satin
Gradient Overlay

Configurações do Gradiente abaixo:

Stroke

Ufa! Com isso nosso iPhone começa a ganhar cor e textura. Confira abaixo o nosso
resultado:
27º Passo: Com a ferramenta "Rectangle Tool" crie um retângulo posicionado como
abaixo:
iPhone – Parte 2
Nesta matéria vamos trabalhar no layout da saída de som do telefone e do único botão
da tela do aparelho, que possui a função de retorno de ações dos aplicativos do iPhone.
Quero aproveitar e divulgar meu flickr que está conectado diretamente com meu iPhone
e publica todas as fotos no momento em que eu as tiro: http://www.flickr.com/ilody.
Abaixo segue a nossa última imagem, do primeiro artigo da série, que foi como iniciar o
processo do desenho do shape do iPhone:
Está é uma foto real do aparelho:
1º Passo: Clique sobre a ferramenta Rounded Rectangle Tool (U), com radius de 5 px, e
desenhe um retângulo como abaixo:

2º Passo: Clique sobre o botão "Add a layer style"...

e em seguida vá em " Gradient Overlay" e altere como abaixo:

3º Passo: Agora vá em "stroke" e altere também:

Veja o resultado:

4º Passo: Agora pressione o botão Elipse Tool (U) e faça um círculo como abaixo:

Obs.: Caso tenha problemas em centralizado, selecione a camada da elipse e a camada

do shape do iPhone:
E na barra de opções, clique em "Align Horizontal Centers".

5º Passo: Agora clique sobre a camada da elipse e em seguida clique novamente no

botão "Add a layer style"...

Clique também em "Gradient Overlay"

6º Passo: Utilizando a "Round Rectangle Tool" crie um quadrado com cantos
arredondados ao centro desta elipe, em seguida vá novamente em "Add a layer style"

7º Passo: Agora vá em:

Bom, já fizemos o espaço para saída de áudio e o único botão da tela do iPhone, que
serve para o retorno para à tela principal.
Na semana que vem finalizaremos nosso iPhone, desenhando cada ícone de sua tela e
seu dock.
iPhone - Final
Nesta etapa concluiremos os ícones, dock, barras, etc. Abaixo está a última imagem de
nossa última aula sobre como iniciar o processo do desenho do shape do iPhone:
Esta é uma foto real do aparelho:
Iremos, nesse momento, começar pela barra superior da tela contendo sinal de rede,
operadora, sinal wi-fi e carga da bateria.
Aqui uma imagem real da tela do iPhone:

1º Passo: Vá em "File" > "New" e crie um arquivo de 600 x 200 pixels para termos
espaço suficiente para criar as informações.

2º Passo: Na barra de ferramentas, clique sobre a ferramenta "Rectangle Tool"

3º Passo: Clique sobre a ferramenta de Zoom (z) ou utilize o atalho "ctrl" + "+" para
aproximarmos a visualização.
Estas linhas azuis fiz utlilizando as linhas guia ("ctrl" + "r"):

4º Passo: Faça retângulos como abaixo:

Retângulo 1: 25,5 px X 34,0 px

Retângulo 2: 29,5 px X 34,0 px
Retângulo 3: 33,5 px X 34,0 px
Retângulo 4: 37,5 px X 34,0 px
Retângulo 5: 41,5 px X 34,0 px
5º Passo: Utilizando a ferramenta "brush (B)", crie os sinais de rede wi-fi, como
abaixo:
6º Passo: Clique sobre a ferramenta "horizontal type tool(t)" e escolha a fonte "Arial
- bold - 14 pt - sharp". Em seguida, escreva um horário que irá aparecer na tela de seu
iPhone.
As cores ficam a seu critério. Eu estou usando como cor principal nos objetos o cinza
(#c0c1bb)

7º Passo: Faça um círculo utilizando o mesmo tom e, em seguida, utilizando a

ferramenta "Pencil Tool (B)", para criar o horário.

8º Passo: Clique sobre a ferramenta "Rectangle Tool (U)" e desenhe uma pilha para
simbolizar a carga bateria.

9º Passo: Bom, já temos a barra de cima. Nesse momento iremos pensar nos ícones.
Na criação dos ícones, achei melhor criarmos os 4 principais do dock. São eles: Phone,
Mail, Safari e iPod.
A partir dai, creio que seja mais fácil criar qualquer outro ícone do iPhone/iPodTouch.
Crie um arquivo de 4x2 pixels e aproxime o máximo que puder. Feito isso, crie uma
textura como abaixo:

Pressione "ctrl + a" para selecionarmos a textura. Feito isso, vá em Edit > Define
Pattern:

10º Passo: Em nossa imagem, com a ajuda das linhas guia (ctrl + r) crie uma seleção
como abaixo:
11º Passo: Crie uma nova camada, pressionando "shift" + "ctrl" + "n".

12º Passo: Selecione a ferramenta "Paint Bucket Tool (G)"....

e, na barra de opções, altere seu valor primário para "pattern". Em seguida escolha
nossa textura padrão.
Agora preencha a seleção na nova camada que criamos. Não esqueça de, em seguida,
concertar as laterais como abaixo:

13º Passo: Clique sobre a camada "dock" e, em seguida, no botão inferior da paleta
camadas, chamado "add a layer style". Feito isso, vá em Gradient e deixe seu valores
como abaixo:
Repare que precisaremos de um degrade transparente para preto.
Em seguida, crie um retângulo utilizando a cor "#6b6b6b" como abaixo:

14º Passo: Utilizando a ferramenta Rounded Rectangle Tool (U), crie um retângulo de
57x59 pixels com 10px de "radius". Em seguida, duplique-o mais três vezes e deixe-os
posicionados como abaixo:
15º Passo: Clique sobre o primeiro retângulo e, em seguida, no botão inferior da paleta
camadas, chamado "add a layer style".
Agora aplique, de acordo com os efeitos abaixo:

Drop Shadow
 Inner Glow

Gradient Overlay
Nosso retângulo ficará como abaixo:

16º Passo: Em seguida, utilizando a Ellipse Tool(U), crie uma elipse posicionada como
abaixo:
17º Passo: Clique sobre o botão "add layer mask" na paleta de camadas para criarmos
uma máscara sobre a elipse.

18º Passo: utilizando um degradé de preto para transparente como abaixo, faça um traço
de baixo para cima em nossa elipse.

19º Passo: segure a tecla "ctrl" e clique sobre a thumbnail do shape de nosso retângulo.
Feito isso, estaremos trazendo a seleção do objeto.

20º Passo: Agora clique sobre a máscara da camada do reflexo. Preste atenção e clique
sobre a máscara (objeto do meio):

21º Passo: Nesse momento pressione "ctrl + shift + i" para invertermos nossa seleção.
22º Passo: Após isso, segure a tecla "alt" e pressione a tecla "backspace".Com isso
adicionaremos uma nova área para a máscara e apenas a região do botão se tornara
visível.
23º Passo: Por direitos autorais, não podemos recriar exatamente os mesmos botões,
mas creio que com esta maneira que mostrei já sejamos capazes de criar botões
principalmente para aqueles que são programadores dos sources do iPhone.
Abaixo nossa imagem final. Apenas incluí os botões laterais e superior, coloquei as
legendas dos botões no dock e criei os icones de acordo com a aula de hoje,
aproveitando os shapes existentes do Photoshop.