Modifique a cor do cabelo em fotos com Photoshop

• APRENDA DE TÉCNICAS RÁPIDAS A DICAS PROFISSIONAIS• MELHOREQUALQUER TIPO DEFOTOGRAFIA
• CRIE MONTAGENS REALISTAS• APLIQUE EFEITOS AVANÇADOS • TRATEMODELOSCOMO NASREVISTAS
PHOTOSHOPAPRENDA
CURSOCOMPLETO
Criaçãodebrushes|Ferramentas|Actions|Ediçãodecores|Tratamentodepeles|Recortedecabelos
Vetores|Ilustrações|Montagens|Efeitos|Integração|PhotoshopparawebEMUITOMAIS
+DE 100
PÁGINAS
DETUTORIAIS
ILUSTRADOS
PASSOAPASSO
C
M
Y
CM
MY
CY
CMY
K
aprenda_facil_photshop_capa_contra.ai 11/12/2008 17:15:58aprenda_facil_photshop_capa_contra.ai 11/12/2008 17:15:58

2-4 expediente e sumário - ok.indd 12-4 expediente e sumário - ok.indd 1 9/12/2008 19:38:389/12/2008 19:38:38

Diretor editorial: Alessio Fon Melozo
Coordenador editorial: Hudson de Almeida
REDAÇÃO
Edição: Fellipe Maschio
Arte: Fabio F. Souza e Ricardo Natali
Capa e embalagem: Editoria de Design
Revisão: Sirlene Farias e Rafael Faber
PUBLICIDADE
Cassetari Assessoria em Comunicação
ATENDIMENTO AO LEITOR – SUPORTE
Horário de atendimento: das 9h às 18h
e-mail: atendimento@digerati.com.br,
suporte@digerati.com.br, tel.: (11) 3217-2626
EDIÇÕES ANTERIORES
Atendimento a jornaleiros: (11) 3648-9090
Canais de vendas: (11) 3648-9090
e-mail: vendas@digerati.com.br, fax: (11) 3648-9090
Site: www.lojadigerati.com.br
CONTATO
Redação: R. Haddock Lobo, 347, 12º andar, São Paulo – SP,
CEP 01414-001, tel.: (11) 3217-2600, fax: (11) 3217-2616
Publicidade: (11) 3217-2643
e-mail: publicidade@digerati.com.br
Representante comercial nos EUA: USA-Multimedia
tel.: +1-407-903-50000, Ramal: 222
e-mail: info@multimediausa.com
Marketing: (11) 3217-2600
e-mail: marketing@digerati.com.br,
Circulação: (11) 3217-2600
e-mail: circulacao@digerati.com.br
DIGERATI É UMA EMPRESA DO GRUPO DOMO
APRENDA FÁCIL ESPECIAL
é uma publicação da editora Digerati.
Distribuidor exclusivo para todo o Brasil: Fernando
Chinaglia Distribuidora S.A. Tel.: (21) 2195-3200
Distribuidor para Europa e América Latina: Malta
Internacional +55 11-3284-6444
Impressão: Gráﬁca IBEP

Capítulo 1
Nível Básico 5
Ferramentas básicas 6
Alterando o visual 8
Alinhe imagens 9
Piloto automático 11
Personalize com o Photoshop 14
Fundo em preto-e-branco 19
Trabalhe com contrastes 23
Bronzeamento artiﬁcial 27
Correção de fotos 30
Efeito tatuagem 33
■ Sumário

Capítulo 2
Nível Avançado 37
Photoshop CS3 38
Conheça o ponto de fuga 42
Construção de páginas 46
Projeto visual de sites 60
Integração com o Flash CS3 64
Composições avançadas 69
Tratamento proﬁssional 72
Ilustrações 79
Vetorize com o Photoshop 89
Mescle imagens 95
Recorte detalhado 98
Integração de programas 102
Modiﬁque fotos 107

Capítulo 1 Nível Básico
05-07 - ok.indd 505-07 - ok.indd 5 9/12/2008 16:17:309/12/2008 16:17:30

Aprenda Fácil Especial – Photoshop6
■ Ferramentas básicas
No Photoshop, poucas coisas são mais importantes do que dominar a técnica de recorte e seleção de imagens
para um fim especifico. Às vezes, você precisa de uma seleção para aplicar determinado efeito ou para colocar uma
imagem em algum trabalho. Sem as ferramentas adequadas, isso seria muito mais difícil, então, vamos à obra.
1. A Varinha Mágica
O primeiro e o mais usado dos recursos do Photoshop é a Varinha Mágica (Magic Wand).
Ela foi criada para selecionar pixels a partir das similaridades de cor.
Na barra de opções, é possível ajustar o valor de tolerância, por exemplo, 32 (padrão do Pho-
toshop´). Isso significa que 32 tons mais claros e 32 mais escuros serão selecionados com o uso desta
ferramenta. Portanto, preste atenção no valor que você deve usar para ter uma melhor precisão.
2. Marque Tool (retangular e circular)
Mais simples do que a Varinha Mágica, a Marquee Tool per-
mite que você faça seleções quadradas e circulares. Também é agrupada
com a opção de criar uma linha ou uma coluna através da imagem com a
expessura de um pixel. Esta ferramenta pode parecer simples para o Pho-
toshop, mas é um dos meios mais práticos
para se fazer seleções dentro de seleções.
3. Máscara Rápida (quick mask)
O uso desta ferramenta é muito divertido, visto que proporciona a chance de desenhar sua seleção. Clique no botão
de Máscara Rápida e apague, com a borracha, a área que você quer selecionar. Clicando duas vezes nesse mesmo botão,
você pode variar ferramenta. Também é possível ajustar a cor da máscara e até a opacidade para aqueles casos em que
sua cor atrapalha a seleção (tente usar a cor padrão em um muro de tijolos e você entenderá o conceito).
4. Canais (channels)
Com os Canais, é possível guardar sua seleção para usar depois e até gravar sua imagem. Funcionam
da mesma maneira que a Máscara Rápida: clique em criar novo canal, desenhe uma área de recorte. Na
paleta de canais, você encontra as opções “save selection as channel” e “load channel as selection”, re-
curos permitem que você tenha seleções de formas diferentes. Também é possível criar seleções em seus
canais para criar seleções mais precisas.
05-07 - ok.indd 605-07 - ok.indd 6 9/12/2008 16:17:419/12/2008 16:17:41

Aprenda Fácil Especial – Photoshop 7
5. Laço (lasso)
A ferramenta Laço possui três ajustes básicos:
1. Laço que consiste em envolver o que você pretende selecionar, no entanto, à mão livre.
Sempre que você soltar o botão do mouse, o laço se fecha automaticamente. Não é o ideal
para formas mais complexas, mas utilizando a opção feather é bastante útil para seleções de
áreas disformes como sombras e luzes.
2. Laço poligonal é um dos grandes campeões do Photoshop, exce-
lente para seleções de alta precisão. Cada clique cria um ponto de dobra
do laço, o que permite que você o utilize de forma contínua em imagens
complexas. Utilizado junto ao “save selection as channel” é uma das fer-
ramentas que qualquer profissional de Photoshop deve dominar.
3. O laço magnético, ao contrário dos dois anteriores, pode ser visto como uma ferramenta de preguiçosos.
Criada para defirnir contornos de alto contraste, é famosa por deixar na mão na hora que os tons de imagem
passam a ser muito similares.
6. Pen Tool
Além de ser a ferramenta máxima de seleção de curvas, a caneta é mais trabalhosa
do que as outras, mas cria uma seleção desenhada em vetor sobre a imagem, na qual
você pode transformar os cantos em bézier. Também cria clipping paths para que as
imagens sejam importadas por programas de paginação. A ferramenta tem a pratici-
dade de ser totalmente editável pela paleta “paths”, na qual você pode transformar seu
path em uma seleção.
7. Color Range
O que fazer quando sua seleção não é um objeto, mas uma cor? Para casos como esse,
existe o Color Range, que cria a seleção a partir de uma cor, o que
é extremamente prático e preciso. Basta utilizar select4color range
e selecionar a cor desejada.
8. Extract
Paraaquelasseleçõesmaisdifíceis,porém,menosprecisas,asoluçãoéusarocomandoExtract(ALT+CTRL+X)
e seguir as instruções do filtro. Mas atenção: por ser um filtro automatizado, os resultados podem ser inespera-
dos, o que possibilita a ocorrência das mesmas falhas do laço magnético.
Extras
Bézier: Uma curva bézier é uma equação cubica simples, criada por Pierre Bézier para operações de
CAD/CAM. É o fundamento de todo o sistema de desenho Postscript da Adobe. Também arredonda os
cantos dos paths com a ferramenta convert point.
Também é útil saber que CRTL+D serve para deselecionar seleções, CTRL+Shift+I inverte uma seleção.
05-07 - ok.indd 705-07 - ok.indd 7 9/12/2008 16:17:429/12/2008 16:17:42

Antes Depois
■ Alterando o visual
Modificar a cor de um cabelo é muito simples, e o resultado é interessante, pois você pode deixar as
pessoas com diferentes aparências. Porém dependendo do retrato que será modificado o trabalho pode
ser maior, isso porque em alguns casos o cabelo está bem espalhado na foto, ou seja, você terá de, minu-
ciosamente, contornar esses pequenos pedaços que estão espalhados, de maneira que a modificação da
cor seja completa.
Para este tipo de trabalho, o mais recomendado é que se utilize a ferramenta layers do Photoshop,
que tem por objetivo formar camadas na tela do programa, como se fossem folhas de sulfite, que serão
colocadas uma embaixo ou em cima da outra. Com isso, você pode criar ilusões, ou seja, deixar uma layer
embaixo com um rosto e um em cima com um cabelo pintado de verde, fazendo uma espécie de fusão
de ambas as imagens. Existem diversas coisas que podem ser feitas com as camadas do Photoshop, o que
será abordado no passo-a-passo é apenas uma delas.
Neste tutorial, você aprenderá a utilizar o recurso layer, usar a ferramenta Hue/Saturations, que tem
como função ajustar as cores através de cursores, e desenvolverá as técnicas e passos para modificar a cor
do cabelo de uma pessoa em uma fotografia.
1. Após o programa ser aberto, o próximo passo é
abrir a foto que será modiﬁcada. No menu superior
clique em File, e marque Open. Em seguida, localize
a foto e clique em Abrir.
2. Feito isso, no menu superior de opções do pro-
grama, selecione Window, Layers ou, caso prefira
agilizar o processo, pressione a tecla F7, que é o
atalho desta função.
08-10 - OK.indd 808-10 - OK.indd 8 9/12/2008 16:25:309/12/2008 16:25:30

3. Observe que a imagem aparecerá com o nome de
Background. Nesta pequena imagem, clique com o
botão direito do mouse e selecione Duplicate Layer,
depois, pressione OK.
4. No menu de ferramentas, clique na opção Eraser
Tool (E) e apague tudo que estiver na imagem, me-
nos o cabelo. Se preferir pressione Ctrl +, para dar
zoom nos cantos mais inacessíveis.
5. Acesse Image, Adjustments, Hue/Saturation.
Note que a tela apresentará cursores que, ao serem
movimentados, alteram a cor do cabelo recortado.
Depois, basta clicar em OK.
6. Com a cor devidamente ajustada, clique sobre o
Background que não está sendo modiﬁcado. Com
isso, veja que automaticamente a cor do cabelo será
modiﬁcada na imagem.
■ Alinhe imagens
Existem tarefas em softwares de edição, como o Photoshop, que parecem simples, mas que exigem um
tempo até razoável de um usuário iniciante ou intermediário. O problema é que são tantas as ferramentas
e tantas as possibilidades de ação e intervenção no objeto que está sendo editado através do Photoshop,
que o resultado disso acaba sendo a disseminação de uma infinidade de caminhos diferentes para se
realizar a mesma tarefa.
Este passo-a-passo mostrará um exemplo claro sobre como encurtar o caminho de uma tarefa bem
simples a ser realizada no Photoshop. A maioria dos usuários deste programa, quando querem girar uma
imagem até uma determinada posição, faz cálculos mirabolantes ou então fica girando a imagem para lá
e para cá no chutômetro, até encontrar a posição adequada. Você aprenderá a fazer isso em seis pequenos
passos, sem sequer efetuar uma operação de adição, usando apenas a régua do programa. Simples, rápida,
eficaz, uma excelente dica para tornar seu trabalho mais dinâmico.
08-10 - OK.indd 908-10 - OK.indd 9 9/12/2008 16:25:399/12/2008 16:25:39

1. Abra o arquivo da imagem que você irá editar no
Photoshop através do atalho CTRL + O. Este atalho
abrirá um browser. Selecione o arquivo desejado e cli-
que em Open.
5. Agora, acesse o menu principal do Photoshop
na opção Imagem. Em seguida, passe o mouse so-
bre a opção Girar Tela de Pintura e clique na
opção Arbitrário.
3. Selecione a ferramenta Medir, ela está juntamente
com o botão da ferramenta Conta-gotas, na caixa de
ferramentas. O ícone que a identiﬁca é o desenho de
uma régua.
2. É interessante trabalhar com uma imagem que te-
nha referências de linhas tortas, ou seja, não paralelas
com as bordas da área de trabalho. Isso ajudará no
entendimento do tutorial.
6. A janela já será aberta com a angulação necessá-
ria para deixar a região traçada na imagem paralela à
borda. Basta clicar em OK e ver o Photoshop fazer o
resto por você.
4 . Com a ferramenta medir, trace uma linha seguin-
do o traçado da região da imagem que você gostaria
de deixar exatamente paralela com as bordas da área
de trabalho.
08-10 - OK.indd 1008-10 - OK.indd 10 11/12/2008 17:37:3711/12/2008 17:37:37

■ Piloto automático
Muitas vezes, o profissional que trabalha com edição de imagens, seja para a Web, em publicidade
ou qualquer outra área de atuação, depara-se com o problema que é a relação tempo versus volume de
trabalho. Pensando nisso, a Adobe desenvolveu um recurso que facilita a vida de qualquer um que precise
agilizar a produção de imagens.
Action, ou ação, é uma série de comandos que podem ser aplicados em um ou mais arquivos. A maio-
ria das ferramentas e comandos pode ser memorizada pelas ações do Photoshop, havendo, ainda, diversas
ações predefinidas no arquivo do programa. Correr uma ação equivale a colocar o Photoshop em uma
espécie de piloto automático e observar o resultado.
O recurso de actions e o processamento em lote, transformou trabalhos mecânicos, repetitivos e enfa-
donhos em uma tarefa a ser executada de forma automática e simples, resultando em economia de tempo
e, conseqüentemente, no aumento da produtividade.
Assim como outros recursos, as actions não são um dispositivo recente, mas a cada dia tornam-se
mais úteis e necessárias, fazendo o trabalho do usuário render mais, e permitindo produzir em maior
quantidade e melhor qualidade.
1. Execute o Photoshop e, depois, acesse a pasta em
que estão as imagens que vão receber automação de
ações. Selecione uma delas e dê duplo clique, ou cli-
que OK, como mostra a ﬁgura.
2. Com a imagem aberta, escolha Actions no menu
Window, ou simplesmente pressione ao mesmo tem-
po as teclas Alt e F9. A caixa de opções de Actions
aparecerá da mesma forma.
3. Crie ou selecione um grupo existente de ações e,
com o botão Create New Action, estabeleça uma
nova ação, que será memorizada pelo Photoshop e nos
permitirá utilizá-la posteriormente.
4. Na nova caixa de opções, dê o nome que preferir
em Name. Esse será o título das ações que vão com-
por o tratamento da imagem. Para memorizar cada
ação, clique em Record.
11-22 - ok.indd 1111-22 - ok.indd 11 9/12/2008 16:16:269/12/2008 16:16:26

9. É possível inserir qualquer valor para redimen-
sionamento, mas lembre-se de que valores que pro-
porcionam o aumento da imagem podem deixá-la
com qualidade muito ruim. Clique em OK.
10. A dessaturação e o redimensionamento serão as
duas ações nesta automação. Perceba, na imagem,
que cada ação é memorizada na caixa de Actions.
Salve e feche a foto.
5. A primeira ação aplicada diminuirá a saturação
da imagem em 75%. Para isso, vá ao menu Image,
escolha a opção Adjustments e, então, clique sobre
Hue/Saturation.
6. Nesta caixa de opções, edite apenas a alternativa
Saturation, digitando o valor -75. Esse número será
o valor em porcentagem da diminuição de saturação.
Clique em OK.
7. A próxima ação reduzirá o tamanho da imagem
em 25%. Para redimensionar a foto, vá ao menu
Image e, depois, clique sobre a opção Image Size,
como mostra a ﬁgura.
8. Em Image Size, mude a unidade de medida para
porcentagem, e nos campos Height e Width, digite
25. Se a opção Costrain Proportions estiver marca-
da, não é preciso digitar nos dois campos.
11-22 - ok.indd 1211-22 - ok.indd 12 9/12/2008 16:16:369/12/2008 16:16:36

11. A próxima etapa é parar a memorização ou gra-
vação das ações. No canto inferior esquerdo da cai-
xa de Actions, clique sobre o botão de pausa, Stop
Playing/Recording.
13. Com a caixa de opções da automação aberta, será
necessário optar por uma das ações existentes na aba
Action. É possível escolher qualquer das ações prede-
finidas ou selecionar a que criamos.
12. Para que a automação seja finalmente realizada,
clique no menu File, vá à função Automate e clique
sobre a opção Batch. Uma caixa de opções abrirá para
serem feitas algumas definições.
14. Em Source, escolha a opção Folder. Assim, a
automação acontecerá em todas as imagens de uma
pasta. Mais abaixo, em Destination, escolha None e
clique em OK.
15. Com a automação, o Photoshop faz o trabalho
sozinho, aplicando as ações em cada uma das ima-
gens da pasta. Se o desempenho de sua máquina
for alto, é possível aplicar em diversas imagens.
16. Quando estiver pronta a automação que co-
mandamos, você pode conferir o resultado abrindo
as imagens na pasta. Vá ao menu File e clique so-
bre Open, como mostra a imagem.
11-22 - ok.indd 1311-22 - ok.indd 13 9/12/2008 16:16:379/12/2008 16:16:37

17. Nesta pasta, estão somente as imagens resul-
tantes do processo de automação. É recomendável
manter as originais em uma pasta separada, como
arquivos de segurança.
18. Veja duas das imagens originais e as resultantes
lado a lado. Com a utilização das ações, o mesmo
trabalho foi feito em diversas imagens por meio de
um comando sobre apenas uma delas.
■ Personalize com o Photoshop
O brush é uma ferramenta que simula no Photoshop as características que as cerdas de um pincel teriam
sobre diversas superfícies, utilizando as diferentes qualidades de tinta. Pode ser empregado para dar um toque
artístico a trabalhos, utilizá-lo como carimbo, se pode também fazer bordas e efeitos diferenciados, além de
adicionar assinaturas a imagens e projetos. Muitas são as funções que ele agrega ao já extenso mix de possibili-
dades do Adobe Photoshop.
O ideal para a criação de um brush é um arquivo de tamanho médio ou grande. Neste tutorial, você
verá que foi escolhido um tamanho de 400x400 pixels, evitando, dessa forma, a perda de detalhes quan-
do é necessário aumentar o tamanho do pincel. Considerando que nem sempre serão feitos trabalhos
apenas para a Internet, que permite uma resolução de 72dpi (dots per inch, ou pontos por polegada), é
bom estar sempre preparado.
Existem inúmeras possibilidades oferecidas pela ferramenta. Você vai aprender a criar os próprios brushes para
utilizá-los como complemento em seus trabalhos artísticos, para assinar seus projetos e para divulgá-los pela Internet.
Brushes
1 – Crie um novo documento com o comando Ctrl
+ N ou por meio do menu File, New. Utilize as
medidas propostas na imagem.
2 – Com o arquivo já aberto, clique no botão Create
a New Layer na própria janela de Layers, ou use o
comando Ctrl + Shift + N para uma nova camada.
11-22 - ok.indd 1411-22 - ok.indd 14 11/12/2008 17:38:4111/12/2008 17:38:41

3. Utilizando o atalho pelo teclado, aparece a se-
guinte janela. Escolha um nome para a nova cama-
da e, depois, aperte OK.
4. Feito isso, o próximo passo é selecionar a nova
camada na janela de Layers. Depois, escolha a fer-
ramenta Eliptical Marquee Tool.
5. Pressionando a tecla Shift para criar um círculo
perfeito, arraste o cursor do mouse até ficar satis-
feito com o tamanho da seleção.
6. Por meio do comando Alt + Del, você vai preencher a
seleção com a cor de Foreground da paleta. Arraste duas
guias para indicar o centro. Use o comando Ctrl + T.
7 – A seguir, selecione a ferramenta Eraser (atalho
pela letra E) e escolha um pincel com diâmetro
menor do que o usado para fazer o círculo.
8 – Alinhe pelas guias puxadas anteriormente. Quando
estiver próximo ao centro do círculo maior, apague cli-
cando com o ponteiro do mouse sobre o círculo azul.
11-22 - ok.indd 1511-22 - ok.indd 15 9/12/2008 16:16:399/12/2008 16:16:39

13. Continue a fazer alterações na imagem utili-
zando diferentes pincéis. Aumente e diminua o ta-
manho das “falhas”, de acordo com seu interesse.
14. Agora, vá à janela de Layers e, pressionando a te-
cla Ctrl, clique na miniatura (thumbmail) da camada
“Novo Brush”. Apenas ele será marcado com seleção.
9. Usando, agora, a ferramenta Brush (atalho pela
letra B), mude a cor de Foreground e deixe o pincel
com diâmetro menor do que a borracha utilizada.
Pinte no centro da imagem.
10. No campo de seleção de Brush, clique na seta
para baixo e escolha outro grupo de pincéis, dife-
rente daquele com nome de Basic Brushes, que foi
o usado até agora.
11. Aparecerá uma caixa de diálogo, então, pergun-
tando se você deseja realmente substituir os pincéis
atuais pelo novo grupo. Avance apertando OK.
12. Com a ferramenta Eraser, marque Brush no campo
de seleção que aparece na barra de opções e apague algu-
mas partes da imagem com o pincel de sua escolha.
11-22 - ok.indd 1611-22 - ok.indd 16 9/12/2008 16:16:409/12/2008 16:16:40

15. Com a imagem selecionada, clique em Reﬁne Edge
e modiﬁque a seleção à sua escolha. Corrija arestas serri-
lhadas e a suavidade como lhe parecer mais interessante.
16. O próximo passo é selecionar o menu Edit e
escolher a opção Define Brush Preset para a cria-
ção de seu novo brush.
17. Perceba que a imagem que aparece na caixa de
diálogo foi transformada em tons de cinza. Esco-
lha um nome e finalize clicando em OK.
18. Seu novo brush está pronto para ser usado.
Para fazer testes com ele, crie um novo documento
utilizando as medidas propostas na imagem.
19. Com o arquivo criado, marque seu brush para come-
çarausá-lo.Reparequeonúmeroqueapareceabaixodele
refere-se ao tamanho da imagem original, em pixels.
20. Utilizando diversas cores à sua escolha, experi-
mente o novo brush. Altere tamanho, modo e opa-
cidade. Descubra, realmente, o que ele pode fazer.
11-22 - ok.indd 1711-22 - ok.indd 17 9/12/2008 16:16:419/12/2008 16:16:41

21. Agora, é hora de salvar sua criação. Na aba
Brushes, clique no menu de opções acima das mi-
niaturas e escolha Save Brushes.
22. Todos os pincéis exibidos na lista serão salvos. Se
achar melhor, delete os demais antes de prosseguir.
Dê um nome e clique em OK.
23. Experimente criar um novo brush, a partir de
uma imagem já existente em seu arquivo. Foi uti-
lizada uma fotografia editada. Selecione apenas o
que deseja transformar em brush.
24. Repita os passos de 15 a 17: corrija as possíveis
falhas que encontrar na seleção. Vá ao menu Edit,
Define Brush Preset, escolha um nome e conclua
apertando OK.
25. Agora que você já conhece o recurso de brushes,
comece a treinar. Crie camadas, insira efeitos, teste
de acordo com sua vontade e curiosidade.
26. As imagens a seguir foram feitas por intermédio de
brushesoriginaisdoPhotoshopeencontradasnaInternet.
Aproveite o que aprendeu aqui e inove nos trabalhos.
11-22 - ok.indd 1811-22 - ok.indd 18 9/12/2008 16:16:429/12/2008 16:16:42

27. Na imagem trabalhada acima, verifique efeitos
e um pouco de criatividade. Com isso, é possível
embelezar ainda mais a natureza.
28. Este tipo de imagem é um recorte de objeto, com
fundo branco e intervenção sobre um automóvel.
Geralmente, acontece em anúncios publicitários.
29. Nesta foto, verifique um tipo de edição que é
bastante comum em revistas e catálogos de produ-
tos das grandes lojas do país.
30. Os efeitos empregados nesta imagem também
são bastante difundidos em catálogos de produtos
e possuem o recurso de brushes.
■ Fundo em preto-e-branco
Uma forma de edição muito utilizada para quem deseja mostrar um objeto em algum cenário ou paisagem
é o destaque de um único elemento em cores, deixando todo o resto em preto-e-branco. Esse tipo de recurso é
aplicado em cartões, anúncios de produto, outdoors etc. É bastante utilizado pois rende um efeito muito inte-
ressante, graças a tudo o que representa essa dicotomia entre colorido e preto-e-branco.
O que possibilitará essa tarefa é a ferramenta varinha mágica. Versátil, ela vai ajudar a selecionar de modo
preciso toda a área que ficará colorida. Uma posterior inversão dessa área selecionada permitirá a transformação
do fundo em preto-e-branco. Se você já utiliza a versão CS3 do Photoshop, verá que basta ir arrastando a ferra-
menta para completar a seleção na área desejada. Em versões anteriores, é necessário clicar nas áreas.
Ao retornar a seleção para o objeto colorido, é recomendável dedicar-se a editá-lo também, para que haja um
casamento ideal entre fundo e objeto, sem perder a naturalidade da imagem. É um trabalho de paciência. Você
deve testar as diferentes combinações de brilho, contraste e saturação para atingir um resultado ideal.
Saiba como alterar a cor do único elemento que havia mantido suas cores na fotografia do nosso exemplo.
Você pode aplicar essa técnica independentemente de ter realizado a primeira tarefa proposta, ou seja, pode
pegar qualquer fotografia e ir direto à troca de cor de algum objeto.
11-22 - ok.indd 1911-22 - ok.indd 19 9/12/2008 16:16:439/12/2008 16:16:43

1. Para iniciar o projeto, inicie o Photoshop. Vá ao
menu principal e clique em File. Entre as opções,
escolha Open para abrir a imagem a ser trabalha-
da, como mostra a figura.
2. Ao localizar a pasta em que está salva a imagem
desejada, selecione-a clicando somente uma vez so-
bre seu ícone. Feito isso, clique sobre Open para
abri-la no Photoshop.
3. Agora, vá até a barra de ferramentas e selecione
a Magic Wand Tool, que será usada para a seleção
das áreas desejadas (no caso deste passo-a-passo,
as flores vermelhas).
4. Uma maneira mais simples e rápida de fazer essa
seleção é por meio do menu principal, clicando so-
bre o item Select e então clicar sobre Color Range
para a seleção dos vermelhos.
5. Na caixa de opções, selecione Sampled Colors
no menu Select. Com a ferramenta conta-gotas,
clique sobre um ponto que abranja todas as áreas
exatamente desejadas.
6. Feita a seleção, clique OK. Exibir-se-á na tela
de edição a área de seleção obtida a partir do passo
anterior. Provavelmente, há diversas áreas sem se-
leção ou selecionadas por engano.
11-22 - ok.indd 2011-22 - ok.indd 20 9/12/2008 16:16:459/12/2008 16:16:45

7. Para consertar o problema, é possível usar a Ma-
gic Wand Tool novamente. Pressione Shift e cli-
que sobre áreas não selecionadas para incluí-las, ou
Alt para excluir áreas indesejadas.
8. Novamente no menu principal, clique sobre o
item Select e, então, sobre a opção Inverse para
inverter a seleção feita anteriormente, conforme
ilustrado na imagem acima.
9. Agora, no mesmo menu principal, vá até Image
e escolha a opção Adjustments. Dentro dela, cli-
que sobre Desaturate para eliminar as cores que
não são das flores vermelhas.
10. Veja o resultado da imagem ainda com a sele-
ção. Pode-se editar a luz ou qualquer característica
do fundo e das flores vermelhas separadamente,
também. Melhoraremos a luz, agora.
11. Ainda sem desfazer a seleção, vá ao menu prin-
cipal do programa, selecione a opção Image e cli-
que sobre Adjusments e, depois, marque Bright-
ness/Contrast.
12. Deixe a imagem de fundo tão clara quanto de-
sejar. Movimente o botão de intensidade de brilho
e contraste até obter um resultado que lhe agrade.
Depois disso, clique em OK.
11-22 - ok.indd 2111-22 - ok.indd 21 9/12/2008 16:16:469/12/2008 16:16:46

13. Se quiser, faça o mesmo com os elementos em
cores. Repita o procedimento do passo 8 e edite o
brilho e contraste. Quando a imagem estiver de
acordo com o desejado, clique OK.
14. Para desfazer a seleção, vá ao menu principal
e, dentro da opção Select, clique sobre a Deselect,
ou apenas pressione as teclas de atalho Ctrl e D
simultaneamente.
15. Repare no resultado obtido sem a seleção. Con-
segue-se uma imagem natural, bastante eficiente e
muito bonita. Se desejar, é possível mudar a cor
das flores coloridas.
16. Desfaça a última ação comandada (eliminar a
seleção). Pressione Ctrl e Z ao mesmo tempo. No
menu principal, vá a Adjustments, Image e esco-
lha Hue/Saturation.
17. Mova os níveis de Hue, Saturation e Light-
ness o quanto achar necessário. Quando estiver
satisfeito, clique OK e desfaça a seleção, repetindo
o procedimento ensinado no passo 14.
18. Salve a imagem no diretório que desejar. No
menu principal, clique em File e escolha a opção
Save as para dar um nome ao projeto. Escolha o
formato e clique sobre Save.
11-22 - ok.indd 2211-22 - ok.indd 22 11/12/2008 17:40:0211/12/2008 17:40:02

■ Trabalhe com contrastes
Veja as imagens acima. Essas modificações são simples de fazer e podem ser utilizadas para dar desta-
que a uma parte especial de sua imagem. Para criar o efeito, utilize os recursos do Photoshop.
Máscara
As máscaras do Photoshop permitem isolar e proteger partes de uma imagem. Quando você cria uma
máscara a partir de uma seção, a área não selecionada é mascarada, ou protegida, contra edição. Com as
máscaras, você pode criar e salvar seleções difíceis e, depois, utilizá-las novamente. Além disso, é possível
realizar tarefas complexas de edição, por exemplo, para aplicar alterações de cor ou efeitos de filtro em
uma imagem.
Acima a imagem com o efeito aplicado. Note a diferença entre as duas
Antes
Depois
23-26 - ok.indd 2323-26 - ok.indd 23 9/12/2008 16:18:369/12/2008 16:18:36

1. Neste passo-a-passo, temos uma fotograﬁa de um
cachorro com um fundo básico. Nossa tarefa é au-
mentar a iluminação, sem alterar a imagem original.
2. O primeiro passo é abrir a imagem a ser editada.
Com o Photoshop já aberto, acesse o menu File, Open
e localize a imagem. Clique em OK.
3. Agora, você deve criar uma máscara para separar a
imagem da frente da imagem do fundo. Clique em Edit
in Quick Mask Mode, na barra de ferramentas.
4. Pinte toda a área, tomando cuidado para não pin-
tar o cachorro. Em seguida, selecione a opção Edit in
Standard Mode, localizada na barra de ferramentas.
5. Clique no menu Channels localizado na paleta
à direita da tela do programa. Selecione a opção
Create a new channel.
6. A imagem tem de aparecer totalmente preta. Ago-
ra, você deverá apagar o cachorro. Para isso, aperte a
tecla Delete.
23-26 - ok.indd 2423-26 - ok.indd 24 9/12/2008 16:18:479/12/2008 16:18:47

7. O próximo passo será duplicar a imagem original.
Para tal, volte à opção Layer, no canto direito da tela,
clique com o botão direito sobre a layer e selecione
Duplicate Layer.
8. Continue na ferramenta Layer, clique na primeira
camada para selecionar a imagem desejada e de-
pois marque a opção Add Layer Mask, localizada
na parte inferior da janela .
9. Tire a marcação da primeira camada (representada
pela imagem de um olho). A seguir, selecione a fer-
ramenta Elliptical Marquee e faça uma seleção no
rosto do animal.
10. Você pode mudar o tamanho, a forma e o ân-
gulo da região selecionada acessando o menu Select,
Transform Selection. Ao terminar sua seleção, pres-
sione Enter.
11. Uma boa maneira de visualizar como ficará a
iluminação da sua foto é usar o comando Quick
Mask. Basta clicar nesse botão na paleta lateral de
ferramentas do Photoshop.
12. O próximo passo será selecionar Gaussian Blur.
Para isso, acesse o menu Filter, Blur, Gaussian Blur.
A imagem de fundo não será afetada. O alvo é somen-
te o Quick Mask.
23-26 - ok.indd 2523-26 - ok.indd 25 9/12/2008 16:18:499/12/2008 16:18:49

13. Borre a imagem arrastando a seta da tela Gaus-
sian Blur. Assim que terminar, clique em OK e
volte ao modo Standard, clicando nessa opção na
barra de ferramentas.
14. A área que queremos que fique preta está do
lado de fora dessa seleção, portanto precisamos tra-
balhar com seu inverso. Escolha, no menu Select,
a opção Inverse.
15. Clique na opção Create new fill or adjust-
ment layer e escolha Hue/Saturation. A máscara
que está ativa será automaticamente afetada por
esse efeito.
16. Faça modificações na opção Lightness e tam-
bém na caixa de diálogo Hue/Saturation. A ima-
gem deverá escurecer somente no local que não foi
selecionado anteriormente.
17. Em Layers, escolha a opção Multiply, disponível
na seta abaixo de Layers. A área escura deverá escure-
cer um pouco mais.
18. Agora, basta clicar na segunda camada e arrastá-la
para a primeira posição. Pronto, sua imagem já
está modiﬁcada.
23-26 - ok.indd 2623-26 - ok.indd 26 9/12/2008 16:18:519/12/2008 16:18:51

■ Bronzeamento artificial
A técnica de efeito de bronzeamento artificial é utilizada, algumas vezes, pela publicidade ou então
em revistas especializadas em divulgar a imagem de famosos. O interessante é entender como é aplicado
este efeito. Existem maneiras muito complexas de utilizá-lo, mas são variações mais detalhadas dos pas-
sos apresentados aqui. Neste passo-a-passo, você aprenderá a maneira mais simples, mas que não deixa
de apresentar um resultado bastante convincente.
Antes Depois
1. O ideal é que você trabalhe com uma foto com
fundo de cor sólida, contrastante com o corpo da(o)
modelo. No exemplo, foi escolhida uma foto de fundo
branco, liso.
2. É interessante que a pele da(o) modelo, na ima-
gem, tenha contrastes, com áreas com e sem brilho.
Se for preciso, utilize a janela de correções de Níveis
(CTRL + L).
3. Uma outra ferramenta que pode ser utilizada para
aumentar o efeito de contraste da pele é a janela de
configuração de brilho e contraste (Imagem, Ajus-
tes, Brilho/Contraste).
4. Usuários avançados podem utilizar a opção de
ajustes de curvas de cores para ajustar contraste e
brilho nas imagens. Experimente reposicionar o grá-
fico de cores.
27-36 - ok.indd 2727-36 - ok.indd 27 9/12/2008 16:20:219/12/2008 16:20:21

5. Em casos de fotos com pouco contraste, expe-
rimente trabalhar cada canal de cor de maneira
exclusiva. Clique na paleta de Canais, próxima à
paleta de Camadas.
6. O canal azul, em geral, é o mais utilizado para tra-
tamento de contraste. Mas clique nos canais que estão
disponíveis na paleta para veriﬁcar qual apresenta o
maior contraste.
7. Com o canal que apresenta maior contraste já sele-
cionado, pressione CTRL + M para abrir a janela de
Curvas e tente aprimorar o contraste do canal através
do gráﬁco.
8. Tente configurar os canais de cores e a ima-
gem, na medida do possível, até conseguir o mais
próximo do efeito de “pele molhada”, ou seja, com
brilho e contraste.
9. Volte para a tela de camadas e duplique a ca-
mada de Plano de Fundo. É só clicar com o botão
direito do mouse em cima da camada e selecionar
Duplicar Camada.
10. Em seguida, selecione a nova camada que foi cria-
da e clique no botão Criar nova camada de preen-
chimento ou de ajuste. Na lista de opções, clique na
opção Curvas.
27-36 - ok.indd 2827-36 - ok.indd 28 9/12/2008 16:20:319/12/2008 16:20:31

11. Na janela de curvas, posicione o mouse bem
no centro da curva de cor e arraste esse ponto para
baixo, até a imagem ficar com bastante brilho, de
maneira exagerada.
12. Repare que uma nova camada irá aparecer,
além da que foi criada como cópia do plano de
fundo. A imagem ficou exageradamente brilhante.
Pressione CTRL + I.
13. Repita o procedimento descrito no passo 10.
Agora, na janela de curvas, ao invés de descer o
ponto mediano do gráfico, faço o inverso, suba o
ponto mediano da curva do gráfico.
14. Mais uma camada irá aparecer, logo acima
da última que foi criada no final do passo 11. A
imagem ficou com um brilho intenso. Pressione
CLTR + I novamente.
15. O atalho CTRL + I é utilizado para desativar
os efeitos que aplicamos e que estão gravados nas
novas camadas. Utilize-o para reativar os efeitos
das duas novas camadas.
16. Perceba que a imagem da(o) modelo apresenta
agora um tom de pele parecido com bronzeamento
artificial. Brilho intenso contrastando com tonali-
dades próximas do dourado.
27-36 - ok.indd 2927-36 - ok.indd 29 9/12/2008 16:20:329/12/2008 16:20:32

17. O truque: pressione as teclas D e X, em seqü-
ência, para configurar as cores de plano de fundo e
de primeiro plano. Clique na ferramenta Pincel e
selecione 50% de opacidade.
18. Pinte o corpo da(o) modelo nas áreas mais bri-
lhantes. Note que, aos poucos, você vai acrescen-
tando um tom bronzeado às áreas mais claras da
pele da(o) modelo.
■ Correção de fotos
As fotos ficam esverdeadas por causa das lâmpadas brancas, do tipo fosforescente. Mas esse problema
pode ser corrigido sem muita dificuldade no Photoshop.
Há duas ferramentas para normalizar a distribuição de tons: Níveis (levels) e Curvas (curves). A op-
ção Níveis ajusta os tons em apenas três variáveis: altas luzes, meios-tons e baixas luzes. Já a ferramenta
Curvas permite corrigir qualquer ponto ao longo de uma escala de 0 a 100%, mantendo até 15 outros
valores constantes.
Com esse recurso, também é possível efetuar ajustes precisos em canais de cores individuais de uma
imagem, além de inserir várias alterações de uma só vez.
Entendendo curvas
A alteração da forma da curva na caixa de diálogo modifica a tonalidade e a cor de uma imagem. O
arqueamento da curva para cima clareia uma imagem. Para baixo, escurece a foto.
Se um ponto na parte superior da curva for movido (quando no estado-padrão dessa ferramenta), os realces
serão ajustados. Mover um ponto no centro corrige os tons médios e, na seção inferior, as sombras.
Movimentar um ponto na linha diagonal para cima ou para a direita deixa a imagem mais escura. De
maneira oposta, um ponto para cima ou para a esquerda faz com que a fotografia fique mais clara. Assim,
Imagem após o ajuste Depois
Lâmpadas fosforescentes
costumam esverdear fotos Antes
27-36 - ok.indd 3027-36 - ok.indd 30 9/12/2008 16:20:349/12/2008 16:20:34

para clarear sombras, mova para cima um ponto próximo à parte inferior da curva e, se quiser escurecer
os realces, mova para baixo um ponto próximo à parte superior da curva.
Câmeras
A maioria das câmeras digitais possui um recurso chamado Automatic White Balance, o qual detecta
automaticamente o excesso de determinados tons e já balanceia a foto. No entanto, modelos mais antigos
são difíceis de configurar e muitas imagens acabam saindo verdes.
Para corrigir o problema siga as instruções
1. Abra a caixa de diálogo Curvas. No menu, clique em Imagem, Ajustes, Curvas.
2. Clique no primeiro conta-gotas para selecionar os tons de preto da foto. Volte à imagem e selecione o
ponto preto. Neste caso, a moldura da porta à esquerda serviu como referência.
27-36 - ok.indd 3127-36 - ok.indd 31 9/12/2008 16:20:359/12/2008 16:20:35

3. Clique no último conta-gotas para definir os tons de branco. Selecione o ponto mais claro da figura.
As lâmpadas no teto do vagão foram a referência.
4. Até aqui, nada mudou. A imagem utilizada como modelo continua esverdeada. O último conta-gotas
é o que define seus tons de cinza. Esse cinza não é uma variação do preto, mas o cinza cromático. Neste
caso, foi definido o tom do piso como cinza. Observe que a imagem já aparece com outra cor.
5. O Photoshop calculou e corrigiu a curva de cada canal. A maioria das imagens não precisa de ajustes
adicionais após esse processo. No entanto, o modelo ainda apresenta um pouco mais de verde do que o dese-
jado. Para correções ﬁnas, vá até Canais, na caixa de diálogo Curvas, e ajuste cada canal individualmente.
27-36 - ok.indd 3227-36 - ok.indd 32 9/12/2008 16:20:359/12/2008 16:20:35

■ Efeito tatuagem
O efeito de inserção de tatuagens se resume na utilização das ferramentas de perspectiva e de opaci-
dade. O uso de ambas varia muito conforme a imagem escolhida. Nada que um pouco de treino e bom
senso não resolva.
Inicialmente, pode-se ter alguma dificuldade no recorte da imagem que será a tatuagem, mas o sim-
ples uso da ferramenta Varinha mágica já deve resolver a necessidade do recorte. Caso necessário, não se
esqueça de recorrer a outras ferramentas de seleção, como a em forma de elipse e de quadrado.
O ideal para começar é usar imagens como estrelas ou o desenho de um sol. Não exite em fazer teste
com a opacidade da camada tatuagem. Diminua e aumente conforme achar necessário para deixar o
efeito mais real. Não se esqueça de salvar sua evolução para que possa retomar um passo em caso de erro
ou de um efeito que não ficou como o desejado.
Depois
Antes
6. Corrija o canal magenta e pronto!
27-36 - ok.indd 3327-36 - ok.indd 33 9/12/2008 16:20:369/12/2008 16:20:36

1. Abra as duas imagens a serem usadas. Para isso,
acesse o menu Arquivo, Abrir, clique nos dois arqui-
vos pressionando a tecla Shift e clique em Abrir.
2. Na imagem do ideograma, clique na ferramenta
da lateral esquerda Varinha mágica e depois sobre
a área branca da imagem.
3. Vá a Selecionar, Inverter. Com isso, estamos
selecionando somente a área negra da imagem, o
ideograma propriamente dito.
4. O próximo passo é acessar o menu Editar, Co-
piar. Desta forma, a imagem está sendo copiada da
forma que queremos utilizá-la.
5. Altere para a outra imagem (isso pode ser feito
facilmente pressionando Ctrl + Tab) e, em seguida,
vá para Editar, Colar.
6. Vá ao menu superior na opção Editar, Trans-
formação livre para que possamos diminuir o ta-
manho do ideograma.
27-36 - ok.indd 3427-36 - ok.indd 34 9/12/2008 16:20:379/12/2008 16:20:37

7. Segurando a tecla Shift, posicione o mouse sobre o pe-
queno quadrado no canto esquerdo superior da moldura
resultante da transformação livre e diminua a imagem.
8. Verifique a janela de opções do Photoshop. Se-
lecione o menu Camadas e altere o valor da opaci-
dade para 70%.
9. Clique na ferramenta Texto horizontal e escreva
o que quiser. Altere também a opacidade da cama-
da com o texto para 70%.
10. O próximo passo é selecionar o menu superior
do Photoshop, nomeado como Camadas, e marcar
a opção Mesclar pra baixo.
11. Inserindo perspectiva, daremos mais realidade
à tatuagem. No menu superior, clique em Editar,
Transformação, Perspectiva.
12. Altere o tamanho da moldura da perspectiva,
distorcendo um pouco, para tirar a impressão de
chapado da imagem inserida. Clique em OK.
27-36 - ok.indd 3527-36 - ok.indd 35 9/12/2008 16:20:399/12/2008 16:20:39

13. Podemos mudar a cor da tatuagem. Para isso,
clique em Bloquear pixels transparente na janela
de camadas e selecione a ferramenta pincel.
14. Selecione a cor desejada na janela Amostras e passe
sobre a área da imagem a ser pintada. Se houver necessi-
dade, diminua um pouco a opacidade da camada.
15. Clique em Camadas, Mesclar camadas vi-
síveis, para “chapar” toda a imagem. A tatuagem
está pronta.
16. Salve seu trabalho acessando o menu Arquivo,
Salvar. Selecione uma pasta em seu computador e
dê um nome à imagem.
17. Utilize o processo e os recursos apresentados
nos passos deste tutorial para criar outras tatua-
gens e imagens.
18. O principal segredo para deixar o efeito real está
em alterar a opacidade da camada e em distorcer ligei-
ramente a imagem com o efeito perspectiva.
27-36 - ok.indd 3627-36 - ok.indd 36 9/12/2008 16:20:419/12/2008 16:20:41

Capítulo 2 Nível Avançado
37-45 ok.indd 3737-45 ok.indd 37 9/12/2008 15:59:539/12/2008 15:59:53

■ Photoshop CS3
Na curta história da computação pessoal, poucos softwares conquistaram tanto prestígio quanto o
editor de imagens Photoshop. A história do programa começou há 20 anos, quando Thomas Knoll, que
estudava na Universidade de Michigan, começou a escrever um programa para que seu Macintosh exi-
bisse imagens. O programa chamou a atenção de seu irmão, que recomendou transformar o aplicativo
em um editor com diversas funcionalidades. Em 1.988, o programa foi renomeado para Photoshop e
começou a ser distribuído juntamente com scanners da marca Barneyscan.
O programa virou notícia e tornou-se muito bem sucedido. Ainda em 1.988, a Adobe comprou a
licensa para distribuir o produto e, em 1.990, o Photoshop 1.0 foi lançado exclusivamente para computa-
dores da Apple. Naquela época, o programa cabia em disquetes de 1.44 MB e possuía uma interface que
se assemelhava muito ao tradicional Paint, do Windows.
A primeira versão para Windows surgiu em 1.992, com o Photoshop 2.0. Desde então, novos recursos
foram implementados, até chegarmos à versão CS3 (ou 10.0), uma das mais revolucionárias desde que o
produto chegou aos anos 2.000. Mais inteligente e com grande capacidade de processamento, o softwa-
re pegou carona no poder, cada vez maior, das máquinas e criou recursos que facilitam muito a edição
profissional da imagem.
Entre as grandes novidades, destacam-se a maior flexibilidade para se trabalhar com efeitos, filtros, ajustes
e um novo projeto que melhora sua usabilidade de forma significativa. Além disso, a nova versão implementa
muitas melhorias em recursos que já haviam sido implantados nas versões CS e CS2, como a criação de pers-
pectivas por meio do ponto de fuga, a edição não-destrutiva e a simplificação da interface.
Confira, nas próximas páginas, algumas das principais novidades apresentadas pela nova versão de
um dos programas voltados para design mais longevo do mercado.
Edição não-destrutiva
Nas versões anteriores do Photoshop, sempre que realizávamos alterações nas imagens, em configura-
ções como brilho, contraste, filtros de lente, saturação, balanço de cores, entre outras opções encontradas
no menu imagem, voltar atrás nas alterações era uma tarefa complicada. Se você tivesse acumulado cinco
tipos de edições diferentes, por exemplo, não havia a possibilidade de remover somente a primeira altera-
ção: teria que desfazer uma por uma, na ordem inversa à que foram aplicadas.
A versão CS3 derrubou esse inconveniente. Com um processamento mais eficiente de imagens, o
novo Photoshop inclui todos os seus principais modos de edição na paleta Layers, para que sejam apli-
cados em camadas. Veja a imagem a seguir.
37-45 ok.indd 3837-45 ok.indd 38 9/12/2008 16:00:039/12/2008 16:00:03

Em nosso exemplo, há quatro camadas na paleta de layers, sendo que cada uma delas é responsável por
algum efeito na imagem. Para editar um efeito, o usuário pode clicar duas vezes na camada, a qualquer
momento, e realizar as alterações. Se o desejo for deletar a camada e, por conseqüência, eliminar o efeito
inserido nela, basta clicar com o botão direito do mouse e selecionar a opção Delete Layer. O mesmo
procedimento utilizado para esconder qualquer tipo de camada também pode ser usado para ocultar a
visualização do efeito: clica-se no quadrado menor, logo ao lado esquerdo da camada. Veja na imagem
que todos os efeitos estão ocultos na fotografia, mas continuam na paleta.
Os filtros inteligentes fazem parte de outro recurso incluído no contexto da edição não-destrutiva.
Com eles, é possível selecionar exatamente as áreas das imagens que receberão ou não os filtros. Ao final,
se não gostar do resultado, o usuário pode simplesmente excluir a camada e eliminar o efeito. Antes de
testar o novo recurso, é necessário converter a camada principal em objeto inteligente. Para fazer isso,
temos de clicar com botão direito do mouse sobre ela e selecionar Convert to Smart Object.
Feito isso, já podemos aplicar os filtros, que serão automaticamente jogados na paleta de camadas.
Para selecionar uma área da imagem onde o filtro não incidirá, podemos selecionar uma ferramenta
qualquer de forma, clicar no quadrado branco da camada Smart Filters e selecionar a área. É possível
remover todo o efeito a qualquer momento, basta deletar a camada relativa ao filtro.
37-45 ok.indd 3937-45 ok.indd 39 9/12/2008 16:00:039/12/2008 16:00:03

Composição avançada
O leitor, provavelmente, já passou por uma situação em que tirou diversas fotos seguidas de um mes-
mo cenário, para obter a imagem perfeita. Ao checar uma das fotos, percebe que um carro passou em
frente a um dos pontos do cenário, bem no momento em que a bateu, enquanto que o resto ficou bom.
Esse mesmo ponto está perfeito em uma segunda foto e o ideal seria juntar as imagens. É possível fazer
isso por meio de um recurso que permite composição avançada com duas ou mais fotos em camadas
diferentes: o Auto-Align Layers, presente no menu Edit. O comando calcula, automaticamente, os ele-
mentos das fotos, deixando-os alinhados. Assim, basta apagar os elementos indesejados de cada layer. O
resultado costuma ser perfeito.
Seleção rápida e refinamento da borda
Selecionar todo o contorno do corpo de uma pessoa para destacá-la do fundo e encaixá-la em outro
contexto costumava ser tarefa muito trabalhosa e tomava muito tempo das pessoas. Depois de diversas
versões do programa, o Photoshop CS3 resolveu parte do problema. Com a ferramenta Quick Selection,
localizada na barra de ferramentas da esquerda, o usuário arrasta o mouse pelas partes que deseja recortar
e obtém um resultado quase perfeito. Para que fique magistral, basta melhorar a seleção com a ferramen-
ta de refinamento da borda.
Interface simplificada
O pior aspecto de se trabalhar com programas de edição ou produção de imagens sempre foi o posi-
cionamento inconveniente de suas paletas. As versões anteriores de Photoshop não eram diferentes: as
barras de ferramentas flutuavam na tela, o que tornava muito desconfortável o trabalho de fechar, abrir
e reposicionar paletas, para que não atrapalhassem a visualização da imagem. O novo Photoshop, assim
como as demais ferramentas da família CS3, possui paletas distribuídas em encaixes convenientes e auto-
ajustáveis, que podem ser ampliadas para o tamanho total, minimizada em ícones ou até mesmo em uma
diminuta faixa na borda do monitor. Todas as paletas estão facilmente ao alcance, mas você só visualiza
a que quiser na hora que precisar.
Processamento de imagens-brutas
A maioria das boas câmeras digitais gera um arquivo RAW. Trata-se de informações brutas da imagem,
que servem para que o fotógrafo edite diversas opções de processamento de imagem. Até aí, nenhuma
novidade. O que torna o Photoshop CS3 muito interessante são as melhorias com relação a esse suporte,
com diversas novas ferramentas para edição, compatibilidade com o software Photoshop Lightroom e
suporte para mais de 150 modelos de câmeras.
37-45 ok.indd 4037-45 ok.indd 40 9/12/2008 16:00:049/12/2008 16:00:04

Ponto de fuga aprimorado
Quando a versão CS2 surgiu com a edição de imagens com base em perspectiva, muitos usuários do
programa ficaram impressionados. O recurso passou a ser muito útil na a criação de modelos para capas
de livros e rótulos de produtos, pois tornou possível adicionar qualquer tipo de gráfico, imagem e texto
em imagens com perspectiva. A versão CS3 traz uma melhoria na ferramenta. Agora, o ponto de fuga
foi aprimorado, o que nos permite criar diversos planos em uma imagem, conectando-os em qualquer
ângulo. Esse tipo de trabalho ficou muito mais veloz.
Mais eficiência na correção de cores
Se o gerenciamento de cores do Photoshop já era considerado muito bom e intuitivo, os resultados
oferecidos estão ainda melhores, apesar de manter a mesma interface. As melhorias nas opções de brilho
e contraste são visíveis, enquanto os controles aprimorados de curvas permitem que o usuário faça ajustes
automáticos com predefinições incluídas ou manualmente, de acordo com seu objetivo.
O ajuste de imagens coloridas para preto e branco também ficou mais eficiente com a nova ferramenta
Black and White. O recurso permite um controle eficiente dos diversos tons, o que influencia diretamen-
te na textura, contraste e saturação de áreas da imagem. Com todo esse controle, já dá para arriscar dizer
que é melhor deixar para transformar a imagem em preto e branco no Photoshop do que capturar a foto
com esses tons na câmera digital.
37-45 ok.indd 4137-45 ok.indd 41 9/12/2008 16:00:049/12/2008 16:00:04

Suporte aprimorado para HDR (High Dynamic Range) de 32 bits
Quando estamos trabalhando com o tratamento de uma foto específica, temos liberdade para definir som-
bras, brilhos, contrastes, entre outras configurações do gênero, mas todas essas configurações possuem um fator
limitante: as informações do próprio arquivo de imagem original. Se alterarmos demais brilhos e sombras, por
exemplo, podemos comprometer a definição da foto.
Resolver essa limitação é uma tarefa que se inicia no momento de bater as fotos. Quando estiver nessa oca-
sião, o fotógrafo deve tirar fotografias do mesmo cenário com diversas exposições e aberturas de diafragma.
Todas as imagens do produto final dessa atividade devem ser abertas no Photoshop e reunidas por intermédio
do menu File, opções Automate e Merge do HDR. O usuário deve escolher os arquivos que deseja reunir e
aguardar o processamento. Depois disso, você terá muito mais flexibilidade para alterar as definições de cores,
brilhos, sombras etc, sem afetar a definição e a qualidade do produto final.
Gerenciamento avançado de imagens com o Adobe Bridge
Quando o programa Picasa, do Google, foi lançado, todos acreditaram tratar-se de uma revolução, pois o
aplicativo era voltado para edições rápidas e a usuários comuns, com a vantagem de ser gratuito e gerenciar
imagens muito facilmente. Reagindo a esse programa revolucionário, a Adobe distribui, juntamente com as
cópias do Photoshop CS3, o novo Bridge CS3. Com alto desempenho, o programa faz pesquisas avançadas para
facilitar a localização de imagens, traz recursos para agrupar várias fotos em uma única miniatura e a ferramen-
ta Loupe, que permite ao usuário verificar rapidamente a resolução da foto. Além disso, todas as informações
sobre os arquivos são facilmente visualizadas na barra da direita do programa. Após trabalhar com o Bridge
CS3, o Picasa parecerá coisa de criança.
■ Conheça o ponto de fuga
A edição CS3 do Photoshop aprimorou o recurso de edição de ponto de fuga (Vanishing Point), que
permite a criação de diferentes planos dentro de uma imagem com perspectiva e a edição inteligente
desses planos, respeitando-se o sentido e a distância dos objetos. Tomando como exemplo a possibilidade
de copiar trechos da imagem e aplicá-los a outros pontos com o Clone Stamp (o popular carimbo para
os brasileiros), é importante ressaltar que a ferramenta é inteligente a ponto de reconhecer que deve di-
minuir proporcionalmente o tamanho dos objetos quando eles são introduzidos mais próximos do ponto
zero e, portanto, mais distantes do olho do observador.
Outro exemplo de edição possível com o Vanishing Point é a exclusão de elementos dentro de uma
figura, que utiliza o mesmo princípio do que foi citado no parágrafo anterior. Essa função também
permite a edição de imagens sem desrespeitar a perspectiva presente nas fotos. As imagens realmente se
adaptam ao caminho, obedecendo a relação com a posição do ponto de fuga. Nos 18 passos descritos
nesta matéria, conheça algumas das muitas possibilidades do Vanishing Point.
37-45 ok.indd 4237-45 ok.indd 42 9/12/2008 16:00:059/12/2008 16:00:05

1. Abra a imagem em que deseja trabalhar e a outra
que deseja aplicar à primeira. Selecione a ﬁgura a ser
aplicada com Ctrl + A e a copie com Ctrl + C. Pode
fechá-la, se desejar.
2. Com apenas a imagem principal aberta, crie
uma nova camada por meio do comando Shift +
Ctrl + N ou pelo através do menu superior Layer,
New, Layer.
3. Os comandos que devem ser realizados no passo
anterior criam uma nova camada, vazia. Você deve,
agora, selecionar essa camada e ir ao menu Filter,
Vanishing Point.
4. Dentro da área de edição de ponto de fuga (Va-
nishing Point), a ferramenta ativa deverá ser Create
Plane Tool (C). Faça quatro pontos em uma das faces
da imagem.
5. Eis como deve estar a imagem depois de fecha-
dos os quatro pontos. Observe que há uma grade
azul sobre a área que foi selecionada na imagem no
passo anterior.
6. A título de curiosidade, uma seleção de grade
com a cor vermelha não poderá ser usada. Caso o
resultado seja esse, o plano será inválido. Edite ou
refaça a seleção.
37-45 ok.indd 4337-45 ok.indd 43 9/12/2008 16:00:069/12/2008 16:00:06

7. Uma grade na cor amarela também não é válida. É
possível editar um plano amarelo, no entanto os resul-
tados não serão orientados corretamente. O melhor é
refazer a edição.
8. Depois de criar um plano na cor azul, clique, com
a tecla Ctrl pressionada, em uma das arestas centrais
da grade e arraste. Surgirá uma segunda face 90º a
partir da original.
9. Ao pressionar a tecla Alte clicar em uma das arestas
centrais da nova face, é possível movimentá-la, como
se fosse uma porta. Use essa função para ajustar o ân-
gulo correto sobre a imagem.
10. Algumas imagens exigem mais do que duas
faces por não terem cantos retos. Utilize a ferra-
menta Edit Plane Tool (V) para consertar possí-
veis falhas.
11. A seguir, é hora de colar (Ctrl + V) a imagem
inicialmente selecionada dentro da área de edição do
ponto de fuga para que possamos iniciar a aplicação
de imagens em perspectiva.
12. Com o mouse, arraste a ﬁgura colada para dentro
do plano azul. Note que ela se adaptará à área criada,
respeitando, inclusive, a orientação das faces. Ao ﬁnal,
clique em OK.
37-45 ok.indd 4437-45 ok.indd 44 9/12/2008 16:00:079/12/2008 16:00:07

13. Crie uma cópia (Ctrl + J) da camada com a nova
roupagem da caixa e bloqueie-a clicando no local in-
dicado na foto. Diminua a opacidade da camada do
embrulho original.
14. A seguir, selecione a ferramenta Eyedropper Tool
(I) e clique sobre uma área da caixa. Com a cor sele-
cionada, preencha a camada de cópia criada no últi-
mo passo. Mova-a para baixo (Ctrl + [).
15. Crie outra camada e, por meio da ferramenta
Gradiente (G) ou Brush (B), faça algumas sombras,
obedecendo à imagem original. Se preferir, diminua a
opacidade dessa camada.
16. Crie uma seleção nas abas da caixa para elimi-
nar o excesso das camadas. Isso pode ser feito com o
Polygonal Lasso (L) ou com o auxílio de um Path.
17. Agora, sua imagem deve estar assim. Este é o
momento que se deve corrigir pequenas falhas e
detalhes da imagem a fim de tornar sua composi-
ção mais harmoniosa.
18. Vários planos podem ser criados com a fer-
ramenta Vanishing Point. Solte a imaginação e
aproveite o recurso ensinado neste tutorial para
inúmeras criações.
37-45 ok.indd 4537-45 ok.indd 45 9/12/2008 16:00:099/12/2008 16:00:09

■ Construção de páginas
O desenvolvimento de um site em Photoshop começa como o de qualquer outro. Você precisa idealizá-
lo por completo, desde o tipo, o formato e o público-alvo, por exemplo. Em seguida, vem a preocupação
com os detalhes. Quase todos serão ajustados no próprio software e o restante em programas auxiliares,
como o Image Ready ou em um software WYSIWYG (“What you see is what you get” ou “O que você
vê é o que você terá”), como o Dreamweaver e outros softwares de edição visual para a Web.
Nesse caso, os programas servirão para ajustar detalhes e incrementar funções que o Photoshop ainda
não detém, como layers de Web, scripts, formulários etc. É bom lembrar que em breve tudo será mais
integrado, como uma grande família de desenvolvimento para a Web, já que a Macromedia, fabricante
do Dreamweaver, foi comprada pela Adobe em meados de 2005.
É recomendável também turbinar o Photoshop com fontes e brushes para facilitar o trabalho da mon-
tagem do site. Ainda que possam ser criados, estilos e padrões são de grande ajuda e também podem ser
aproveitados de outros locais. O primeiro passo é o mesmo, abrir o Photoshop e começar.
Uma dica: com a evolução da Internet, a atualização de hardware, a banda larga e outros fatores im-
portantes ligados à Web, os sites já podem ser desenvolvidos em 800x600 pixels com segurança, e uma
grande fatia dos usuários já navega em 1024x768. Decida qual delas utilizar, pois a quantidade de espaço
é fundamental para fazer com que os elementos do site respirem. Aqui utilizaremos o seguinte:
Note que a resolução é de 72 pixels/inch. Em tela, a resolução máxima atingida é essa, portanto, se a ima-
gem estiver muito grande, é possível trabalhar nela para diminuir um pouco a resolução. A resolução para a
Web deve ficar entre 50 e 72 pixels, pois assim o arquivo não será comprometido na visualização dos browsers.
Esse tipo de procedimento, além de diminuir o tempo de download das figuras, também evita que estas sejam
utilizadas para impressão.
Agora que temos nossa área de trabalho construída, é necessário começar a desenvolver o site. Dessa forma,
iremos nos preocupar, inicialmente, em trabalhar o layout dele, ou seja, definir o posicionamento dos itens.
Em alguns casos, o trabalho para encontrar o local exato das imagens e textos é mais complexo e requer o
bom gosto de um designer em vez da praticidade de um webmaster. Entretanto, ambos devem ser levados em
consideração para que o usuário possa se localizar facilmente e interagir no site sem problemas.
Aqui vale a regra de que o usuário deve atingir seu objetivo em até três cliques, de maneira que essa idéia
deva ser preservada ao desenvolver o seu.
Desenvolveremos nosso “job” a partir de um site que, em breve, estará disponível para visitação na Web.
Assim, a aplicação desta matéria será real e trabalharemos os elementos fundamentais para um site.
46-63 - ok.indd 4646-63 - ok.indd 46 9/12/2008 16:01:239/12/2008 16:01:23

O logotipo
O logotipo de um site é uma discussão constante. O ideal é desenvolvê-lo em um
aplicativo vetorial (como o Illustrator da Adobe ou o Draw da Corel) e, em seguida,
tratá-lo no Photoshop, mas nada o impede de criá-lo no Photoshop.
O problema da criação de um logo no Photoshop é que se seu site crescer, você
precisará desenvolver sua logotipia para promoção impressa e, diante disso, terá al-
guma dificuldade para trabalhar a resolução dessa figura mesmo que ela tenha sido
criada no Photoshop.
Se você trabalhar um logotipo já pronto a partir de um aplicativo vetorial, expor-
te-o para o formato EPS (Encapsulated PostScript) e adicione-o ao Photoshop por
meio do menu File, Place. A vantagem do EPS é a facilidade para redimensioná-lo
sem que haja deformação. Além disso, a imagem já vem com o fundo transparente,
o que facilita o posicionamento do logo no design do site.
Depois de adicionar o logotipo, é importante trabalhá-lo de acordo com a idéia
do cliente. Aqui, a cor-padrão é laranja e essa informação deverá ser levada em conta
no decorrer do desenvolvimento do site.
A aplicação de efeitos a partir do layers dará uma sensação diferente ao logotipo e o fixará como marca de
seu site. Um exemplo de várias aplicações de logotipo é o trabalho do Google, por exem-
plo, que em diversas ocasiões do ano o incrementa. Em nosso caso, é importante ter o
logotipo de forma a poder adaptá-lo as situações desejadas.
O logotipo deve ficar em algum lugar visível que identifique seu site e pode ser des-
tacado com efeitos. Evite alterações freqüentes. Definido o logotipo, é importante traba-
lhar outros elementos do site, como os botões de navegação, por exemplo, ou a escolha
da tipografia que será utilizada no decorrer do desenvolvimento.
A escolha da tipografia é um fator imprescindível. No entanto, deve-se, primeira-
mente, pensar na facilidade da leitura do site, ou seja, para a Web é bem mais comum
utilizar-se de fontes sem serifa, como Verdana, Frutiger ou Arial. Deve-se criar um pa-
drão para os títulos, botões e outros elementos, como o texto corrido.
Na tipografia, as serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das
letras. As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês “sem serifa”), também
chamadas grotescas (de francês grotesque ou do alemão grotesk). A classificação dos tipos em serifados e
não serifados é considerada o principal sistema de diferenciação de letras.
http://pt.wikipedia.org/wiki/Serifa
46-63 - ok.indd 4746-63 - ok.indd 47 9/12/2008 16:01:339/12/2008 16:01:33

Depois de escolher os estilos, devemos pensar no conteúdo, em nosso caso, os botões solicitados no
briefing do cliente, que são: fale conosco, trabalhe conosco, portfolio, números interessantes, produtos e
serviços, missão e sobre a empresa.
Ao ver todos os botões, temos de descobrir onde colocá-los, para que a estética do site seja preservada,
e pensar em como adicioná-los ao layout integrando-os ao conjunto. O site é um todo unido que deverá
ser fatiado em várias páginas, imagens e elementos sem perder essa integração.
Deve-se, também, verificar o conteúdo do botão antes de construí-lo e verificar se valerá mesmo uma
nova página ou se seu conteúdo poderá ser integrado ao layout. Teremos os seguintes botões: Fale, Tra-
balhe conosco, Produtos e serviços, Portfolio, Números interessantes. O restante fará parte do layout da
página principal.
A integração deverá seguir um padrão, ou seja, as cores do logotipo e o formato dos caracteres deverão
ser parecidos para que não exista um distúrbio ou peso dentro dos elementos. Assim, o próximo passo
será ajustar onde cada um dos itens deverá ir dentro de nosso layout.
Dicas Importantes
Escolha uma fonte para títulos
Escolha uma fonte para texto (que não seja microscópica)
Escolha um grupo de cores-padrão
Cada uma dessas escolhas deverá ser utilizada em todo o site
O trabalho para definir um posicionamento e escolher as fontes deverá passar pelos seguintes itens:
– Crie algumas pastas na guia de layers para organizá-los.
46-63 - ok.indd 4846-63 - ok.indd 48 9/12/2008 16:01:349/12/2008 16:01:34

– Trabalhe a guia de caracteres para formatar parágrafos e fontes.
- Divida sua área de trabalho para definir os tamanhos das imagens com as quais você pretende tra-
balhar. Isso deixará as coisas mais fáceis para atualizações futuras. Utilize as guias para fazer essa divisão
(clique em View Guides no menu View para exibi-las).
Organize-se
Um site é composto de várias páginas e de várias figuras, principalmente se feito no Photoshop.
Crie uma nova pasta para armazenar seu trabalho. Dentro dela, crie outra chamada PSD. Nela, você
guardará seus arquivos de trabalho (arquivos em PSD), onde as fatias de imagem do seu site serão
armazenadas. Os arquivos HTML ficarão na raiz.
46-63 - ok.indd 4946-63 - ok.indd 49 11/12/2008 17:45:3011/12/2008 17:45:30

Após posicionar os títulos e vislumbrar onde serão colocados os textos, é hora de trabalhar layout,
linhas e guias, por meio da barra de ferramentas de vetores do Photoshop, o que poderá fazer muita di-
ferença. Trabalhe com cores neutras e tons que não destoem da cor da empresa.
A barra de ferramentas de vetores do Photoshop pode e deve ser utilizada para desenhar os quadros e
linhas que estiverem no site.
Ainda utilizando com as guias, é hora de trabalhar o “mouse over” dos botões. Para isso, duplique os
layers da seguinte maneira:
Clique com o botão direito do mouse sobre a camada e duplique-a. Depois, altere a propriedade para
que ele fique diferente do layer-padrão ou do botão sem o over. Em seguida, altere a cor da fonte do con-
teúdo do layer. Deixe-o invisível para que quando salvemos o layout para a Web, na segunda passada, a
imagem seja preservada e o efeito aplicado dentro de um software como o Dreamweaver.
46-63 - ok.indd 5046-63 - ok.indd 50 9/12/2008 16:01:359/12/2008 16:01:35

Para alterar a cor da fonte sem precisar da ferramenta de texto, clique sobre o layer do mouse over. O
conteúdo será selecionado. Posteriormente, com a palheta de caracteres, clique sobre a cor. Caso queira
assegurar-se de que a cor exista no Dreamweaver, clique sobre a opção Somente Cores da Web (Only
Web Colors).
É recomendável anotar o número hexadecimal (aquele com letras e números) da cor para utilizá-la
depois em outros elementos. Uma tabela de cores é essencial para desenvolver seu site.
Depois de alterar as cores dos textos dos layers, oculte-os, pois você só os utilizará novamente quando
trabalhar as funções de Web. Para isso, clique sobre o ícone dos olhos na palheta dos layers.
As ilustrações
Ilustrar o site é fundamental para que sua aparência seja acolhedora. Vale um pouco da imaginação de cada
desenvolvedor, entretanto, em casos corporativos, as empresas apreciam principalmente a sobriedade. Dessa
forma, escolha as ilustrações e trabalhe-as de acordo com o conjunto. O recurso da sobreposição de layers e o
de tratamento da imagem poderão auxiliar muito nesse processo.
Trabalhe, brinque, invente. Nessa seqüência, em que você trabalhará a aparência do site, é hora de desenvol-
ver todos os aspectos da sua criatividade. Não se ﬁxe ao já trabalhado. Algumas vezes, será necessário posicionar
novamente o que já foi criado, no entanto, muitas coisas serão aproveitadas.
Veja como ﬁcou nosso site depois de incluirmos vários contornos e ilustrações.
46-63 - ok.indd 5146-63 - ok.indd 51 11/12/2008 17:45:4011/12/2008 17:45:40

Agora, todo o trabalho será recortado a fim de gerar os arquivos do site. Para isso, trabalharemos a
ferramenta de fatias (slices).
A ferramenta slices possui algumas peculiaridades. Tome muito cuidado com a divisão para não gerar
fatias sobrepostas, pois estas somente servirão para ocupar espaço de imagens importantes. Nomeie suas
fatias, elas serão a referência para que você desenvolva os projetos. Acompanhe as guias geradas, faça os
riscos no layout e corte depois.
Com o design pronto, clique no menu View e selecione a opção Clear Guides. Isso irá apagar todas
as guias já utilizadas em seu documento. Você deverá criar uma nova série para delimitar as marcas de
corte a serem utilizadas pelas fatias.
Ao finalizar o processo de desenhar as guias, utilize a ferramenta Slice, além da ferramenta de seleção
para dimensionar cada uma das fatias e alterar suas propriedades.
Existem dois tipos de fatias, as de usuário e as automáticas. É bastante recomendável que você trans-
forme todas em fatias de usuário, para que no momento de salvar as figuras seja possível dizer qual tipo
de formato você deseja para aquela imagem. Você pode, por exemplo, ter os arquivos de apenas uma
cor em formato GIF para economizar em tamanho, mas pode deixar as imagens que precisam de mais
definição em formato JPG. Essas opções serão utilizadas nas fatias, no entanto, devem ser definidas ini-
cialmente, quando criarmos cada uma delas.
46-63 - ok.indd 5246-63 - ok.indd 52 11/12/2008 17:45:4011/12/2008 17:45:40

Assim que todas as fatias forem criadas, você precisará nomeá-las. Utilize a ferramenta de seleção de
slices e clique duas vezes sobre cada uma delas. As opções da fatia serão abertas e você poderá definir as
informações detalhadamente.
Agora que todas as fatias foram nomeadas, é hora de salvar nosso trabalho, na pasta em que desenvol-
vemos nosso site. Selecione o menu Arquivo, Salvar para a Web ou File, Save for Web.
46-63 - ok.indd 5346-63 - ok.indd 53 11/12/2008 17:45:4111/12/2008 17:45:41

Com a ferramenta de seleção de slices, clique sobre cada fatia e defina se ela será JPG ou GIF. Note
que quando a imagem é transformada em GIF, o Photoshop disponibiliza uma palheta de cores. É pos-
sível otimizá-la, apagando as cores que não forem essenciais.
Quando a fatia for alterada para JPG você poderá otimizá-la para a qualidade desejada. A idéia aqui é
deixar a imagem com a melhor resolução possível, por isso, deixe a imagem com máxima qualidade.
Ao editar o GIF, além de trabalhar a palheta de cores, é possível deixar algumas áreas transparentes.
Isso é muito útil para otimizar determinados locais da imagem. Neste exemplo não houve a oportunida-
de de trabalhar a transparência, mas caso seja preciso, basta clicar sobre a cor e, depois, no botão Marcar
a cor selecionada para Transparente.
Depois desse procedimento, é hora de salvar o site. Clique em Save e depois na caixa de seleção. Es-
colha a opção HTML e imagem. Dessa forma, o Photoshop criará o seguinte para você:
46-63 - ok.indd 5446-63 - ok.indd 54 11/12/2008 17:45:4111/12/2008 17:45:41

O HTML será uma tabela com as figuras posicionadas no lugar exato em que você as salvou. Abrindo
o Dreamweaver para visualizar, tudo fica mais fácil de entender.
Agora, no Dreamweaver, é hora de dar os retoques finais às imagens, como às versões “over” que fize-
mos nos botões. Altere os layers para que estes exibam-nas ao em vez das imagens-padrão.
Faça o procedimento para salvar para a Web novamente e coloque as imagens em outra pasta. Crie
uma nova pasta dentro do diretório onde você salvou a primeira seqüência e, em seguida, entre nessa
pasta. Salvando o arquivo novamente, o Photoshop criará uma estrutura idêntica à primeira, com a dife-
rença de que você poderá visualizar as imagens que deseja para a posição over dos botões.
46-63 - ok.indd 5546-63 - ok.indd 55 9/12/2008 16:01:379/12/2008 16:01:37

46-63 - ok.indd 5646-63 - ok.indd 56 9/12/2008 16:01:389/12/2008 16:01:38

Renomeie as figuras. Depois, copie e cole-as no diretório original. Apague a pasta das novas imagens
para ficar somente com as duplicatas dos botões.
Agora, no Dreamweaver, faça o seguinte:
Apague o primeiro botão do jeito que ele está e clique sobre a opção Insert, Rollover Image. Adicione
a primeira figura e, em seguida, adicione a segunda imagem. Defina um texto alternativo em caso de ela
não ser carregada e, depois, defina o link para o botão. Repita o processo em todos os botões.
Com essas opções, chega o momento de desenvolver o restante do site, cada página com sua caracte-
rística, sem perder todo o conjunto. É interessante tentar manter as imagens principais, como o cabeça-
lho, rodapé e menu. O banner e o conteúdo de texto podem ser alterados.
46-63 - ok.indd 5746-63 - ok.indd 57 9/12/2008 16:01:399/12/2008 16:01:39

Esse foi a nossa página principal. Você poderá conferir o site pronto em www.creations.com.br
Agora, veja algumas ferramentas para facilitar a criação de outro tipo de conteúdo. Imagine que, além
da página principal, temos uma página com vários papéis de parede para que o usuário possa baixá-los.
O Photoshop pode criar thumbnails para que seja possível selecionar a imagem desejada, criando auto-
maticamente o HTML. Veja como funciona:
Outras aplicações Web para o Photoshop
A ferramenta de automatização do Photoshop proporciona facilidade no desenvolvimento de galerias de
imagens, deixando para o usuário apenas os ajustes mínimos novamente. Se você possui um diretório de
ﬁgura e gostaria de compartilhá-lo na Web, faça o seguinte: clique em File, Automate, Web Photo Gallery.
No assistente, defina as opções de estilo, já disponíveis para a criação automática da página. Já que
trabalhamos todo um design inicialmente, é recomendável que o estilo mais simples seja utilizado para
que possamos aplicá-lo a nosso site. O e-mail e a extensão são campos à sua escolha.
Em Folders, selecione, inicialmente, a pasta de origem das imagens que deseja inserir em sua galeria de fo-
tos. Não importa o tamanho, já que o Photoshop criará réplicas em tamanho reduzido para a visualização.
Em Destino, adicione uma pasta separada, para que você reagrupe todos os elementos diretamente no
site. É a hora de definir as opções dos thumbnails, que são as miniaturas. Na opção Banner, escolha o
nome que será destacado para o site, os créditos do fotógrafo, contatos e outros detalhes.
Em Large Image, você pode solicitar que o Photoshop padronize todas os arquivos da pasta de ori-
gem. Não é recomendável, mas algumas vezes é necessário. Nessas opções, é possível encontrar itens
interessantes, como acrescentar ou remover o nome do arquivo, o tamanho, os créditos etc.
Em Thumbnails, defina o tamanho das miniaturas, o número de linhas e colunas que elas ocuparão
na página e, novamente, detalhes de exibição.
46-63 - ok.indd 5846-63 - ok.indd 58 11/12/2008 17:55:1611/12/2008 17:55:16

Em Custom Colors, veriﬁque se as cores que serão aplicadas estão de acordo com seu site. É possível
alterá-las nesse campo.
Security é a opção de inclusão de detalhes de segurança em sua imagem. Faça os testes e veriﬁque. Clique
em OK para o Photoshop iniciar o desenvolvimento de sua página de thumbnails.
46-63 - ok.indd 5946-63 - ok.indd 59 11/12/2008 17:45:4211/12/2008 17:45:42

Agora, é só adaptar a galeria ao projeto inicial. Uma dica interessante é capturar a tela, adicionar a figura e depois
recortá-la no HTML para somente copiar e colar o conteúdo com o tamanho já definido.
Essas dicas são relevantes para desenvolver seus sites no Photoshop. No Image Ready, você pode criar animações para
seus banners, e diversificar efeitos e funções das imagens. Para isso, basta clicar sobre a barra de ferramentas destinada
à interação entre os dois programas. Quem sabe em um outro momento não trabalhemos somente essa interação? Por
enquanto, cabe a você pensar que, acima de tudo, o site deve ser agradável aos olhos e funcional à sua navegabilidade.
O Photoshop facilita o desenvolvimento dessas funções mas, no final, o responsável por qualquer uma das fun-
cionalidades, dimensões e bom gosto será você. Não tenha medo, brinque e arrisque. Vários sites grandes surgiram
assim, de uma idéia que um dia alguém resolveu desenvolver.
A melhor parte é que o Photoshop ainda faz a paginação de todos os documentos HTML. O arquivo
final fica da seguinte forma:
■ Projeto visual de sites
No trabalho com a Web, o funcionamento do Photoshop é muito semelhante ao do Fireworks, da Adobe: com
diversas ferramentas de desenhos, cores, efeitos e formatos, você tem muita liberdade para criar o site da maneira que
bem entender. E quando o layout está finalizado, basta utilizar uma ferramenta que “fatia” o site, separando a imagem
maior em pequenas figuras. Assim como no Fireworks, o Photoshop também dá as opções de salvar somente a imagem
ou de salvar as figuras já encaixadas em um arquivo HTML formado por tabelas.
Feito isto, bastará abrir o HTML em um programa de edição de sites, como o Dreamweaver, e fazer todas as altera-
ções que você julgar necessárias. Muitos preferem tirar todas as tabelas do site e criar uma estrutura tableless, em CSS,
um formato de site mais compatível com os diversos browsers, e que abre mais rapidamente que aqueles construídos com
tabelas. Outros preferem manter a estrutura original, mas gostam de usar o editor de código para “limpá-lo”, uma vez
que arquivos HTML gerados por programas gráficos costumam trazer muitos resíduos que deixam o código confuso.
Os profissionais da área têm alguns macetes para deixar mais fácil esse trabalho: constroem o layout do site, mas
fatiam somente as partes que realmente precisarão entrar como imagens. Um exemplo: se você fatiar todo um layout
com fundo azul, terá várias imagens com essa mesma cor azul sólida. A melhor coisa a fazer seria deletar as figuras e
aplicar a cor ao plano de fundo.
Outra dica é anotar e ter total controle sobre as medidas em pixels de cada elemento para um encaixe perfeito na
montagem final do site. Se você criar um botão que muda de cor no momento em que o mouse passa sobre ele, terá
de criar dois modelos com cores diferentes, mas com exatamente o mesmo tamanho. Para poupar tempo, você pode
economizar o fatiamento dos botões. Se tiver seis botões laterais com o mesmo tamanho, por exemplo, pode fatiar
apenas um e replicá-lo posteriormente no arquivo HTML. Claro que isso só vale se o texto do botão for incluído no
formato texto, algo que é possível somente com a utilização de CSS. Para HTML simples, as imagens devem vir com
o texto junto, o que criaria a necessidade do fatiamento de todos os botões.
O fato de permitir a visualização do layout inteiro antes de mandá-lo para o HTML e exportar as imagens de uma
maneira muito mais fácil é agil faz do Photoshop uma das melhores ferramentas também para imagens web.
46-63 - ok.indd 6046-63 - ok.indd 60 9/12/2008 16:01:399/12/2008 16:01:39

1. Abra um novo documento na opção New do menu
File e crie seu layout. Se preferir, apenas importe al-
gum layout preexistente por meio do mesmo menu,
clicando em Import.
2. Se criar um layout novo, é aconselhável que use di-
mensões facilmente visualizáveis por navegadores de
Internet. Uma opção é 760 pixels em Width e 420
pixels em Height. Clique OK.
3. No caso de ter um arquivo de imagem importado,
a figura aparecerá em uma camada bloqueada, a Ba-
ckground. Para resolver isso, acesse a opção Layers
no menu Window.
4. Com a caixa de camadas aberta, clique sobre o bo-
tão no canto superior direito que fica ao lado das abas.
A caixa de opção de camadas se abrirá. Clique em
Duplicate Layer.
5. Nas opções de duplicação de camada, é possível
nomear a nova layer com o nome que desejar, na cai-
xa de texto Duplicate Background As. Em seguida,
clique em OK.
6. Na aba Layers, verifique a camada Background e
a nova, a que chamamos de Lay out. Clique sobre
a camada bloqueada e, depois, sobre o botão Delete
layer, no canto inferior direito.
46-63 - ok.indd 6146-63 - ok.indd 61 9/12/2008 16:01:409/12/2008 16:01:40

7. Clique em Yes para conﬁrmar a exclusão da cama-
da Background. Se preferir, é possível excluir layers
sem a necessidade dessa conﬁrmação. Para isso, mar-
que Don’t show again.
8. Na barra de ferramentas, escolha Slice Tool, como
mostra a imagem. É ela que possibilitará o fatiamento
do layout em diferentes pequenas imagens para sua
página Web.
9. Primeiro, fatie o banner de seu trabalho, o elemen-
to que se posiciona na parte superior da página e que,
geralmente, leva seu título. Clique e arraste, como é
mostrado na imagem.
10. Repare que a área marcada pela fatia criada está
numerada como 01. O resto foi numerado como 02,
e esse será o espaço em que serão criadas novas fatias
para os demais elementos.
11. Neste exemplo, foi feito o fatiamento que separa
a parte inferior ao banner. Foram separados o menu
com os botões do menu principal e do rodapé, nume-
rados como 02, 03 e 04.
12. O próximo passo é fatiar cada um dos elemen-
tos que representarão os botões que compõem o
menu de links e opções do layout de sua nova pági-
na para a Web.
46-63 - ok.indd 6246-63 - ok.indd 62 9/12/2008 16:01:419/12/2008 16:01:41

13. Agora, na mesma barra de ferramentas, esco-
lha a opção Slice Select Tool. Ela disponibilizará
algumas opções, como a possibilidade de usar as
alças de dimensão.
14. Ainda com essa ferramenta selecionada, clique so-
bre o ícone Set options for the current slice, locali-
zada sob o menu principal, ao lado direito das opções
de fatiamento.
15. Ao clicar sobre o ícone, as opções da fatia são
exibidas em uma caixa na qual é possível nomear as
fatias e especiﬁcar o link ao qual elas direcionarão ao
clicadas. Clique OK.
16. Aqui, é possível a visualização de como o layout
se apresentará após terem sido feitas todas as fatias.
Lembre-se de separar cada elemento, como mostra
a imagem.
17. No menu File, clique sobre a opção Save For
Web. Dentro dessa caixa de opções, estabeleça for-
mato e qualidade das imagens. Figuras com dégradés
devem ser salvas como .jpeg.
18. Clique Salvar e, depois, nomeie seu arquivo.
Salve-o como tipo HTML and Images (*html).
Salve-o novamente e importe as fatias para seu edi-
tor de Web.
46-63 - ok.indd 6346-63 - ok.indd 63 9/12/2008 16:01:429/12/2008 16:01:42

■ Integração com o Flash CS3
Talvez você nunca tenha reparado, mas o Photoshop e o Flash têm mais características em comum do que imagina-
mos. A versão Flash CS3 aumenta, e muito, as possibilidades de integração entre arquivos de ambos os aplicativos.
Nestetutorialvocêcriaráumarquivo-modelonoPhotoshop,comdiferentestiposdeobjetosecamadas,comointui-
to de, em seguida, importá-lo no Flash CS3 e entender quais são e como funcionam as novas opções de importação de
arquivos PSD no software. Verá que o Flash automaticamente reconhece as camadas que foram criadas no Photoshop,
apresentando a mesma estrutura e permitindo optar por importar todas as camadas ou selecionar apenas um número
específico de layers.
Também verá que para cada tipo de camada, imagem ou texto, por exemplo, existem diferentes opções de confi-
guração. É possível importar uma layer de texto como uma imagem achatada, ou então como texto editável dentro do
Flash. O mesmo ocorre para camadas que contêm imagens: você pode importá-las como objetos dinâmicos do Flash ou
somente como imagens achatadas. É possível até transformar uma camada do arquivo original PSD em um movie clip,
antes mesmo de concluir o processo de importação.
Essa nova opção de importação detalhada de arquivos, sem dúvida, é muito útil para os profissionais que desejam
criar animações no Flash a partir dos designs e edições de imagem que já estão acostumados a fazer no Photoshop. Unir
a capacidade inquestionável de tratamento e criação visual com animação.
1. Basicamente, o que vamos fazer é criar um arqui-
vo-ensaio no Photoshop, com diversas opções de ca-
madas, e importá-lo no Flash para entender como o
programa lê os arquivos PSD.
2. Crie um novo arquivo no Photoshop. Acesse o
menu principal em File e selecione a opção New. Edi-
te as configurações como desejar – dimensões, resolu-
ção, etc. – e clique em OK.
3. Crie algumas layers além da inicial, para que
possamos incluir diferentes tipos de objetos. De-
pois, veremos como esses objetos podem ser impor-
tados no Flash.
4. Para criar novas camadas, basta acessar o menu
principal do programa em Layers, posicionar a seta
do mouse sobre a opção New e, em seguida, clicar
na opção Layer.
64-78 ok.indd 6464-78 ok.indd 64 9/12/2008 16:03:489/12/2008 16:03:48

5. Na janela que é aberta em seguida, basta confi-
gurar as opções da nova layer, como nome, tipo de
cor de fundo, opacidade, etc., e clicar no botão OK
para criá-lo.
6. O próximo passo é insirir diferentes objetos nas
layers criadas. Em uma ou mais camadas, cole ou
importe quaisquer imagens de diversas resoluções
ou com efeitos.
7. Crie, também, uma ou mais layers apenas com
texto. Você pode utilizar diferentes camadas e
configurações de tipografia (fonte, cor, efeitos
etc.), se quiser.
8. Utilize efeitos de opacidade, ou então de mistura
de camadas entre layers nas quais você usou figuras
de bitmap. O importante é utilizar o maior número
de recursos possível.
9. Separe camadas parecidas em grupos de layers.
Para isso, utilize o botão Create a New Group e, em
seguida, arraste as camadas semelhantes para o ícone
do novo grupo.
10. Crie nomes para identificar todas as camadas e os
grupos que você criar. Depois, eles auxiliarão a iden-
tificar as layers corretas no processo de importação
do Flash.
64-78 ok.indd 6564-78 ok.indd 65 9/12/2008 16:03:579/12/2008 16:03:57

11. Crie quantas camadas quiser, quantos grupos de-
sejar, com o maior número de elementos diferentes
possível. Não importa a qualidade visual, mas a varie-
dade de elementos.
12. No ﬁnal desses procedimentos, salve o arquivo
em seu disco rígido. Acesse o menu principal em File,
selecione a opção Save As e salve o documento no for-
mato PSD.
13. Agora que já tem o material criado no Photoshop,
execute o Macromedia Flash CS3 para iniciar o pro-
cedimento de importação do arquivo PSD para a tela
do Flash.
14. Crie um novo documento, acesse o menu prin-
cipal do Flash em File e selecione a opção New, ou
apenas utilize o atalho CTRL+N por meio das teclas
do teclado.
15. Na janela de tipos de arquivos que podem ser
criados, selecione a primeira opção denominada
como FlashFile (ActionScript 3.0). Clique em OK
para criar um novo documento.
16. Agora, vamos dar início ao processo de impor-
tação do arquivo PSD. Acesse o menu principal em
File e selecione as opções Import. Em seguida, Im-
port to Stage.
64-78 ok.indd 6664-78 ok.indd 66 9/12/2008 16:03:589/12/2008 16:03:58

17. Navegue pelo browser até encontrar o arquivo
PSD que você criou anteriormente no Photoshop CS3
ou na versão do programa que utiliza. Selecione-o e
clique em Abrir.
18. Será aberta, então, a janela de configurações da
importação do arquivo PSD. Repare que a mesma es-
trutura de camadas que você criou no Photoshop é
apresentada em tela.
19. Ao clicar nas camadas, você perceberá que dife-
rentes opções de configurações surgem ao lado, de-
pendendo do tipo de objeto que contém na layer (ima-
gem, texto etc.).
20. Você também pode minimizar os grupos de
camadas e voltar a maximizá-los, como se esti-
vesse trabalhando na paleta de camadas do pró-
prio Photoshop.
21. Selecionando uma layer de imagem, podemos
escolher entre importar uma figura bitmap edi-
tável, um objeto dinâmico do Flash, ou apenas a
imagem achatada.
22. Se você optar por importar a layer de imagem
como editável, terá de criar um nome no campo
Instance name, para identificá-la entre os demais
objetos dinâmicos.
64-78 ok.indd 6764-78 ok.indd 67 11/12/2008 17:45:5711/12/2008 17:45:57

23. Ao selecionar uma layer de texto, também sur-
gem diferentes opções de importação: texto editá-
vel, imagem vetorizada ou figura achatada repre-
sentando o texto.
24. Da mesma forma que em uma camada de ima-
gem, se optar por importar a layer de texto com op-
ções diferentes da imagem achatada, terá que criar um
nome para o objeto.
25. Um ponto comum entre a importação dos di-
ferentes tipos de layers é a possibilidade de já conﬁ-
gurar determinada layer (imagem ou texto) em um
movie clip.
26. Também é possível, independentemente do tipo
de layer, efetuar uma conﬁguração prévia de compres-
são e calcular o tamanho do arquivo de imagem de
acordo com ela.
27. As caixas de seleção ao lado de cada layer servem
para selecionar quais camadas você deseja importar.
As que têm caixas de opção marcadas serão importa-
das para o arquivo Flash.
28. Por último, você pode optar por importar as layers
do arquivo Photoshop como camadas do novo arqui-
vo Flash, mais parecido com o padrão do Photoshop,
ou como keyframes.
64-78 ok.indd 6864-78 ok.indd 68 9/12/2008 16:04:009/12/2008 16:04:00

29. Caso opte pela importação das layers como ca-
madas do novo arquivo Flash, cada camada será uma
nova layer do arquivo, seguindo mais ou menos o pa-
drão do Photoshop.
30. Caso escolha importar as camadas como
keyframes, cada layer será um keyframe de uma
mesma layer do Flash, com o nome do arquivo ori-
ginal do Photoshop.
■ Composições avançadas
Fotografias realizadas fora de estúdio que envolvam pessoas e um cenário detalhado sempre apresentam alta proba-
bilidade de darem errado. A solução encontrada por muitos profissionais e amadores é tirar inúmeras fotos para que ao
menos uma saia perfeita e possa ser aproveitada.
Pode acontecer, no entanto, de todas as fotos saírem com algum detalhe imperfeito, o que torna necessária uma
mescla para que o resultado final seja realmente bom. Pouco tempo atrás, havia uma única solução para esse problema:
distribuir as fotos em camadas de um mesmo documento e trabalhar intensamente por muito tempo com rotações, ca-
rimbos e borrachas até que o resultado final fosse alcançado. Para eliminar todas essas etapas chatas, o Adobe Photoshop
CS3 traz a ferramenta de alinhamento automático de camada, que facilita incrivelmente essa tarefa.
Além de remover ou adicionar elementos com a combinação de fotos, o recurso também permite realizar troca de
elementos. Pode ser muito útil quando você possui duas fotos de um casal em um mesmo cenário e em cada uma delas
um dos membros saiu com uma expressão facial longe da esperada, só para dar um exemplo.
Conheça nos passos abaixo esta ferramenta, ensinando como remover elementos que atrapalham determinada ima-
gem por meio da ferramenta de alinhamento automático de camadas.
É sempre importante lembrar que trabalhar com fotografias que envolvam pessoas e cenários complexos é uma ati-
vidade que exige atenção aos detalhes e cuidados para manter a aparência natural.
1. Este recurso do Photoshop CS3 é, em geral, utiliza-
do para mesclar imagens parecidas, em que se deseja
agrupar elementos distintos de ambas as imagens.
2. O objetivo do fotógrafo nas imagens acima era ob-
ter uma foto no qual o primeiro homem (de camiseta
escura) estivesse sozinho, olhando para a câmera.
64-78 ok.indd 6964-78 ok.indd 69 9/12/2008 16:04:019/12/2008 16:04:01

3. Repare que as imagens são parecidas, no entan-
to, em uma delas a posição da cabeça do homem
está correta, na outra, não temos a presença do se-
gundo homem.
4. Queremos juntar as melhores qualidades das
imagens em uma só. Vamos, então, copiar uma das
fotos. Selecione-a totalmente com CTRL+A e co-
pie com CTRL+C.
5. Selecione a outra imagem e utilize o atalho
CTRL+V para colar a ﬁgura anterior. Uma nova layer
será criada automaticamente, separando as fotos em
camadas diferentes.
6. Aplique um pouco de opacidade na primeira cama-
da para visualizar que existem diferenças de alinha-
mento entre as imagens, diferenças essas que seriam
difíceis de solucionar.
7. Existem elementos em ambas as imagens que gos-
taríamos de utilizar, mas, para isso, é preciso que a
maior parte das fotograﬁas esteja alinhada, para que
possamos mesclá-las.
8. É preciso selecionar as camadas, ou seja, ambas as
imagens. Selecione a layer superior e, com o botão
SHIFT pressionado, clique na segunda camada para
selecionar as imagens.
64-78 ok.indd 7064-78 ok.indd 70 9/12/2008 16:04:029/12/2008 16:04:02

9. Com as duas camadas selecionadas, acesse o
menu principal do Photoshop clicando na op-
ção Edit. Em seguida, selecione a opção Auto-
Align Layers.
10. Existem quatro opções de alinhamento de ca-
madas: Auto, Perspective, Cylindrical e Reposition
Only. Mantenha selecionada a opção Auto e clique
em OK.
11. Feito isto, o Photoshop vai analisar os elementos
presentes em ambas as camadas para alinhá-las ou
modificá-las, de maneira que fiquem idênticas o má-
ximo possível.
12. Repare que, agora, as diferenças de posicionamen-
to entre as imagens selecionadas diminuíram conside-
ravelmente, ficando apenas as mais drásticas.
13. Agora, o trabalho é apagar, de cada camada, os
elementos desnecessários. Neste caso, será retirado o
homem número dois da camada um e a cabeça do
homem dois da camada dois.
14. Apague as diferenças mais consideráveis com a
ferramenta borracha. Não se esqueça de navegar en-
tre as layers corretas para não apagar informações da
camada errada.
64-78 ok.indd 7164-78 ok.indd 71 11/12/2008 17:48:5411/12/2008 17:48:54

Modifique a cor do cabelo em fotos com Photoshop

Modifique a cor do cabelo em fotos com Photoshop

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (14)

Destaque

Destaque (10)

Semelhante a Modifique a cor do cabelo em fotos com Photoshop

Semelhante a Modifique a cor do cabelo em fotos com Photoshop (20)

Mais de Tricô Fácil

Mais de Tricô Fácil (20)

Último

Último (8)

Modifique a cor do cabelo em fotos com Photoshop