quarta-feira, 9 de fevereiro de 2011

Aprenda a criar um velocímetro no Photoshop

Neste Tutorial você vai aprender a criar um elegante velocímetro
O que nós vamos estar criando

Speedometer Design In Photoshop

Criando o documento

Crie um novo documento (Ctrl + N) 800 x 600 pixels com qualquer cor de fundo. Defina o seu primeiro plano para a cor # 353535 e cor de fundo # 161616, em seguida, selecione a ferramenta "Gradient" (G) com um gradiente radial.

Speedometer Design In Photoshop

Arraste o gradiente radial do centro para fora sua tela até que você tenha algo como isto.

Speedometer Design In Photoshop

Criando o Disque Velocímetro

Em cada velocímetro existem pequenas linhas que indica a velocidade que você está indo, você pode simplesmente criar essas linhas usando uma mistura de máscaras de vetor e caminhos. Uma maneira muito mais fácil seria usar um caminho circular, a ferramenta de texto.

Selecione o "Círculo" ferramenta (U), em seguida, definir o tipo de círculo para caminhos.

Speedometer Design In Photoshop

Arraste um caminho circular no meio da sua tela.

Dica rápida:

Ao arrastar o caminho para a sua tela mantenha pressionada a tecla Shift no teclado, fazendo isso irá garantir que o círculo é o mesmo tamanho em toda a volta contra o círculo parecendo uma elipse.

Speedometer Design In Photoshop

Uma vez que você estiver satisfeito com seu círculo selecione a ferramenta "Type" (T). Se você mover o cursor sobre o caminho que você vai notar o cursor mudar para algo que se assemelha a uma linha com alguns pontos curvas passando por ele. Quando o cursor aparecer clique com o botão esquerdo do mouse para começar a escrever ao longo do caminho.

Selecione a fonte "Verdana" com um tamanho de 12px, em seguida, usando a linha de caracteres do teclado adicionar algumas linhas.

Speedometer Design In Photoshop

Depois de adicionar algumas linhas de selecionar uma linha a cada 4 linhas e torná-lo maior, alterando o tamanho da fonte para 18px. A imagem abaixo explica muito melhor.

Speedometer Design In Photoshop

Assim que terminar de fazer suas linhas de destacar o último par de linha e transformá-los vermelhos.

Speedometer Design In Photoshop

Usando as técnicas aprendidas anteriormente criar um outro caminho circular dentro de seu primeiro, mas torná-lo um pouco menor. Usando a ferramenta "Type" (T) desta vez acrescentar alguns pontos.

Speedometer Design In Photoshop

Finalmente, para completar o taquímetro adicionar seus números e qualquer outro texto adicional que você pode querer.

Speedometer Design In Photoshop

Criando O Círculo Velocímetro Interior

Selecione o "Círculo" ferramenta (U), em seguida, em uma nova camada abaixo das camadas de seu dial arrastar para fora de um círculo. O círculo deve ser maior que a sua marca.

Speedometer Design In Photoshop

Depois de criar o seu círculo adicionar os estilos de camada seguinte.

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Ao adicionar a sobreposição de gradiente, arraste o círculo em sua tela no canto superior esquerdo do "Inner Circle".

Speedometer Design In Photoshop

Você deve ter algo parecido com isso.

Speedometer Design In Photoshop

Criando o círculo cromado exterior

Selecione o "Círculo" ferramenta (U), em seguida, em uma nova camada abaixo do "Inner Circle" camada de criar um círculo maior.

Speedometer Design In Photoshop

Uma vez que você criou seu novo círculo maior adicionar os estilos de camada seguinte.

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Você deve ter algo parecido com isso.

Speedometer Design In Photoshop

Criando O Círculo agulha do velocímetro

Selecione o "Círculo" ferramenta (U) crie um círculo pequeno dentro do seu velocímetro.

Speedometer Design In Photoshop

Agora adicione os estilos de camada seguinte.

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Você deve ter algo parecido com isso.

Speedometer Design In Photoshop

Volte a seleccionar o "Círculo" ferramenta (U) e crie um pequeno branco (# ffffff) círculo dentro do círculo agulha do velocímetro, uma vez que você tenha criado o círculo definir a opacidade para 5%.

Speedometer Design In Photoshop

Criando a agulha do velocímetro

Selecione o "Círculo" ferramenta (U) crie um círculo pequeno dentro de seu círculo agulha do velocímetro.

Speedometer Design In Photoshop

Agora selecione a ferramenta caneta, uma vez selecionados mudar o tipo de "Caminhos" e selecione "Add to shape area".

Speedometer Design In Photoshop

Zoom em seu círculo, selecione a máscara de vetor dentro da janela de camadas para que o círculo, em seguida, chamar a agulha a partir do lado do círculo.

Speedometer Design In Photoshop

Depois de ter criado a agulha adicionar os estilos de camada seguinte.

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Seu agulha deve agora parecido com este.

Speedometer Design In Photoshop

Trazendo o velocímetro para a vida com algumas reflexões

No último final de uma etapa que eu vou mostrar para você como adicionar algumas reflexões para o velocímetro, primeiro selecione a opção "Polygonal Lasso" ferramenta (L). Uma vez selecionada faça uma seleção em todo o velocímetro como na imagem abaixo.

Speedometer Design In Photoshop

Fill (G) a seleção com a cor branca (# ffffff) e coloque uma seleção em torno de seu velocímetro "Inner Circle".

Dica rápida:

Para carregar rapidamente uma seleção em torno de um objeto, basta clicar na miniatura pouco na janela de camadas, enquanto mantendo a tecla Ctrl no teclado. Alternativamente, você pode selecionar a partir do menu "Load Selection Select>".

Speedometer Design In Photoshop

Agora vá em "Select> Inverse" (Ctrl + Shift + I), em seguida, pressione a tecla Delete no teclado. Você deve ser deixado com uma forma que fica dentro do seu círculo interno do velocímetro.

Speedometer Design In Photoshop

Selecione o "Polygonal Lasso" ferramenta (L) de novo em seguida, faça uma seleção no meio da forma branca. Quando estiver satisfeito com a seleção bateu a tecla delete.

Speedometer Design In Photoshop

Em seguida, adicione um gradiente overlay a sua forma branca usando as configurações padrão, em seguida, defina a opacidade para 5%. Você deve ficar com algo parecido com isto.

Speedometer Design In Photoshop

Agora estavam indo para adicionar uma grande reflexão de luz até a borda do velocímetro "Outer Circle". Selecione a opção "Elliptical Marquee" ferramenta (M) em seguida, faça uma elipse na parte superior esquerda do velocímetro círculo exterior. Fill (G) a elipse com a cor branca (# ffffff).

Speedometer Design In Photoshop

Agora vá em "Edit> Transform> Warp", no menu selecione urdidura arco.

Speedometer Design In Photoshop

Depois de selecionar arco a partir do menu, arraste o ponto de ancoragem de inclinação da elipse, em seguida, "Free Transform" (Ctrl + T) e girar a elipse assim segue a curva do círculo exterior.

Speedometer Design In Photoshop

Agora guassian borrar a elipse, vá para "Filter> Blur> Blur guassian", borrão por cerca de 3-4 pixels. Uma vez que você desfez a elipse definir a opacidade para cerca de 70%.

Speedometer Design In Photoshop

Conclusão

É isso que você terminou o tutorial, espero que tenha gostado gostei. Você pode agora dar um passo mais longe e adicionar um conta-rotações usando as mesmas técnicas que você aprendeu ou talvez acrescentar mais algumas pranchas traço itens como os pequenos símbolos de incandescência, ou mesmo um medidor de combustível.

Speedometer Design In Photoshop

2 comentários:

Unknown disse...

ficou show,mas aqueles que estão começando,falta alguns detalhes,como por ex:quantas linhas vc colocou no círculo,etc....mas tá dá hr pra depois animar no After Effects!

Lilli Conte disse...

Olá poderia me disponibilizar este em pds? meu forte é foto não consegui fazer bem certinho.

Postar um comentário