13/11/2014

PHOTOSHOP CREATIVE - Aprenda como criar cones grficos realsticos no Photoshop

Aprenda como criar cones grficos realsticos no Photoshop

Publicada em

ltima atualizao em 06/07/2012 17h 19min

Crie cones ilustrados usando as ferramentas Shape, Gradient e Brush.

Os cones so smbolos grficos fascinantes. Eles representam a sntese de um conceito ou ideia, mas diferem dos logotipos pela quantidade de detalhes
representados dentro deles. Em um certo sentido, eles ficam em algum lugar entre a ilustrao e os logotipos. Uma das melhores coisas a respeito de seu design
a extrema ateno aos detalhes para cada item, reproduzindo a realidade por meio de tcnicas como a perspectiva e a imitao da superfcie dos materiais.
Os cones so otimizados para serem compreensveis em diferentes resolues e tamanhos. So criados para simplificar o acesso s funes dos dispositivos digitais
em interfaces grficas. Os critrios para o design mudam de acordo com as especificaes dos fabricantes, dispositivos mveis ou sistemas operacionais. Essas
especificaes devem ser levadas em conta pelos designers, pois so fundamentais para a exibio correta do trabalho concludo.
Existem muitas maneiras de tratar a criao de cones, mas neste tutorial usaremos principalmente a pintura digital e as mscaras. Um recurso bacana do
Photoshop para aplicar neste projeto a ferramenta Gradient, que tambm exploraremos para mostrar como ela permite criar efeitos especiais de um modo
muito simples.

Especialista
Mirko Santangelo | www.mirkosantangelo.com | @mirkosantangelo
Mirko um designer visual premiado e um Adobe Certified Expert italiano. apaixonado por aprender e ensinar tudo sobre os programas da Adobe e por descobrir
novas tcnicas para suas criaes grficas.

Arquivos iniciais

Voc no precisa de nenhum arquivo para completar este tutorial, pois tudo ser criado no Photoshop.

Criao de um porta-lpis

Crie um cone estiloso usando formas vetoriais e dgrads

01 Tela e formas bsicas

Abra seu modelo a 10241024 px, aplicando uma rea de 512512 com View > Rulers > Guides, que uma das resolues
mais altas suportadas pelos sistemas operacionais. Defina um fundo cinza e desenhe uma forma com a ferramenta
Rounded Rectangle (U), usando o Radius mais apropriado para criar as bordas curvas. Usando a ferramenta Transform
(Cmd/Ctrl + T), altere a forma anterior usando o modo Perspective; com Ctrl/clique e selecione um controle de
transformao. Inclua duas elipses no alto e embaixo usando a ferramenta Ellipse (U).

02 Defina o recipiente

Adicione uma borda parte superior do pote com duas elipses, usando a segunda para apagar o centro da primeira com a opo Subtract (barra de opes). D
Cmd/Ctrl + Shift e clique na miniatura da forma principal do recipiente. Crie um novo grupo e crie uma mscara de camada com base na seleo ativa. Em
camadas agrupadas separadas, pinte as luzes (branco) e sombras (preto) usando um pincel suave com 20% de opacidade, isolando instantaneamente a aplicao
rea mascarada. Experimente diferentes modos de mesclagem como Soft Light e Overlay.

http://photoshopcreative.com.br/imprimir/7757/

1/3

13/11/2014

PHOTOSHOP CREATIVE - Aprenda como criar cones grficos realsticos no Photoshop

03 Mscaras e reflexos

Use o mesmo mtodo para adicionar luzes e sombras borda e inclua um efeito de luz criando uma nova camada e
fazendo uma seleo da forma da borda. Preencha com branco, pressione a seta do teclado para cima duas vezes e
Backspace para remover parte da camada sem excluir toda a borda. Refine com uma mscara e mude a mesclagem para
Overlay. Para dar um visual deplstico brilhante superfcie do porta-lpis, desenhe formas brancas com a ferramenta
Pen no modo Shapes na parte da frente e aplique uma mscara de camada a cada uma delas..

04 Pincis

D volume ao corpo do pincel usando um dgrad linear de preto para transparente sobre a
mscara das camadas de forma. Ajuste o modo de mesclagem dessas camadas para Overlay.
Desenhe uma forma para a parte metlica, adicionando uma nova camada definida como mscara
de corte; aplique a ela um dgrad Transparent Reflected a 40% de opacidade. Alterne entre o
preto e o branco como cor de primeiro plano.

05 Cerdas e giz de cera

A ponta de nosso pincel feita de uma forma dura com uma mscara de camada vinculada da qual voc precisa apagar
com um pincel redondo pequeno para simular os pelos. Em uma nova camada com modo Overlay, ative a opo Scattering
na paleta Brush e pinte a textura das cerdas com pincis pequenos em preto e branco e aplique Motion Blur, se desejar.
Repita o mtodo de iluminao do passo 2, mais uma vez em camadas separadas. A seguir, comece a construir a forma do
giz a partir dos efeitos mostrados, repetindo os processos de iluminao para separar cada rea.

06 Lpis

A etiqueta do giz criada com uma simples forma preta, mascarando as partes superiores para criar um efeito de listra. O
lpis construdo como o giz de cera, por meio de camadas de forma em cores planas, e as luzes e sombras so feitas a pincel
usando-se as mscaras de camada com a seleo ativa. A seguir, importe uma textura de madeira usamos uma amostra de
www.jammurch.deviantart.com aplicando-a como mscara de corte sobre a forma do lpis. Defina um modo de mesclagem
Overlay com 80% de opacidade. Usando uma mscara, mescle o grafite madeira, criando uma transio suave.

07 Canetinhas

As canetas hidrogrficas so formas cilndricas entre as quais existe uma borda, criada com um estilo de camada Inner Shadow branco ajustado para Overlay,
Distance de 0 px, Size de 5 px e Choke de 20%. Crie reflexos ntidos com listras desenhadas com a ferramenta Rectangular Marquee (M). Preencha com branco
slido e ajuste a mesclagem para Overlay. A rgua comea com uma forma retangular, iluminada com a ferramenta Rectangle Marquee em camadas separadas.

http://photoshopcreative.com.br/imprimir/7757/

2/3

13/11/2014

PHOTOSHOP CREATIVE - Aprenda como criar cones grficos realsticos no Photoshop

08 Finalize a rgua

Em uma nova camada, desenhe uma linha fina na horizontal com a ferramenta Pencil (B) aplicando um estilo de camada
Bevel and Emboss no lado de dentro com 1% Depth, 0 px Size e 0% Shadow Opacity. Duplique e posicione essa camada
junto rgua, adicionando em seguida os nmeros. Ponha todos os objetos em um grupo e crie uma mscara de camada
para ele, usando-a para ocultar as reas que ficam encobertas pelo porta-lpis. Em uma nova camada, pinte as sombras
dos objetos dentro do porta-lpis usando um pincel suave a 20% de opacidade.

09 Toques finais

Em uma nova camada, adicione uma sombra em dgrad, a partir da parte inferior da abertura do porta-lpis. As partes
metlicas dos pincis devem refletir os objetos vizinhos. Para imitar esse efeito, crie uma nova camada com o modo de
mesclagem Color, usando um pincel suave em baixa opacidade para pintar as cores correspondentes nos locais em que os
objetos devem ser refletidos. Usando uma camada de ajuste de Hue/Saturation, adicione um roxo suave ao fundo e uma
sombra abaixo do porta-lpis.

http://photoshopcreative.com.br/imprimir/7757/

3/3