You are on page 1of 11

13th September 2011

Postado originalmente em http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-4-


retratos+tipograficos+feitos+com+photoshop.html#anc-pagina [http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-4-
retratos+tipograficos+feitos+com+photoshop.html#anc-pagina] em 04/04/2010 s 12h 52min
Este tutorial tem como objetivo mostrar que ao experimentar com peso, tamanho, espaamento e
opacidade da fonte possvel criar luzes, sombras e profundidade na imagem. A tcnica pode ser aplicada
s imagens de seu gosto.
[http://www.photoshopcreative.com.br/upload/imagens_upload/00(48).jpg]
[http://2.bp.blogspot.com/-pFcULjlQThI/Tm7PUbseXVI/AAAAAAAADKg/1kJQlwgf8r8/s1600/1.jpg]
Tipografia [http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-1-
retratos+tipograficos+feitos+com+photoshop.html] no apenas escolher uma fonte bonita, mas a forma como
arrumamos as letras no layout, decidindo o tamanho, peso e tipo de fonte adequados para transmitir a
mensagem do jeito mais simples.
INFORMTICA EM ARTES GRFICAS II: Retratos
tipogrficos feitos com PHOTOSHOP
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
1 de 11 06/01/2014 13:28
Nossa escolha de palavras e fontes para esta imagem funciona bem com o retrato que desejamos criar
[http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-1-retratos+tipograficos+feitos+com+photoshop.html] , mas
encorajamos voc a experimentar com suas prprias fontes e palavras para obter resultados nicos relevantes
no retrato construdo.
A hora de brincar [http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-1-
retratos+tipograficos+feitos+com+photoshop.html] com fontes, fundos texturizados e gradientes. Voc pode ser to
detalhado quanto desejar. Experimente estas instrues e deixe voar sua imaginao.
1 Prepare a imagem de referncia
[http://3.bp.blogspot.com/-hQ_9JkxB_xc
/Tm7PVJ2pReI/AAAAAAAADKk/DR2jhr7J41o/s1600/2.jpg]
Abra a imagem que ser usada. Aplique Image > Mode > Grayscale a ela e use Levels e Curvespara aumentar o
contraste, tornando as reas de luz e sombra fceis [http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-1-
retratos+tipograficos+feitos+com+photoshop.html] de perceber.
[http://3.bp.blogspot.com/-4-fibowkIkY
/Tm7PWNG4aJI/AAAAAAAADKo/RSEGHX6smr0/s1600/3.jpg]
2 Sombras e luzes V a Image > Adjustments > Shadow/ Highlight. Brinque com os deslizantes para exibir
luzes e sombras suficientes. Para Shadows, usamos: Amount = 25%, Tonal Width = 35% e Radius = 48
px. Para Highlights usamos:Amount = 34%, Tonal Width = 0% e Radius = 78 px.
[http://www.photoshopcreative.com.br/upload/imagens_upload/03(169).jpg] [http://www.photoshopcreative.com.br/upload
/imagens_upload/03(169).jpg]
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
2 de 11 06/01/2014 13:28
[http://2.bp.blogspot.com/-ijXNpGUcf8Y
/Tm7PXedtTYI/AAAAAAAADKs/mx59R1yiKuo/s1600/4.jpg]
3 Recorte V o menu Select > Color Range e escolha as sombras. Inverta a seleo, aplique uma Quick Mask e
apague as reas mascaradas ao redor da modelo usando a ferramenta Brush ajustada para branco. Depois de
mascarar a modelo, saia da Quick Mask e aplique Select > Feather de 3 px. Copie e abra um novo documento.
Cole a imagem como uma nova camada acima da camada de fundo. Salve o documento, pois trabalharemos
nele. O recorte no precisa ser muito exato, pois servir apenas como referncia.
[http://3.bp.blogspot.com/-XQw1rS5bxeo
/Tm7PYLWXrxI/AAAAAAAADKw/Pz_dUEg2EzE/s1600/5.jpg]
4 Brilho e contraste Agora que temos nossa referncia, precisamos acentuar as luzes e sombras para que seja
mais fcil posicionar o texto. Abra o ajuste deBrightness/Contrast do menu Image > Adjustments e
aumente Brightness +10 eContrast +20. Seu guia est pronto para receber texto.
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
3 de 11 06/01/2014 13:28
[http://3.bp.blogspot.com/-VI9ZBIX6EgU/Tm7PY23dQQI
/AAAAAAAADK0/bDI5ywrQcIE/s1600/6.jpg]
5 Diminua a opacidade Reduza o valor de opacidade da camada de referncia para que o texto fique visvel
quando for aplicado. Comece com os trechos maiores e no se esquea de pr cada linha em uma camada
separada caso seja necessrio reorganizar o posicionamento ou alterar a fonte. Lembre-se tambm de salvar
em intervalos regulares.
[http://www.photoshopcreative.com.br/upload/imagens_upload/06(154).jpg] [http://www.photoshopcreative.com.br/upload
/imagens_upload/06(154).jpg]
[http://4.bp.blogspot.com/-1_rxNC-
Dy-U/Tm7PZTuijkI/AAAAAAAADK4/aMSsDIiwB1s/s1600/7.jpg]
6 Posicionamento do texto Depois de arranjar o texto principal, ponha o texto ligeiramente menor logo atrs
do maior para que este se destaque [http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-2-
retratos+tipograficos+feitos+com+photoshop.html] um pouco mais. Se quiser, adicione um discreto Drop Shadow s
linhas principais em camadas de ajuste para destac-las mais ainda, mas isso opcional e pode ser removido
posteriormente caso desejado.
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
4 de 11 06/01/2014 13:28
[http://3.bp.blogspot.com/-o6899-
ZTVU0/Tm7PaeoAGmI/AAAAAAAADK8/IHAJ2kI9Iks/s1600/8.jpg]
7 Comece a empilhar as sombras Quando estiver posicionando o texto, o truque
[http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-2-retratos+tipograficos+feitos+com+photoshop.html] fazer
linhas menores, mais aproximadas e com peso maior nas reas de sombra da imagem de referncia, e texto
maior, mais espaado e com menos peso nas reas de luz. Assim se cria a profundidade da imagem final, que,
de outro, modo pareceria plana.
[http://3.bp.blogspot.com/-E90fhsF7zLI/Tm7PbdEQcTI/AAAAAAAADLA/4bJbQoFCzm0/s1600/9.jpg]
8 Relatrio de progresso Enquanto constri o cabelo, oculte a camada de referncia ocasionalmente para
observar seu progresso. preciso poder perceber as reas sombreadas e iluminadas. Para facilitar
[http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-2-retratos+tipograficos+feitos+com+photoshop.html] , agrupe
as camadas na paleta de acordo com as partes do retrato em que est trabalhando. Continue com esse processo
ao longo do tutorial.
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
5 de 11 06/01/2014 13:28
[http://4.bp.blogspot.com/-VJsn4rHbCAk/Tm7Pb-9NIzI/AAAAAAAADLE/i1--1fuMkpo/s1600/10.jpg]
9 Construa os olhos Depois de completar o cabelo, o retrato precisa de um rosto. Comeamos com os olhos.
Usando o mesmo mtodo do cabelo, mantenha o texto bem prximo nas reas escuras e deixe as brancas sem
nada. Use o menu Edit > Transform > Rotate no texto para seguir a forma do olho. No precisa usar palavras
diferentes. Para ganhar tempo, basta duplicar as camadas de texto e transformar. Mexa na opacidade
das letras [http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-2-
retratos+tipograficos+feitos+com+photoshop.html] nos clios inferiores.
[http://www.photoshopcreative.com.br/upload/imagens_upload/10(126).jpg] [http://www.photoshopcreative.com.br/upload
/imagens_upload/10(126).jpg]
[http://4.bp.blogspot.com/-AK6eG6Ykh5E/Tm7PceFRWNI/AAAAAAAADLI/2Ovbr6halCI/s1600/11.jpg]
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
6 de 11 06/01/2014 13:28
10 Sobrancelhas e sombra Faa o mesmo nas sobrancelhas. Tente usar palavras mais longas para preencher a
forma e use o menu Edit > Transform > Warp para seguir a curva. Para a sombra sob o olho, brinque com o
valor de opacidade das camadas de texto e o peso da fonte, j que essa sombra tem de ser perceptivelmente
mais clara que os traos principais do rosto.
[http://3.bp.blogspot.com/-ACcT6oWPKpc
/Tm7PdIYK-3I/AAAAAAAADLM/9Eh9olW_Ntg/s1600/12.jpg]
11 Comece o nariz O nariz, acreditamos, a parte mais difcil do rosto. preciso usar todas as tcnicas
aprendidas at agora. O sombreamento um importante fator. Utilize as ferramentas de transformao para
contornar o nariz, mas brinque tambm com o valor de opacidade do texto para as transies de sombra.
[http://1.bp.blogspot.com/-mxMVQ38coWk
/Tm7Pd1fYv4I/AAAAAAAADLQ/zyCHdsTfgSY/s1600/13%252C.jpg]
12 Repita as sombras Tente duplicar as camadas de texto para o outro lado do nariz para poupar tempo e
brinque com as ferramentas de transformao para dar forma. Quando for hora de sombrear, mantenha a
opacidade do texto mais forte nas narinas e duplique o texto, reduzindo a opacidade conforme a sombra
esmorece.
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
7 de 11 06/01/2014 13:28
[http://3.bp.blogspot.com/-bvQPdBQh4fA
/Tm7Perob5QI/AAAAAAAADLU/40iol6mKwmU/s1600/14.jpg]
13 Lbios atraentes Para fazer os lbios, siga as mesmas etapas do nariz. Concentre-se nas reas escuras e
depois trabalhe o sombreamento. Demora bastante at acertar as feies, mas vale a pena insistir para chegar
a um efeito realstico no final.
[http://4.bp.blogspot.com/-DjJIMzJnCB0
/Tm7PfcRKKyI/AAAAAAAADLY/KdfOLsWYcfQ/s1600/15.jpg]
14 Relatrio de progresso facial Terminado o rosto, esconda a camada de referncia para observar seu
progresso. Nota-se que o rosto est tomando forma e vemos a diferena entre as feies principais e o
sombreamento. Agora o rosto precisa de um contorno e de alguns toques finais.
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
8 de 11 06/01/2014 13:28
[http://2.bp.blogspot.com/-oE_waYLV5YQ
/Tm7PgL4dGlI/AAAAAAAADLc/5tNDHm9XcQQ/s1600/16.jpg]
15 Siga o trao Tendo em vista que as feies esto prontas, vamos criar [http://www.photoshopcreative.com.br
/tutoriais/aq0-122-7374-3-retratos+tipograficos+feitos+com+photoshop.html] um contorno. Percebemos que as
palavras menores funcionam bem. Duplique etransforme [http://www.photoshopcreative.com.br/tutoriais
/aq0-122-7374-3-retratos+tipograficos+feitos+com+photoshop.html] as palavras para seguir a forma. O queixo ficou
meio achatado, por isso preciso sombre-lo um pouco. Repita, alterando gradualmente a opacidade do texto
e siga a forma para criar um dgrad.
[http://3.bp.blogspot.com/-T3i4WS5FEqU
/Tm7PhLpxVHI/AAAAAAAADLg/rKcnpzyRSdY/s1600/17.jpg]
16 Mas do rosto e pescoo Para dar mais profundidade ao rosto, vamos usar sombras que mostrem o
contorno das mas do rosto. Use a mesma palavra para manter a consistncia e empilhe as palavras
ligeiramente inclinadas para mostrar a direo da sombra, mexendo na opacidade e seguindo a foto
[http://www.photoshopcreative.com.br/tutoriais/aq0-122-7374-3-retratos+tipograficos+feitos+com+photoshop.html] guia.
Faa o mesmo no pescoo, comeando com texto e opacidade mais pesados sob o queixo e terminando com
valores mais leves.
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
9 de 11 06/01/2014 13:28
[http://1.bp.blogspot.com/-qMUVdEaGbb0/Tm7PiVNwzOI/AAAAAAAADLk/Mo8cQ8ZNjVk/s1600/18.jpg]
17 Achate se ousar Quando estiver satisfeito, selecione as camadas de texto (excluindo o Background) e
selecione Layers > Merge Layers (mas mantenha uma verso com as camadas para uso futuro). Utilize a
ferramenta Burn com Exposure 100% sobre as reas de sombra para acentu-las.
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
10 de 11 06/01/2014 13:28
[http://1.bp.blogspot.com/-ByZWDOrwgBM/Tm7PjGq0rKI/AAAAAAAADLo/mEiU_Xta254/s1600/19.jpg]
18 Brinque com gradientes Altere Image > Mode para CMYK e aplique um estilo de camada Gradient
Overlay na nova camada de texto. Brinque com os gradientes, direo e modos de mesclagem dos efeitos na
caixa de dilogo Layer Styles. Aqui, usamos o modo Linear Light.
19 Fundo Adicione uma camada de ajuste Gradient Fillacima da camada Background e abaixo da de texto.
Escolhemos um gradiente branco para azul/verde claro, Reflected, Angle = -45 e Scale = 150%. Finalmente,
selecione a miniatura da mscara da camada de ajuste e aplique uma textura Sandstone (Filter > Texture >
Texturizer) para dar mais profundidade.
Postado h 13th September 2011 por REGIS
INFORMTICA EM ARTES GRFICAS II: Retratos tipogrficos feito... http://regisdesigner.blogspot.com.br/2011/09/informatica-em-artes-graf...
11 de 11 06/01/2014 13:28