no ,

Botão Glossy com versão Rollover.

Preview Descrição: Neste tutorial veremos como criar um botão e logo em seguida salvar sua versão Rollover utilizando layer styles e ferramentas.

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

02. Agora vá em Layer> Layer Style> Inner Glow e defina os valores abaixo.

tutoriaisphotoshop.net

03. Vá em Layer> Layer Style> Bevel and Emboss e defina os valores abaixo.

tutoriaisphotoshop.net

04. Vá em Layer> Layer Style> Gradient Overlay, defina um gradiente que vá da cor #99b910 para a cor #d1dc42.

tutoriaisphotoshop.net

05. Vá em Layer> Layer Style> Stroke, escolha a cor #d1dc42.

tutoriaisphotoshop.net

06. Sua imagem deverá ficar como a da foto abaixo.

tutoriaisphotoshop.net

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.

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

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.

tutoriaisphotoshop.net

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.

tutoriaisphotoshop.net

11. Vá em Layer> Layer Style> Drop Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

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.

tutoriaisphotoshop.net

13. No final seus botões ficarão como o da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://www.webdesign.org/photoshop/web-layout/glossy-web-2-0-button.20474.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 uma resposta

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

quatro × cinco =

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

Revolta em Tottenham / Fogo sobre Londres.

Inspiração, Cartazes de Rock: Conveyor.