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

10 super mockups grátis

Um mockup é basicamente uma maquete, uma cópia do trabalho final muitas vezes em tamanho resumido para dar a ideia do real projeto. Muitos dos mockups disponibilizados na web já possuem toda estrutura necessária e permite uma economia de tempo na hora de criar obras derivadas.

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.

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.Google docsO googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito. 1º passoAcesse o site do Google docs e faça seu login. 2º passoClique em criar novo e selecione formulário. 3º passoNeste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar: Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem. Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.1- Define o texto do campo. Deixe-o como nome. 2- Texto adicional, que po…