Como otimizar imagens PNG para a Web no Photoshop CS4

Escrito por david weedmark Google | Traduzido por joanna dalleth
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

Ao otimizar imagens para a Web, cada imagem deve ser tratada individualmente para existir um bom equilíbrio entre qualidade e tamanho de arquivo. O Adobe Photoshop CS4 utiliza duas variações de PNG. A PNG-24, que é capaz de conter muitas cores e PNG-8, que gera arquivos muito menores. Isso quer dizer que imagens PNG-8 carregam mais rápido, mas não contêm toda a gama de cores que as imagens salvas em PNG-24. O Photoshop CS4 tem a opção "Salvar para Web e Dispositivos" que facilita a otimização de imagens para Web.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra uma imagem no Adobe Photoshop CS4.

  2. 2

    Clique no menu "Arquivo" e selecione "Salvar para a Web e Dispositivos".

  3. 3

    Amplie ou diminua a visualização da imagem clicando no menu drop-down, no canto inferior esquerdo da janela. Você pode digitar uma porcentagem ou selecionar uma das sugeridas nesse menu.

  4. 4

    Selecione "PNG-24" como tipo de arquivo no menu drop-down do lado direito da janela.

  5. 5

    Selecione a aba "Impressão 4-up" acima da visualização. Isso muda a janela de visualização, tornando possível visualizar a imagem original, a mesma salva em PNG-24 e em outros dois formatos, lado a lado.

  6. 6

    Configure o arquivo PNG-24 com as opções existentes no lado direito da janela, comparando a qualidade da imagem à original e prestando atenção ao tamanho do arquivo.

  7. 7

    Clique em uma das janelas da visualização que não seja da imagem original ou da PNG-24. Mude o formato dela para PNG-,8 no menu drop-down.

  8. 8

    Configure o arquivo PNG-8 com as opções no lado direito da janela, comparando a qualidade da imagem à original e à do arquivo PNG-24, e prestando atenção ao tamanho do arquivo.

  9. 9

    Selecione "Perceptivo" para dar prioridade às cores que o olho humano é mais sensível.

  10. 10

    Selecione "Seletivo" para usar uma gama maior do que a da opção "Perceptivo".

  11. 11

    Selecione "Adaptativo" para dar preferência às cores mais usadas na imagem.

  12. 12

    Selecione "Personalizado" para modificar a paleta de cores manualmente na tabela de cores.

  13. 13

    Selecione "Transparência" para manter pixels transparentes na imagem. Clique "Fosco" para substituir os pixels transparentes por uma cor, depois escolha a cor que deseja usar.

  14. 14

    Selecione a imagem que tenha o menor tamanho ao mesmo tempo em que é mais fiel à imagem original.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível