Photoshop Curso Completo

Prévia do material em texto

• APRENDA DE TÉCNICAS RÁPIDAS A DICAS PROFISSIONAIS • MELHORE QUALQUER TIPO DE FOTOGRAFIA
• CRIE MONTAGENS REALISTAS • APLIQUE EFEITOS AVANÇADOS • TRATE MODELOS COMO NAS REVISTAS
PHOTOSHOP
APRENDA 
CURSO COMPLETO
Criação de brushes | Ferramentas | Actions | Edição de cores | Tratamento de peles | Recorte de cabelos
Vetores | Ilustrações | Montagens | Efeitos | Integração | Photoshop para web E MUITO MAIS
+ DE 100
PÁGINAS
DE TUTORIAIS 
ILUSTRADOS
PASSO A PASSO
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
Multibrasil Download - www.multibrasil.net
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áfi ca IBEP
2-4 expediente e sumário - ok.indd 22-4 expediente e sumário - ok.indd 2 9/12/2008 19:38:499/12/2008 19:38:49
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 artifi cial 27
 Correção de fotos 30
 Efeito tatuagem 33
 
■ Sumário 
2-4 expediente e sumário - ok.indd 32-4 expediente e sumário - ok.indd 3 11/12/2008 17:40:1511/12/2008 17:40:15
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 profi ssional 72
 Ilustrações 79
 Vetorize com o Photoshop 89
 Mescle imagens 95
 Recorte detalhado 98
 Integração de programas 102
 Modifi que fotos 107
2-4 expediente e sumário - ok.indd 42-4 expediente e sumário - ok.indd 4 9/12/2008 19:38:499/12/2008 19:38:49
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 fi m especifi co. À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-
toshoṕ ). Isso signifi ca 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 profi ssional 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 defi rnir 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
Para aquelas seleções mais difíceis, porém, menos precisas, a solução é usar o comando Extract (ALT+CTRL+X) 
e seguir as instruções do fi ltro. Mas atenção: por ser um fi ltro 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 ferramentaconvert 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
Aprenda Fácil Especial – Photoshop8
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á modifi 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
Aprenda Fácil Especial – Photoshop 9
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 modifi cado. Com 
isso, veja que automaticamente a cor do cabelo será 
modifi 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
Aprenda Fácil Especial – Photoshop10
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 identifi 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
Aprenda Fácil Especial – Photoshop 11
■ 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 fi 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
Aprenda Fácil Especial – Photoshop12
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 fi gura.
8. Em Image Size, mude a unidade de medida para 
porcentagem, e nos campos Height e Width, digite25. 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
Aprenda Fácil Especial – Photoshop 13
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-
fi nidas ou selecionar a que criamos.
12. Para que a automação seja fi nalmente 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 defi niçõ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
Aprenda Fácil Especial – Photoshop14
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
Aprenda Fácil Especial – Photoshop 15
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
Aprenda Fácil Especial – Photoshop16
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
Aprenda Fácil Especial – Photoshop 17
15. Com a imagem selecionada, clique em Refi ne Edge 
e modifi 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-
çar a usá-lo. Repare que o número que aparece abaixo dele 
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
Aprenda Fácil Especial – Photoshop18
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 
brushes originais do Photoshop e encontradas na Internet. 
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
Aprenda Fácil Especial – Photoshop 19
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 bastantedifundidos 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 fi cará 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 fotografi a do nosso exemplo. 
Você pode aplicar essa técnica independentemente de ter realizado a primeira tarefa proposta, ou seja, pode 
pegar qualquer fotografi a 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
Aprenda Fácil Especial – Photoshop20
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 f lores 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
Aprenda Fácil Especial – Photoshop 21
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 f lores 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 f lores 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
Aprenda Fácil Especial – Photoshop22
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 f lores 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
Aprenda Fácil Especial – Photoshop 23
■ 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
Aprenda Fácil Especial – Photoshop24
1. Neste passo-a-passo, temos uma fotografi 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
Aprenda Fácil Especial – Photoshop 25
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á selecionarGaussian 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
Aprenda Fácil Especial – Photoshop26
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á modifi cada.
23-26 - ok.indd 2623-26 - ok.indd 26 9/12/2008 16:18:519/12/2008 16:18:51
Aprenda Fácil Especial – Photoshop 27
■ Bronzeamento artifi cial
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 
confi guraçã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á-
fi co de cores.
27-36 - ok.indd 2727-36 - ok.indd 27 9/12/2008 16:20:219/12/2008 16:20:21
Aprenda Fácil Especial – Photoshop28
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 verifi 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áfi 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
Aprenda Fácil Especial – Photoshop 29
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
Aprenda Fácil Especial – Photoshop30
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
Aprenda Fácil Especial – Photoshop 31
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
Aprenda Fácil Especial – Photoshop32
 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. Nestecaso, 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 fi 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
Aprenda Fácil Especial – Photoshop 33
■ 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
Aprenda Fácil Especial – Photoshop34
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
Aprenda Fácil Especial – Photoshop 35
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
Aprenda Fácil Especial – Photoshop36
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
Aprenda Fácil Especial – Photoshop38
■ 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 fl exibilidade para se trabalhar com efeitos, fi ltros, ajustes 
e um novo projeto que melhora sua usabilidade de forma signifi cativa. 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 simplifi caçã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
Aprenda Fácil Especial – Photoshop 39
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 recursoincluí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
Aprenda Fácil Especial – Photoshop40
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 f lutuavam 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
Aprenda Fácil Especial – Photoshop 41
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 inf luencia 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
Aprenda Fácil Especial – Photoshop42
Suporte aprimorado para HDR (High Dynamic Range) de 32 bits
Quando estamos trabalhando com o tratamento de uma foto específi ca, temos liberdade para defi nir som-
bras, brilhos, contrastes, entre outras confi gurações do gênero, mas todas essas confi guraçõ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 defi niçã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 fotografi as do mesmo cenário com diversas exposições e aberturas de diafragma. 
Todas as imagens do produto fi nal 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 fl exibilidade para alterar as defi nições de cores, 
brilhos, sombras etc, sem afetar a defi nição e a qualidade do produto fi nal.
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 verifi car 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çãotambé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
Aprenda Fácil Especial – Photoshop 43
1. Abra a imagem em que deseja trabalhar e a outra 
que deseja aplicar à primeira. Selecione a fi 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
Aprenda Fácil Especial – Photoshop44
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 Alt e 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 fi gura colada para dentro 
do plano azul. Note que ela se adaptará à área criada, 
respeitando, inclusive, a orientação das faces. Ao fi nal, 
clique em OK.
37-45 ok.indd 4437-45 ok.indd 44 9/12/2008 16:00:079/12/2008 16:00:07
Aprenda Fácil Especial – Photoshop 45
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
Aprenda Fácil Especial – Photoshop46
■ 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 fi car 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 fi guras, 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, defi nir 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
Aprenda Fácil Especial – Photoshop 47
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 difi culdade para trabalhar a resolução dessa fi gura 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 desenvolvimentodo site.
A aplicação de efeitos a partir do layers dará uma sensação diferente ao logotipo e o fi xará 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 fi car em algum lugar visível que identifi que seu site e pode ser des-
tacado com efeitos. Evite alterações freqüentes. Defi nido o logotipo, é importante traba-
lhar outros elementos do site, como os botões de navegação, por exemplo, ou a escolha 
da tipografi a que será utilizada no decorrer do desenvolvimento. 
A escolha da tipografi a é 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 tipografi a, as serifas são os pequenos traços e prolongamentos que ocorrem no fi m das hastes das 
letras. As famílias tipográfi cas 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 classifi caçã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
Aprenda Fácil Especial – Photoshop48
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
Aprenda Fácil Especial – Photoshop 49
– 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
Aprenda Fácil Especial – Photoshop50
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
Aprenda Fácil Especial – Photoshop 51
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 fi 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 fi 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
Aprenda Fácil Especial – Photoshop52
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 utilizadasnas 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
Aprenda Fácil Especial – Photoshop 53
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
Aprenda Fácil Especial – Photoshop54
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
Aprenda Fácil Especial – Photoshop 55
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
Aprenda Fácil Especial – Photoshop56
46-63 - ok.indd 5646-63 - ok.indd 56 9/12/2008 16:01:389/12/2008 16:01:38
Aprenda Fácil Especial – Photoshop 57
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
Aprenda Fácil Especial – Photoshop58
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 
fi 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
Aprenda Fácil Especial – Photoshop 59
Em Custom Colors, verifi 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 verifi 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
Aprenda Fácil Especial – Photoshop60
Agora, é só adaptar a galeria ao projeto inicial. Uma dica interessante é capturar a tela, adicionar a fi gura e depois 
recortá-la no HTML para somente copiar e colar o conteúdo com o tamanho já defi nido.
Essas dicas são relevantes para desenvolver seus sites no Photoshop. No Image Ready, você pode criar animações para 
seus banners, e diversifi car 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 fi nal, 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á fi nalizado, basta utilizar uma ferramenta que “fatia” o site, separando a imagem 
maior em pequenas fi guras. Assim como no Fireworks, o Photoshop também dá as opções de salvar somente a imagem 
ou de salvar as fi guras já encaixadas em um arquivo HTML formado por tabelas.
Feito isto, bastará