Licenciamento de Uso. Este documento é propriedade intelectual 2002 do Centro de Computação da Unicamp e distribuído sob os seguintes termos:

Transcrição

1

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

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

4 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 1

5 Área de trabalho do Adobe Photoshop Divisão de Serviços Comunidade Centro de Computação - Unicamp 2

6 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 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 Divisão de Serviços Comunidade Centro de Computação - Unicamp 3

7 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; Divisão de Serviços Comunidade Centro de Computação - Unicamp 4

8 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 Divisão de Serviços Comunidade Centro de Computação - Unicamp 5

9 Usando a barra de menu (editar) 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 6

10 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 (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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 7

11 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 8

12 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 9

13 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 10

14 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 Divisão de Serviços Comunidade Centro de Computação - Unicamp 11

15 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 12

16 Usando a barra de menu (visualizar) 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 13

17 Usando a barra de menu (janela) 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 Divisão de Serviços Comunidade Centro de Computação - Unicamp 14

18 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 15

19 Usando a Tecla de Atalho Divisão de Serviços Comunidade Centro de Computação - Unicamp 16

20 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 17

21 Geração de Imagens para a Web 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 18

22 Divisão de Serviços Comunidade Centro de Computação - Unicamp 19

23 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 Divisão de Serviços Comunidade Centro de Computação - Unicamp 20

24 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 21

25 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 22

26 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 23

27 Divisão de Serviços Comunidade Centro de Computação - Unicamp 24

28 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). Divisão de Serviços Comunidade Centro de Computação - Unicamp 25

29 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 26

30 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 27

31 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 Divisão de Serviços Comunidade Centro de Computação - Unicamp 28

32 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: Divisão de Serviços Comunidade Centro de Computação - Unicamp 29

33 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). Divisão de Serviços Comunidade Centro de Computação - Unicamp 30

34 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 31

35 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: Divisão de Serviços Comunidade Centro de Computação - Unicamp 32

36 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 33

37 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 Divisão de Serviços Comunidade Centro de Computação - Unicamp 34

38 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. Divisão de Serviços Comunidade Centro de Computação - Unicamp 35