Aprendendo a fazer Player de Mp3!

[||~Puppet Furious~||]

ai vai um tuto q eu vi na net, axei muito bom...

Player de MP3

Comece abrindo um novo arquivo de tamanho 500 x 500, com fundo Branco. Agora começaremos fazendo o corpo do nosso aparelho. Pegue a ferramenta Shape e seleione o modo Rounded Rectangle Tool, fazendo então um retângulo em nosso quadro.

Dica para este tutorial:Utilize sempre as cores padrões Preto e Branco para criar as formas pois depois utilizaremos o efeito Color Overlay para darmos a cor exata da peça.

Vá ao menu Filter/Noise/Add Noise... e aplique um pouco de ruído à imagem, cerca de 15% em modo Gaussian e Monochromatic.

Vamos aos efeitos usados no corpo deste nosso parelho.

Color Overlay: Cor Branco e Opacity 83%.
Gradient Overlay: Opção de Gradient padrão Preto e Branco, Opacity 81% e Angle 105°.

Continuando no corpo do aparelho.

Bevel and Emboss: Depth 30%, Size 8px, Soften 0px, em Highlight and Shadows sete Opacity 75%.
Drop Shadow: Opacity 65%, Angle 120°, Distance 12px, Spread 0px, Size 18px.

Nosso próximo passo é criar o visor de cristal líquido. Faça um retângulo normal, sem cantos arredondados, dentro da área do corpo do nosso aparelho. Acrescente um pouco de ruído, Noise, à imagem, da mesma forma como foi feito no corpo do aparelho anteriormente. Menu Filter/Noise/Add Noise...

Vamos aos efeitos neste visor:

Color Overlay: escolha uma cor, no meu caso foi #DFDCC6. Sete Opacity para 98%, apenas para mostrar um pouco o efeito do ruído, Noise, dado à imagem.
Inner Shadow: Opacity 49%, Distance 1px, Choke 0px e Size 4px. Na seção Quality, selecione a opção Half Round.

Agora vamos adicionar algumas informações em nosso visor, se não vai parecer que o aparelho esta desligado.
Vamos começar com um detalhe no topo da tela que será nosso menu. Crie um retângulo bem no topo de nosso visor e escolha uma cor para ele, desta vez não usaremos o efeito Color Overlay, eu optei pela cor #4F4E46
Acrescente uma sombra bem leve.

Drop Shadow: Opacity para 46%, Distance 1px e Size 1 px.

Faltam os caracteres, o texto que aparece no visor. Nesta etapa eu usei apenas Tipografia para organizar o texto do visor. A fonte utilizada foi a Bazaronite(aconselho baixar). Pesquise no Google pelo nome da fonte que você encontrará ela em algum site para download.

Dica para este tutorial: Esta fonte possui diferenças nas letras maiúsculas e minúsculas, nas maiúsculas ele deixa como se fosse negrito e nas minúsculas não. Utilizaremos estas diferenças para fazer os detalhes do texto do visor.

Primeiro digite MENU em maiúsculas
e coloque seu tamanho em 10pt. Posicione-o sobre a barra que foi criada no visor. Selecione este texto e troque sua cor para a cor que você usou no visor. O meu seria #DFDCC6
No mesmo layer ainda, pule duas linhas e digite o restante, mas agora usando o tamanho de fonte 9pt. Digite o que esta escrito no visor da minha imagem ou escolha suas músicas ou monte de outra forma, fique à vontade. Note é claro, como já foi dito, o que esta em negrito na verdade foi escrito em letras maiúsculas e o que esta normal foi escrito com minúsculas.
No final acrescente à este Layer uma sombra.

Drop Shadow: Opacity 86%, Distance 0px e Size 1px.

Chegaram os botões, primeiro o botão principal, o maior deles. Crie um círculo dentro do corpo do aparelho. Acrescente os seguintes efeitos na ordem, como mostrará a imagem logo abaixo.

Stroke: Opacity 42%, Size 2px, Gradient padrão Preto e Branco, em modo Reverse, Angle 90°.
Gradient Overlay: Gradient padrão Preto e Branco, Angle -45°.
Color Overlay: Escolha uma cor, no meu caso #CCCCCC. Opacity 78%.
Satin: Cor Preto, Opacity 26%, Distance 2px, Size 9px, na área da seção Contour selecione o tipo Cove-Deep e sete Angle 90°.
Bevel and Emboss: Depth 1%, Size 5px, nas opções Highlight e Shadow sete ambas para 75%.
Inner Shadow: Cor Preto, Opacity 86%, Distance 0px, Size 1px.

A imagem a seguir mostra esta sequência de efeitos.

Finalizando este botão, vamos colocar nele alguma marcação que indique sua finalidade no aparelho, no caso, movimentar o cursor da tela para baixo e para cima.
Primeiro trace uma linha dividindo este botão em duas partes. Acrescente os efeito abaixo à ela:

Stroke: Size 1px, Opacity 11%, Gradient padrão Preto e Branco, em modo Reverse, Angle 90°.
Color Overlay: Cor #CCCCCC, Opacity 83%.

Para fazer as setinhas do botão, utilizei a fonte Wingdings 3 padrão do Windows. Digite p numa linha e na outra abaixo,q. O tamanho da fonte é 15pt. Adicione estes efeitos à elas agora:

Stroke: Opacity 10%, Size 1px, Gradient padrão Preto e Branco, e modo Reverse, Angle 127°, Scale72%.
Gradient Overlay: Opacity 90%, Angle 128°.
Color Overlay: Cor #CCCCCC, Opacity 92%.

A imagem abaixo mostra a sequência de criação e efeitos.

Nosso botão principal foi criado, agora vamos partir para os demais ao redor dele.
Primeiro faça um círculo de tamanho menor ao do botão principal. Agora tire mais duas cópias deste layer, botão direito em cima do Layer, Duplicate Layer. Estas cópias serão uma para cada botão do aparelho. Posicione-as ao redor do botão principal da forma como se encontram na imagem logo abaixo.
Aqui nesta etapa eu reutilizei os efeitos do Layer do botão principal, portanto, basta você copiar o Layer Style do Layer do botão principal e colá-lo nos demais. Botão direito em cima do Layer, Copy Layer Style, agora cole-o sobre os demais. Caso você queira praticar mais os efeitos do botão, repita os passos para criar o botão principal dados acima.
Para os símbolos mostrados em cada botão, foram usados os caracteres de maior >, menor < e o texto ok. Ambos com a fonte Arial, em Negrito, tamanho 14pt e cor Cinza Claro.

Para finalizar só falta mesmo o nome do nosso aparelho estampado no corpo dele. Vamos criar!
Crie um Layer com o texto q vc quiser. use a fonte Arial Black no tamanho 14pt. Adicione os seguintes efeitos:

Inner Shadow: Opacity 78%, Distance 1px, Size 0px.
Color Overlay: Cor Branco, Opacity 69%.
Stroke: Opacity 38%, Size 1px, cor usada #CCCCCC.

Prontinho, nosso player de mp3 esta finalizado!

Resultado final:

>> O meu fikow assim :p <<

só isso, espero q tenham gostado!

fonte:http://www.plugmasters.com.br

EDIT: coloquei algumas palavras em destaques e arrumei alguns erros de portugues..

[Të§Ðë¥]

Kramba q interessante O.o;
Nunca tinha visto um tuto de um baguio desses, sem duvida alguma muito r0x! \o/


PS: Adicionado a lista de tuto \o\

[Phantom]

nossa mto bom
parece um I pod =P

[||~Puppet Furious~||]

eh mt interessante msm, o unico problema eh q da bastante trabalho... ehehe
aconselho a quem for fazer usar a fonte Bazaronite, fika bem mais facil pra escreve as coisas no visor..mas tbm fica bom com a visitor..

[◊₪¥ø₪◊]

vlw... eu tava procurandu algo assim pah endenta o player doh meu site... voh faze um layout e ele vai fika batuta uauhahuauuhUHAUhuah

abs

[Elerdort]

Pelo menos pra mim esse é old³²¹ =p Mas não dexa de ser rox