Livro Adobe Photoshop Cap09

Leia livros sobre Photoshop na Livraria Cultura:
Capítulo 9 – Geração de Imagens Para Web

127
http://www.livrariacultura.com.br/scripts/cultura/externo/index.asp?id_link=5081&tipo=14&p1=Adobe&p2=Photoshop
9
CAPÍTULO
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/
Leia livros sobre Photoshop
Photoshop CS na Livraria Cultura:
128
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.

129
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
130
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.
131
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.

132
❏ 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.

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

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

135
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
136
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.

137
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 lay-
out 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.

138
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.
139
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.

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


Livro Adobe Photoshop Cap09

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Livro Adobe Photoshop Cap09

Enviado por

Direitos autorais:

Formatos disponíveis

Leia livros sobre Photoshop na Livraria Cultura:

Capítulo 9 – Geração de Imagens Para Web

Quando estamos trabalhando em imagens que serão visualizadas

1. Clique em Image > Mode > RGB Color.

Se a sua imagem for uma ilustração com poucas cores, ou cores

Para colocar uma imagem em modo de cor Indexed Color:

1. Clique em Image > Mode > Indexed Color.

Conheça meus sites:

É importante lembrar que o universo de cores das imagens que você vê na

Figura 9.1 – Gamut de cores.

com cores chapadas. Permite o uso transparência quando uma cor

Para salvar arquivos nestes formatos, o Photoshop tem um recurso

1. Abra uma imagem.

Figura 9.2 – Caixa de diálogo Save for Web.

❏ Para arquivos JPG, marque a opção Optimized, digite a qualidade

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

❏ 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

Figura 9.5 – Seleção de cores transparentes.

Na opção Matte, selecione a cor do fundo onde sua imagem

6. Repare que abaixo das imagens você consegue ver o tamanho

Ao trabalhar com imagens para mídia impressa, você pode trabalhar

Para alterar a resolução de uma imagem:

1. Clique em Image > Image Size.

Conheça meus sites:

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

Conheça meus sites:

Criando uma Galeria

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

imagens, selecione aquelas que você quer usar clicando em

Para criar slices:

1. Selecione a ferramenta Slice.

Figura 9.8 – Ferramentas Slice e Select Slice.

2. Clique e arraste o cursor em volta da imagem que você quer

Figura 9.9 – Exemplo de layouts com slices.

4. Se precisar movimentar ou alterar o tamanho de um slice,

Exportando Imagens com Slices

Para otimizar imagens com slices:

1. Com a ferramenta Select Slice, selecione o slice e dê um duplo

Para salvar arquivos para a Web.

1. Abra uma imagem.

Para alterar a resolução de uma imagem:

1. Clique em Image > Image Size.

Criando uma Galeria de Imagens para a Web

1. Abra o File Browser.

Conheça meus sites:

5. Em Options, selecione a opção Banner. Digite um nome para

1. Selecione a ferramenta Slice.

Para otimizar imagens com slices:

1. Com a ferramenta Select Slice, selecione o slice e dê um duplo

Conheça meus sites:

Você também pode gostar