Ap ferramentas
Upcoming SlideShare
Loading in...5
×
 

Ap ferramentas

on

  • 741 views

 

Statistics

Views

Total Views
741
Views on SlideShare
681
Embed Views
60

Actions

Likes
0
Downloads
28
Comments
0

4 Embeds 60

http://society-download.blogspot.com.br 48
http://feeds.feedburner.com 6
http://society-download.blogspot.com 5
http://testedbackup.blogspot.com.br 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ap ferramentas Ap ferramentas Document Transcript

  • 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õ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;
  • 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 para a 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 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
  • 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 as imagens 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