Iphone

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.