Adoro algumas apps que recriam amplificadores e seus controlers. Fazia um tempo que estava pensando em fazer um tutorial de algo desse tipo, então hoje decidi aprender a fazer o efeito para fazer este tutorial.

Neste tutorial vou mostrar a vocês como criar incríveis amp contolers usando apenas o Photoshop.

Passo 1

Abra o Photoshop e crie um novo documento. Estou usando 2560x1440 pixels. Preencha a background layer com cinza usando a Paint Bucket Tool (G)

Awesome Amp Controls in Photoshop

Passo 2

Vá até Filter>Texture>Craquelure. Use 9 em Crack Spacing, 2 em Crack Depth e 10 em Crack Brightness.

Awesome Amp Controls in Photoshop

Passo 3

Vá até Layer>Layer Styles>Color Overlay. Use preto na cor e Multiply com 70% Opacity.

Awesome Amp Controls in Photoshop

Passo 4

Vá até Image>Adjustments>Levels. Use 120 em black input, 1.00 no cinza e 181 no white input.

Awesome Amp Controls in Photoshop

Passo 5

Com a Ellipse Tool (U) crie um círculo no centro do seu design.

Awesome Amp Controls in Photoshop

Passo 6

Selecione a Gradient Tool (G) e clique em color preset. Troque as cores para ter algo como a imagem abaixo.

Awesome Amp Controls in Photoshop

Passo 7

Adicione uma nova layer e com a Gradient Tool (G) selecione o tipo Angle Gradient e preencha a layer com o gradiente preset que criamos no passo anterior. Depois crie uma marquee selection do círculo que criamos no passo 5. Fazer isso é super simples, apenas clique - enquanto pressiona Command (mac)/Control (PC) - na thumb da layer do círculo.

Awesome Amp Controls in Photoshop

Passo 8

Vá até Layer>Layer Mask>Reveal Selection.

Awesome Amp Controls in Photoshop

Passo 9

Duplique a layer do círculo e preencha com branco. Troque a ordem para que essa layer fique acima das outras. Depois troque Fill Opacity para 0%.

Awesome Amp Controls in Photoshop

Passo 11

Vá até Layer>Layer Styles>Inner Shadow. Use Color Dodge no Blend Mode, branco em Color, 90 em Angle e 70% em Opacity. Depois use 8 pixels em Distance, 11% em Choke e 7 pixels em Size. Para Quality troque o Contour para o que usamos na imagem abaixo.

Awesome Amp Controls in Photoshop

Passo 12

Selecione Inner Glow. No Blend Mode use Overlay, em Opacity use 36% e em Color use branco. Troque também Source para Center, Choke para 12% e 65 pixels em Size. Troque o Contour para o que usei abaixo.

Awesome Amp Controls in Photoshop

Passo 13

Selecione Bevel and Emboss. Use Emboss em Style, Smooth em Technique, 1000% em Depth, Up em Direction, 50 pixels em Size, 0 pixels em Soften. No Shading, troque Angle para 90º at 30 º Altitude. Troque também Gloss Contour para o que estou usando abaixo. Para Highlight Mode troque Opacity para 0 e no Shadow Mode use preto com Multiply em 100%.

Awesome Amp Controls in Photoshop

Passo 14

Duplique a layer do círculo e a mova para o topo, em branco. Depois vá até Filter>Pixelate>Mezzotint. Use Fine Dots.

Awesome Amp Controls in Photoshop

Passo 15

Crie uma marquee selection do círculo e vá até Filter>Blur>Radial Blur. Use 20 em Amount, Spin em Blur Method e Best em Quality.

Awesome Amp Controls in Photoshop

Passo 16

Troque o Blend Mode para Multiply.

Awesome Amp Controls in Photoshop

Passo 17

Selecione todas as layers usadas para criar o button/tuner e vá até Layer>Group Layers. Depois disso duplique o grupo e redimensione como na imagem abaixo.

Awesome Amp Controls in Photoshop

Passo 18

Selecione a layer com os layer styles dentro do grupo e troque Color Overlay para Black with black no Blend Mode em 45%.

Awesome Amp Controls in Photoshop

Passo 19

Adicione drop shadow aos dois círculos, o menor e o maior. Como o primeiro círculo da camada de layers que usamos para criar o efeito.

Awesome Amp Controls in Photoshop

Passo 20

Com a Rectangle Tool (U) crie um quadrado pressionando Shift. Depois disso gire o quadrado 45º; e o posicione como na imagem abaixo.

Awesome Amp Controls in Photoshop

Passo 21

Vá até Layer>Layer Style>Drop Shadow. Use Normal em Blend Mode e Black na cor em 100%. Em Angle use 120º, 5 em Distance e 5 pixels em Size.

Awesome Amp Controls in Photoshop

Passo 22

Selecione Inner Glow. No Blend Mode use Color Dodge, em Opacity use 70%. Troque Choke para 10% e SIze para 9 pixels. Em Quality use o preset que usei na imagem abaixo.

Awesome Amp Controls in Photoshop

Passo 23

Selecione Gradient Overlay. Use vermelho escuro e vermelho claro nas cores do gradiente, como na imagem abaixo. Troque também o estilo para linear e Angle para 180º.

Awesome Amp Controls in Photoshop

Passo 24

Esse é o efeito que você terá depois de todos os layer styles. Já está legal mas ainda precisamos uniformizar e arrumar o visual.

Awesome Amp Controls in Photoshop

Passo 25

Para fazer isso vamos usar uma textura de metal. A que estou usando é cortesia do Shutterstock, que você encontra em http://www.shutterstock.com/pic-20761540/stock-photo-metal-plate-backgro...

Awesome Amp Controls in Photoshop

Passo 26

Troque o Blend Mode da textura de metal para Overlay em 30% e faça mask usando o círculo maior como referência, assim a textura ficará acima das outras layers.

Awesome Amp Controls in Photoshop

Passo 27

Vamos adicionar textura de couro para dar um efeito mais realista. A imagem que estou usando é cortesia do Shutterstock e você encontra em http://www.shutterstock.com/pic-77457889/stock-photo-texture-black-leath.... Coloque a textura na parte de baixo, como a imagem. Dica: duplique para preencher a tela.

Awesome Amp Controls in Photoshop

Passo 28

Com a Rectangle Tool (U) crie alguns retângulos e os gire para ter algo parecido com a imagem abaixo. Dica: comece com o do topo, depois duplique e mova para baixo, depois duplique os dois e gire 90º, depois selecione todos e duplique, gire 45º e assim por diante.

Awesome Amp Controls in Photoshop

Passo 29

Merge as layers do passo anterior e vá até Layer>Layer Styles>Inner Glow. Use Multiply no Blend Mode, Black em Color, Edge em Source, 10% em Choke, 5 pixels em Size.

Awesome Amp Controls in Photoshop

Passo 30

Selecione Bevel and Emboss. Use Pillow Emboss em Style, Chisel Soft em Depth e 500% em Depth. Troque Size para 3 pixels e no Highlight Mode use Color Dodge com branco em 50%. No Shadow Mode use Color Burn com Black em 50%.

Awesome Amp Controls in Photoshop

Passo 31

Selecione Gradient Overlay e use o mesmo gradiente que usamos antes para o círculo. Use Color Dodge e 40% para Blend Mode e Opacity.

Awesome Amp Controls in Photoshop

Passo 32

Selecione Patter Overlay e use a imagem do metal para Pattern. Para fazer isso abra o Layer Style box, selecione a textura e vá até Edit>Define Pattern.

Awesome Amp Controls in Photoshop

Passo 33

Adicione uma nova layer acima da anterior e vá até Layer>Create Clipping Mask. Com a Brush Tool (B) e a cor vermelha pinte alguns retângulos como na imagem abaixo.

Awesome Amp Controls in Photoshop

Passo 34

Adicione um texto usando a fonte DymaxionScript, que você encontra em http://www.dafont.com/dymaxion-script.font. Eu escrevi Abduzeedo e depois rasterizei a layer e estiquei o A e o O para preencher a tela.

Awesome Amp Controls in Photoshop

Passo 35

Vá até Layer>Layer Styles>Drop Shadow. Use Multiply no Blend Mode com preto na cor e 100% Opacity. Em Distance use 9 pixels, em Spread use 12% e em Size use 13 pixels.

Awesome Amp Controls in Photoshop

Passo 36

Selecione Inner Shadow e use Screen no Blend Mode com branco na cor em 85%. Em Angle use -90º, 5 pixels em Distance, 0 em Choke e 1 pixel em Size. Over the Quality Options use the image below for reference.

Awesome Amp Controls in Photoshop

Passo 37

Selecione Inner Glow. Use Color Burn no Blend Mode em 50% com preto na cor. Troque Source para Edge, Choke para 5% e SIze para 4 pixels.

Awesome Amp Controls in Photoshop

Passo 38

Selecione Gradient Overlay e use Multiply no Blend Mode e o Gradient preset como na imagem abaixo. É basicamente branco, cinza, cinza escuro e preto nas cores.

Awesome Amp Controls in Photoshop

Passo 39

Você pode usar a textura de metal acima da layer do texto se quiser. A imagem abaixo é a imagem que terá depois de todos esses passos.

Awesome Amp Controls in Photoshop

Conclusão

Nesse tutorial nós criamos uma interface retro bacana de um amplificador usando layer styles básicos e uma textura de metal. Como vocês puderam ver, o segredo está em encontrar referências e testar opções no Photoshop. Na imagem abaixo eu adicionei alguns efeitos de luz... mas esses vou explicar em um próximo tutorial ;)

Awesome Amp Controls in Photoshop

Download do Arquivo Photoshop

Cique aqui para fazer o Download do arquivo usado no tutorial

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.