Livro Adobe Photoshop Cap09

Capítulo 9 – Geração de Imagens Para Web Leia livros sobre Photoshop na Livraria Cultura: 127 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

CAPÍTULO

9

Geração de Imagens Para Web Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Photoshop CS na Livraria Cultura: Leia livros sobre Photoshop 128 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

Quando estamos trabalhando em imagens que serão visualizadas prioritariamente pela Web ou na tela de um computador, precisamos salvar as imagens usando recursos específicos para este tipo de uso da imagem. O Photoshop permite gerar facilmente imagens para a Web. Veremos a seguir quais as principais necessidades de uma imagem com esta função.

Tratamento de Imagens para Web Modos de Cor Ao criar uma imagem para a Web, a primeira providência a tomar é ter certeza de que você vai trabalhar no modo de cor correto. Telas de computador usam o modelo de cor RGB (Red, Green, Blue, ou seja, Vermelho, Verde e Azul). A combinação destas três cores em diferentes proporções é que produz o universo das cores (ou Gamut de cor) que vemos na tela. Por isso, ao abrir uma imagem para a Web, aplique o modo de cor correto: 1. Clique em Image > Mode > RGB Color. Se a sua imagem for uma ilustração com poucas cores, ou cores chapadas, sem muitas variações de tons, você também pode usar o modo Indexed Color. Este modo tem um universo, ou gamut, de apenas 256 cores, e é limitado quanto à possibilidade de aplicar alguns filtros e alguns efeitos, por isso só deve ser usado se você estiver trabalhando em imagens que não sejam fotografias. Ele é recomendado para títulos de páginas Web, texto com fundo de cor única, ícones, e pequenos arquivos do gênero. Para colocar uma imagem em modo de cor Indexed Color: 1. Clique em Image > Mode > Indexed Color. Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Capítulo 9 – Geração de Imagens Para Web Leia livros sobre Photoshop na Livraria Cultura: 129 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

NOTA É importante lembrar que o universo de cores das imagens que você vê na tela é diferente do universo de cores de uma impressora, por exemplo, que usa o modo CMYK, combinando as quatro tintas/ cores que são usadas pelas impressoras (Cyan, Magenta, Amarelo e Preto) ou cores especiais (Pantone, por exemplo) para formar as cores no papel. Como os espaços de cor de cada um destes modos são um pouco diferentes, pode acontecer de uma cor que você vê na tela ao ser impressa ficar diferente, pois, por exemplo, o RGB, ou as cores que você vê na tela, consegue atingir cores mais luminosas que as cores impressas em um papel. Veja na imagem abaixo o gamut das cores RGB e CMYK, e compare os dois.

Figura 9.1 – Gamut de cores.

Formatos de Arquivos O formato no qual o arquivo será salvo também é importante ao criar imagens para a Web. Os três formatos principais utilizados para esta finalidade são o PNG, o GIF e o JPG, sendo que os dois últimos são os mais usados. ❏ Arquivos GIF são arquivos que devem estar no modo Indexed Color

(256 cores ou menos), e são indicados para ilustrações e imagens

Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Photoshop CS na Livraria Cultura: Leia livros sobre Photoshop 130 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

com cores chapadas. Permite o uso transparência quando uma cor pode ser definida como transparente. São arquivos com compactação. ❏ Arquivos JPG são arquivos que devem estar no modo RGB ou

CMYK (milhões de cores), mas devem estar necessariamente em RGB se forem veiculados na Web (os navegadores como o Internet Explorer não conseguem enxergar imagens em CMYK) e são indicados para fotografias. Não contém transparência. São arquivos com compactação. ❏ Arquivos PNG (que foram desenvolvidos como uma alternativa ao

formato GIF) são arquivos que podem estar no modo RGB e também aceitam o modo Indexed Color. São indicados para fotografias e imagens que necessitem de níveis diferentes de transparência. Sua transparência, possível de ser aplicada quando o arquivo está em modo RGB, pode ser gradual, em níveis diferentes de opacidade, enquanto o formato GIF não permite graduação. Também são arquivos compactos, mas este formato não é muito usado porque alguns navegadores não conseguem ver este tipo de imagem. Para salvar arquivos nestes formatos, o Photoshop tem um recurso especial, diferente do Save as, que ajuda na otimização destas imagens, maximizando sua compactação, e permitindo o controle de sua qualidade. Este recurso é o Save for Web. 1. Abra uma imagem. 2. Clique em File > Save for Web. 3. Clique na aba 2-up, como na imagem acima. Repare que na imagem do lado esquerdo você tem a aparência da imagem original, e do lado direito você tem um Preview da imagem otimizada para a Web. 4. Clique na imagem da direita e selecione o formato final da sua imagem (Gif ou Jpg). 5. Selecione as opções de compressão do arquivo de acordo com o formato escolhido. Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Capítulo 9 – Geração de Imagens Para Web Leia livros sobre Photoshop na Livraria Cultura: 131 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

Figura 9.2 – Caixa de diálogo Save for Web. ❏ Para arquivos JPG, marque a opção Optimized, digite a qualidade

que você quer manter no arquivo (de 0 a 100) em Quality, marque a opção Progressive se quiser que a imagem seja carregada aos poucos quando estiver sendo baixada em um website.

Figura 9.3 – Opções de otimização para arquivos JPG.

Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Photoshop CS na Livraria Cultura: Leia livros sobre Photoshop 132 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

❏ Para arquivos GIF, selecione o número de cores em Colors.

Figura 9.4 – Opções de otimização para arquivos GIF.

Se você quiser que alguma cor seja transparente, marque a opção Transparency, clique no botão de transparência, como indicado na figura abaixo e clique nas cores que você quer que sejam transparentes na tabela de cores.

Figura 9.5 – Seleção de cores transparentes.

Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Capítulo 9 – Geração de Imagens Para Web Leia livros sobre Photoshop na Livraria Cultura: 133 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

Na opção Matte, selecione a cor do fundo onde sua imagem transparente será colocada. Isso cria uma suavização das bordas da transparência nesta cor, dando um efeito mais natural à sobreposição da imagem. 6. Repare que abaixo das imagens você consegue ver o tamanho resultante das escolas de compressão que você fez. Quanto mais compressão você aplicar, mais você perde em qualidade e mais leve fica a imagem. Aplique várias configurações até chegar à configuração ideal na relação tamanho em Kb do arquivo e qualidade da imagem. 7. Se quiser comparar várias configurações de arquivo, selecione a guia 4-up e aplique diferentes configurações em cada imagem mostrada.

Resolução de Arquivos A resolução de uma imagem é a quantidade de pontos por unidade de medida que formam uma imagem, quanto maior esta quantidade de pontos, maior a qualidade da imagem, mas isto não significa que você deve usar sempre 1200 dpi, por exemplo. Cada resolução padrão tem sua utilidade, pois você deve levar em conta a finalidade da imagem em que está trabalhado. Ao trabalhar com imagens para mídia impressa, você pode trabalhar com resoluções a partir de 300 dpi (dotz per inch, ou pontos por polegada). Quanto maior a resolução, maior fica a imagem em Kb. Ao gerar imagens para a Web, você deve usar 72 dpi, que é a mesma resolução da tela do computador. Para alterar a resolução de uma imagem: 1. Clique em Image > Image Size. 2. Em Resolution, digite a resolução desejada.

Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Photoshop CS na Livraria Cultura: Leia livros sobre Photoshop 134 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

Figura 9.6 – Caixa de diálogo para alteração de resolução.

3. Marque a opção Resample Image se quiser diminuir a resolução mas manter o tamanho em pixels da imagem. É importante lembrar que aumentar a resolução “artificialmente” não aumenta a qualidade da imagem, por isso evite fazê-lo. 4. Se você quiser mudar o tamanho da imagem, você também pode digitar os valores nesta caixa de diálogo. Se você for diminuir o tamanho da imagem e quiser aumentar a resolução da imagem, não marque a opção Resample Image. Esta opção mantém o mesmo número de pixels da imagem. Consequentemente, se você aumentar o tamanho da imagem, sua resolução vai diminuir. 5. Marque a opção Constrain Proportions para manter sempre a proporção da imagem.

Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Capítulo 9 – Geração de Imagens Para Web Leia livros sobre Photoshop na Livraria Cultura: 135 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

Criando uma Galeria de Imagens Para a Web O Photoshop oferece uma forma prática e rápida de montar uma pequena página Web, como uma galeria de fotos. Se você não tem muita experiência em criar páginas Web, ou se quer uma forma prática e rápida de organizar suas fotos para colocá-las online, experimente este recurso.

Figura 9.7 – Caixa de diálogo da Web Photo Gallery.

1. Abra o File Browser clicando em seu botão de exibição ou clique em File > Browse. 2. Selecione o diretório onde estão as imagens que você quer colocar na página. Se você quiser incluir apenas algumas das Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Photoshop CS na Livraria Cultura: Leia livros sobre Photoshop 136 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

imagens, selecione aquelas que você quer usar clicando em suas miniaturas pressionando a tecla Ctrl, para fazer uma seleção múltipla. 3. Na barra de menu do File Browser, clique em Automate > Web Photo Gallery. 4. Clique no botão Destination para selecionar o diretório onde você quer salvar seus arquivos finais. 5. Em Options, selecione a opção Banner. Digite um nome para o site. 6. Ainda em Options, selecione a opção Thumbnails para definir o tamanho das miniaturas que serão exibidas no site, e na opção Large Files defina o tamanho das imagens maiores, correspondentes às miniaturas. 7. Clique em OK. O Photoshop vai montar as imagens de acordo com as configurações escolhidas e criar os arquivos html necessários para a sua galeria de “fotos”.

Slices Agora que vimos como montar uma galeria de fotos com a ajuda do Photoshop, veremos como salvar facilmente imagens para a Web no Photoshop.

Criando Slices Slices são demarcações que definem qual a função e a otimização a serem aplicadas à área demarcada. Quando estamos montando um layout para a Web no Photoshop, precisamos criar estes slices para salvar as imagens utilizadas já otimizadas para a Web, sem precisar recortar e salvar uma por uma separadamente. Para criar slices: 1. Selecione a ferramenta Slice. Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Capítulo 9 – Geração de Imagens Para Web Leia livros sobre Photoshop na Livraria Cultura: 137 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

Figura 9.8 – Ferramentas Slice e Select Slice.

2. Clique e arraste o cursor em volta da imagem que você quer salvar e otimizar. 3. Repita o processo em cada imagem que você quer salvar. É importante repetir o processo por imagem porque em um layout as diferentes imagens não têm sempre a mesma configuração de otimização e geralmente estão em locais separados. Elas precisam ser geradas separadamente para a posterior montagem do html. Veja um exemplo que ilustra esta necessidade na imagem abaixo.

Figura 9.9 – Exemplo de layouts com slices.

Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Photoshop CS na Livraria Cultura: Leia livros sobre Photoshop 138 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

4. Se precisar movimentar ou alterar o tamanho de um slice, selecione a ferramenta Select Slice e faça as alterações necessárias.

Exportando Imagens com Slices Quando os slices foram criados, precisamos otimizar as imagens correspondentes a cada um e salvá-las. Para otimizar imagens com slices: 1. Com a ferramenta Select Slice, selecione o slice e dê um duplo clique. Digite o nome que você quer dar à imagem. 2. Clique em File > Save as. 3. Selecione cada slice e especifique as opções de otimização para cada uma das imagens. 4. Clique em Save. 5. Em Salvar como tipo escolha Images Only para salvar apenas as imagens. Se quiser que o Photoshop monte a página html para você, selecione Html and Images. 6. Na opção Slices, selecione All Slices se quiser exportar todos os slices (incluindo os que o Photoshop cria automaticamente, no espaço entre os slices que foram criados manualmente). Selecione All User Slices se quiser exportar apenas os slices que foram criados manualmente, e Selected Slices para exportar apenas os slices que você selecionar.

Resumo Rápido Tratamento de Imagens para Web Para aplicar o modo de cor correto para uma imagem que será veiculada na Web: 1. Clique em Image > Mode > RGB Color ou clique em Image > Mode > Indexed Color, de acordo com a sua imagem. Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Capítulo 9 – Geração de Imagens Para Web Leia livros sobre Photoshop na Livraria Cultura: 139 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

Para salvar arquivos para a Web. 1. Abra uma imagem. 2. Clique em File > Save for Web. 3. Clique na aba 2-up. 4. Clique na imagem da direita e selecione o formato final da sua imagem (Gif ou Jpg). 5. Selecione as opções de compressão do arquivo de acordo com o formato escolhido. 7. Se quiser comparar várias configurações de arquivo, selecione a guia 4-up e aplique diferentes configurações em cada imagem mostrada. Para alterar a resolução de uma imagem: 1. Clique em Image > Image Size. 2. Em Resolution, digite a resolução desejada. 3. Marque a opção Resample Image se quiser diminuir a resolução mas manter o tamanho em pixels da imagem. 5. Marque a opção Constrain Proportions para manter sempre a proporção da imagem.

Criando uma Galeria de Imagens para a Web Para criar uma galeria de fotos: 1. Abra o File Browser. 2. Selecione o diretório ou as imagens que você quer colocar na página. 3. Na barra de menu do File Browser, clique em Automate > Web Photo Gallery. 4. Clique no botão Destination para selecionar o diretório onde você quer salvar seus arquivos finais. Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/

Photoshop CS na Livraria Cultura: Leia livros sobre Photoshop 140 http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop

5. Em Options, selecione a opção Banner. Digite um nome para o site. 6. Selecione a opção Thumbnails para definir o tamanho das miniaturas que serão exibidas no site, e na opção Large Files defina o tamanho das imagens maiores, correspondentes às miniaturas. 7. Clique em OK.

Slices Para criar slices: 1. Selecione a ferramenta Slice. 2. Clique e arraste o cursor em volta da imagem que você quer salvar e otimizar. 3. Repita o processo em cada imagem que você quer salvar 4. Se precisar movimentar ou alterar o tamanho de um slice, selecione a ferramenta Select Slice e faça as alterações necessárias. Para otimizar imagens com slices: 1. Com a ferramenta Select Slice, selecione o slice e dê um duplo clique. Digite o nome que você quer dar à imagem. 2. Clique em File > Save as. 3. Selecione cada slice e especifique as opções de otimização para cada uma das imagens. 4. Clique em Save. 5. Em Salvar como tipo escolha a opção desejada. 6. Na opção Slices, selecione quais slices você quer exportar (todos, apenas os criados por você ou apenas os selecionados).

Conheça meus sites: http://usando-photoshop.blogspot.com/ http://marketing-e-inovacao.blogspot.com/ http://impressoes-de-viagens.blogspot.com/