Adobe Photoshop PDF

Licenciamento de Uso
Este documento propriedade intelectual 2002 do Centro de Computao da Unicamp

e distribudo sob os seguintes termos:

1. As apostilas publicadas pelo Centro de Computao da Unicamp podem ser
reproduzidas e distribudas no todo ou em parte, em qualquer meio fsico ou
eletrnico, desde que os termos desta licena sejam obedecidos, e que esta licena
ou referncia a ela seja exibida na reproduo.

2. Qualquer publicao na forma impressa deve obrigatoriamente citar, nas pginas
externas, sua origem e atribuies de direito autoral (o Centro de Computao da
Unicamp e seu(s) autor(es))

3. Todas as tradues e trabalhos derivados ou agregados incorporando qualquer
informao contida neste documento devem ser regidas por estas mesmas normas
de distribuio e direitos autorais. Ou seja, no permitido produzir um trabalho
derivado desta obra e impor restries sua distribuio. O Centro de Computao
da Unicamp deve obrigatoriamente ser notificado
(treinamentos@ccuec.unicamp.br) de tais trabalhos com vista ao aperfeioamento
e incorporao de melhorias aos originais.

Adicionalmente, devem ser observadas as seguintes restries:
A verso modificada deve ser identificada como tal
O responsvel pelas modificaes deve ser identificado e as modificaes datadas
Reconhecimento da fonte original do documento
A localizao do documento original deve ser citada
Verses modificadas no contam com o endosso dos autores originais a menos
que autorizao para tal seja fornecida por escrito.

A licena de uso e redistribuio deste material oferecida sem nenhuma garantia de
qualquer tipo, expressa ou implcita, quanto a sua adequao a qualquer finalidade. O
Centro de Computao da Unicamp no assume qualquer responsabilidade sobre o uso
das informaes contidas neste material.

ndice

O que so os softwares ......................................................................................................1
rea de trabalho do Adobe Photoshop ............................................................................2
Usando caixa de ferramentas ............................................................................................3
Usando a barra de menu (arquivo) ...................................................................................4
Usando a barra de menu (editar) ......................................................................................6
Usando a Barra de menu (imagem)..................................................................................7
Usando a barra de menu (camadas) ................................................................................9
Usando a barra de menu (selecionar) ............................................................................10
Usando a barra de menu (filtro) .......................................................................................11
Usando a barra de menu (visualizar)..............................................................................13
Usando a barra de menu (janela)....................................................................................14
Usando a Tecla de Atalho ................................................................................................16
Como mover uma imagem...............................................................................................18
Exerccios............................................................................................................................20
ImageReady........................................................................................................................40
Caixa de Ferramentas ...................................................................................................... 41
Barra de Menu .................................................................................................................. 43
Animao .......................................................................................................................... 45
Trabalhando com mapas de imagens.............................................................................. 49
Trabalhando com mapas de imagens (fatias).................................................................. 50
Referncia Bibliogrfica....................................................................................................53

ltima Atualizao em 13/02/2003

Gerao de Imagens para a Web

Diviso de Servios Comunidade Centro de Computao - Unicamp 1
O que so os softwares

Os softwares que vamos abordar so Adobe Photoshop 5.5 e Adobe ImageReady que nos
proporcionam um ambiente completo para a criao de imagens para Web.

So softwares que permitem edio, retoques e aplicao de efeitos em imagens grficas, como
fotos e desenhos inseridos em publicaes, exemplo:

revistas, jornais, livros, panfletos, home-pages, etc....

O Adobe Photoshop 5.5 um programa grande e complexo, o preferido pelos especialistas
em editorao e computao grfica .

Estes dois softwares possuem vrios recursos, a idia do treinamento ensinar a
vocs como fazer ttulos, botes e banners para ilustrar uma home page, entre outras coisas.


rea de trabalho do Adobe Photoshop


Usando caixa de ferramentas

As ferramentas da caixa de ferramentas permitem selecionar, pintar, editar e visualizar
imagens. Outros controles escolhem as cores do primeiro plano e do fundo, criam mscaras
rpidas e alteram o modo de exibio na tela.

A maioria das ferramentas tm paletas Pincis e Opes associadas, que permitem definir os
efeitos de pintura e edio das ferramentas.

Para exibir a caixa de ferramentas:

Escolha <Janela > Mostrar Ferramentas.
Para mover a caixa de ferramentas:
Arraste-a por sua barra de ttulo.

01 - Ferramenta marca de seleo retangular
02 - Ferramenta lao
03 - Ferramenta aergrafo
04 - Ferramenta carimbo
05 - Ferramenta borracha
06 - Ferramenta desfoque
07 - Ferramenta caneta
08 - Ferramenta medir
09 - Ferramenta lata de tinta
10 - Ferramenta mo
11 - Ferramenta zoom
12 - Ferramenta conta gota
13 - Ferramenta linear
14 - Ferramenta de Texto
15 - Ferramenta subexposio
16 - Ferramenta linha
17 - Ferramenta pincel histria da arte
18 - Ferramenta pincel
19 - Ferramenta varinha mgica
20 - Ferramenta mover
21 - Cor do primeiro plano e cor do plano do fundo
22 - Editar no modo padro e no modo mscara rpida
23 - Padres de tela de trabalho
24 - Saltar para o aplicativo do editor grfico padro


Usando a barra de menu (arquivo)

Neste menu, encontra-se os comandos que permitem abrir um novo arquivo ou imagem, salvar,
escanear, configurar a impresso e preferncias do programa.

1. (Novo) abre uma nova janela;
(Abrir) abre arq. que j existe p/ editar seu contedo;
(Abrir Como) abre um arquivo cuja a extenso est errada ou quando seu nome no
constar na lista apresentada na caixa do comando Open. Utiliza as mesmas extenses
do comando anterior.

2. (Fechar) fecha o arq. que estiver ativo, sem encerrar o aplicativo.
Se houve modificaes que no foram salvas, abre-se a opo de salv-las antes
do fechamento;

(Salvar) permite salvar o arq. em disco atualizando-o caso no tenha sido feito. Ser
pedido um nome atravs do mesmo comando Salvar Como;

(Salvar como) permite salvar o arq. com nome diferente do atual, permitindo assim
obter-se vrias verses de um mesmo trabalho, ou com o mesmo nome em outro
diretrio e/ou drive, ou ainda com extenses diferentes: *.PSD, *.PDD, *.JPG, *.TIF,
*.BMP, etc...

(Salve a cpia) permite salvar uma cpia da imagem exibida;

(Salvar para Web) permite definir as preferncias de Gravao de Arquivos para web

(Reverter) permite retornar a imagem ao estado que se encontrava antes de
gravada. Ateno ao usar este comando, pois ele irreversvel.

3. (Inserir) inserir imagens (EPS file, PDF file)

4. (Importar) importar e exportar imagens;

5. Informaes de arquivo...;

6. Configura pgina e imprime; (imprimir) remete a pgina para impresso;



7. Saltando do Photoshop para outros aplicativos

8. (Preferncias) configura as ferramentas e utilitrios e Direes de cores; (Configurao de
cores) determina qual ser o gerador de cores;

9. (Adobe On-line)

10. Aqui temos os ltimos arquivos acessados;

11. (Sair)para finalizar o Photoshop


Neste menu, esto os comandos que permitem a edio da imagem.

1. (Desfazer) este comando desfaz a ltima operao realizada ou refaz a operao que acabou
de ser desfeita (Refaz). Ateno: s h um Undo/ Redo por operao.

2. (Recortar) corta o item selecionado, (Copiar) copia o tem selecionado, (Copiar mesclado)
copiar fundindo e colar, (Colar) insere a imagem, (Colar em) cola o objeto selecionado dentro
de uma rea selecionada, (Apagar) Remover, limpar a rea selecionada;

3. Preenche a rea selecionada com a cor, opacidade e modo escolhidos, permite tambm o
preenchimento de uma borda ao redor da rea selecionada, como um contorno ou moldura.

4. (Transformao livre e Transformao): Estes comandos permitem girar, torcer, escalar e
aplicar perspectiva a um objeto ou a uma imagem inteira.

5. (Define Padro): Definir fundos especiais. Importante: o padro definido no salvo
automaticamente em nenhum diretrio. Se voc desejar criar uma biblioteca de padres, crie
um diretrio e recorte a rea a ser definida como padro (com o comando Crop ou ferramenta
Crop) e salve seu arquivo no diretrio criado utilizando o comando Save As.

6. (Descartar): Limpa todas as quatro opes ao mesmo tempo: Desfazer, rea de
transferncia, Padro, Histrico e Tudo. Estas opes tm uma desvantagem:Voc perde o
acesso ao que tiver eliminado. Portanto, no deve fazer descartar o contedo da rea de
transferncia se for preciso colar mais tarde, o que estiver nele. Alm disso, depois de
expurgar o buffer Undo, voc no poder desfazer a ao imediatamente anterior ao
expurgo.

Usando a barra de menu (editar)

Usando a Barra de menu (imagem)

Neste menu, esto os comandos que permitem a edio da imagem.

1. (Modo) Um modo de cor determina o modelo de cor usado ao exibir e imprimir documentos
do Photoshop. Ele baseia seus modos de cor em modelos estabelecidos para descrever e
reproduzir cores. Modelos comuns incluem HSB (matiz, saturao, brilho); RGB (vermelho,
verde, azul); CMYK (ciano, magenta, amarelo, preto); e CIE L*a*b*. O Photoshop inclui
modos de sada especializada de cor, como cor indexada e duotnicos.

2. Ajusta a imagem ( em nveis, brilho, contraste ....

3. (Duplicar) pode-se copiar uma imagem inteira (com todas as camadas, mscaras de
camadas e canais) para a memria disponvel, sem salvar no disco, usando o comando
Duplicar ou arrastando e soltando.

4. (Tamanho da imagem) O nmero de pixels na altura e largura da imagem bitmap. O
tamanho da exibio da imagem determinado pelas dimenses em pixel e do tamanho e
onfigurao do monitor. O tamanho do arquivo de uma imagem proporcional a suas
dimenses em pixel. Um monitor de 13 polegadas exibe 640 pixels na horizontal e 480 na
vertical.

Uma imagem com 640 por 480 preencheria esta pequena tela. Em monitor maior, com
configurao de 640 por 480, a mesma imagem (dimenses em pixel de 640 por 480) ainda
preencheria toda a tela, mas cada pixel iria parecer maior. Ao alterar a configurao para 1152
por 870 pixels, a imagem seria exibida com tamanho menor, ocupando apenas parte da tela.

Quando se prepara uma imagem para ser exibida on-line (por exemplo, uma pgina da Web
que dever ser visualizada em diferentes monitores), as dimenses em pixel se tornam muito
importantes. Como esta imagem pode ser vista em um monitor de 13 polegadas, convm limitar
seu tamanho para um mximo de 640 por 480 pixels.


5. (Tamanho da Tela de Pintura) permite adicionar ou remover espao de trabalho em
volta da imagem existente. Voc pode cort-la, diminuindo a rea da tela. A tela
adicionada mostrada com a mesma cor ou transparncia que a do plano de fundo.

6. (Corte demarcado) O comando Imagem >
Corte Demarcado descarta a rea fora da
seleo retangular e mantm a mesma
resoluo da original.


Usando a barra de menu (camadas)

Nesta caixa de menu, encontra-se opes de criao de novas camadas para imagens
elaboradas; duplicar uma camada e at realizar ajustes nas camadas criadas.

Maiores informaes sobre camadas sero abordadas no caderno de exerccios.


Usando a barra de menu (selecionar)

A maioria das Operaes inicia-se com uma seleo. Este comando permite selecionar
partes da imagem que no se tocam e voc pode combinar selees de vrias maneiras. Voc
pode tambm fazer vrios modos, tais como pintar sobre a rea selecionada ou usar a
ferramenta Lpis para desenhar um contorno preciso da rea a ser selecionada. Voc tambm
pode salvar as selees para o futuro.

1. (Tudo) - seleciona toda a rea da tela; (Desfazer Seleo) remove toda seleo ;
(Selecionar novamente) retorna a seleo removida e (Inverter) inverte a forma de
seleo;

2. (Escala de Cores) seleciona objetos pela faixa de cor;

3. (Difuso) seleciona pela caracterstica de rea da imagem e (Modificar) seleciona
setores modificados;

4. (Aumentar) aumenta rea selecionada e (Semelhante) seleciona reas idnticas;

5. (Transformar Seleo) transforma uma seleo. Geralmente difcil entender o efeito
dessas transformaes em uma seleo sem experimenta-la.

6. (Carregar Seleo) leva a tela at a rea selecionada e (Salvar Seleo) grava rea
selecionada.


Usando a barra de menu (filtro)

Este menu contm diversos filtros que permitem acertar a imagem, encobrindo pequenos
defeitos ou aplicar efeitos especiais. Os cincos filtros blur permitem suavizar as reas onde as
arestas so agudas, removendo o contraste;

Os filtros do Photoshop classificam-se em 14 categorias gerais. Alm disso, filtros de outros
fornecedores aparecem na parte inferior do menu Filtro.

Filtros Artsticos

Filtros de Desfoque

Filtros Traados de Pincel

Filtros de Distoro

Filtros de Rudo

Filtros de Pixelizao

Filtros de Acabamento

Filtros de Nitidez

Filtros de Croqui

Filtros de Estilizao

Filtros de Textura


Exemplos de filtros:

Filtros de Desfoque

Suavizam uma seleo ou uma imagem. Filtros de Desfoque so teis para retoques.
Suavizam as transies criando pixels intermedirios prximos s arestas aguadas de
linhas definidas e reas sombreadas em uma imagem.

Filtros Artsticos

Aplicam efeito de pintura ou especial a arte ou projetos comerciais. Use Recorte de
Arestas para colagens ou tratamento de texto. Esses filtros reproduzem efeitos de
materiais naturais ou tradicionais.



Os elementos citados nesta pgina referente a camadas, caminhos, guias e grades tero no
decorrer deste treinamento, referncias mais detalhadas.

1. (Nova visualizao) modifica a visualizao do objeto;

2. (Visualizar / alerta de Gamut) prvia CMYK e Alarme de Gamut;

3. (Zoom In) aumenta a imagem, (Zoom Out) diminui a imagem; (Ajustar tela) amplia oureduz
a imagem para visualizao na tela; (Tamanho original) amplia para o tamanho dos pixels e
(Tamanho da impresso) imprimir no tamanho;

4. (Ocultar Arestas) remover ou exibir bordas; (Ocultar Demarcador remover ou exibir caminhos;

5. (Mostrar e ocultar rguas) exibir ou remover rguas na janela da imagem;

6. Exibir ou remover guias; Prender as guias; Ver guias; limpar guias;

7. Exibir ou remover grade e Prender a grade.

Usando a barra de menu (visualizar)


1. (Cascata) exibe imagens em cascata; (Tile) exibe imagens de modo recortado;
(Arrange Icons) organiza os cones e (Close All) fecha todas as janelas de imagens;

2. (Ocultar Ferramentas) remove ou exibe as ferramentas na rea de trabalho;

3. Os itens nestas reas do menu View so relativos a exibio ou remoo dos Roll-ups de
auxlio que existem na rea de trabalho do Photoshop.

4. Aqui temos tambm a exibio e informaes das imagens abertas no Photoshop.

5. (Mostrar camadas) exibe a palheta de layers (camadas);

6. (Mostrar histrico) Desfazer mais de um comando; (Mostrar Aes) Automatizar uma srie de
passos

7. Remove ou exibe a barra de estatus

Usando a barra de menu (janela)


AJUDA
Neste menu o usurio solicita as caixas de Dilogo referentes a auxlio do manuseio do
software ou110 informaes sobre o mesmo.



Usando a Tecla de Atalho



Dicas:

Os arquivos de imagens geradas pelo Adobe Photoshop tem que ser pequenos para no
prejudicar a transmisso de dados. Eles chegam atravs da linha telefnica, que no foi
construda com esse objetivo, e por isso, no suportam grandes quantidades de bytes.
fortemente recomendado que uma pgina no tenha mais do que 35Kb, incluindo as imagens e
o texto.

Alm disso, existe o limite por causa da hospedagem da pgina no servidor, que tem seu preo
de aluguel diretamente ligado ao tamanho dos arquivos. Por exemplo, nos provedores, os
clientes tm direito a uma rea grtis de 256Kb. Se os arquivos ultrapassarem esse espao, a
rea passa a ser cobrada.

A resoluo de imagens na Internet muito baixa: 75 d.p.i, Portanto a qualidade da imagem cai
drasticamente, quando comparado com uma imagem impressa.

A melhor coisa a fazer salvar uma imagem nos dois formatos e ver qual fica com o menor
tamanho em bytes, preservando a qualidade. Quanto menor o arquivo mais rpido ser para
carregar.

Quando for construir uma imagem, procure usar um tamanho (largura e altura) maior do que o
desejado, pois voc poder ajustar o tamanho final depois.

Evite colocar muitas imagens numa pgina s, principalmente gifs animados. Lembre-se que
uma pgina no deve ultrapassar 35Kb. Se voc tiver que mostrar uma imagem que tem que ser
vista em tamanhos maiores, use o recurso de Thumbnail, ou seja: coloque um a verso
reduzida da foto, clicvel para uma pgina com foto maior. Assim, a pessoa clicar se tiver
interesse e j estar preparada para esperar. No coloque qualquer gif em qualquer lugar sem
funo nenhuma, apenas porque ele bonito ou engraado.


Como mover uma imagem

1. Escolha a ferramenta Mover.

2. D um clique e arraste a imagem para mov-la dentro de sua prpria tela de desenho.

3. Arraste a imagem para outra janela a fim de copi-la para outro arquivo.

Com a ferramenta Move, pode mover uma imagem dentro da sua janela ou arrast-la para outra
janela de imagem. Em imagens com uma nica camada, a ferramenta Move
movimenta a imagem inteira; se existirem diversas camadas em uma mesma imagem, a
ferramenta Move trabalha em camadas especficas, movendo uma de cada vez, ou camadas
vinculadas movendo grupo especfico de camadas ao mesmo tempo. ("Como trabalhar com
camadas")

Dicas:

medida que arrasta o cursor a fim de mover a imagem em linha reta para cima ou
para baixo e para a esquerda ou direita, mantenha pressionada a tecla Shift.




Exerccios

Photoshop: Como criar um arquivo

1. Escolha a opo Arquivo, Novo

2. Digite um nome para o arquivo na caixa de dialogo Novo.
Escolha as unidades de medida e insira as dimenses para a altura do arquivo.
Digite uma resoluo para o arquivo.

Em Contedo, selecione uma opo:

Branco para preencher o plano de fundo com branco, a cor padro do plano de fundo.

Cor do Plano de Fundo para preencher uma imagem com a cor de fundo atual.

Transparente para criar uma imagem contendo uma nica camada sem valores de cor.

Observao: Como as imagens criadas com a opo transparente contm uma nica camada,
em vez de um fundo, elas devem ser salvas no formato Photoshop. Photoshop o nico formato
que suporta camadas.

3. rea de Trabalho



Cada imagem que voc cria, inicia com um arquivo novo. Ao criar o arquivo novo, voc
especifica suas dimenses, resoluo e modo de cor, dependendo do destino final do arquivo.

Use a opo RGB para a Web e imagens de apresentao na tela. Bitmap para imagens em
preto e branco; Grayscale para imagens em tons de cinza, tais como fotografias e CMYK para
imagens que sero impressas.

O Photoshop oferece vrios modos para salvar arquivos:

O comando Salvar salva o arquivo no seu formato atual.

O comando Salvar Como permite que voc salve uma verso alternativa em um formato
diferente.

O comando Salvar uma Cpia permite salvar uma cpia do arquivo, deixando o original
intacto.

Importante: S o formato Photoshop (PSD) est disponvel para arquivos com camadas.

Formatos de arquivos:

GIF (Graphics Interchange Format) o formato de arquivo usado para exibir elementos grficos
e imagens de cores indexadas e imagens em documentos em linguagem de marcao de
hipertexto (HTML) na World Wide Web e outros servios on-line.

GIF um formato com compactao projetado para minimizar o tamanho do arquivo e o tempo
de transferncia eletrnica. Voc pode converter arquivos para o formato GIF usando um dos
seguintes mtodos:

O comando Arquivo > Salvar Como permite que voc salve uma imagem no modo Bitmap,em
tons de cinza ou cores indexadas no formato GIF e especifique exibio entrelaada. Uma
imagem entrelaada aparece gradualmente, cada vez com mais detalhes, medida que
transferida da Web, mas pode aumentar o tamanho do arquivo.

O comando Exportar para GIF89a permite que voc converta uma imagem em RGB ou cores
indexadas para o formato GIF89a, especifique o entrelaamento e defina a transparncia do
plano de fundo.

JPG - ao salvar neste formato, voc pode especificar a qualidade e o nvel de compactao da
imagem. Para especificar a qualidade e a compactao da imagem, insira um valor entre 0 e 10
ou escolha uma opo para Qualidade, ou arraste o controle dinmico.

Sempre h uma relao entre a qualidade da imagem e o grau de compactao: imagens de
qualidade mais alta usam menos compactao (e mais espao em disco) que imagens de
qualidade mais baixa.



Voc tambm pode selecionar uma opo de formato para o arquivo JPG.

Selecione Linha de Base (Padro) para usar um formato que pode ser reconhecido pela
maioria dos navegadores da Web.

O formato Linha de Base Otimizada otimiza a qualidade de cores da imagem e pode produzir
um arquivo um pouco menor, mas no suportado por todos os navegadores da Web.

O formato Progressivo faz a imagem ser exibida medida que transferida em uma srie de
varreduras (voc especifica quantas) mostrando verses cada vez mais detalhadas da
imagem inteira. Entretanto, arquivos de imagens JPEG progressivas tm tamanho
ligeiramente maior, exigem mais RAM para visualizao e no so suportadas por todos os
aplicativos e navegadores da Web.

Observao: Como o formato JPEG descarta dados, importante salvar arquivos JPEG
apenas uma vez. Edite e salve sua imagem em um formato que no descarte dados (como o
Photoshop - PSD) e salve no formato JPEG somente como passo final.



1) Crie uma imagem de 300x300 pixels com fundo branco. Agora, crie
uma seleo retangular que ocupa aproximadamente 4/5 do
espao em branco, usando a ferramenta "Marca de seleo
retangular".

2) Pinte a rea selecionada de preto usando a ferramenta lata de
tinta. Agora desfaa a seleo usando o menu Select > Deselect
(tecla de atalho Ctrl+D).

3) V para o menu Filtro > Desfoque> desfoque Gaussiano. No
parmetro Raio, coloque 12,0 pixels. Isso far com que o seu
quadrado fique desfocado exatamente como o da figura ao lado.

4) Para finalizar, v para o menu Imagem > Ajustar > nveis. No
parmetro nveis de entrada, insira os nmeros 118/1,00/138 nos
campos. Esses nmeros sero usados em TODOS os
arredondamentos que voc for fazer, independentemente da
forma usada. Clique OK. Seu retngulo com cantos arredondados
est pronto.



Photoshop: Crculo usando efeitos 3D

No necessrio um programa 3D para faze-la

5) Seu crculo est pronto. Basta deselecionar o crculo no menu Selecionar > Desfazer
seleo (Ctrl+D).

Photoshop: Como trabalhar com camadas (Layers)

As camadas (Layers) permitem manter os diferentes elementos dentro de uma imagem
organizados para que voc possa mover, ocultar, duplicar e editar esses elementos, sem afetar
o resto da imagem. A Palheta Layers do Photoshop o centro de controle das camadas,
permitindo que voc reordene, oculte e crie novas camadas. As camadas de ajuste especiais
podem conter efeitos que existem independentemente dos elementos de imagem, o que permite
revisar os efeitos atravs do processo de criao da imagem.

Para exibir a paleta Camadas:

Crie uma nova imagem de 200 x 200 com resoluo de 75 pixels. Vamos tentar fazer igual ao
modelo para podermos ver a diferena das ferramentas:
Escolha Janela > Mostrar Camadas.

1. Escolha a opo Janela, Mostrar camadas para exibir a palheta Camadas

2. Para acrescentar uma camada, d um clique no boto Criar nova camada.

3. Para excluir uma camada, arraste-a at o cone da lixeira.

4. Para alterar a ordem de empilhamento da camada, arraste-a para cima ou para baixo na
palheta.

5. D um clique na camada e escolha um modo no menu instantneo para alterar uma mistura
de camadas.

6. D um clique na camada e insira uma nova porcentagem no campo Opacidade para alterar a
opacidade de uma camada

7. D um clique no icone do olho ao lado do nome de uma camada para ocult-la

8. rea de trabalho

Na palheta Camadas (Layers) , a camada superior equivale parte da frente e a camada inferior
equivale parte de trs. Em outras palavras, a camada superior na palheta est na frente de
todas as camadas mostradas abaixo dela.

Photoshop: Achatando todas as camadas (layers)

Em uma imagem achatada, todas as camadas visveis so mescladas no plano de fundo,
reduzindo bastante o tamanho do arquivo. Achatar uma imagem descarta todas as camadas
ocultas e preenche as reas transparentes restantes com branco. Na maioria dos casos, no
convm achatar um arquivo antes do final da edio das camadas individuais.

Observao: Converter uma imagem entre alguns modos de cor achata o arquivo. Certifique-se
de salvar uma cpia do arquivo que inclua todas as camadas se quiser editar a imagem original
aps a converso.

Para achatar uma imagem:

1. Certifique-se de que todas as camadas desejadas estejam visveis.

2. Achate a imagem:

Escolha Camada > Achatar Imagem.
Escolha Achatar Imagem no menu da paleta Camadas.


Photoshop: Usando as ferramentas

As formas bsicas do Photoshop (quadrado e crculo e outras...) so realmente simples de
fazer. O mtodo para fazer um quadrado perfeito exatamente o mesmo usado para se fazer
um crculo, mas com uma ferramenta de seleo diferente. Nesses exerccios iremos usar vrias
ferramentas:

( mover, recortar, colar, girar, redimensionar...)

Resultado final


Photoshop: Vamos fazer uma barra de navegao conforme o modelo

Crie uma nova imagem de 640 x 113 com resoluo de 75 pixels.
Vamos tentar fazer igual ao modelo:


Photoshop: Vamos trabalhar com texto

Vamos tentar fazer igual ao modelo para podermos ver a diferena das ferramentas:

1. Ferramenta Texto (cria um texto e cria uma nova camada (layer))

2. Ferramenta mascara (cria um seleo em volta do texto, sem preencher com nenhuma cor,
e sem criar uma nova camada (layer))

3. Ferramenta vertical (cria um texo na vertical)

4. Ferramenta mascara vertical (cria tambm uma seleo em volta do texto, sem nenhuma
cor, s que na vertical).



Dicas:

Antes de inserir um texto verifique se a cor de (primeiro plano) esteja definida com a cor que
voc deseja para texto. Para digitar sobre fotografias, use a ferramenta para escolher uma cor a
partir da imagem, pois isso garante que a cor utilizada ir completar a imagem.

Para transformar texto em pixels, voc tem que escolher a opo camada, texto, Acabamento
da camada. Antes de transformar em pixels uma camada de texto, crie uma cpia dela e,
depois, torne-a invisvel.

Photoshop: Criando grupos de corte

Em um grupo de corte, a camada inferior, ou camada base, age como mscara para todo o
grupo.
Por exemplo, voc pode ter uma forma em uma camada, uma textura na camada sobreposta e
texto na superior. Se voc definir as trs camadas como um grupo de corte, a textura e o texto
aparecero apenas pela forma da camada base e assumiro a opacidade da camada base.

Observe que s camadas sucessivas podem ser includas em um grupo de corte. Ao cri-lo,
linhas pontilhadas aparecem entre as camadas agrupadas na paleta Camadas.

O nome da camada base do grupo sublinhado e miniaturas das demais so recuadas. Aplicar
modo de mesclagem camada recuada afeta a mesclagem das camadas dentro do grupo.
Aplicar modo de mesclagem camada base, determina como o grupo de corte inteiro ser
mesclado com camadas subjacentes.

Vamos tentar fazer igual ao modelo para podermos ver a diferena das ferramentas:


Photoshop: Vamos trabalhar com a ferramenta de extrao.

Esta funo uma das novas opes contidas no Adobe Photoshop 5.5, sua principal funo
isolar um objeto de seu background.

1. Copie esta imagem em seu diretrio.

2. Acesse a funo:

Vamos remover o fundo que est por trs destas mos, " (Imagem) > (Extrair)" como ilustrado
na imagem.


Janela da Funo Extrao

1. com esta ferramenta que demarcamos as arestas do objeto do que desejamos manter na
imagem.

2. Esta ferramenta preenche a rea que desejamos manter.

3. Apaga as faces traadas com a ferramenta Edge Highlighter

4. Ferramenta conta gotas

5. Aumenta ou diminui (mantendo a tecla ALT pressionada) a rea de visualizao da imagem.

6. Reposiciona a imagem na rea til da janela Extrao



Passo 1
Funo Extrao e seus parmetros. Ser demonstrado como retirar o fundo de uma imagem,
eliminando-o para uma composio posterior.
Abra a imagem original e acione o Extrao: " (Imagem) > (Extrair)".
Feito isso selecione a ferramenta "Realador de arestas", ajuste o tamanho do pincel e trace um
contorno sobre a juno do fundo com o objeto, como mostra a imagem.

Passo 2
Manter as mos e eliminar o fundo atrs dela. Para isso utilize a ferramenta "Preenchimento" e
preencha a rea da mo, como mostra a imagem.
Passo 3
Agora devemos pedir um "visualizar" para ver se no deixamos alguma rea sem ser
selecionada, para isso clique no boto "Visualizar".
Passo 4
Olhe que o fundo foi totalmente eliminado da imagem, aps estar satisfeito com o resultado
basta dar Ok. Teremos como resultado o modelo acima.


Photoshop: Vamos trabalhar com as imagens

copiar a imagem no seu diretrio

Vamos tentar fazer igual ao modelo para podermos ver os efeitos:

1. Crie uma nova imagem de 374 x 224 com resoluo de 75 pixels.

2. Adicione na caixa de camadas um nova camada e coloque um fundo preto.



3. Abra a imagem que copiou no seu diretrio

4. Clique 2 vezes na ferramenta de seleo que abrir a caixa de opes da marca da seleo.

5. Coloque o valor de difuso 50

6. Selecione a Imagem ir p/ Menu "Editar" "Copiar" (ctrl+c)

7. Volte p/ imagem que foi criada com um fundo preto e aplique um "Editar" "Colar" (ctrl+v)



Photoshop: Vamos trabalhar com exemplo para fazermos o layout grfico de uma pgina
de um site.

1. Copiar a imagem no seu diretrio

2. Copiar no seu diretrio esta imagem tambm



3. Vamos trabalhar com estas 2 imagens at obtermos algo semelhante ao exemplo abaixo:



ImageReady

A rea de trabalho do Adobe ImageReady inclui a barra de menus de comando na parte
superior da tela e uma variedade de ferramentas e paletas para edio e adio de elementos,
como camadas e mscaras de camadas.

No Adobe ImageReady possvel abrir imagens criadas em um aplicativo de ilustrao ou de
edio de imagens, como o Adobe Photoshop. Tambm possvel inserir imagens digitalizadas
ou criar imagens diretamente no ImageReady. As imagens no ImageReady exibem informaes
em bitmaps, isto , em pixels. Para criar uma arte-final satisfatria, voc precisa compreender
alguns conceitos bsicos sobre como trabalhar com imagens digitais.

Tambm possvel importar uma pasta de imagens com animao, na qual cada imagem torna-
se um quadro na animao.

rea de Trabalho


Caixa de Ferramentas

1. A ferramenta marca de seleo retangular faz
selees retangulares.

2. A ferramenta marca de seleo retngulo
arredondado faz selees retangulares com vrtices
arredondados.

3. A ferramenta marca de seleo elptica faz selees
elpticas.

4. As ferramentas marca de seleo de linha nica e de
coluna nica fazem selees a partir de 1 pixel de
largura.

5. A ferramenta mover move selees, camadas e
guias.

6. A ferramenta lao faz selees mo livre

7. A ferramenta lao poligonal faz selees mo livre
e em linha reta.

8. A ferramenta varinha mgica seleciona reas com
cores semelhantes.

9. A ferramenta fatia cria fatias.

10. A ferramenta seleo de fatia seleciona fatias.

11. A ferramenta aergrafo pinta traados de arestas suaves.

12. A ferramenta pincel aplica traados de pincel.

13. A ferramenta carimbo pinta com uma cpia da imagem.

14. A ferramenta retngulo desenha quadrados e retngulos.

A ferramenta retngulo arredondado desenha quadrados e retngulos com vrtices
arredondados.

A ferramenta elipse desenha crculos e formas ovais.


15. A ferramenta borracha apaga pixels.

16. A ferramenta borracha mgica preenche reas com cores semelhantes com transparncia.

17. A ferramenta lpis desenha traados com arestas slidas.

18. A ferramenta linha desenha linhas retas.

19. A ferramenta borrar espalha a cor pela rea de uma imagem.

20. A ferramenta desfoque torna menos distintas as arestas slidas em uma imagem.

21. A ferramenta nitidez torna mais ntidas as arestas suaves em uma imagem.

22. A ferramenta subexposio clareia reas em uma imagem.

23. A ferramenta superexposio escurece reas em uma imagem.

24. A ferramenta esponja modifica a saturao de cor de uma rea.

25. A ferramenta texto cria textos em uma imagem.

26. A ferramenta corte demarcada apara imagens de tamanhos diferentes.

27. A ferramenta lata de tinta preenche reas de cores semelhantes com a cor do primeiro
plano.

28. A ferramenta conta-gotas faz coleta de amostragem de cores em uma imagem.

29. A ferramenta mo move uma imagem dentro da janela.

30. A ferramenta zoom aumenta e diminui a visualizao de uma imagem.

O comando Novo permite que voc crie uma imagem no ImageReady em branco e sem ttulo.

Para criar uma nova imagem:

Escolha Arquivo > Novo.

Digite um nome para a imagem e defina a largura e a altura.

Em Contedo da Primeira Camada, selecione uma das opes a seguir:

Barra de Menu

O comando Novo permite que voc crie uma imagem no ImageReady em branco e sem ttulo.

Para criar uma nova imagem:
1. Escolha Arquivo > Novo.
2. Digite um nome para a imagem e defina a largura e a altura.
3. Em Contedo da Primeira Camada, selecione uma das opes a seguir:
Branco para preencher o plano de fundo com branco, a cor padro do plano de fundo.

Cor do Plano de Fundo para preencher a imagem com a cor do plano de fundo atual.

Consulte Escolhendo as cores do primeiro plano e do plano de fundo.

Transparente para criar uma imagem contendo uma nica camada sem valores de cor.

4. Clique em OK.

Para abrir um arquivo:

Escolha Arquivo > Abrir.

Selecione o arquivo.

Clique em Abrir.

Para abrir um arquivo usado recentemente:

Escolha Arquivo > Arquivos Recentes e selecione um arquivo no submenu.

Para inserir uma imagem em um arquivo do Adobe ImageReady:

Abra a imagem do Adobe ImageReady na qual a imagem deve ser inserida.

Escolha Arquivo > Inserir.

Selecione opes de deslocamento

No menu popup Horizontal, escolha uma opo para inserir o arquivo horizontalmente em
relao imagem do ImageReady. Na caixa de texto Pixels, digite o nmero de pixels para
deslocar a imagem inserida horizontalmente.

No menu popup Vertical, escolha uma opo para inserir o arquivo verticalmente em relao
imagem do ImageReady. Na caixa de texto Pixels, digite o nmero de pixels para deslocar a
imagem inserida verticalmente.

Observao: Para inserir um nmero negativo (e deslocar o arquivo inserido para a esquerda
ou para baixo da imagem do ImageReady), digite um hfen (-) antes do nmero.

Clique em Escolher e selecione o arquivo que deseja inserir. Em seguida, clique em Abrir.

Clique em OK.


Animao

O Adobe ImageReady oferece uma maneira fcil e eficiente de criar um GIF animado, uma
seqncia de imagens ou quadros de uma nica imagem. Cada quadro um pouco diferente do
quadro anterior, criando a iluso de movimento quando os quadros so visualizados em uma
sucesso rpida.

Use as paletas Animao e Camadas para criar uma animao de vrios quadros. possvel
editar, copiar e colar quadros, aplicar alteraes de camadas a um nico quadro ou a vrios
quadros e organiz-los em uma nova seqncia. Tambm possvel aplicar configuraes de
otimizao animao, especificar opes de looping e repetio para execuo e achatar
quadros em camadas.

Usando a paleta Animao
Para visualizar a paleta Animao:
Escolha Janela > Mostrar Animao
A.Nmero do quadro
B. Menu Intervalo
C. Opes de looping
D. Boto Rewind
E. Boto Backward
F. Boto Interromper
G. Boto Executar
H. Boto Forward
I. Boto Novo Quadro
J. Boto Lixo

Tambm possvel visualizar a paleta Animao clicando na caixa Nmero do Quadro na
parte inferior da paleta Camadas.


Criando uma animao

1. Use o procedimento seguinte para criar um GIF animado no ImageReady:

Com a janela do ImageReady aberta, v na barra de menus e escolha Janela , clique nas
opes Mostrar camadas e Mostrar animao

Crie uma imagem com vrias camadas que ser utilizada como base para a animao.
Na barra de menus escolha Arquivo - novo
Use a ferramenta retngulo (14)

Use a paleta Animao para criar quadros de animao a partir da imagem original

Adicionando quadros

Cada novo quadro adicionado a uma animao iniciado como uma cpia do quadro anterior a
ele. Em seguida, so aplicadas as alteraes de camadas no novo quadro. A alterao dos
quadros cria efeitos de animao quando eles so visualizados em seqncia.

Use a paleta Camadas para efetuar alteraes em quadros isolados, em vrios quadros ou na
animao inteira.

Visualize a animao no ImageReady.
Na Barra de animao clique no boto executar.

Para aumentar ou diminuir o intervalo de exibio das imagens, clique no Menu de intervalo e
escolha as opes de tempo .

Se voc quizer visualizar a animao no Browser, na opo Arquivo na Barra de menus,
escolha

Repita o processo para criar e ajustar novos quadros adicionais conforme necessrio.

Salve a imagem original (em camadas) para reedio posterior.
Use o comando Salvar Otimizado para salvar a animao. A sada dos arquivos otimizados da
animao feita apenas sob a forma de arquivos GIF. No possvel criar uma animao
JPEG.


Fazendo animaes com imagens j existentes, utilizando a opo Importar

Para importar um arquivo:

possvel inserir imagens de outros aplicativos em arquivos do ImageReady importando
arquivos como GIFs animados.

possvel importar uma pasta de arquivos e usar cada arquivo como um quadro no
ImageReady. Os arquivos podem estar em qualquer formato suportado pelo ImageReady. Cada
arquivo passa a ser um quadro na paleta Animao. Os arquivos so inseridos na paleta
Animao em ordem alfabtica por nome de arquivo de imagem.

Exerccio

1. Insira os arquivos a serem usados como quadros em uma
pasta (diretrio) Certifique-se de que a pasta contenha apenas
as imagens que devero ser usadas como quadros

Observao: A exibio da animao resultante ter mais
sucesso se todos os arquivos tiverem as mesmas
dimenses em pixels. Para que os quadros apaream na
ordem correta na animao, nomeie os arquivos em ordem
alfabtica ou numrica, com o arquivo a ser usado como
quadro 1 sendo o primeiro da ordem. (Voc tambm
poder alterar a ordem dos quadros na paleta Animao
depois que importar os arquivos.)

2. Escolha Arquivo > Importar > Pasta como Quadros e escolha
a pasta a ser importada

Os arquivos aparecero na paleta Animao sob a forma de
quadros e na paleta Camadas sob a forma de camadas, com cada
camada atribuda a um quadro separado. A primeira imagem em
ordem alfabtica ou numrica por nome de arquivo ser o quadro
1 na paleta Animao e a camada inferior na paleta Camadas.


Trabalhando com mapas de imagens

Mapear uma imagem de um site da Web, significa transform-la em um link para outros
arquivos. Diferentes reas de um mapa de imagem, chamadas pontos ativos, vinculam-se a
URLs distintos. Os mapas de imagens podem conter links para arquivos de texto, outras
imagens, arquivos de udio, vdeo ou multimdia, outras pginas no site da Web ou outros sites
da Web.
Os pontos ativos no podem se estender alm das arestas da imagem. Os mapas de imagens
so semelhantes a fatias, por permitirem vincular uma rea de uma imagem a um URL.

Exerccio

1. No menu arquivo crie uma imagem de 640 X 60 pixels com fundo branco e vamos fazer uma
imagem igual ao modelo, usando camadas e utilizando as ferramentas

2. Ao terminar a imagem, com a paleta Camadas exibida, escolha uma camada na imagem
atual com a qual um ponto ativo deve ser criado. (menu1, menu2, menu 3....)

3. Escolha um mtodo para selecionar opes da camada:

Escolha Janela > Mostrar Opes/Efeitos da Camada para visualizar a paleta. Para exibir
opes da camada na paleta, certifique-se de que todos os efeitos de camadas estejam
desmarcados na paleta Camadas. (Caso contrrio, a paleta Opes/Efeitos da Camada ir
exibir opes para o efeito de camada selecionado.)

Na paleta Camadas, clique duas vezes na camada ou escolha Opes da Camada no menu da
paleta para exibir a caixa de dilogo Opes da Camada.

Escolha Camada > Opes da Camada.

4. Selecione Mapa de Imagem na paleta Opes/ Efeitos da Camada ou selecione Usar
Camada como Mapa de Imagem na caixa de dilogo Opes da Camada.

5. Selecione Polgono, Retngulo ou Crculo no menu para determinar a forma do ponto ativo.
Insira um URL para o link ou escolha um URL criado anteriormente no menu popup URL. Inclua
o prefixo http:// no URL.

6. Se voc estiver usando a caixa de dilogo Opes da Camada, clique em OK.

Quando criado um arquivo HTML para a imagem, o cdigo HTML inclui as coordenadas nos
pontos ativos e os links no mapa de imagem.

possvel visualizar imagens otimizadas, usando o comando Visualizar em.


Trabalhando com mapas de imagens (fatias)

Para comear a recortar uma imagem as ferramentas usadas para criar e modificar fatias so:

1. Vamos abrir a imagem da escola virtual.

2. Para comear recortar sua imagem selecione a ferramenta Fatia

Logo que ativamos esta ferramenta, nossa imagem ser apresentada desta forma.
Repare na borda que colocada no indicador numrico no topo esquerda da imagem, isso
acontece, porque o ImageReady reconhece automaticamente esta imagem como o primeiro
pedao, pois nada foi cortado at agora.

3. Com a ferramenta fatia selecionada faa o recorte da imagem. Basta clicar e arrastar

Essas linhas azuis servem p/ que o ImageReady possa gerar a tabela em HTML na hora da
exportao, ele ja faz isso p/ voc, com o cdigo do java script e mais...

4. Depois te ter criado um corte deste pedao hora de nomearmos a imagem, criar links, etc...

Para isso, veja a barra animao e clique na opo fatias, como mostra a imagem.



Nesta opo podemos colocar tudo sobre a imagem, desde o seu nome at o target do link.
Sempre nomeie sua imagem pois se no o fizer na hora de salvar ela receber um nome
parecido com esse: Sem Titulo-1_06

Mostrar Opes

Para especificar o quadro de destino, insira o nome de um quadro na caixa de texto ou escolha
uma opo no menu popup:

O nome de um quadro deve corresponder a um quadro definido anteriormente no arquivo HTML
do documento. Quando o usurio clicar na fatia, o arquivo vinculado ser exibido no novo
quadro.

blank exibe o arquivo vinculado em uma nova janela, deixando aberta a janela original do
navegador.

top substitui a janela do navegador inteira pelo arquivo vinculado, removendo todos os quadros
atuais.

5. Depois de feita a nomeao e colocado os links hora de compactar o pedao da imagem.
Para isso, torne visvel a barra de otimizar. Caso ela no esteja visvel, v no menu janela e
clique em mostrar otimizar.

Alguns elementos desta janela podem mudar de acordo com o formato de arquivo escolhido



6. Caso precise redimensionar ou mover a rea selecionada, utilize a ferramenta seleo de
fatia. Refaa esses passos at que toda imagem tenha sido recortada, aps esse processo
ela dever ficar desta forma.

7. Agora nos falta salvar e gerar o HTML, o ImageReady faz isso automaticamente para ns.
Para salvar e gerar HTML v at o menu arquivo e escolha a opo salvar otimizado como.

Aqui escolhemos o que vamos salvar, se desejar o HTML deixe checado a caixa com a legenda
salvar arquivo html assim por diante. Caso deseje salvar apenas um pedao da imagem voc
deve deixar marcado as caixas salvar imagens e salvar somente fatias selecionadas.

8. Aqui setamos os atributos do HTML, como formatao das tags.

9. Aqui setamos os atributos das imagens, podemos tambm indicar um diretrio para que as
imagens sejam salvas, etc..

Pronto, feito isso s dar um OK que o mapeamento est pronto.



Referncia Bibliogrfica

Assistente do Photoshop 5.5

Rpido e Fcil para iniciantes do Photoshop
Editora Campus - Kate Binder

Onde obter ajuda

Para ajud-lo a solucionar dvidas de informtica, utilize o sistema Rau-Tu de perguntas e
respostas, que foi desenvolvido pelo Centro de Computao da Unicamp em conjunto com o
Instituto Vale do Futuro. Tem por objetivo possibilitar que um time de colaboradores possa
responder a perguntas colocadas por qualquer pessoa no site, cobrindo diversas reas de
conhecimento.
Acesse: www.rau-tu.unicamp.br

Adobe Photoshop PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Adobe Photoshop PDF

Caricato da

Copyright:

Formati disponibili

Licenciamento de Uso

Este documento propriedade intelectual 2002 do Centro de Computao da Unicamp

Potrebbero piacerti anche