Oficina da Net Logo

Tutorial Photoshop: Fazendo uma Interface de um mp3

Neste tutorial de photoshop você vai aprender passo-a-passo como criar uma interface para MP3 player. A interface pode ser utilizada depois para criar um player com flash, etc...

Por | @oficinadanet Photoshop Pular para comentários

Neste tutorial de photoshop você vai aprender passo-a-passo como criar uma interface para MP3 player. A interface pode ser utilizada depois para criar um player com flash, etc...

Preview do resultado:

http://www.oficinadanet.com.br//imagens/coluna/2557//41.gif


Para comecar crie um novo arquivo 500x300 px. Pinte o background com a cor preta.
http://www.oficinadanet.com.br//imagens/coluna/2557/01.gif

Dê um duplo clique sobre a camada layer para desbloqueá-la.
http://www.oficinadanet.com.br//imagens/coluna/2557/02.gif

Clique em add layer style e vá ate gradient overlay.
http://www.oficinadanet.com.br//imagens/coluna/2557/03.gif

Configuer como mostra a imagem abaixo:
http://www.oficinadanet.com.br//imagens/coluna/2557/04.gif

Em seguida vá até a opção pattern Overlay. E configure como mostra a imagem.
http://www.oficinadanet.com.br//imagens/coluna/2557/05.gif

Bem o fundo esta pronto, agora vamos preparar o nosso mp3. Com a ferranta elpise tool, iremos começar a desenhar. Não esqueça de ativar o modo shape layer http://www.oficinadanet.com.br//imagens/coluna/2557/bt1.gif antes de desenhar. Escolha a cor branca e faça uma elipse como mostra na imagem.
http://www.oficinadanet.com.br//imagens/coluna/2557/06.gif

Renomei a camada para Corpo. Agora selecione a ferramenta direct selection http://www.oficinadanet.com.br//imagens/coluna/2557/bt2.gif e arraste o anchor point que fica na esquerda, veja e faça de acordo com a imagem.
http://www.oficinadanet.com.br//imagens/coluna/2557/07.gif

Agora vá em add layer style e adicione um drop shadow.
http://www.oficinadanet.com.br//imagens/coluna/2557/09.gif

Inner Glow
http://www.oficinadanet.com.br//imagens/coluna/2557/10.gif

Ao final desses passos teremos o seguinte resultado
http://www.oficinadanet.com.br//imagens/coluna/2557/11.gif

Agora com a Tecla CTRL pressionada clique sobre a camada corpo. isso fará com que se crie uma selecão em volta do corpo.
http://www.oficinadanet.com.br//imagens/coluna/2557/12.gif

Após isso vá em Select> Modify > Contract e coloque o valor de 8 pixels veja a imagem
http://www.oficinadanet.com.br//imagens/coluna/2557/13.gif

Quando aplicamos o contract a seleção irá diminuir em oito píxel. isso é uma ótima dica para colocar profundidade em letras. Bem passado isso vamos agora colocar estilo nessa seleção. Primeiro crie uma nova camada e nomei para visor. Pinte a seleção com a seguinte cor. #604a27. Teremos o seguinte resultado.
http://www.oficinadanet.com.br//imagens/coluna/2557/14.gif

Vamos agora colocar os efeitos propriamente ditos.

Inner Shadow
http://www.oficinadanet.com.br//imagens/coluna/2557/15.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/16.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/17.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/18.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/19.gif

Ao final de todos estes passos teremos a seguinte imagem.
http://www.oficinadanet.com.br//imagens/coluna/2557/20.gif

Baixem a seguinte fonte kitchenpolice e intale em seu pc( se não souber instalar uma fonte leia o artigo importante que vem junto com a fonte). Selecionem a ferranta de texto e configure ela da seguinte forma.
http://www.oficinadanet.com.br//imagens/coluna/2557/21.gif

Digite o que você quiser. Se quiser seguir o exemplo que esta na imagem tudo bem
http://www.oficinadanet.com.br//imagens/coluna/2557/22.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/23.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/24.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/25.gif


Com um tipo diferente de letra(isso não é obrigatório) digite a palavra música e logo abaixo o nome da faixa.
http://www.oficinadanet.com.br//imagens/coluna/2557/26.gif

Após isso selecione a ferramenta line tool e configure ela com 2 px ( tecle u para selecionar a ferramenta)
http://www.oficinadanet.com.br//imagens/coluna/2557/27.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/28.gif

Após desenhar a reta coloque as seguintes camadas de estilo.
http://www.oficinadanet.com.br//imagens/coluna/2557/29.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/30.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/31.gif


Selecione a ferramenta custom shape http://www.oficinadanet.com.br//imagens/coluna/2557/bt3.gif e coloque uma seta sobre a reta
http://www.oficinadanet.com.br//imagens/coluna/2557/32.gif

Coloque as seguintes camadas de estilo
http://www.oficinadanet.com.br//imagens/coluna/2557/33.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/34.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/35.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/36.gif

Adicione se quiser o progresso da música.( digo o tempo decorrido e o tempo total da música) mude o tipo de fonte por que haverá uma péssima visualização com a que estavamos usando. Agora digite a parte do menu( em uma única linha). Deixe um belo espaço entre as palavras a vonte utilizada aqui foi a verdana.
http://www.oficinadanet.com.br//imagens/coluna/2557/37.gif

Após digitar os nomes cliqe na camada que foi criada com o botão direito e vá ate warp text.
http://www.oficinadanet.com.br//imagens/coluna/2557/38.gif

Configure da seguinte forma
http://www.oficinadanet.com.br//imagens/coluna/2557/39.gif

Aperte Ctrl t posicione o mouse em um dos canto e encaixe as palavras de acordo com o seu gosto:
http://www.oficinadanet.com.br//imagens/coluna/2557/40.gif

http://www.oficinadanet.com.br//imagens/coluna/2557/41.gif

Comentários
Carregar comentários
Siga nossas redes sociais