em ,

Criando ícones do iPhone.

Preview Revisado dia 29/01/08.

Descrição: Como criar ícones do iPhone além de criar um fundo personalizado para eles usando diversas ferramentas do Photoshop combinadas com layer styles.

(adsbygoogle = window.adsbygoogle || []).push({});

01. Primeiro faremos o background, para isso pressione Ctrl+N para criar um novo documento de 500×120 pixels, logo após crie uma nova layer pressionando Ctrl+Shift+N e dê o nome de “Interface”, com a nova layer selecionada vá em Edit> Fill e defina Color: #a3acb7.

02. Clique duas vezes na layer “Interface” para abrir a caixa de Layer Style, depois defina Inner Shadow, com Opacity: 50%, Angle: 90, Size: 7.

03. Crie uma nova layer pressionando Ctrl+Shift+N e dê o nome de “Tile”, logo após pressione a letra M do teclado para selecionar a Elliptical Marquee Tool, segure o Shift e crie um círculo de 3×3 pixels e defina a cor para preta.

04. Abra a caixa Layer Style da layer “Tile”, e escolha a opção Drop Shadow, defina os seguintes valores:

05. Selecione o círculo que acabou de ser feito e duplique pressionando Ctrl+J, mova 5 pixels para a direita e mais 5 pixels para baixo. (Segure Alt+Ctrl e use as setas).

06. Selecione uma área de 10×10 pixels e crie um Pattern indo em Edit> Define Pattern dê o nome de “Tile”.

07. Delete a layer “Tile” e selecione a layer “Interface”. Logo após selecione tudo Ctrl+A, vá em Edit> Fill e escolha o modo Pattern> Custom Pattern: “Tile”.

Seu background deve estar assim.

E suas layers devem estar assim:

08. Agora vamos criar o ícone de nosso Widget, primeiro crie uma nova layer pressionando Ctrl+Shift+N, dê o nome de “Widget BG”, selecione a Rounded Rectangular Tool (letra U do teclado) e crie um quadrado de 70×70 pixels, clique com o botão direito sobre ele e escolha Fill Path, use a cor #BF0000, depois abra a caixa de Layer Style, escolha a opção Drop Shadow e defina como a foto abaixo.

09. Pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva no botão criado a palavra “Tutorials” e use estes valores:

10. Novamente com a Horizontal Type Tool, escreva “2.0” e use estes valores:

11. Você terá um resultado próximo a este:

12. Agora selecione a layer “Widget BG” clicando na layer com a tecla Ctrl pressionada, depois vá em Select> Modify> Contract e defina 3 pixels.

13. Agora selecione a Gradient Tool (letra G do teclado), defina seu gradiente conforme os valores abaixo.

14. Defina em seu gradiente, Top left: 50% de opacidade, Top right: 0% de opacidade, Bottom left: #FFFFFF, Bottom right: #FFFFFF.

15. Com a Gradient Tool, clique segure e arraste de cima para baixo dentro da seleção.

16. Retire a seleção pressionando Ctrl+D, selecione a Elliptical Marquee Tool (Letra M do teclado) e crie um círculo como este:

17. Clique com o botão direto sobre a seleção e selecione a opção Select> Inverse e depois pressione o Delete em seu teclado. O ícone do seu Widget já deve estar parecido com este:

E suas layer devem estar assim:

18. No texto “2.0” adicione um Layer Style, selecione a opção Drop Shadow indo em Layer> Layer Style> Drop Shadow, aplique também ao texto “Tutorials”, logo após selecione a layer “Widget BG” clicando na layer com a tecla Ctrl pressionada, depois aplique um gradiente que vai da cor #BF0000 para a cor #FF0000, seu ícone ficará assim:

19. Sinta-se a vontade para criar quantos ícones achar necessário!.

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, venceu o prêmio iBest na categoria tecnologia em 2008 e dois prêmios de criatividade da Adobe. Ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

Deixe um comentário para AnônimoCancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

11 Comments

  1. Olá André,

    Ficou show de bola o tutorial.

    Só um detalhe. No passo 12, depois que for feita essa seleção e acionado o Contract, é importante que seja criada uma nova layer. Se não, quando você fizer o passo 17, vai acabar deletando coisa a mais.

    Abraço e parabéns pelo Blog !

    Alexandre Hogler

  2. Oi Amigo, desculpe pelo incoveniente, algumas imagens sumiram, estou neste momento trabalhando para resover isto mudando as imagens de servidor, até sexta feira tudo estará normalizado, abraço!!

Dias de atraso.

Tutorial: Criando uma parede de pedra