Sábado passado estava conferindo o Dribbble, procurando inspiração quando encontrei um design muito bonito criado por um designer Português chamado Emanuel Sa. Era um ícone com efeitos metálicos muito legais, então decidi tentar fazer o efeito no Photoshop.

Então neste tutorial vou mostrar como criar um botão metálico super estiloso usando Layer Styles no Photoshop.

Passo 1

Abra o Photoshop e crie um novo documento, estou usando o tamanho 2560x1440 pixels pois esse é um bom tamanho para wallpaper. Depois, com a Ellipse Tool (U), crie um círculo preto.

Stylish Metallic Button in Photoshop

Passo 2

Crie um círculo menor e alinhe os dois círculos no centro do documento. Depois disso crie uma marquee selection do círculo menor. Fazer isso é super simples, apenas pressione Command (MAC)/ Control (PC) e clique na thumb da layer do círculo.

Stylish Metallic Button in Photoshop

Passo 3

Selecione o círculo grande e vá até Layer>Layer Mask>Hide Selection. Você terá um anel pronto para colocar alguns efeitos.

Stylish Metallic Button in Photoshop

Passo 4

Vá até Layer>Layer Styles>Color Overlay. Use cinza escuro na cor.

Stylish Metallic Button in Photoshop

Passo 5

Selecione Bevel and Emboss, nos valores use Inner Bevel em Style, 550% em Depth, 32 pixels em Size, 2 pixesl em Soften, 100º em Angle, 30º em Altitude. Troque também o Gloss Contour para o que estou usando na imagem abaixo e também os valores para o Highlight and Shadow mode.

Stylish Metallic Button in Photoshop

Passo 6

Selecione Inner Glow e use Color Dodge no Blend Mode, 75% em Opacity, branco na cor. Para Choke use 0% e Size 6 pixels.

Stylish Metallic Button in Photoshop

Passo 7

Selecione Drop Shadow e use os valores abaixo, use um 90º e o que não marcou use Global light.

Stylish Metallic Button in Photoshop

Passo 8

Crie um círculo preto no meio e outro um pouco menor para criar a parte central do botão.

Stylish Metallic Button in Photoshop

Passo 9

Selecione o círculo menor do meio e vá até Layer>Layer Style> Gradient Overlay. Use Normal no Blend Mode, 100% em Opacity, e no Gradient use cinza escuro para preto e Linear. Em Angle use 90º e Scale it to 75%.

Stylish Metallic Button in Photoshop

Passo 10

Selecione Bevel and Emboss. Use Inner Bevel no Style, 80% em Depth, 3 pixels em Size e 0 em Soften. Nas opções Shading use a imagem abaixo.

Stylish Metallic Button in Photoshop

Passo 11

Adicione outro círculo usando a Ellipse Tool (U), depois com a Direct Selection Tool (A) edite os pontos e com a Pen Tool (P) adicione 2 pontos e delete 2 que eram os centrais horizontais. A imagem abaixo mostra a forma correta.

Stylish Metallic Button in Photoshop

Passo 12

Vá até Layer>Layer Styles>Gradient Overlay. Use Screen no Blend Mode. Em Opacity use 100% e no Gradient use branco e preto, no Angle use 90º e Scale use 140%.

Stylish Metallic Button in Photoshop

Passo 13

Aqui está o resultado final do botão. Agora é hora de adicionar seu logo. Usei o símbolo do Abduzeedo que criei no Illustrator e colei no Photoshop para poder aplicar alguns layer styles.

Stylish Metallic Button in Photoshop

Passo 14

Selecione o logo e vá até Layer>Layer Styles>Gradient Overlay. Use a imagem abaixo para valores e cores do gradiente. Depois aplique bevel and emboss.

Stylish Metallic Button in Photoshop

Passo 15

Aqui está o resultado final do nosso logo com o símbolo metálico.

Stylish Metallic Button in Photoshop

Passo 16

Vamos criar uma textura legal para o background, e para isso selecione a layer do background layer e vá até Filter>Noise>Add Noise. Use 5% em Amount, Gaussian em Distribution e selecione Monochromatic.

Stylish Metallic Button in Photoshop

Passo 17

Vá até Filter>Blur>Motion Blur. Use 0º em Angle e 20 pixels em Distance.

Stylish Metallic Button in Photoshop

Passo 18

Vá até Layer>Layer Styles>Gradient Overlay. Use Multiply no Blend Mode, 100% em Opacity, preto e branco nas cores do gradiente, Radial em Style e 90º em Angle.

Stylish Metallic Button in Photoshop

Conclusão

Como você pode ver o processo todo foi bastante simples, apenas brincamos com Layer Styles para criar um efeito metálico bacana no Photoshop. Esse efeito é perfeito para ícones ou caso queira criar um logo. Agora é só praticar e tentar outras variações.

Stylish Metallic Button in Photoshop

Versão 2

Apenas brinque um pouco com efeitos de luz para criar um botão legal.

Stylish Metallic Button in Photoshop

Download do Arquivo Photoshop

Clique aqui para fazer o Download do arquivo Photoshop

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.