Ap ferramentas

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.

Á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 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

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ões
do 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;

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

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)

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.

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.

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.

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.

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

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.

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)

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)

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.

Usando a Tecla de Atalho

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.

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.

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

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.

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.

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.

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).

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.

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.

Photoshop: Usando as ferramentas
As 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

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:

Photoshop: Vamos trabalhar com texto
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).

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.

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.
Vamos tentar fazer igual ao modelo para podermos ver a diferença das ferramentas:

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.

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

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.

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.

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)

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

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 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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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 as
imagens sejam salvas, etc..
Pronto, feito isso é só dar um OK que o mapeamento está pronto.

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

Ap ferramentas

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (14)

Similaire à Ap ferramentas

Similaire à Ap ferramentas (20)

Plus de Bruno Marques

Plus de Bruno Marques (20)

Ap ferramentas