Prévia do material em texto

Licenciamento de Uso 
 
 
Este documento é propriedade intelectual © 2002 do Centro de Computação da Unicamp 
e distribuído sob os seguintes termos: 
 
1. As apostilas publicadas pelo Centro de Computação da Unicamp podem ser 
reproduzidas e distribuídas no todo ou em parte, em qualquer meio físico ou 
eletrônico, desde que os termos desta licença sejam obedecidos, e que esta licença 
ou referência a ela seja exibida na reprodução. 
 
2. Qualquer publicação na forma impressa deve obrigatoriamente citar, nas páginas 
externas, sua origem e atribuições de direito autoral (o Centro de Computação da 
Unicamp e seu(s) autor(es)) 
 
3. Todas as traduções e trabalhos derivados ou agregados incorporando qualquer 
informação contida neste documento devem ser regidas por estas mesmas normas 
de distribuição e direitos autorais. Ou seja, não é permitido produzir um trabalho 
derivado desta obra e impor restrições à sua distribuição. O Centro de Computação 
da Unicamp deve obrigatoriamente ser notificado 
(treinamentos@ccuec.unicamp.br) de tais trabalhos com vista ao aperfeiçoamento 
e incorporação de melhorias aos originais. 
 
Adicionalmente, devem ser observadas as seguintes restrições: 
A versão modificada deve ser identificada como tal 
· O responsável pelas modificações deve ser identificado e as modificações datadas 
· Reconhecimento da fonte original do documento 
· A localização do documento original deve ser citada 
· Versões modificadas não contam com o endosso dos autores originais a menos 
que autorização para tal seja fornecida por escrito. 
 
A licença de uso e redistribuição deste material é oferecida sem nenhuma garantia de 
qualquer tipo, expressa ou implícita, quanto a sua adequação a qualquer finalidade. O 
Centro de Computação da Unicamp não assume qualquer responsabilidade sobre o uso 
das informações contidas neste material. 
 
 
 
 
 
 
 
 
Índice 
 
O que são 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 
Exercícios ............................................................................................................................20 
ImageReady........................................................................................................................40 
Caixa de Ferramentas ......................................................................................................41 
Barra de Menu ..................................................................................................................43 
Animação ..........................................................................................................................45 
Trabalhando com mapas de imagens ..............................................................................49 
Trabalhando com mapas de imagens (fatias)..................................................................50 
Referência Bibliográfica ....................................................................................................53 
 
 
Última Atualização em 13/02/2003 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 1 
O que são os softwares 
 
Os softwares que vamos abordar são Adobe Photoshop 5.5 e Adobe ImageReady que nos 
proporcionam um ambiente completo para a criação de imagens para Web. 
 
São softwares que permitem edição, retoques e aplicação de efeitos em imagens gráficas, como 
fotos e desenhos inseridos em publicações, exemplo: 
 
 revistas, jornais, livros, panfletos, home-pages, etc.... 
 
 
O Adobe Photoshop 5.5 é um programa grande e complexo, é o preferido pelos especialistas 
em editoração e computação gráfica . 
 
 
Estes dois softwares possuem vários recursos, a idéia do treinamento é ensinar a 
vocês como fazer títulos, botões e banners para ilustrar uma home page, entre outras coisas. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 2 
Área de trabalho do Adobe Photoshop 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 3 
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 máscaras 
rápidas e alteram o modo de exibição na tela. 
 
A maioria das ferramentas têm paletas Pincéis e Opções associadas, que permitem definir os 
efeitos de pintura e edição das ferramentas. 
 
Para exibir a caixa de ferramentas: 
 
Escolha <Janela > Mostrar Ferramentas. 
Para mover a caixa de ferramentas: 
Arraste-a por sua barra de título. 
 
 
 
 
 
 
 
 
 
 
 
 
01 - Ferramenta marca de seleção retangular 
02 - Ferramenta laço 
03 - Ferramenta aerógrafo 
04 - Ferramenta carimbo 
05 - Ferramenta borracha 
06 - Ferramenta desfoque 
07 - Ferramenta caneta 
08 - Ferramenta medir 
09 - Ferramenta lata de tinta 
10 - Ferramenta mão 
11 - Ferramenta zoom 
12 - Ferramenta conta gota 
13 - Ferramenta linear 
14 - Ferramenta de Texto 
15 - Ferramenta subexposição 
16 - Ferramenta linha 
17 - Ferramenta pincel história da arte 
18 - Ferramenta pincel 
19 - Ferramenta varinha mágica 
20 - Ferramenta mover 
21 - Cor do primeiro plano e cor do plano do fundo 
22 - Editar no modo padrão e no modo máscara rápida 
23 - Padrões de tela de trabalho 
24 - Saltar para o aplicativo do editor gráfico padrão 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 4 
Usando a barra de menu (arquivo) 
 
Neste menu, encontra-se os comandos que permitem abrir um novo arquivo ou imagem, salvar, 
escanear, configurar a impressão e preferências do programa. 
 
 
1. (Novo) abre uma nova janela; 
 (Abrir) abre arq. que já existe p/ editar seu conteúdo; 
 (Abrir Como) abre um arquivo cuja a extensão está errada ou quando seu nome não 
 constar na lista apresentada na caixa do comando Open. Utiliza as mesmas extensõesdo comando anterior. 
 
2. (Fechar) fecha o arq. que estiver ativo, sem encerrar o aplicativo. 
 Se houve modificações que não foram salvas, abre-se a opção de salvá-las antes 
 do fechamento; 
 
(Salvar) permite salvar o arq. em disco atualizando-o caso não tenha sido feito. Será 
pedido um nome através do mesmo comando Salvar Como; 
 
(Salvar como) permite salvar o arq. com nome diferente do atual, permitindo assim 
obter-se várias versões de um mesmo trabalho, ou com o mesmo nome em outro 
diretório e/ou drive, ou ainda com extensões diferentes: *.PSD, *.PDD, *.JPG, *.TIF, 
*.BMP, etc... 
 
(Salve a cópia) permite salvar uma cópia da imagem exibida; 
 
(Salvar para Web) permite definir as preferências de Gravação de Arquivos para web 
 
(Reverter) permite retornar a imagem ao estado que se encontrava antes de 
gravada. Atenção ao usar este comando, pois ele é irreversível. 
 
 
3. (Inserir) inserir imagens (EPS file, PDF file) 
 
4. (Importar) importar e exportar imagens; 
 
5. Informações de arquivo...; 
 
6. Configura página e imprime; (imprimir) remete a página para impressão; 
 
 
 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 5 
 
7. Saltando do Photoshop para outros aplicativos 
 
8. (Preferências) configura as ferramentas e utilitários e Direções de cores; (Configuração 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 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 6 
 
Neste menu, estão os comandos que permitem a edição da imagem. 
 
1. (Desfazer) este comando desfaz a última operação realizada ou refaz a operação que acabou 
de ser desfeita (Refaz). Atenção: só há um Undo/ Redo por operação. 
 
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 também o 
preenchimento de uma borda ao redor da área selecionada, como um contorno ou moldura. 
 
4. (Transformação livre e Transformação): Estes comandos permitem girar, torcer, escalar e 
aplicar perspectiva a um objeto ou a uma imagem inteira. 
 
5. (Define Padrão): Definir fundos especiais. Importante: o padrão definido não é salvo 
automaticamente em nenhum diretório. Se você desejar criar uma biblioteca de padrões, crie 
um diretório e recorte a área a ser definida como padrão (com o comando Crop ou ferramenta 
Crop) e salve seu arquivo no diretório criado utilizando o comando Save As. 
 
6. (Descartar): Limpa todas as quatro opções ao mesmo tempo: Desfazer, Área de 
transferência, Padrão, Histórico e Tudo. Estas opções têm uma desvantagem:Você perde o 
acesso ao que tiver eliminado. Portanto, não deve fazer descartar o conteúdo da Área de 
transferência se for preciso colar mais tarde, o que estiver nele. Além disso, depois de 
expurgar o buffer Undo, você não poderá desfazer a ação imediatamente anterior ao 
expurgo. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Usando a barra de menu (editar) 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 7 
Usando a Barra de menu (imagem) 
 
Neste menu, estão os comandos que permitem a edição 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, saturação, brilho); RGB (vermelho, 
 verde, azul); CMYK (ciano, magenta, amarelo, preto); e CIE L*a*b*. O Photoshop inclui 
 modos de saída especializada de cor, como cor indexada e duotônicos. 
 
2. Ajusta a imagem ( em níveis, brilho, contraste .... 
 
3. (Duplicar) pode-se copiar uma imagem inteira (com todas as camadas, máscaras de 
camadas e canais) para a memória disponível, sem salvar no disco, usando o comando 
Duplicar ou arrastando e soltando. 
 
4. (Tamanho da imagem) O número de pixels na altura e largura da imagem bitmap. O 
tamanho da exibição da imagem é determinado pelas dimensões em pixel e do tamanho e 
onfiguração do monitor. O tamanho do arquivo de uma imagem é proporcional a suas 
dimensões 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 
configuração de 640 por 480, a mesma imagem (dimensões em pixel de 640 por 480) ainda 
preencheria toda a tela, mas cada pixel iria parecer maior. Ao alterar a configuração 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 página da Web 
que deverá ser visualizada em diferentes monitores), as dimensões em pixel se tornam muito 
importantes. Como esta imagem pode ser vista em um monitor de 13 polegadas, convém limitar 
seu tamanho para um máximo de 640 por 480 pixels. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 8 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5. (Tamanho da Tela de Pintura) permite adicionar ou remover espaço 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 transparência que a do plano de fundo. 
 
6. (Corte demarcado) O comando Imagem > 
 Corte Demarcado descarta a área fora da 
 seleção retangular e mantém a mesma 
 resolução da original. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 9 
Usando a barra de menu (camadas) 
 
Nesta caixa de menu, encontra-se opções de criação de novas camadas para imagens 
elaboradas; duplicar uma camada e até realizar ajustes nas camadas criadas. 
 
Maiores informações sobre camadas serão abordadas no caderno de exercícios. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 10 
Usando a barra de menu (selecionar) 
 
A maioria das Operações inicia-se com uma seleção. Este comando permite selecionar 
partes da imagem que não se tocam e você pode combinar seleções de várias maneiras. Você 
pode também fazer vários modos, tais como pintar sobre a área selecionada ou usar a 
ferramenta Lápis para desenhar um contorno preciso da área a ser selecionada. Você também 
pode salvar as seleções para o futuro. 
 
 
1. (Tudo) - seleciona toda a área da tela; (Desfazer Seleção) remove toda seleção ; 
 (Selecionar novamente) retorna a seleção removida e (Inverter) inverte a forma de 
 seleção; 
 
2. (Escala de Cores) seleciona objetos pela faixa de cor; 
 
3. (Difusão) seleciona pela característica de área da imagem e (Modificar) seleciona 
 setores modificados; 
 
4. (Aumentar) aumenta área selecionada e (Semelhante) seleciona áreas idênticas; 
 
5. (Transformar Seleção) transforma uma seleção. Geralmente é difícil entender o efeito 
 dessas transformações em uma seleção sem experimenta-la. 
 
6. (Carregar Seleção) leva a tela até a área selecionada e (Salvar Seleção) grava á área 
 selecionada.Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 11 
 
Usando a barra de menu (filtro) 
 
Este menu contém 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 são agudas, removendo o contraste; 
 
 
Os filtros do Photoshop classificam-se em 14 categorias gerais. Além disso, filtros de outros 
fornecedores aparecem na parte inferior do menu Filtro. 
 
 
 
Filtros Artísticos 
 
Filtros de Desfoque 
 
Filtros Traçados de Pincel 
 
Filtros de Distorção 
 
Filtros de Ruído 
 
Filtros de Pixelização 
 
Filtros de Acabamento 
 
Filtros de Nitidez 
 
Filtros de Croqui 
 
Filtros de Estilização 
 
Filtros de Textura 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 12 
Exemplos de filtros: 
 
Filtros de Desfoque 
 
Suavizam uma seleção ou uma imagem. Filtros de Desfoque são úteis para retoques. 
Suavizam as transições criando pixels intermediários próximos às arestas aguçadas de 
linhas definidas e áreas sombreadas em uma imagem. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Filtros Artísticos 
 
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. 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 13 
 
Os elementos citados nesta página referente a camadas, caminhos, guias e grades terão no 
decorrer deste treinamento, referências mais detalhadas. 
 
1. (Nova visualização) modifica a visualização do objeto; 
 
2. (Visualizar / alerta de Gamut) prévia CMYK e Alarme de Gamut; 
 
3. (Zoom In) aumenta a imagem, (Zoom Out) diminui a imagem; (Ajustar à tela) amplia oureduz 
a imagem para visualização na tela; (Tamanho original) amplia para o tamanho dos pixels e 
(Tamanho da impressão) imprimir no tamanho; 
 
4. (Ocultar Arestas) remover ou exibir bordas; (Ocultar Demarcador remover ou exibir caminhos; 
 
5. (Mostrar e ocultar réguas) exibir ou remover réguas 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) 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 14 
 
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 são relativos a exibição ou remoção dos Roll-ups de 
 auxílio que existem na área de trabalho do Photoshop. 
 
4. Aqui temos também a exibição e informações das imagens abertas no Photoshop. 
 
5. (Mostrar camadas) exibe a palheta de layers (camadas); 
 
6. (Mostrar histórico) Desfazer mais de um comando; (Mostrar Ações) Automatizar uma série de 
passos 
 
7. Remove ou exibe a barra de estatus 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Usando a barra de menu (janela) 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 15 
 
AJUDA 
Neste menu o usuário solicita as caixas de Diálogo referentes a auxílio do manuseio do 
software ou110 informações sobre o mesmo. 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 16 
 
Usando a Tecla de Atalho 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 17 
 
Dicas: 
 
Os arquivos de imagens geradas pelo Adobe Photoshop tem que ser pequenos para não 
prejudicar a transmissão de dados. Eles chegam através da linha telefônica, que não foi 
construída com esse objetivo, e por isso, não suportam grandes quantidades de bytes. É 
fortemente recomendado que uma página não tenha mais do que 35Kb, incluindo as imagens e 
o texto. 
 
Além disso, existe o limite por causa da hospedagem da página no servidor, que tem seu preço 
de aluguel diretamente ligado ao tamanho dos arquivos. Por exemplo, nos provedores, os 
clientes têm direito a uma área grátis de 256Kb. Se os arquivos ultrapassarem esse espaço, a 
área passa a ser cobrada. 
 
A resolução 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 rápido 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 página só, principalmente gifs animados. Lembre-se que 
uma página não 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 versão 
reduzida da foto, clicável para uma página com foto maior. Assim, a pessoa clicará se tiver 
interesse e já estará preparada para esperar. Não coloque qualquer gif em qualquer lugar sem 
função nenhuma, apenas porque ele é bonito ou engraçado. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 18 
Como mover uma imagem 
 
 
 
 
1. Escolha a ferramenta Mover. 
 
2. Dê um clique e arraste a imagem para movê-la dentro de sua própria 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 específicas, movendo uma de cada vez, ou camadas 
vinculadas movendo grupo específico 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. 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 19 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 20 
 
Exercícios 
 
Photoshop: Como criar um arquivo 
 
 
1. Escolha a opção Arquivo, Novo 
 
2. Digite um nome para o arquivo na caixa de dialogo Novo. 
 Escolha as unidades de medida e insira as dimensões para a altura do arquivo. 
 Digite uma resolução para o arquivo. 
 
Em Conteúdo, selecione uma opção: 
 
· Branco para preencher o plano de fundo com branco, a cor padrão 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. 
 
Observação: Como as imagens criadas com a opção transparente contêm 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 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Geração de Imagens paraa Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 21 
 
Cada imagem que você cria, inicia com um arquivo novo. Ao criar o arquivo novo, você 
especifica suas dimensões, resolução e modo de cor, dependendo do destino final do arquivo. 
 
Use a opção RGB para a Web e imagens de apresentação na tela. Bitmap para imagens em 
preto e branco; Grayscale para imagens em tons de cinza, tais como fotografias e CMYK para 
imagens que serão impressas. 
 
O Photoshop oferece vários modos para salvar arquivos: 
 
· O comando Salvar salva o arquivo no seu formato atual. 
 
· O comando Salvar Como permite que você salve uma versão alternativa em um formato 
 diferente. 
 
· O comando Salvar uma Cópia permite salvar uma cópia do arquivo, deixando o original 
intacto. 
 
 
Importante: Só o formato Photoshop (PSD) está disponível para arquivos com camadas. 
 
 
Formatos de arquivos: 
 
GIF (Graphics Interchange Format) é o formato de arquivo usado para exibir elementos gráficos 
e imagens de cores indexadas e imagens em documentos em linguagem de marcação de 
hipertexto (HTML) na World Wide Web e outros serviços on-line. 
 
GIF é um formato com compactação projetado para minimizar o tamanho do arquivo e o tempo 
de transferência eletrônica. Você pode converter arquivos para o formato GIF usando um dos 
seguintes métodos: 
 
· 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 exibição entrelaçada. Uma 
imagem entrelaçada 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 entrelaçamento e defina a transparência do 
plano de fundo. 
 
JPG - ao salvar neste formato, você pode especificar a qualidade e o nível de compactação da 
imagem. Para especificar a qualidade e a compactação da imagem, insira um valor entre 0 e 10 
ou escolha uma opção para Qualidade, ou arraste o controle dinâmico. 
 
Sempre há uma relação entre a qualidade da imagem e o grau de compactação: imagens de 
qualidade mais alta usam menos compactação (e mais espaço em disco) que imagens de 
qualidade mais baixa. 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 22 
 
Você também pode selecionar uma opção de formato para o arquivo JPG. 
 
· Selecione Linha de Base (“Padrão”) 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 não é suportado por todos os navegadores da Web. 
 
· O formato Progressivo faz a imagem ser exibida à medida que é transferida em uma série de 
varreduras (você especifica quantas) mostrando versões cada vez mais detalhadas da 
imagem inteira. Entretanto, arquivos de imagens JPEG progressivas têm tamanho 
ligeiramente maior, exigem mais RAM para visualização e não são suportadas por todos os 
aplicativos e navegadores da Web. 
 
 
Observação: Como o formato JPEG descarta dados, é importante salvar arquivos JPEG 
apenas uma vez. Edite e salve sua imagem em um formato que não descarte dados (como o 
Photoshop - PSD) e salve no formato JPEG somente como passo final. 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 23 
 
1) Crie uma imagem de 300x300 pixels com fundo branco. Agora, crie 
uma seleção retangular que ocupa aproximadamente 4/5 do 
espaço em branco, usando a ferramenta "Marca de seleção 
retangular". 
 
 
 
2) Pinte a área selecionada de preto usando a ferramenta lata de 
tinta. Agora desfaça a seleção usando o menu Select > Deselect 
(tecla de atalho Ctrl+D). 
 
 
 
3) Vá para o menu Filtro > Desfoque> desfoque Gaussiano. No 
parâmetro 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 > níveis. No 
parâmetro níveis de entrada, insira os números 118/1,00/138 nos 
campos. Esses números serão usados em TODOS os 
arredondamentos que você for fazer, independentemente da 
forma usada. Clique OK. Seu retângulo com cantos arredondados 
está pronto. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 24 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 25 
 
Photoshop: Círculo usando efeitos 3D 
 
Não é necessário um programa 3D para faze-la 
 
 
5) Seu círculo está pronto. Basta deselecionar o círculo no menu Selecionar > Desfazer 
seleção (Ctrl+D). 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 26 
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 através do processo de criação da imagem. 
 
Para exibir a paleta Camadas: 
 
Crie uma nova imagem de 200 x 200 com resolução de 75 pixels. Vamos tentar fazer igual ao 
modelo para podermos ver a diferença das ferramentas: 
Escolha Janela > Mostrar Camadas. 
 
1. Escolha a opção Janela, Mostrar camadas para exibir a palheta Camadas 
 
2. Para acrescentar uma camada, dê um clique no botão 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 instantâneo 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 trás. Em outras palavras, a camada superior na palheta está na frente de 
todas as camadas mostradas abaixo dela. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 27 
Photoshop: Achatando todas as camadas (layers) 
 
Em uma imagem achatada, todas as camadas visíveis são 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, não 
convém achatar um arquivo antes do final da edição das camadas individuais. 
 
Observação: Converter uma imagem entre alguns modos de cor achata o arquivo. Certifique-se 
de salvar uma cópia do arquivo que inclua todas as camadas se quiser editar a imagem original 
após a conversão. 
 
Para achatar uma imagem: 
 
1. Certifique-se de que todas as camadas desejadas estejam visíveis. 
 
2. Achate a imagem: 
 
· Escolha Camada > Achatar Imagem. 
· Escolha Achatar Imagem no menu da paleta Camadas. 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 28 
Photoshop: Usando as ferramentasAs formas básicas do Photoshop (quadrado e círculo e outras...) são realmente simples de 
fazer. O método para fazer um quadrado perfeito é exatamente o mesmo usado para se fazer 
um círculo, mas com uma ferramenta de seleção diferente. Nesses exercícios iremos usar várias 
ferramentas: 
 
 ( mover, recortar, colar, girar, redimensionar...) 
 
 
Resultado final 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 29 
Photoshop: Vamos fazer uma barra de navegação conforme o modelo 
 
Crie uma nova imagem de 640 x 113 com resolução de 75 pixels. 
Vamos tentar fazer igual ao modelo: 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 30 
Photoshop: Vamos trabalhar com texto 
 
Crie uma nova imagem de 200 x 200 com resolução de 75 pixels. 
Vamos tentar fazer igual ao modelo para podermos ver a diferença das ferramentas: 
 
1. Ferramenta Texto (cria um texto e cria uma nova camada (layer)) 
 
2. Ferramenta mascara (cria um seleção 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 também uma seleção em volta do texto, sem nenhuma 
cor, só que na vertical). 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 31 
 
 
 
 
 
 
 
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 opção camada, texto, Acabamento 
da camada. Antes de transformar em pixels uma camada de texto, crie uma cópia dela e, 
depois, torne-a invisível. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 32 
Photoshop: Criando grupos de corte 
 
Em um grupo de corte, a camada inferior, ou camada base, age como máscara 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 três camadas como um grupo de corte, a textura e o texto 
aparecerão apenas pela forma da camada base e assumirão a opacidade da camada base. 
 
Observe que só camadas sucessivas podem ser incluídas 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 são 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. 
 
Crie uma nova imagem de 399 x 154 com resolução de 75 pixels. 
Vamos tentar fazer igual ao modelo para podermos ver a diferença das ferramentas: 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 33 
Photoshop: Vamos trabalhar com a ferramenta de extração. 
 
Esta função é uma das novas opções contidas no Adobe Photoshop 5.5, sua principal função é 
isolar um objeto de seu background. 
 
1. Copie esta imagem em seu diretório. 
 
 
 
 
2. Acesse a função: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Vamos remover o fundo que está por trás destas mãos, " (Imagem) > (Extrair)" como ilustrado 
na imagem. 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 34 
Janela da Função Extração 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 traçadas com a ferramenta Edge Highlighter 
 
4. Ferramenta conta gotas 
 
5. Aumenta ou diminui (mantendo a tecla ALT pressionada) a área de visualização da imagem. 
 
6. Reposiciona a imagem na área útil da janela Extração 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 35 
 
Passo 1 
Função Extração e seus parâmetros. Será demonstrado como retirar o fundo de uma imagem, 
eliminando-o para uma composição posterior. 
Abra a imagem original e acione o Extração: " (Imagem) > (Extrair)". 
Feito isso selecione a ferramenta "Realçador de arestas", ajuste o tamanho do pincel e trace um 
contorno sobre a junção do fundo com o objeto, como mostra a imagem. 
 
 
 
 
Passo 2 
Manter as mãos e eliminar o fundo atrás dela. Para isso utilize a ferramenta "Preenchimento" e 
preencha a área da mão, como mostra a imagem. 
Passo 3 
Agora devemos pedir um "visualizar" para ver se não deixamos alguma área sem ser 
selecionada, para isso clique no botão "Visualizar". 
Passo 4 
Olhe que o fundo foi totalmente eliminado da imagem, após estar satisfeito com o resultado 
basta dar Ok. Teremos como resultado o modelo acima. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 36 
 
Photoshop: Vamos trabalhar com as imagens 
 
 copiar a imagem no seu diretório 
 
 
Vamos tentar fazer igual ao modelo para podermos ver os efeitos: 
 
1. Crie uma nova imagem de 374 x 224 com resolução de 75 pixels. 
 
2. Adicione na caixa de camadas um nova camada e coloque um fundo preto. 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 37 
 
 
 
 
 
3. Abra a imagem que copiou no seu diretório 
 
4. Clique 2 vezes na ferramenta de seleção que abrirá a caixa de opções da marca da seleção. 
 
5. Coloque o valor de difusão 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) 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 38 
 
Photoshop: Vamos trabalhar com exemplo para fazermos o layout gráfico de uma página 
de um site. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1. Copiar a imagem no seu diretório 
 
2. Copiar no seu diretório esta imagem também 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 39 
 
3. Vamos trabalhar com estas 2 imagens até obtermos algo semelhante ao exemplo abaixo: 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 40 
 
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 edição e adição de elementos, 
como camadas e máscaras de camadas. 
 
No Adobe ImageReady é possível abrir imagens criadas em um aplicativo de ilustração ou de 
edição de imagens, como o Adobe Photoshop. Também é possível inserir imagens digitalizadas 
ou criar imagens diretamente no ImageReady. As imagens no ImageReady exibem informações 
em bitmaps, isto é, em pixels. Para criar uma arte-final satisfatória, você precisa compreender 
alguns conceitos básicos sobre como trabalhar com imagens digitais. 
 
Também é possível importar uma pasta de imagens com animação,na qual cada imagem torna-
se um quadro na animação. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Área de Trabalho 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 41 
 
Caixa de Ferramentas 
 
 
 
1. A ferramenta marca de seleção retangular faz 
seleções retangulares. 
 
2. A ferramenta marca de seleção retângulo 
arredondado faz seleções retangulares com vértices 
arredondados. 
 
3. A ferramenta marca de seleção elíptica faz seleções 
elípticas. 
 
4. As ferramentas marca de seleção de linha única e de 
coluna única fazem seleções a partir de 1 pixel de 
largura. 
 
5. A ferramenta mover move seleções, camadas e 
guias. 
 
6. A ferramenta laço faz seleções à mão livre 
 
7. A ferramenta laço poligonal faz seleções à mão livre 
e em linha reta. 
 
8. A ferramenta varinha mágica seleciona áreas com 
cores semelhantes. 
 
9. A ferramenta fatia cria fatias. 
 
10. A ferramenta seleção de fatia seleciona fatias. 
 
11. A ferramenta aerógrafo pinta traçados de arestas suaves. 
 
12. A ferramenta pincel aplica traçados de pincel. 
 
13. A ferramenta carimbo pinta com uma cópia da imagem. 
 
14. A ferramenta retângulo desenha quadrados e retângulos. 
 
· A ferramenta retângulo arredondado desenha quadrados e retângulos com vértices 
arredondados. 
 
· A ferramenta elipse desenha círculos e formas ovais. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 42 
 
15. A ferramenta borracha apaga pixels. 
 
16. A ferramenta borracha mágica preenche áreas com cores semelhantes com transparência. 
 
17. A ferramenta lápis desenha traçados com arestas sólidas. 
 
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 sólidas em uma imagem. 
 
21. A ferramenta nitidez torna mais nítidas as arestas suaves em uma imagem. 
 
22. A ferramenta subexposição clareia áreas em uma imagem. 
 
23. A ferramenta superexposição escurece áreas em uma imagem. 
 
24. A ferramenta esponja modifica a saturação 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 mão move uma imagem dentro da janela. 
 
30. A ferramenta zoom aumenta e diminui a visualização de uma imagem. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 43 
O comando Novo permite que você crie uma imagem no ImageReady em branco e sem título. 
 
Para criar uma nova imagem: 
 
Escolha Arquivo > Novo. 
 
Digite um nome para a imagem e defina a largura e a altura. 
 
Em Conteúdo da Primeira Camada, selecione uma das opções a seguir: 
 
 
Barra de Menu 
 
O comando Novo permite que você crie uma imagem no ImageReady em branco e sem título. 
 
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 Conteúdo da Primeira Camada, selecione uma das opções a seguir: 
Branco para preencher o plano de fundo com branco, a cor padrão 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. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 44 
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 opções de deslocamento 
 
No menu popup Horizontal, escolha uma opção para inserir o arquivo horizontalmente em 
relação à imagem do ImageReady. Na caixa de texto Pixels, digite o número de pixels para 
deslocar a imagem inserida horizontalmente. 
 
No menu popup Vertical, escolha uma opção para inserir o arquivo verticalmente em relação à 
imagem do ImageReady. Na caixa de texto Pixels, digite o número de pixels para deslocar a 
imagem inserida verticalmente. 
 
Observação: Para inserir um número negativo (e deslocar o arquivo inserido para a esquerda 
ou para baixo da imagem do ImageReady), digite um hífen (-) antes do número. 
 
Clique em Escolher e selecione o arquivo que deseja inserir. Em seguida, clique em Abrir. 
 
Clique em OK. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 45 
 
Animação 
 
O Adobe ImageReady oferece uma maneira fácil e eficiente de criar um GIF animado, uma 
seqüência de imagens ou quadros de uma única imagem. Cada quadro é um pouco diferente do 
quadro anterior, criando a ilusão de movimento quando os quadros são visualizados em uma 
sucessão rápida. 
 
Use as paletas Animação e Camadas para criar uma animação de vários quadros. É possível 
editar, copiar e colar quadros, aplicar alterações de camadas a um único quadro ou a vários 
quadros e organizá-los em uma nova seqüência. Também é possível aplicar configurações de 
otimização à animação, especificar opções de looping e repetição para execução e achatar 
quadros em camadas. 
 
Usando a paleta Animação 
Para visualizar a paleta Animação: 
Escolha Janela > Mostrar Animação 
A.Número do quadro 
B. Menu Intervalo 
C. Opções de looping 
D. Botão Rewind 
E. Botão Backward 
F. Botão Interromper 
G. Botão Executar 
H. Botão Forward 
I. Botão Novo Quadro 
J. Botão Lixo 
 
 
 
 
 
 
 
 
 
Também é possível visualizar a paleta Animação clicando na caixa Número do Quadro na 
parte inferior da paleta Camadas. 
 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 46 
Criando uma animação 
 
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 
opções Mostrar camadas e Mostrar animação 
 
· Crie uma imagem com várias camadas que será utilizada como base para a animação. 
 Na barra de menus escolha Arquivo - novo 
 Use a ferramenta retângulo (14) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Use a paleta Animação para criar quadros de animação a partir da imagem original 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 47 
Adicionando quadros 
 
Cada novo quadro adicionado a uma animação é iniciado como uma cópia do quadro anterior a 
ele. Em seguida, são aplicadas as alterações de camadas no novo quadro. A alteração dos 
quadros cria efeitos de animação quando eles são visualizados em seqüência. 
 
 
 
 
 
 
 
 
 
 
Use a paleta Camadas para efetuar alterações em quadros isolados, em vários quadros ou na 
animação inteira. 
 
 
 
 
 
 
 
 
 
 
 
Visualize a animação no ImageReady. 
Na Barra de animação clique no botão executar. 
 
Para aumentar ou diminuir o intervalo de exibição das imagens,clique no Menu de intervalo e 
escolha as opções de tempo . 
 
Se você quizer visualizar a animação no Browser, na opção Arquivo na Barra de menus, 
escolha 
 
 
 
 
 
Repita o processo para criar e ajustar novos quadros adicionais conforme necessário. 
 
Salve a imagem original (em camadas) para reedição posterior. 
Use o comando Salvar Otimizado para salvar a animação. A saída dos arquivos otimizados da 
animação é feita apenas sob a forma de arquivos GIF. Não é possível criar uma animação 
JPEG. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 48 
 
Fazendo animações com imagens já existentes, utilizando a opção Importar 
 
Para importar um arquivo: 
 
É possível inserir imagens de outros aplicativos em arquivos do ImageReady importando 
arquivos como GIFs animados. 
 
É possível 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 Animação. Os arquivos são inseridos na paleta 
Animação em ordem alfabética por nome de arquivo de imagem. 
 
 
Exercício 
 
1. Insira os arquivos a serem usados como quadros em uma 
pasta (diretório) Certifique-se de que a pasta contenha apenas 
as imagens que deverão ser usadas como quadros 
 
Observação: A exibição da animação resultante terá mais 
sucesso se todos os arquivos tiverem as mesmas 
dimensões em pixels. Para que os quadros apareçam na 
ordem correta na animação, nomeie os arquivos em ordem 
alfabética ou numérica, com o arquivo a ser usado como 
quadro 1 sendo o primeiro da ordem. (Você também 
poderá alterar a ordem dos quadros na paleta Animação 
depois que importar os arquivos.) 
 
2. Escolha Arquivo > Importar > Pasta como Quadros e escolha 
a pasta a ser importada 
 
Os arquivos aparecerão na paleta Animação sob a forma de 
quadros e na paleta Camadas sob a forma de camadas, com cada 
camada atribuída a um quadro separado. A primeira imagem em 
ordem alfabética ou numérica por nome de arquivo será o quadro 
1 na paleta Animação e a camada inferior na paleta Camadas. 
 
 
 
 
 
 
 
 
 
 
 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 49 
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, vídeo ou multimídia, outras páginas no site da Web ou outros sites 
da Web. 
Os pontos ativos não podem se estender além das arestas da imagem. Os mapas de imagens 
são semelhantes a fatias, por permitirem vincular uma área de uma imagem a um URL. 
 
Exercício 
 
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 método para selecionar opções da camada: 
 
Escolha Janela > Mostrar Opções/Efeitos da Camada para visualizar a paleta. Para exibir 
opções da camada na paleta, certifique-se de que todos os efeitos de camadas estejam 
desmarcados na paleta Camadas. (Caso contrário, a paleta Opções/Efeitos da Camada irá 
exibir opções para o efeito de camada selecionado.) 
 
Na paleta Camadas, clique duas vezes na camada ou escolha Opções da Camada no menu da 
paleta para exibir a caixa de diálogo Opções da Camada. 
 
Escolha Camada > Opções da Camada. 
 
4. Selecione Mapa de Imagem na paleta Opções/ Efeitos da Camada ou selecione Usar 
Camada como Mapa de Imagem na caixa de diálogo Opções da Camada. 
 
5. Selecione Polígono, Retângulo ou Círculo 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 diálogo Opções da Camada, clique em OK. 
 
Quando é criado um arquivo HTML para a imagem, o código HTML inclui as coordenadas nos 
pontos ativos e os links no mapa de imagem. 
 
É possível visualizar imagens otimizadas, usando o comando Visualizar em. 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 50 
 
Trabalhando com mapas de imagens (fatias) 
 
Para começar a recortar uma imagem as ferramentas usadas para criar e modificar fatias são: 
 
 
 
1. Vamos abrir a imagem da escola virtual. 
 
2. Para começar 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 numérico no topo á esquerda da imagem, isso 
acontece, porque o ImageReady reconhece automaticamente esta imagem como o primeiro 
pedaço, pois nada foi cortado até agora. 
 
 
 
 
 
 
 
3. Com a ferramenta fatia selecionada faça 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 
 exportação, ele ja faz isso p/ você, com o código do java script e mais... 
 
4. Depois te ter criado um corte deste pedaço é hora de nomearmos a imagem, criar links, etc... 
 
 Para isso, veja a barra animação e clique na opção fatias, como mostra a imagem. 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 51 
 
Nesta opção podemos colocar tudo sobre a imagem, desde o seu nome até o target do link. 
Sempre nomeie sua imagem pois se não o fizer na hora de salvar ela receberá um nome 
parecido com esse: Sem Titulo-1_06 
 
 
Mostrar Opções 
 
Para especificar o quadro de destino, insira o nome de um quadro na caixa de texto ou escolha 
uma opção no menu popup: 
 
O nome de um quadro deve corresponder a um quadro definido anteriormente no arquivo HTML 
do documento. Quando o usuário 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 nomeação e colocado os links é hora de compactar o pedaço da imagem. 
Para isso, torne visível a barra de otimizar. Caso ela não esteja visível, vá no menu janela e 
clique em mostrar otimizar. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Alguns elementos desta janela podem mudar de acordo com o formato de arquivo escolhido 
 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 52 
 
6. Caso precise redimensionar ou mover a área selecionada, utilize a ferramenta seleção de 
fatia. Refaça esses passos até que toda imagem tenha sido recortada, após esse processo 
ela deverá ficar desta forma. 
 
7. Agora nos falta salvar e gerar o HTML, o ImageReady faz isso automaticamente para nós. 
Para salvar e gerar HTML vá até o menu arquivo e escolha a opção 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 pedaço da imagem você 
deve deixar marcado as caixas salvar imagens e salvar somente fatias selecionadas. 
 
8. Aqui setamos os atributos do HTML, como formatação das tags. 
 
9. Aqui setamos os atributos das imagens, podemos também indicar um diretório para que asimagens sejam salvas, etc.. 
 
 
Pronto, feito isso é só dar um OK que o mapeamento está pronto. 
 
Geração de Imagens para a Web 
 
 
Divisão de Serviços Comunidade – Centro de Computação - Unicamp 53 
 
Referência Bibliográfica 
 
 
· Assistente do Photoshop 5.5 
 
· Rápido e Fácil para iniciantes do Photoshop 
 Editora Campus - Kate Binder 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Onde obter ajuda 
 
Para ajudá-lo a solucionar dúvidas de informática, utilize o sistema Rau-Tu de perguntas e 
respostas, que foi desenvolvido pelo Centro de Computação 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