O produto final que você estará criando

Adobe Design Premium CS5 software oferece-lhe total

liberdade criativa, sem sacrificar a precisão ou
qualidade, se trabalhar na mídia impressa, web,
interativa, ou de mídia móvel.
Uma das melhores maneiras de aprender a criar interfaces
surpreendente que a prática através da criação de dispositivos
eletrônicos em Photoshop. Estes dias apenas sobre todos tem
algum tipo de aparelho de MP3 para tocar música. Neste tutorial
vamos demonstrar como criar uma interface elegante, elegante
e simples de MP3 no Photoshop para reproduzir arquivos de
áudio para seus projetos em Flash.
Etapa 1
O primeiro passo é criar um fundo no qual podemos aplicar um
gradiente radial escuro. Pinte a camada em qualquer cor e
adicionar um estilo de camada com o gradiente mostrado
abaixo.

Etapa 2
Com a ferramenta retângulo arredondado (definido um raio de
20 pixels) criar o elemento principal do dispositivo usando uma
camada de forma (clicando na primeira opção do menu
superior).
Etapa 3
Dê 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 à
superfície. 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 visível.
Etapa 4
Agora vamos criar um chanfro em torno do dispositivo. Para
fazer isso teremos de criar alguns guias de referência com os
governantes do Photoshop. Clique no ângulo de convergência
dos dois governantes. Arrastando o mouse você será capaz de
visualizar as linhas pontilhadas que determinar com precisão
onde o cursor estiver posicionado. Isso nos permitirá criar um
chanfro eqüidistante em torno do perímetro do dispositivo.
Etapa 5
Agora 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 superfície.
Etapa 6
Aplicar um golpe 1 pixel para a posição de interior com uma cor
mais escura do que a frente do dispositivo. Nesta etapa, vamos
criar uma linha que representa a diferença comum entre o corpo
ea frente do jogador.
Passo 7
Aplique um Inner Glow com uma linha de pixel 2, utilizando os
valores abaixo.
Passo 8
Adicionar um gradiente suave para dar a idéia de convexidade
para a frente do dispositivo.
Passo 9
Agora vamos cuidar da borda do jogador. Para fazer isso,
adicione uma linha que funciona como uma extrusão para dar a
ilusão de um objeto 3D. Adicionar um derrame de cinza 2 pixel
na posição de fora.
Etapa 10
Usando o Bevel & Emboss estilo que adicionar luz à parte
superior da linha. Agora, o objeto parece ter uma extrusão para
trás que recebe a luz de cima e se torna mais escura na base.
Etapa 11
Adicionar um pano macio, pequena sombra interior para essa
camada para realçar ainda mais da frente do jogador.
Etapa 12
Ao duplicar a camada e edição de bisel a frente, nós geramos
mais bisel que representam os botões de controle diferentes do
dispositivo.
Etapa 13
Agora, 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 objeto
circular. Em seguida, aumentá-la 10%, nós só precisamos de
bisel horizontal.
Etapa 14
Aplique uma máscara macia 3 pixel de forma que criamos na
etapa 13, como mostrado abaixo.
Etapa 15
Para fazer a máscara ocultar o objeto e seu estilo de camada,
clique na opção "Layer Mask Oculta Effects" na janela de estilos.
Se não escolher esta opção, a máscara só esconder o objeto,
mas vai mostrar o efeito de fora da máscara e queremos manter
isso escondido.
Etapa 16
Esta mesma máscara também será útil para o bisel outros,
podemos levá-la a partir da camada mascarada que antes. Ao
clicar no botão direito do mouse sobre o ícone da máscara
dentro da camada, nós escolhemos "Subtrair da Seleção Layer
Mask". Isto irá criar uma seleção idêntico ao anterior.
Etapa 17
Com esta selecção que repetimos a máscara de fase de
conversão de seleção.
Etapa 18
Nós já temos o bisel de separação do nosso conjunto de botões
principais. Agora precisamos criar uma camada de forma para
exibição do jogador: uma tela preta em acrílico, onde o nome da
música eo tempo serão apresentados.
Etapa 19
Primeiro 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 nítida e clara e
não escura e desfocada.
Etapa 20
Agora precisamos criar um gradiente radial. Tome preto e
branco para cores tão próximo quanto possível do centro do
outro modo que não há tanta suavidade entre duas cores.
Localização de% 49 preto, localização de% 50 em branco.
Passo 21
Desmarque a opção Align with Layer. Se não fizermos isso, o
gradiente será apenas a partir do centro do objeto para a
periferia, nós queremos que este gradiente a ser muito maior e
mais amplo.
Etapa 22
Depois de produzir o seu efeito brilhante, terminar esse estilo
com um par chanfros semelhantes aos que criamos para a etapa
de botão. Use um golpe pixel preto com um traço alinhados para
o interior. Use um Inner Glow, 2 px de tamanho com o modo de
mistura fixado para a tela.
Passo 23
Temos agora terminou a frente do nosso leitor MP3. Agora
vamos precisar adicionar alguns ícones para os botões e texto
dentro do visor.
Passo 24
Agora vamos simular o scroller de texto em nossa tela. Usando
uma fonte pixelizada precisamos de adicionar o nome do
intérprete eo nome da música que será tocada. Você pode usar
esta fonte livre . Lembre-se de remover o serrilhado na janela de
caracteres no menu superior da ferramenta de texto para
manter o texto nítido.
Passo 25
Com outra fonte bitmap que nós criamos o cronómetro que
indica o tempo que passou. Essa fonte também é gratuito e
você pode obtê-lo aqui.
Passo 26
Agora, use uma fonte que tem os ícones de costume e símbolos
de um reprodutor de áudio ou vídeo. Você pode usar este . Uma
vez instalado usá-lo para criar os botões diferentes do jogador,
neste caso, o Play / Pause controle (você terá que criar dois
estados para o botão quando você desenvolver este jogador,
como o botão Play torna-se o botão de pausa, quando é
pressionado e vice-versa).
Passo 27
Para este símbolo que usamos a mesma cor que o que nós
escolhemos para a superfície frontal do objeto. Com a
ferramenta de seleção de cor podemos pintar o texto.
Etapa 28
Agora nós podemos incluir vários estilos que fazem este olhar
como símbolo de baixo-relevo. Use os valores correspondentes a
seguir para a sombra interior.
Etapa 29
Aliviar o chanfro inferior com estes valores.
Etapa 30
Use um degradê suave e pequena largura da superfície da
depressão por isso não é tão chato.
Etapa 31
Vamos criar o controle de volume. Desenhe um botão pequeno
botão com um acabamento de metal polido. Comece com uma
camada de forma circular.
Etapa 32
Use uma sombra para criar a ilusão de um grande extrusão.
Etapa 33
Com um ângulo de inclinação em modo cinza e várias listras
brancas, podemos simular o polonês circular deste tipo de
botão. Certifique-se que a cor cinza inicial do lado esquerdo é o
mesmo que a cor cinza no final à direita.
Etapa 34
Finalmente, adicione um curso com um preenchimento de
gradiente. Isto irá adicionar o chanfro no perímetro. Siga os
valores sobre a imagem cuidadosamente.
Etapa 35
Nós já terminamos nosso botão de controle de volume, mas
também queremos adicionar um botão de mudo. Você pode
fazer isso usando camada estilos.
Etapa 36
Pinte a sombra do jogador em uma nova camada usando uma
amolecida 2 pixels a seleção circular (ver menu do valor
superior da ferramenta).
Etapa 37
Esconder a seleção 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.
Etapa 38
Agora vamos adicionar um pouco de brilho na borda do jogador
mostrar. Em primeiro lugar, pintar uma área de intenso brilho no
centro de uma seleção retangular que é de 1 pixel de altura. E
então, com a mesma escova, mas sem qualquer seleção, clique
várias vezes para aumentar a intensidade do centro.
Etapa 39
Criar um efeito de rolagem no botão principal para fazer o pop
superfície frontal quando o mouse passa por cima. Começamos
por criar uma forma circular por trás do ícone Pause.
Etapa 40
Este efeito de depressão pode ser feito com: sombra a escurecer
e suavizar as arestas do objeto, e uma inclinação para simular
que esta depressão tem uma área superior que é em tons, como
o botão foi pressionado.
Etapa 41
Também esconder esse rollover com uma máscara, como
fizemos com os chanfros do conjunto botão principal. Lembre-se
a opção de esconder os efeitos de camada, ao mesmo tempo.
Etapa 42
Repetir as etapas anteriores, a máscara de capotamento.
Etapa 43
Vamos adicionar dois efeitos de luz para realçar o capotamento.
Pela pintura com duas cores (# 00CCFF para a borda do efeito e
branco para o seu centro), criamos uma borda iluminada que irá
mascarar. 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.
Etapa 44
Por ú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.
Etapa 45
Leve-a opacidade 0% e adicionar um curso com o mesmo tom
de cinza da superfície do jogador.
Etapa 46
Separe os tempos da camada de forma que criamos, pois
precisamos adicionar algumas sombras para este fio. Botão
direito do mouse sobre o ícone fx ao lado da camada e escolha
Create Layer.
Etapa 47
Esta ação separa o curso em uma nova camada, sem destruir a
forma anteriormente estabelecida. Use uma sombra interna
para dar a idéia de um relevo cilíndrico para esta linha.
Conclusão
Nosso 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 visualizar
uma versão maior aqui.