em ,

Criando um botão web e suas variações de estado.

Preview Descrição: Neste tutorial veremos como criar um botão web com seus respectivos estados de hover, ativo e desativado, usaremos layer styles e diversas ferramentas.

tutoriaisphotoshop.net

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

01. Pressione Ctrl+N para criar um novo documento, defina os valores abaixo e pressione Ok.

tutoriaisphotoshop.net

02. Pressione Ctrl+R para habilitar as rulers ao redor do documento, clique na ruler horizontal e arraste para adicionar uma linha guia como a da foto abaixo, repita o procedimento para adicionar a segunda linha guia, seu documento deverá ficar como o da foto abaixo, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção com 35 X 180 pixels como a da foto abaixo.

tutoriaisphotoshop.net

03. Clique e arraste na ruler vertical para adicionar mais duas linhas guia nas bordas da seleção, crie outra seleção como na foto abaixo.

tutoriaisphotoshop.net

04. Pressione a letra U do teclado para selecionar a Rounded Rectangle Tool, defina o Radius em 4 pixels, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, crie um retângulo como o da foto abaixo.

tutoriaisphotoshop.net

05. Clique duas vezes sobre a layer e mude a cor do botão para #0480c8.

tutoriaisphotoshop.net

06. Vá em Layer> Layer Style> Drop Shadow, Layer> Layer Style> Inner Shadow, Layer> Layer Style> Gradient Overlay, Layer> Layer Style> Stroke e defina os valores abaixo.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

07. Pressione a letra X do teclado para alternar as cores de Foreground e Background, sua cor de Foreground deve ser a branca, pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva uma palavra qualquer em seu botão, vá em Layer> Layer Style> Drop Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

08. Pressione a letra U do teclado para selecionar a Ellipse Tool, com a tecla Shift pressionada clique e arraste para criar o círculo no canto direito do retângulo, vá em Layer> Layer Style> Drop Shadow, Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

09. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione Shift+U para alternar a ferramenta para a Custom Shape Tool, selecione o Shape Arrow 9.

tutoriaisphotoshop.net

10. Aplique o shape no documento, pressione Ctrl+T para abrir a caixa de Free Transform, defina o valor de 90º em Angle e pressione Ok, distorça e posicione o shape como na foto abaixo, pressione Enter para finalizar a transformação.

tutoriaisphotoshop.net

11. Com a tecla Ctrl pressionada clique sobre a miniatura da layer para ativar a seleção ao redor do shape, vá em Layer> Hide Layers para retirar a visibilidade da layer, clique na layer do círculo e vá em Layer> Layer Mask> Reveal All, vá em Edit> Fill, escolha a cor de Foreground como Black.

tutoriaisphotoshop.net

12. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção retângular de 1 pixel de largura, como na foto abaixo, pressione a letra X do teclado para alternar as cores de Foreground e Background para preto e branco, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique dentro da seleção para preencher com a cor escolhida.

tutoriaisphotoshop.net

13. Mude o modo de blend da layer para Overlay e defina a opacidade em 20%.

tutoriaisphotoshop.net

14. Repita o procedimento, desta vez preencha a seleção de preto.

tutoriaisphotoshop.net

15. Seu botão deverá ficar como o da foto abaixo.

tutoriaisphotoshop.net

16. Selecione todas as layers dentro da paleta de layers (deixe apenas a layer Background de fora) e pressione Ctrl+G para agrupar todas dentro de um folder.

tutoriaisphotoshop.net

17. Para criar o segundo botão (o estado hover do botão) clique com o botão direito do mouse sobre o folder criado e escolha a opção Duplicate Group, dê o nome de Button 2 para o novo folder, abra o folder, clique na layer style de Gradient Overlay aplicada na layer do retângulo (do botão) e mude a cor para Branca com opacidade de 20% e modo de blend em Normal.

tutoriaisphotoshop.net

18. Pressione a letra V do teclado para selecionar a Move Tool, clique no folder Button 2 e move o botão como na foto abaixo.

tutoriaisphotoshop.net

19. Repita o procedimento, renomeie o novo folder como Button 3, defina os valores abaixo nas layer styles do shape do botão para criar o novo botão no estado ativo (ou pressionado), pressione a letra V do teclado para selecionar a Move Tool, clique no folder Button 3 e move o botão como na foto abaixo.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

20. Repita mais uma vez o procedimento, renomeie o novo folder como Button 4, defina os valores abaixo nas layer styles do shape do botão para criar o novo botão no estado desativado (ou depois de pressionado), pressione a letra V do teclado para selecionar a Move Tool, clique no folder Button 4 e move o botão como na foto abaixo.

tutoriaisphotoshop.net

21. Reduza a opacidade na layer style de Drop Shadow da layer de texto e shape da seta para 20%, no final seu botão ficará como o da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://www.webdesign.org/photoshop/web-layout/how-to-create-a-slick-blue-button-in-photoshop.20636.html

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

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.

Loony Wise Men – Dream is on.

Steve Jobs deixou sua marca no universo.