Fazendo um botão no Photoshop Fácil.

Fazendo um botão no Photoshop Fácil

Ás vezes preciso de fazer um botão rápido e fácil, mais ao mesmo tempo bonito. Então eu uso essa técnica que resolvi compartilhar com vocês. Siga todos os passos, você pode baixar o arquivo .PSD disponível no final do tópico, se tiver dúvidas, não hesite em perguntar ;D Então? Está Pronto? OK!


1º Abra seu photoshop e vamos criar uma nova imagem, é recomendável que você deixe a imagem maior que o tamanho esperado para o botão, e que o Background Contents esteja em Transparent.

2º Com a ferramenta Rectangle Marquee Tool vamos fazer uma seleção retangular, do tamanho que você quiser seu botão. Certifique de que nas configurações da ferramenta o Style está em Normal:

3º Minha seleção ficou assim:
Você pode querer uns cantos arredondados no seu botão... Isso também é fácil de fazer, ainda com a seleção feita ativa, vá em:
Você pode colocar o quanto quiser, quanto maior mais arredondado, eu coloquei 5 pixels.

4º Certo, Agora vamos adicionar um gradiente à nosso botão, eu vou fazer um simples usando Foreground e Background Color:

O quadradinho da frente é o Foreground e o de Trás o Background
Se vc quiser pode usar as cores que eu usei:
Foreground: #1e1e1e ████
Background: #000000 ████

Pronto, agora na ferramenta de gradientes, eu selecionei o gradiente Foreground to background, que pega as duas cores que agente escolheu acima e faz um gradiente simples. Agora aplique o gradiente por cima do botão... Você pode fazer do jeito que quiser, o meu ficou assim:

5º Essa é a parte que eu gosto mais, é a parte que deixa seu botão mais... Botão xD
Na janela que ficam as layers, você vai em add a layer style (o botão marcado de vermelho):
Quando você clica no botão "Fx" (add a layer style) aparece um menu, nesse menu escolha Blending Opitions:
Na janela que aparecer nós vamos fazer umas modificações no nosso botão, você pode fazer do jeito que quiser, eu vou mostrar o jeito que eu faço. Nós iremos configurar o Drop Shadow, o Bevel and Emboss e o Stroke

Ok então vamos configurar o Drop Shadow, que é uma sombra pro seu botão:
Pra começar a configurar basta clicar em drop shadow, eu só vou mexer na configuração Structure, se quiser você pode copiar o jeito que eu deixei:

Agora vamos configural o Bevel and Emboss que adiciona efeito de bevel e emboss também com um clique para começar a configuração, eu também só configurei o Structure ai vai a imagem:

E finalmente, vamos configurar o Stroke, é bem opicional, ele faz um contorno na imagem, veja como ficou o meu:

Você pode Salvar o estilo que agente fez, caso precise fazer de novo sem ter que editar tudo novamente, pra isso, ainda na janela de edição de Styles, clique em New Style:
Então dê o nome que você quiser, o Style vai ser salvo na área dos Styles:
Só lembrando que essa área pode estar desabilitada também.

Olha como meu botão está ficando:

Agora você pode adicionar, algum texto com a ferramenta Horizontal Type Tool você também pode fazer configurações de Shadow, Bevel and Emboss, mas agora tente fazer isso sozinho ;D

Se você fez a área grande igual eu, Basta usar a ferramenta Crop Tool para cortar, não precisa cortar perfeitamente, pois a nossa imagem é transparente.

Código:

Arquivo Psd:
http://www.easy-share.com/1911284543/Bot%EF%BF%BDo

Tutorial Trabalhoso em Dancity Oo

mais parece ÓTIMO... a Preview ta Perfeita

mas...

até faria... mais to sem Photoshop... mais com certeza é Maravilindo seu Tutorial *-*

Continue com esses tutoriais Fera

Té +

FLWs

Bom tutorial, apesar de ser fácil, requer um pouquinho de experiência com algumas ferramentas

Valeu! o/

Otimo tutorial, fica com um aspecto genial o botão
gostei de ver parabens espero ver mais tutoriais
como o seu,

Valew pelos comentários pessoal...
Vou tentar pensar em algo pros próximos tutos...

Froidz... Éh até que requer mesmo um conhecimento básico... Mas se a pessoa fizer uma força acho que dá... Ainda mais depois de fazer o Style...

Mas vlw ai por tudo pessoal ;D

só a massa