Materiais necessários:
Passo 1
Criar um novo documento 600 × 400 px grande.
Etapa 2
Usando a ferramenta gradiente radial de # # 5e6c78 a 20282e, preencher o fundo.
Passo 3
Duplicar fundo e vá para Filter-Noise-Add Noise. Use essas configurações: Valor: 5%; Uniformes; Monochromatic. Clique em OK. Agora abaixe a opacidade da camada para 30%. Agora você deve ter algo como isto.
Passo 4
Ok, vamos fazer o leitor de áudio agora. Criar nova camada (Ctrl + Shift + N) e nomeie como "Base".Usando o Rounded Rectangle Tool, 5px raio, desenhe um retângulo como na imagem e usar essas opções de mistura. Cores no gradiente são: # 3d4a59; # 1c2329; # 303a44. Stroke color: # 191919.
Passo 5
Agora crie um novo documento, 600 × 600px. Vá ao menu Editar-Preencher-50% Gray. Então Filter-Noise-Add Noise com essas configurações: 80%; Gaussian; Monochromatic. Então Filter-Blur-Radial Blur com essas configurações: 100; Spin; Best. Pressione Ctrl + F para repetir. Você deve ter algo parecido com isso agora.
Passo 6
Copie a imagem feita anteriormente ao documento player de áudio acima da "Base" camada.Mudar o modo de blend para Soft Light ea opacidade para 80%. Vamos nomear essa camada "textura". Ctrl + clique em "Base" camadas polegar para fazer um selesction. Em seguida, pressione Ctrl + Shift + I para inverter a seleção. Hit apagar.
Passo 7
Criar nova camada. O nome de "Melhores Momentos". Usando a ferramenta Lápis desenhe duas linhas - uma na parte superior da base e uma na parte inferior. Apagar os lados das linhas com um pincel grande e macio e menor a opacidade para 80%. Para manter as coisas mais organizada, selecione os últimos três camadas - Base, Textura e Destaques - e pressione Ctrl + G para agrupar essas camadas.Nome do grupo "Base".
Passo 8
Agora vamos fazer os alto-falantes de ambos os lados. Criar nova camada. Nomeie-falante ". Ctrl, clique sobre a miniatura do "Base" camada de fazer uma seleção. Então tome ferramenta Rectangular Marquee e, mantendo Shift + Alt arraste para obter uma seleção como na imagem.Preenchê-lo com 3a3a3a #. Dublicate camada, o nome de "textura". Ir para a mistura de opções e adicionar estas configurações: Sobreposição de padrão com o padrão anexado Spiderman ", o modo de Blend - Overlay e Escala de 12%.
Passo 9
Criar uma nova camada, o nome de "Destaque". Novamente usando a ferramenta Lápis elaborar um destaque 1px como na imagem. Em seguida, crie uma nova camada e nomeie como "Sombra".Usando a ferramenta Elliptical marquee desenhe uma seleção como na imagem, preenchê-lo com preto e vá em Filter-Blur-Gaussian Blur, Radius 5. Apague todas as partes unnecessery para obter resultado como na foto e baixa a opacidade para 50%.
Etapa 10
Grupo dos últimos quatro camadas - Palestrante, Texture, Shadow e Highlight e Speaker_left o nome do grupo. Duplicar o grupo, lançá-lo na horizontal e colocar no lado direito. O nome de "Speaker_Right".
Etapa 11
Vamos fazer a fechar, minimizar e maximizar botões. Criar nova camada, nomeie-o "Botão".Usando ferramenta Rounded Rectangle, Radius 2px, desenhe um botão pequeno, preenchê-lo com o branco.Em seguida, adicionar estas opções de Blending. As cores são gradiente # 8799ab-# 485664 - # 8799ab. AVC é a cor # 384251.
Etapa 12
Criar uma nova camada, o nome de "X". Para obter o X, você pode usar uma fonte que você gosta ou desenhá-lo com a ferramenta lápis, como eu fiz. Eu usei um Gradiente Overlay (cinzento-escuro cinza mais claro) e 1px de sombra para obter este efeito.
Etapa 13
Grupo últimos 2 camadas e nome do grupo "X". Em seguida, fazer os outros 2 botões por dublicating o "X" grupo e apenas mudando o "X" camada. Mais uma vez eu usei a ferramenta Lápis para desenhar os símbolos.
Etapa 14
Agora vamos fazer a tela. Criar nova camada, nomeie-o "Screen Base". Desenhe um retângulo como na imagem e preenchê-lo com gradiente de # # 303a44 para 4a5968.
Etapa 15
Criar uma nova camada. Nomeie-Gloss ". Desenhe um pequeno retângulo e preencha com branco a gradiente transparente. Diminua a opacidade para 10%.
Etapa 16
Novamente usando 1px ferramenta Lápis branco desenhar alguns destaques ao redor. Basta jogar com ele para obter os resultados que você gosta.
Etapa 17
Vamos encher a tela com algum conteúdo. Faça um novo grupo com o nome "Conteúdo". Vou tentar manter esta parte curta e compreensível. Para cada coisa que fazer uma nova camada.Primeiro, usando um pincel macio rodada adicionar um destaque, onde o cronômetro será. Em seguida, usando uma fonte digital de quem (eu usei uma fonte chamada Digital-7, você pode obtê-lo no DaFont) no tipo 03:59 ou quaisquer outros números. Em seguida, digite o nome da faixa (eu usei fonte Walkway Bold).A, fonte Arial, tipo no Repeat e Shuffle. O modo Shuffle está ligado, assim torná-lo um pouco Repita mais leve do que. Então eu adicionei alguns pequenos detalhes, usando as técnicas descritas anteriormente - 1px linhas ferramenta lápis e pincel redondo macio para efeitos de luz.
Etapa 18
Criar uma nova camada. Nomeá-la barra de progresso ". Usando ferramenta Rounded Rectangle, radius 5px, desenhe um retângulo fino e longo. Preenchê-lo com o preto e adicionar estas opções de mistura: Gradient Overlay de # # 303a44 para 1c2329 e 1px Stroke, cor # afbbc6, Opacity 16%. Agora crie uma nova camada e nomeie o botão "Progress". Desenhe um pequeno retângulo e preencha com preto. Use essas opções Blending - Sombra Interna: Blend mode-Normal, Cor - Branco, Distância 0, Size 1; Gradien Cobertura: # 5c6977-# # 212a30-5c6977; Curso: Size 1px, cor # 222b31.
Etapa 19
Agora Vai haver um monte de botões para fazer. Então, faça um novo grupo com o nome "Buttons".Primeiro vamos fazer a base para o Play, Stop e outros botões. Criar nova camada, o nome de "Botão de Base". Para obter a forma que usei um 5px Radius ferramenta Rounded Rectangle e depois chamou os lados com a ferramenta lápis. Se quiser, você pode fazê-lo simplesmente como uma forma de retângulo arredondado. Em seguida, adicionar esses Blending Options - Drop Shadow: Ângulo - -90 (Un-check "Use Global Light"), Distance - 1, tamanho 0.Sombra Interna: Blend Mode - Normal, Cor - Branco, Ângulo - 90 (novamente não usar a luz global), Distance - 1, size - 0. Gradient Overlay: # 4d5c6a-# # 1c2329-303a43.
Etapa 20
Agora vamos adicionar uma grande quantidade de pequenos detalhes usando apenas 1px ferramenta Lápis e, em seguida, apagando final das linhas. Basta olhar a foto para ter uma idéia.Lembre-se que você tem que jogar com a opacidade para obter resultados agradáveis.
Etapa 21
Para fazer o Play, Pause, Stop, Forward e botões para trás, eu simplesmente desenhou retângulos e triângulos e combinou-os para a frente e para trás botões. Adicionar esta sobreposição de gradiente para as camadas botão de controle: # b7d9ed-# # 458fb2-b7d9ed.
Etapa 22
Agora vamos fazer a final 4 botões - Repetir, Aleatório, Lista e Equalizador. Todos eles vão ser os mesmos - apenas um pequeno retângulo arredondado com estas opções de mistura: Drop Shadow - Opacidade 26%, Espalhe a 100%, Tamanho 1. Sombra Interna: Modo de Blend - Normal, Cor - Branco, Opacity 40%, Ângulo - 90, Distância - 1, Choke - 100%, Tamanho - 0.Gradient Overlay: # 3d4a59-# # 1c2329-303a44. Em seguida, copie esses botões e colocá-las como na imagem.
Etapa 23
Agora adicione o texto. Usei fonte Arial e estes Blending Options: Drop Shadow - Opacidade 42%, Angle 90, Distância 1, tamanho 0. Gradient Overlay: # # 4c5a69-8495a7.
Etapa 24
Mais uma vez, adicionar alguns pequenos detalhes com a ferramenta lápis.
Etapa 25
Agora, a última coisa que nós vamos adicionar a interface é o controle de volume. Primeiro, desenhe o ícone com o Pencil Tool. Adicione o mesmo gradiente como os botões de controle de reprodução (Play, Pause, etc.)
Etapa 26
Utilizando a ferramenta Rounded Rectangle, Radius 5px, desenhe um retângulo e adicione o Gradien mesmo que a barra de progresso.
Etapa 27
Draw 10 pequenos círculos. Os ativos terão um gradiente como o ícone do volume e do resto deles vai ter uma luz simples gradiente de cinza para cinza escuro.
Etapa 28
Vamos terminá-lo e adicionar alguma reflexão. Mesclar todas as camadas, exceto o fundo.Duplicá-lo, adicionar 1,2 px Gaussian Blur, lançá-lo na vertical e usando Round borracha macia, apagar o fundo.
Conclusão
Então, aqui está - o jogador terminou a sua interface de áudio. Você pode tentar fazer uma pele real para o jogador Xion. Mas se um monte de gente gostaria de ver um tutorial sobre como fazer esse projeto em uma pele de trabalho, então eu ficaria feliz em fazer um tutorial sobre isso também.