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

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

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.








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



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.



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.



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.



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



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.





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.





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.





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.



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.



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.



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.



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



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



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



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.



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.



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.



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.





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.



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.



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