André Sugai
Descrição: Neste tutorial veremos como criar um botão e logo em seguida salvar sua versão Rollover utilizando layer styles e ferramentas.
(adsbygoogle = window.adsbygoogle || []).push({});
01. Pressione a letra U do teclado para selecionar Rounded Rectangle Tool, certifique-se de que a opção Shape Layers esteja selecionada e crie um retângulo como o da foto abaixo, clique com o botão direito do mouse sobre a layer e escolha a opção Rasterize.
02. Agora vá em Layer> Layer Style> Inner Glow e defina os valores abaixo.
03. Vá em Layer> Layer Style> Bevel and Emboss e defina os valores abaixo.
04. Vá em Layer> Layer Style> Gradient Overlay, defina um gradiente que vá da cor #99b910 para a cor #d1dc42.
05. Vá em Layer> Layer Style> Stroke, escolha a cor #d1dc42.
06. Sua imagem deverá ficar como a da foto abaixo.
07. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra M do teclado para selecionar a Elliptical Marquee Tool, crie uma seleção como a da foto abaixo.
08. Pressione a letra G do teclado para selecionar a Gradient Tool, escolha um gradiente que vá do branco para o transparente no modo Radial, aplique na layer, mude o modo de blend da layer para Soft Light e defina o Fill para 40%.
09. Pressione Ctrl+D para desabilitar a seleção, com a tecla Ctrl pressionada clique sobre a miniatura da layer, vá em Select> Modify> Contract e defina o valor de 2 pixels, pressione Ctrl+Shift+I para inverter a seleção, pressione Delete, pressione Ctrl+D para desabilitar a seleção.
10. Pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva uma palavra qualquer, no caso deste tutorial usamos a fonte Segoe.
11. Vá em Layer> Layer Style> Drop Shadow e defina os valores abaixo.
12. Caso você queira criar uma versão Rollover (estado onde o mouse fica sobre o botão), clique na layer onde aplicamos a layer style de Gradient Overlay e pressione Ctrl+J para criar uma cópia da layer, clique duas vezes sobre a layer style de Gradient Overlay e mude o gradiente para as cores #2a2e2f e #4a5052, salve as duas cópias do botão e edite em seu código HTML.
13. No final seus botões ficarão como o da foto abaixo.
Site de origem: http://www.webdesign.org/photoshop/web-layout/glossy-web-2-0-button.20474.html
