Pular para o conteúdo principal

Crie um estiloso botão no photoshop

Botão estiloso no photoshop

Já foi o tempo em que os botões de um site eram apenas figurantes. Hoje eles exercem um grande impacto no aspecto de um site, tanto no visual quanto na usabilidade. Neste segundo artigo da série, você vai aprender a criar um botão cheio de estilo para seu site.


Este tutorial faz parte da série "Elementos web para webdesigners", que irá abordar a criação de gráficos utilizados em websites, blogs e afins.

Assine o feed ou receba as atualizações via email e fique por dentro das novidades.

1º passo

Crie um novo documento e preencha com a cor #f4f4f4.

2º passo

Selecione a ferramenta Rounded Rectangle Tool, deixe o Radius em 5px e crie um retângulo.

3º passo

Acesse o painel Blending Options e ajuste os efeitos conforme mostro abaixo:

Drop Shadow

Inner Shadow

Gradient Overlay

Stroke

4 passo

Crie uma nova layer, selecione a ferramenta Horizontal Type Tool e escreva no botão.

5º passo

Acesse o painel Blending Options mais uma vez e aplique os seguintes efeitos:

Drop Shadow

Inner Shadow

Color Overlay

Final

Agora é estudar o botão e criar variações. Veja o resultado.

Download do arquivo final

Baixar

Sugestões para os próximos tutoriais? Entre em contato.

Webtutoriais:36B685AE

Comentários

Postagens mais visitadas deste blog

Seleção brasileira iphone wallpapers

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

Crie um elegante menu com css e html

Neste tutorial você vai aprender como criar um elegante menu utilizando a dupla Html e Css em poucas linhas de códigos. Lembrando que o tutorial é voltado para o usuário iniciante, que está se aventurando como desenvolvedor front-end ou que desenvolve por hobbie.

Criando um rodapé com 3 colunas

O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a barra laretal.Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.