Documente Academic
Documente Profesional
Documente Cultură
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:
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.
(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...
(Salvar para Web) permite definir as preferências de Gravação de Arquivos para web
5. Informações de arquivo...;
9. (Adobe On-line)
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.
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.
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.
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.
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.
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;
6. (Carregar Seleção) leva a tela até a área selecionada e (Salvar Seleção) grava á área
selecionada.
Filtros Artísticos
Filtros de Desfoque
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
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;
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.
6. (Mostrar histórico) Desfazer mais de um comando; (Mostrar Ações) Automatizar uma série de
passos
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.
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.
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
• 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 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.
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".
5) Seu círculo está pronto. Basta deselecionar o círculo no menu Selecionar > Desfazer
seleção (Ctrl+D).
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.
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
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.
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.
2. Achate a imagem:
Resultado final
2. Ferramenta mascara (cria um seleção em volta do texto, sem preencher com nenhuma cor,
e sem criar uma nova camada (layer))
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.
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.
Esta função é uma das novas opções contidas no Adobe Photoshop 5.5, sua principal função é
isolar um objeto de seu background.
2. Acesse a função:
Vamos remover o fundo que está por trás destas mãos, " (Imagem) > (Extrair)" como ilustrado
na imagem.
1. É com esta ferramenta que demarcamos as arestas do objeto do que desejamos manter na
imagem.
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.
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.
4. Clique 2 vezes na ferramenta de seleção que abrirá a caixa de opções da marca da seleção.
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.
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.
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
16. A ferramenta borracha mágica preenche áreas com cores semelhantes com transparência.
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.
27. A ferramenta lata de tinta preenche áreas de cores semelhantes com a cor do primeiro
plano.
O comando Novo permite que você crie uma imagem no ImageReady em branco e sem título.
Barra de Menu
O comando Novo permite que você crie uma imagem no ImageReady em branco e sem título.
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.
Transparente para criar uma imagem contendo uma única camada sem valores de cor.
4. Clique em OK.
• Selecione o arquivo.
• Clique em Abrir.
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.
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
• 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.
Para aumentar ou diminuir o intervalo de exibição das imagens, clique no Menu de intervalo e
escolha as opções de tempo .
Repita o processo para criar e ajustar novos quadros adicionais conforme necessário.
É 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
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....)
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.
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.
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.
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:
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.
Alguns elementos desta janela podem mudar de acordo com o formato de arquivo escolhido
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.
9. Aqui setamos os atributos das imagens, podemos também indicar um diretório para que as
imagens sejam salvas, etc..
Referência Bibliográfica