no ,

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.

$ s Comentários

Deixe uma resposta
  1. Muito show!

    Parabéns pelo tutorial e pela idéia do blog!

    Abraço!

  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!!

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

  4. Estou muito feliz com esse tutorial,pela primeira vez consegui criar um icone igualzinho ao q foi ensinado 🙂

    Adoro seus tutoriais.

  5. Por favor me escalresçao o passo 17.A cima do layer Wdget bg existe outro layer,mas nao existe parte no tutorial onde ele é citado.
    Ou seja nao existe este passo.
    por favor me ajude.

  6. Parabenz!

    Seria pedir muito para que vc disponibilize o arquivo original deste tutorial para baixarmos?

  7. Muito legal o tutorial, principalmante umas tecnicas que eu não sabia, tipo: Select> Modify> Contract e o tile, muito bom pra colocar em blogs e sites

  8. alguem pode me ajudar eu queria saber como ajustar o 3×3 pixels,como selecionar e como faxzer o fill path ficar clicavel

Deixe uma resposta para Anônimo Cancelar resposta

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

dois × 4 =

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

Dias de atraso.

Tutorial: Criando uma parede de pedra