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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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.
Créditos:
Tutoriais PhotoShop
Tutoriais PhotoShop