criando um projeto player no ps cs5

8/9/2019 Criando Um Projeto Player No PS CS5

1/49

O produto final que voc estar criando

Adobe Design Premium CS5 software oferece-lhe total

liberdade criativa, sem sacrificar a preciso ou

qualidade, se trabalhar na mdia impressa, web,

interativa, ou de mdia mvel.

Uma das melhores maneiras de aprender a criar interfaces

surpreendente que a prtica atravs da criao de dispositivos

eletrnicos em Photoshop. Estes dias apenas sobre todos tem

algum tipo de aparelho de MP3 para tocar msica. Neste tutorialvamos demonstrar como criar uma interface elegante, elegante

e simples de MP3 no Photoshop para reproduzir arquivos de

udio para seus projetos em Flash.
http://www.tkqlhce.com/click-3485579-10469484http://psdtuts.s3.amazonaws.com/0442_Create_a_Sleek_Mini_Mp3_Player/final_large.jpghttp://www.tkqlhce.com/click-3485579-10469484


2/49

Etapa 1O primeiro passo criar um fundo no qual podemos aplicar um

gradiente radial escuro. Pinte a camada em qualquer cor eadicionar um estilo de camada com o gradiente mostrado

abaixo.

Etapa 2Com a ferramenta retngulo arredondado (definido um raio de

20 pixels) criar o elemento principal do dispositivo usando uma

camada de forma (clicando na primeira opo do menu

superior).


3/49

Etapa 3D um duplo clique sobre o vetor dessa camada, o seu editor de

cores vai se abrir. Vamos selecionar uma cor cinza claro #

E1E0E0 que nos permitir acrescentar alguma brilho superfcie. Toda vez que voc quiser criar objetos brancos que

voc ter que adicionar um pouco de cor cinza para que voc

possa ilumin-los ou adicionar algum fulgor para tornar estes

recursos bastante visvel.


4/49

Etapa 4Agora vamos criar um chanfro em torno do dispositivo. Para

fazer isso teremos de criar alguns guias de referncia com os

governantes do Photoshop. Clique no ngulo de convergnciados dois governantes. Arrastando o mouse voc ser capaz de

visualizar as linhas pontilhadas que determinar com preciso

onde o cursor estiver posicionado. Isso nos permitir criar um

chanfro eqidistante em torno do permetro do dispositivo.


5/49

Etapa 5Agora que temos uma nova forma para a camada de bisel,

preciso tomar a opacidade desta camada para zero, como s

queremos ver um chanfro de 2 pixels na superfcie.


6/49

Etapa 6Aplicar um golpe 1 pixel para a posio de interior com uma cor

mais escura do que a frente do dispositivo. Nesta etapa, vamos

criar uma linha que representa a diferena comum entre o corpoea frente do jogador.


7/49

Passo 7Aplique um Inner Glow com uma linha de pixel 2, utilizando os

valores abaixo.


8/49

Passo 8Adicionar um gradiente suave para dar a idia de convexidade

para a frente do dispositivo.


9/49

Passo 9Agora vamos cuidar da borda do jogador. Para fazer isso,

adicione uma linha que funciona como uma extruso para dar a

iluso de um objeto 3D. Adicionar um derrame de cinza 2 pixelna posio de fora.


10/49

Etapa 10Usando o Bevel & Emboss estilo que adicionar luz parte

superior da linha. Agora, o objeto parece ter uma extruso para

trs que recebe a luz de cima e se torna mais escura na base.


11/49

Etapa 11Adicionar um pano macio, pequena sombra interior para essa

camada para realar ainda mais da frente do jogador.


12/49

Etapa 12Ao duplicar a camada e edio de bisel a frente, ns geramos

mais bisel que representam os botes de controle diferentes do

dispositivo.


13/49

Etapa 13Agora, edite a camada de forma a criar a principal Tocar /

Pausar do nosso jogador. Vamos duplicar o chanfro em primeiro

lugar e levar para dentro das fronteiras de fazer um objetocircular. Em seguida, aument-la 10%, ns s precisamos de

bisel horizontal.


14/49

Etapa 14Aplique uma mscara macia 3 pixel de forma que criamos na

etapa 13, como mostrado abaixo.


15/49

Etapa 15Para fazer a mscara ocultar o objeto e seu estilo de camada,

clique na opo "Layer Mask Oculta Effects" na janela de estilos.

Se no escolher esta opo, a mscara s esconder o objeto,mas vai mostrar o efeito de fora da mscara e queremos manter

isso escondido.


16/49

Etapa 16Esta mesma mscara tambm ser til para o bisel outros,

podemos lev-la a partir da camada mascarada que antes. Ao

clicar no boto direito do mouse sobre o cone da mscaradentro da camada, ns escolhemos "Subtrair da Seleo Layer

Mask". Isto ir criar uma seleo idntico ao anterior.


17/49

Etapa 17Com esta seleco que repetimos a mscara de fase de

converso de seleo.


18/49

Etapa 18Ns j temos o bisel de separao do nosso conjunto de botes

principais. Agora precisamos criar uma camada de forma para

exibio do jogador: uma tela preta em acrlico, onde o nome damsica eo tempo sero apresentados.


19/49

Etapa 19Primeiro usamos a sombra para criar um chanfro inferior onde a

luz vinda de cima vai bater. Use os valores mostrados na

imagem para configurar o estilo para torn-la ntida e clara eno escura e desfocada.


20/49

Etapa 20Agora precisamos criar um gradiente radial. Tome preto e

branco para cores to prximo quanto possvel do centro do

outro modo que no h tanta suavidade entre duas cores.Localizao de% 49 preto, localizao de% 50 em branco.


21/49

Passo 21Desmarque a opo Align with Layer. Se no fizermos isso, o

gradiente ser apenas a partir do centro do objeto para a

periferia, ns queremos que este gradiente a ser muito maior emais amplo.


22/49

Etapa 22Depois de produzir o seu efeito brilhante, terminar esse estilo

com um par chanfros semelhantes aos que criamos para a etapa

de boto. Use um golpe pixel preto com um trao alinhados parao interior. Use um Inner Glow, 2 px de tamanho com o modo de

mistura fixado para a tela.


23/49


24/49

Passo 24Agora vamos simular o scroller de texto em nossa tela. Usando

uma fonte pixelizada precisamos de adicionar o nome do

intrprete eo nome da msica que ser tocada. Voc pode usaresta fonte livre . Lembre-se de remover o serrilhado na janela de

caracteres no menu superior da ferramenta de texto para

manter o texto ntido.
http://www.dafont.com/nokia-cellphone.font?a=onhttp://www.dafont.com/nokia-cellphone.font?a=on


25/49

Passo 25Com outra fonte bitmap que ns criamos o cronmetro que

indica o tempo que passou. Essa fonte tambm gratuito e

voc pode obt-lo aqui.
http://www.dafont.com/bm-receipt.font?nb_ppp=50&text=03:45http://www.dafont.com/bm-receipt.font?nb_ppp=50&text=03:45


26/49

Passo 26Agora, use uma fonte que tem os cones de costume e smbolos

de um reprodutor de udio ou vdeo. Voc pode usar este . Uma

vez instalado us-lo para criar os botes diferentes do jogador,neste caso, o Play / Pause controle (voc ter que criar dois

estados para o boto quando voc desenvolver este jogador,

como o boto Play torna-se o boto de pausa, quando

pressionado e vice-versa).
http://www.dafont.com/guifx-v2-transports.fonthttp://www.dafont.com/guifx-v2-transports.font


27/49

Passo 27Para este smbolo que usamos a mesma cor que o que ns

escolhemos para a superfcie frontal do objeto. Com a

ferramenta de seleo de cor podemos pintar o texto.


28/49

Etapa 28Agora ns podemos incluir vrios estilos que fazem este olhar

como smbolo de baixo-relevo. Use os valores correspondentes a

seguir para a sombra interior.


29/49

Etapa 29Aliviar o chanfro inferior com estes valores.


30/49

Etapa 30Use um degrad suave e pequena largura da superfcie da

depresso por isso no to chato.


31/49

Etapa 31Vamos criar o controle de volume. Desenhe um boto pequeno

boto com um acabamento de metal polido. Comece com uma

camada de forma circular.


32/49

Etapa 32Use uma sombra para criar a iluso de um grande extruso.


33/49

Etapa 33Com um ngulo de inclinao em modo cinza e vrias listras

brancas, podemos simular o polons circular deste tipo de

boto. Certifique-se que a cor cinza inicial do lado esquerdo omesmo que a cor cinza no final direita.


34/49

Etapa 34Finalmente, adicione um curso com um preenchimento de

gradiente. Isto ir adicionar o chanfro no permetro. Siga os

valores sobre a imagem cuidadosamente.


35/49

Etapa 35Ns j terminamos nosso boto de controle de volume, mas

tambm queremos adicionar um boto de mudo. Voc pode

fazer isso usando camada estilos.


36/49

Etapa 36Pinte a sombra do jogador em uma nova camada usando uma

amolecida 2 pixels a seleo circular (ver menu do valor

superior da ferramenta).


37/49

Etapa 37Esconder a seleo com Ctrl + H e use um pincel 100 pixels com

10% do fluxo de tinta, pinte a sombra suavemente. Isto tornar

mais intenso no centro do objeto.


38/49

Etapa 38Agora vamos adicionar um pouco de brilho na borda do jogador

mostrar. Em primeiro lugar, pintar uma rea de intenso brilho no

centro de uma seleo retangular que de 1 pixel de altura. Eento, com a mesma escova, mas sem qualquer seleo, clique

vrias vezes para aumentar a intensidade do centro.


39/49

Etapa 39Criar um efeito de rolagem no boto principal para fazer o pop

superfcie frontal quando o mouse passa por cima. Comeamos

por criar uma forma circular por trs do cone Pause.


40/49

Etapa 40Este efeito de depresso pode ser feito com: sombra a escurecer

e suavizar as arestas do objeto, e uma inclinao para simular

que esta depresso tem uma rea superior que em tons, comoo boto foi pressionado.


41/49

Etapa 41Tambm esconder esse rollover com uma mscara, como

fizemos com os chanfros do conjunto boto principal. Lembre-se

a opo de esconder os efeitos de camada, ao mesmo tempo.


42/49

Etapa 42Repetir as etapas anteriores, a mscara de capotamento.


43/49

Etapa 43Vamos adicionar dois efeitos de luz para realar o capotamento.

Pela pintura com duas cores (# 00CCFF para a borda do efeito e

branco para o seu centro), criamos uma borda iluminada que irmascarar. Duplicar a camada e refleti-la na vertical para faz-la

parecer como se as luzes no topo e no fundo como o mouse

passa por cima. Esta camada deve ser definido como "Screen"

para integrar os brilhos melhor.


44/49

Etapa 44Por ltimo, vamos adicionar um fio fino que vai dar mais

realismo ao jogador. Para fazer isso, desenhe uma forma curva

camada usando a ferramenta caneta.


45/49

Etapa 45Leve-a opacidade 0% e adicionar um curso com o mesmo tom

de cinza da superfcie do jogador.


46/49

Etapa 46Separe os tempos da camada de forma que criamos, pois

precisamos adicionar algumas sombras para este fio. Boto

direito do mouse sobre o cone fx ao lado da camada e escolhaCreate Layer.


47/49

Etapa 47Esta ao separa o curso em uma nova camada, sem destruir a

forma anteriormente estabelecida. Use uma sombra interna

para dar a idia de um relevo cilndrico para esta linha.


48/49

ConclusoNosso MP3 Player est pronto para ser exportado como um PNG

transparente e codificados em Flash para ser usado em

websites. Voc pode ver a imagem final abaixo ou visualizaruma verso maior aqui.
http://psdtuts.s3.amazonaws.com/0442_Create_a_Sleek_Mini_Mp3_Player/final_large.jpghttp://psdtuts.s3.amazonaws.com/0442_Create_a_Sleek_Mini_Mp3_Player/final_large.jpg


49/49
http://psdtuts.s3.amazonaws.com/0442_Create_a_Sleek_Mini_Mp3_Player/final_large.jpg

criando um projeto player no ps cs5

Documents