Design brilhante botão Web 2.0 no Photoshop
Olhando para projetar algum botão brilhante da Web 2.0? Aqui está um tutorial Photoshop simples que lhe dá passo a passo como obter um botão brilhante vermelho bonito.
Passo 1 - Criando a base
Abra uma nova tela e ajuste as seguintes configurações (marcadas em amarelo) de acordo com a imagem abaixo. O resto deve vir como padrão. Você pode querer verificar novamente com os padrões também.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop.gif)
Criar uma nova chamada de camada 'Button'
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_2.gif)
Na camada 'Button', selecione a ferramenta Retângulo arredondado
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_3.gif)
Dê um raio de 7px
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_4.gif)
Desenhe um retângulo semelhante à imagem abaixo.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_5.gif)
Passo 2 - Botão vermelho
Clique com o botão direito nas opções de mistura para a camada 'Button'
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_6.gif)
Ajuste as seguintes configurações para
Sombra
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_7.gif)
Sombra interior
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_8.gif)
Bisel e relevo
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_9.gif)
Sobreposição de gradação
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_10.gif)
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_11.gif)
Seu botão deve ser parecido com isto
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_12.gif)
Passo 3 - Crie um efeito brilhante
Criar uma nova chamada de camada 'Glass'
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_13.gif)
Selecione Retangular Marquee Tool, certifique-se de que você está selecionando a camada 'Button'. Segure a tecla ctrl e clique na layer 'Buttons”Miniatura da camada. Seu botão agora deve estar destacado.
Selecione o botão 'Glass' agora, segure a tecla Alt com a ferramenta Retangular Marquee selecionada. Desenhe (corte) na metade inferior do botão, como na imagem abaixo.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_14.gif)
Preencha a área selecionada com a cor branca #ffffff usando o Paint Bucket Tool
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_15.gif)
Ajuste a opacidade para 18%
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_16.gif)
Você deve ter um botão brilhante parecido com isso.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_17.gif)
Etapa 4 - Sobreposição de Padrões
Vamos dar ao botão uma pequena sobreposição de padrão. Eu vou estar usando o personalizado stripe5px criado anteriormente. Crie uma nova chamada de camada 'Padrão' entre 'Button' e 'Glass' e prossiga com Blending Options.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_18.gif)
Selecione Pattern Overlay, escolha Stripe5px (ou qualquer padrão que você tenha criado) e clique em OK e feche o diálogo.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_19.gif)
Verifique se você ainda está na ferramenta Rectangular Marquee, segure
Passo 5 - Inserindo Texto
Coloque algum texto aleatório na cor branca #ffffff com as seguintes configurações
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_20.gif)
Use os seguintes efeitos de mesclagem na camada do meu texto.
Sombra
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_21.gif)
Etapa 6 - Saída Final
Você deveria ter uma imagem como essa.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_22.gif)