Video Tutorial
Nosso vídeo editor Gavin Steele criou este tutorial em vídeo para complementar esse texto + imagem tutorial.
Passo 1
Criar um novo documento usando as definições mostradas abaixo. Você pode realmente usar qualquer resolução que você escolher, neste tutorial eu usei 1024 × 768.
Etapa 2
Pegue a ferramenta Gradient, Style Linear selecionar e preencher a camada de cima (# 000000) para baixo (# 45494d).
Passo 3
Selecione a ferramenta Ellipse (Shift + U) e desenhar um círculo. Renomeie a camada que acabou de ser criada "Player_L1" e aplique um Gradiente Overlay e um curso no exterior, utilizando as definições mostradas abaixo.
Passo 4
Em seguida, vamos adicionar um padrão agradável para essa camada. Desde que você não pode ter um padrão e estilos de gradiente aplicado à mesma camada, duplicar a camada e renomeá-lo "Player_L1_Pattern". Variação da camada Blending Mode para Multiply com 40% de opacidade e aplicar os estilos de camada que são mostradas abaixo. Eu usei um muito legal "Spiderman" padrão por * s0nkiteque você pode baixar aqui.
Passo 5
Para a próxima etapa, você precisará criar um disco de vinil. Um bom tutorial por Arik em criar um disco de vinil no Photoshopque vai lhe mostrar como fazê-lo.
Você pode acompanhar Arik o tutorial, criando o registro neste projeto, simplesmente sem o fundo. Depois de ter feito o registro, mesclar todas as camadas e renomeie a camada mesclada "Player_L2". Aplicar os estilos de camada seguinte e também certificar-se de girar o registro para que seu brilho será posicionado como mostrado.
Passo 6
Criar uma nova camada e renomeá-lo "Player_L12_Shade". Embora ainda nesta camada, clique no comando do Player_L1 "camada para selecionar a sua forma. Certifique-se de que você selecionou preto como sua cor de primeiro plano, pegue a ferramenta Pincel (B) e usando uma escova macia 200px arredondados suavemente adicionar algumas sombras negras trabalhando o seu caminho de fora da área selecionada. Certifique-se apenas a cor de fundo, pois é a única área que exige sombreamento para agora. Alterar modo de mesclagem da camada para Multiply com 80% de opacidade.
Passo 7
Duplicar o Player_L1 "camada e coloque-o no topo de todas as outras camadas. Nomeie esta camada Player_L3 "." Hit Command + T para transformar a forma. Vamos aumentar o tamanho de 105%, conforme mostrado abaixo.
Passo 8
Em seguida temos a esculpir no círculo recém-criado. Para fazer isso, clique no Player_L3 "camada, pegue a Pen Tool (P) e selecione Subtrair da Área da Forma (-). Use a ferramenta Pen para desenhar a forma como mostrado abaixo.
Uma vez que a forma está pronta, pegue o Path Selection Tool (A) e selecionar a forma que você acabou de criar. Alt-arrastar a forma para duplicá-lo, escolha Editar> Transformar> Girar e girar a forma repetido até que ele esteja no ângulo direito de ser colocado em frente ao um original.
Passo 9
Vamos agora criar um padrão, que nós vamos usar para aparecer nosso projeto um pouco. Criar um novo arquivo (File> New) com as seguintes configurações: Tamanho do 4px por 4px, resolução de 72 dpi, e um fundo transparente. Pegue a Ferramenta Lápis (B) e ajustar o tamanho para 1 px, crie o seguinte padrão usando uma cor branca (você pode querer aumentar o zoom de modo que o desenho será mais fácil). Uma vez que você é feito o desenho padrão, escolha Edit> Define Pattern e nomeie como "padrão de pontos."
Etapa 10
Dê um duplo clique no Player_L3 "camada e aplicar os estilos de camada seguinte.
Etapa 11
Duplicar o Player_L3 "camada e nomeie a nova camada" Player_L3_2 ", também a mudança da camada Blending Mode para Soft Light com 50% de opacidade. Dê um duplo clique nessa camada para aplicar os estilos de camada seguinte.
Etapa 12
Criar uma nova camada e nomeie como "Player_L3_Shade". Embora ainda nesta camada, clique no comando do Player_L3 "e adicionar algumas sombras para os lados direito e inferior da área selecionada (da mesma forma como fizemos no Passo 6).
Etapa 13
Agora vamos adicionar um pequeno brilho para o corpo do jogador. Criar uma nova camada e nomeie como "Player_Glare".Enquanto nesta camada, clique no comando do Player_L1 "camada para selecionar a sua forma. Preencha a área selecionada com branco e de-selecione a camada (Ctrl + D).
Selecione o conteúdo da "Player_Glare", escolha Select Seleção Transform> e pressione a seta para baixo sete vezes. Em seguida pressione a Seta para a direita cinco vezes para mover a área de seleção. Quando terminar, clique em Enter para aplicar a alteração. Clique em Excluir para excluir o conteúdo da área de seleção. Você agora tem a forma de brilho.
Transform (Ctrl + T) forma para mover e girar a forma no lugar, como mostrado. Variação da camada Blending Mode para Soft Light e clique duas vezes na camada para aplicar o estilo Gradient seguinte.
Etapa 14
O próximo passo é um pouco tedioso, eu admito. No entanto, o Photoshop não tem capacidade para alinhar formas sobre os caminhos, e por isso temos de fazer isso, passo a passo, de forma repetitiva.Pegue a ferramenta retângulo (U) e desenhar um retângulo na horizontal 5px de largura e 470px de comprimento (é possível desenhar um, em qualquer tamanho e, em seguida, alterar o seu tamanho usando o menu Transform, como você pode ver abaixo).
Pega o Path Selection Tool (A) e selecioná-lo. Verifique se você está no modo Add To Shape Area e, em seguida, Alt + Shift e arraste o retângulo até duplicá-lo. Repita este procedimento até que você começa vinte-cinco rectângulos. Agora vem a parte entediante - você vai precisar para rodar vinte e quatro destes retângulos, a fim de organizá-los em um círculo.
Você pode girá-los em multiplica -7,5 graus. Quando você é feito selecionar todas as formas usando o Path Selection Tool (A) e alinhar seus centros horizontais e verticais. Para finalizar esta etapa, selecione a ferramenta Ellipse (Shift + U), verifique se você está em Subtrair De Shape Area (- Modo), e desenhe um círculo grande restando apenas cerca de 10px ou mais a partir das linhas rectângulo original (ver abaixo).Repetir a última ação, desta vez com um Rectangle Tool (U) para remover todas as formas desnecessárias.Que você fez isso com esta etapa! Woohoo!.
Etapa 15
Nome da camada "Decorações" e aplicar alguns Inner Shadow com as seguintes configurações.
Etapa 16
Usando o Rectangle, Ellipse e Pen Tools, e os métodos descritos acima, crie o painel principal do jogador.Para criar o efeito 3D fazer da forma que você está interessado, o nome da camada "Main_Panel_1" e aplicar os estilos de camada seguinte.
Etapa 17
Em seguida, duplique a Main_Panel_1 "eo nome da nova camada" Main_Panel_2 ". Reduzir a forma para 95% da largura e altura de 92% de seu tamanho original clicando Command + T, e usar a barra de Transformação. Para finalizar o look, aplique um Gradiente Overlay, como mostrado.
Etapa 18
Vamos agora começar a criar os botões de controle de áudio e deslizantes. Escolha branca como sua cor de primeiro plano, pegue a ferramenta Elipse (Shift + U) e, segurando as teclas Alt + Shift, desenhar um círculo perfeito. Nome da camada Control_button_1 "." Dê um duplo clique na camada e aplique as seguintes configurações de Outer Glow.
Etapa 19
Duplicar o Control_button_1 "camada e renomeie a nova camada" Control_button_2 ". Reduzir o tamanho da forma para 97% utilizando os métodos já discutimos acima, e aplicar os seguintes Gradient Overlay.
Etapa 20
Repita o passo 19, desta vez sobre o Control_button_2 "camada", nomeando a nova camada "Control_button_3". A Gradiente Overlay aplicada a esta camada é o mesmo que na etapa anterior, não só inverteu.
Etapa 21
Criar uma nova camada e posicione-o acima da Control_button_3 "camada. Nome Control_Glare lo "."Agarre a Elliptical Marquee Tool (M) e desenhe uma forma oval, que se cruzam com o botão de gráficos.
Clique em Command + Shift + Alt no Control_button_1 "miniatura da camada - isso irá selecionar apenas a área que se cruza entre as duas seleções. Preencha este espaço com uma cor branca e ajustar a camada Blending Mode para Soft Light com opacidade de 70%.
Etapa 22
Grupo de todas as camadas criado nos passos 18-21 eo nome do grupo "Forward Button". Duplicar o grupo a fim de criar os botões para retroceder, parar, pausar e ações, em seguida, renomeá-los em conformidade. Redimensionar e posicionar os botões conforme mostrado abaixo.
Etapa 23
Criar os ícones de botões de controle usando a ferramenta Retângulo (U) repetir os métodos de Add To Shape Area e subtrair Shape Area, que nós cobrimos nas etapas anteriores. Coloque cada ícone em seu grupo botão apropriado abaixo do "Control_Glare botão". Além disso, ao criar os triângulos para os ícones avançar e retroceder, também criar um ícone para o jogo.
Etapa 24
Vamos agora criar o botão Play. Pegue a ferramenta Elipse (Shift + U) e desenhar um círculo perfeito, posicioná-lo entre os botões de pausa e stop. Nomeie esta camada Play_Button_1 "e aplicar os estilos de camada seguinte.
Etapa 25
Duplicar o Play_Button_1 "camada e renomeie a nova camada" Play_Button_2 ". Reduzir o tamanho da forma para 85% utilizando os métodos já discutimos anteriormente, e aplicar os estilos de camada seguinte.
Etapa 26
< /p>Repita o passo 21 ações para criar um brilho no botão play. Nome a nova camada "Play_Button_Glare" e alterar o seu Blending Mode para Soft Light com 70% de opacidade. Além disso, criar uma nova camada que você precisa para a posição abaixo "Play_Button_Glare camada" onde você vai colocar o ícone do jogo que você criou na etapa 23. Você também pode agrupar todas as camadas botão do jogo eo nome do grupo "PLAY".
Etapa 27
Use a ferramenta Elipse (Shift + U), Pen Tool (P), eo Add To Shape Area, também usar o método anterior para criar a área de fundo de botão. Certifique-se primeiro criar os círculos ao redor dos botões, de centro-alinhá-los horizontalmente e verticalmente, com os botões e, em seguida, conectá-los com a ferramenta Pen. Assim que estiver feito, o nome da camada "Buttons_Bk," colocá-lo atrás do botão de "grupo", e aplicar os estilos de camada seguinte.
Etapa 28
Utilizando a ferramenta Rounded Rectangle, crie a seguinte forma. Depois de ter a formas prontas, a mudança para a Ferramenta Retângulo (U) e clique no botão Subtrair da Área da Forma (-) na barra de opções. Desenhe um retângulo grande para cobrir a maior parte do lado esquerdo das linhas previamente criado. Quando terminar, mude o nome do layer "Volume_Levels" e aplicar os estilos de camada seguinte.
Etapa 29
Vamos agora começar nosso trabalho no volume e controles deslizantes saldo. Defina a sua cor de primeiro plano para # 8E8E8E, pegue a Rounded Rectangle Tool (Shift + U), definir o raio de 10px na Barra de Opções, e desenhe um retângulo de forma vertical. Nomeie a camada de forma "Volume_Rail" e ajustar a sua posição e escala de acordo com a imagem abaixo.Assim que estiver feito, aplicar os estilos de camada seguinte.
Etapa 30
Pegue a ferramenta Line (Shift + U), definir o peso de 2px na barra de opções e as cores de primeiro plano para # 3b3b3b. Em seguida, desenhar uma linha vertical no meio do "Volume_Rail forma". Você pode ajudar a si mesmo com dois guias que tenho que fazer as coisas um pouco mais precisos.
Quando terminar, o nome da camada "Volume_Rail_1", selecione a ferramenta Move (V), e alinhar os centros de duas camadas horizontais e verticais com barra de opções. Botão direito do mouse sobre o "Volume_Rail camada" e copiar o estilo da camada que a camada a camada que você acabou de criar.
Etapa 31
Criando o controle real é bastante fácil. Pegue a ferramenta retângulo (U) e desenhar um retângulo em qualquer parte do trilho deslizante, não se preocupe com o posicionamento real como você pode sempre alinhar horizontalmente a forma com a Volume_Rail_1 "camada. Quando estiver satisfeito com o tamanho da forma, mudar sua camada "Slider_1" e aplicar o seguinte (você adivinhou!) Estilos de camada.
Etapa 32
Para completar a barra simplesmente duplicar o Slider_1 "camada", e reduzir a escala para 95% da largura e altura de 90%, como já fizemos antes. Enquanto ainda no modo Transform, mover a forma, até quase atingir o final do Slider_1 a "forma, e pressione Enter. Renomeie esta layer "Slider_2" e adicione o seguinte Gradient Overlay.
Você também pode selecionar # a1a1a1 como sua cor de primeiro plano, pegue a ferramenta Line e desenhe uma pequena linha no meio do Slider_2 "forma para adicionar um toque mais realista para o controle deslizante.
Pegue a ferramenta de texto (T), selecione a fonte desejada e tamanho (eu usei a fonte Estrangelo Edessa em 10pt) e digite a palavra volume. Posicione o texto acima do controle deslizante. Em seguida, pegue a ferramenta Polygon (Shift + U), escolher 3 como o número de lados na barra de opções e tirar dois pequenos triângulos indicando cima / para baixo. Tanto o texto e os triângulos estão em cor # 414040.
Etapa 33
Grupo de todos os deslizante do volume camadas (incluindo o ferroviário) eo nome do grupo "Volume Slider". Duplicar a este grupo, renomeá-lo "Balance Slider" (lembre-se também renomear as camadas de acordo) e, em seguida, girar e dimensionar as formas em sua posição como mostrado abaixo. Observe, por causa da rotação, alguns dos valores camada estilo terão de ser ajustados:
- No "Balance_Rail camada de" mudar o ângulo Gradient Overlay para -90 graus.
- Em todas as camadas deslizante, o gradiente de ângulo de sobreposição deve ser de 180 graus.
Selecione # 414040 como sua cor de primeiro plano e usando a Elipse e Retângulo Arredondado Tools (Shift + U) criar o ícone de equilíbrio como aparece abaixo. Para terminar, pegue a ferramenta de texto e tipo L e R, e posicioná-los como no exemplo (eu usei a fonte Estrangelo Edessa em um tamanho de 10pt).
Etapa 34
Vamos agora concentrar-se no painel principal do jogador. Para esta seção eu ter usado uma fonte livre chamado Arcade.Escolhi essa fonte como parte do meu conceito de design global, mas se você seguiu um conceito diferente, sinta-se livre para usar uma diferente. Painel principal do jogador é composto das seguintes partes.
Etapa 35
Vamos começar com o elemento de barra de progresso. Escolha branca como sua cor de primeiro plano, pegue a ferramenta Line (Shift + U), selecione 1px como o peso da barra de opções, e desenhar uma linha de um lado do painel principal para o seu oposto, de preferência no meio. Nomeie esta camada "Decoração" e crie uma nova camada de máscara. Em seguida, quando a máscara está selecionada, escolha a ferramenta gradiente (G) e preparar um gradiente como mostrado abaixo. Desenhe o gradiente conforme marcado abaixo para criar o efeito de desvanecimento desejado.
Em seguida pegar a Ferramenta Retângulo (U), prima (D) para redefinir a sua paleta de cores, e desenhe um retângulo como mostrado abaixo. Nomeie esta camada Progress_1 "e alinhar verticalmente centro desta camada com a" Decoração "camada.Aplique o abaixo especificado Stroke.
Pegue a ferramenta retângulo (U) novamente, escolha # c97507 como sua cor principal, e desenhar um retângulo dentro do Progress_1 "forma como mostrado abaixo. Nomeie esta camada Progress_2 "."
Etapa 36
Use o mesmo método descrito na Etapa 35 e adicionar a informação de música (artista, álbum, canção e nomes). Você também pode adicionar a informação de faixa adicional, como o comprimento da canção de progresso, qualidade da via eo tipo de arquivo. No meu projeto eu usei algumas Outer Glow estalar fora elemento da canção um pouco progresso.
Etapa 37
Use a ferramenta de texto (T) e Custom Shape Tool (Shift + U) para criar os botões funcionais, o mais tardar oferece uma variedade de formas personalizadas que você pode usar para criar seus ícones. Para terminar o desenho do painel principal, escolha o branco como cor principal. Em seguida, pegue a Pen Tool (P) e desenhe uma forma brilho semelhante ao exemplo abaixo. Quando terminar o nome de "camada Panel_Glare", e aplicar o Gradiente Overlay descritos abaixo, em seguida, alterar a camada de Blending Mode para Soft Light com opacidade de 40%.
Etapa 38
Como você pode ver na imagem final, eu acrescentei alguns decoração atrás do painel principal e de fundo dos botões de controle '. Para criar esta decoração agarrar a Ellipse Tool (Shift + U) e desenhe um grande círculo perfeito. Selecione a Ferramenta Retângulo (U), escolher Subtrair da Área da Forma na barra de opções.
Agora, desenhe dois rectângulos. Uma cruza do lado superior e inferior do outro lado do círculo.Redimensionar a forma para caber na área apropriada. Depois de ter o formato pronto, coloque a camada abaixo da "camada Buttons_Bk". Aplicar os estilos de camada, como mostrado.
Etapa 39
Os últimos elementos para criar são a fechar, minimizar e botões Compact. O botão fechar é muito simples para criar como é feito usando o mesmo método foi utilizado para os botões de controle (Passos 18 a 21).A diferença está na camada estilos. Nas imagens abaixo você pode ver as configurações e como criar esse ícone Fechar. Não vou explicar como criar os ícones Compact Minimizar e, como eles são muito fáceis de realizar.
Etapa 40
Agora é hora de começar a envolver as coisas. Grupo de todas as camadas (excluindo o fundo claro) eo nome do grupo "Jogador 1". Duplicar o grupo duas vezes, o nome de dois novos grupos "Jogador 2" e "Jogador 3" e re-ordenar os três grupos em ordem decrescente.
Mesclar todas as camadas em "Player 1" do grupo, o nome da nova camada "Final1". Duplicar a camada e vá para Filter> Blur> Gaussian Blur, em seguida, selecione Raio de 1,0 e aplicar. Criar uma camada de máscara, prima (D) para redefinir a sua cor e palettem (X) para fazer o preto como cor principal.
Selecione a ferramenta Gradient certificando-se você está no modo Radial Gradient. Em seguida utilizar os novos padrão de fundo predefinido para aplicar o gradiente a partir do centro do jogador para o exterior, de modo que a área central do jogador será definida, enquanto as arestas será um pouco embaçada. Este será usado para criar uma profundidade de efeito de campo.Nomeie esta camada "Final1_Blur".
Etapa 41
Criar uma nova camada, pegue a ferramenta de gradiente novamente (G), e selecione o Foreground to Transparent gradiente predefinido. Desenhe novamente a partir do centro do jogador para o exterior.Clique em Command + T para transformar o gradiente e escalá-lo de cima para baixo criando uma sombra agradável na largura do jogador. Coloque a forma um pouco mais longe do fundo do jogador para criar um efeito de flutuação. Nomeie esta camada "Fianl1_Shadow" e colocá-lo sob o título "Final1" camada.
Etapa 42
Duplicar o Final1 "camada e coloque-o em" Final1_Shadow ". Clique em Command + T para transformar a forma. Em seguida, enquanto que no modo de controle do mouse sobre a forma transformada e escolha Flip Vertical. Arraste a forma transformada para baixo, coloque-o no meio da área de sombra e pressione Enter. Nomeie esta camada Final1_ref "," mudar sua opacidade para 50% e colocá-lo sob o título "Final1_Shadow camada".
Criar uma camada de máscara, prima (D) para redefinir a sua paleta de cores. Selecione a ferramenta Gradient certificando-se de que você está no modo de gradiente Radial e utilizar os novos padrão de fundo predefinido para aplicar o gradiente de pequeno a partir do topo do jogador virado para o seu centro. Isto fará uma bela reflexão de um objeto arredondado.
Imagem Final
That's it! Nós somos feitos! Na minha imagem final eu mudei os temas dos jogadores repetido 'cor, posicionado-los na parte de trás com mais Gaussian Blur aplicado. Eu realmente espero que você tenha aprendido muito com este tutorial, e eu não posso esperar para ver você colocar estas práticas em bom uso. Você pode visualizar a imagem final abaixo ou visualizar uma versão maior aqui.