Criando Um Projeto Player No PS CS5
-
Upload
andre-morais -
Category
Documents
-
view
215 -
download
0
Transcript of 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 -
8/9/2019 Criando Um Projeto Player No PS CS5
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).
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
7/49
Passo 7Aplique um Inner Glow com uma linha de pixel 2, utilizando os
valores abaixo.
-
8/9/2019 Criando Um Projeto Player No PS CS5
8/49
Passo 8Adicionar um gradiente suave para dar a idia de convexidade
para a frente do dispositivo.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
11/49
Etapa 11Adicionar um pano macio, pequena sombra interior para essa
camada para realar ainda mais da frente do jogador.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
14/49
Etapa 14Aplique uma mscara macia 3 pixel de forma que criamos na
etapa 13, como mostrado abaixo.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
17/49
Etapa 17Com esta seleco que repetimos a mscara de fase de
converso de seleo.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
23/49
-
8/9/2019 Criando Um Projeto Player No PS CS5
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 -
8/9/2019 Criando Um Projeto Player No PS CS5
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 -
8/9/2019 Criando Um Projeto Player No PS CS5
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 -
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
29/49
Etapa 29Aliviar o chanfro inferior com estes valores.
-
8/9/2019 Criando Um Projeto Player No PS CS5
30/49
Etapa 30Use um degrad suave e pequena largura da superfcie da
depresso por isso no to chato.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
32/49
Etapa 32Use uma sombra para criar a iluso de um grande extruso.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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).
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
42/49
Etapa 42Repetir as etapas anteriores, a mscara de capotamento.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
45/49
Etapa 45Leve-a opacidade 0% e adicionar um curso com o mesmo tom
de cinza da superfcie do jogador.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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.
-
8/9/2019 Criando Um Projeto Player No PS CS5
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 -
8/9/2019 Criando Um Projeto Player No PS CS5
49/49
http://psdtuts.s3.amazonaws.com/0442_Create_a_Sleek_Mini_Mp3_Player/final_large.jpg