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

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:

Tutorial Photoshop: Fazendo uma Interface de um mp3


Para comecar crie um novo arquivo 500x300 px. Pinte o background com a cor preta.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Dê um duplo clique sobre a camada layer para desbloqueá-la.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Clique em add layer style e vá ate gradient overlay.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Configuer como mostra a imagem abaixo:
Tutorial Photoshop: Fazendo uma Interface de um mp3

Em seguida vá até a opção pattern Overlay. E configure como mostra a imagem.
Tutorial Photoshop: Fazendo uma Interface de um mp3

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 Tutorial Photoshop: Fazendo uma Interface de um mp3 antes de desenhar. Escolha a cor branca e faça uma elipse como mostra na imagem.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Renomei a camada para Corpo. Agora selecione a ferramenta direct selection Tutorial Photoshop: Fazendo uma Interface de um mp3 e arraste o anchor point que fica na esquerda, veja e faça de acordo com a imagem.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Agora vá em add layer style e adicione um drop shadow.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Inner Glow
Tutorial Photoshop: Fazendo uma Interface de um mp3

Ao final desses passos teremos o seguinte resultado
Tutorial Photoshop: Fazendo uma Interface de um mp3

Agora com a Tecla CTRL pressionada clique sobre a camada corpo. isso fará com que se crie uma selecão em volta do corpo.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Após isso vá em Select> Modify > Contract e coloque o valor de 8 pixels veja a imagem
Tutorial Photoshop: Fazendo uma Interface de um mp3

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.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Vamos agora colocar os efeitos propriamente ditos.

Inner Shadow
Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Ao final de todos estes passos teremos a seguinte imagem.
Tutorial Photoshop: Fazendo uma Interface de um mp3

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.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Digite o que você quiser. Se quiser seguir o exemplo que esta na imagem tudo bem
Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3


Com um tipo diferente de letra(isso não é obrigatório) digite a palavra música e logo abaixo o nome da faixa.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Após isso selecione a ferramenta line tool e configure ela com 2 px ( tecle u para selecionar a ferramenta)
Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Após desenhar a reta coloque as seguintes camadas de estilo.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3


Selecione a ferramenta custom shape Tutorial Photoshop: Fazendo uma Interface de um mp3 e coloque uma seta sobre a reta
Tutorial Photoshop: Fazendo uma Interface de um mp3

Coloque as seguintes camadas de estilo
Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

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.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Após digitar os nomes cliqe na camada que foi criada com o botão direito e vá ate warp text.
Tutorial Photoshop: Fazendo uma Interface de um mp3

Configure da seguinte forma
Tutorial Photoshop: Fazendo uma Interface de um mp3

Aperte Ctrl t posicione o mouse em um dos canto e encaixe as palavras de acordo com o seu gosto:
Tutorial Photoshop: Fazendo uma Interface de um mp3

Tutorial Photoshop: Fazendo uma Interface de um mp3

Mais sobre: photoshop tutoriais mp3
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo