Salvar photoshop imagens como gif para dispositivos do web e móveis

Salvar arquivos para o Web ou dispositivos móveis em Photoshop Creative Suite 5 cria uma versão menor de sua imagem para que ele irá carregar rapidamente. A idéia é fazer com que a imagem tão pequena quanto possível, mantendo-o visualmente agradável.

Use o formato GIF se você tem grandes áreas de cor sólida.

Uma imagem com muita cor sólida faz um bom GIF.
Uma imagem com muita cor sólida faz um bom GIF.

O formato GIF não é com perdas (não perde os dados quando o arquivo é compactado neste formato), mas reduz o tamanho do arquivo usando um número limitado de cores em uma tabela de cores. Quanto menor o número de cores, quanto menor o tamanho do arquivo. Se você já trabalhou no modo de índice de cor, você está familiarizado com este processo.

Transparência é suportada pelo formato de arquivo GIF. Geralmente, os arquivos GIF não fazer um bom trabalho em qualquer coisa que precisa de transições suaves de uma cor para outra, por causa da má apoio do formato de anti-aliasing, que é o método usa Photoshop para suavizar as bordas irregulares. Quando uma imagem a transição de uma cor para outra, Photoshop produz várias cores de pixels para criar uma ainda se misturam entre as duas cores.

Porque anti-aliasing precisa criar várias cores para este efeito, arquivos GIF geralmente não são recomendados. Na verdade, quando você reduzir o tamanho de um GIF, você está mais apto para ver bandas (Um artefacto que aparece como estrias na imagem) porque o anti-aliasing não pode ocorrer com o número limitado de cores disponíveis no formato GIF.

Você pode, é claro, aumentar drasticamente o número de cores para criar uma transição mais suave, mas então o risco de criação de arquivos de monstros que levam uma eternidade para baixar.

Salvar como GIF

Quando você escolha Arquivo → Salvar para a Web & Dispositivos, primeiro você ver as opções de formato GIF disponíveis. Eles podem ser mais claro para você, se você tiver uma imagem aberta (com lotes de cor sólida no mesmo).

Video: Como criar uma imagem Gif no photoshop cs6

Para salvar um arquivo para a Web como um GIF, siga estes passos:

  1. Escolha Arquivo → Salvar para Web & Dispositivos.

    A Save for Web & caixa de diálogo Dispositivos aparece.

  2. No topo, clique na guia 2 para cima.

    Você ver a imagem original no lado esquerdo e a imagem otimizada à direita (ou parte superior e inferior, dependendo das proporções da imagem).

    Na parte inferior da tela, você vê o tamanho do arquivo original em comparação com o tamanho do arquivo otimizado, bem como o tempo de download aproximado. O tempo de download é importante. A maioria das pessoas não espere mais do que dez segundos para uma página web a aparecer, de modo a manter o tempo de download de cada imagem para cinco segundos ou menos.

    Alterar a velocidade de download, escolhendo a partir do menu de visualização (procure a seta no lado direito superior do Salvar para Web & caixa de diálogo Dispositivos).

  3. Escolha GIF 32 No Dither a partir da lista drop-down predefinido.

    Você pode ver uma mudança já. Photoshop fornece-o com presets para escolher, ou você pode personalizar e salvar o seu próprio.

  4. Escolha se você quer dithering aplicado à imagem, selecionando uma opção no Especifique a lista drop-down Dither Algorithm.

    Esta escolha é puramente pessoal. Porque você pode estar limitando cores, Photoshop pode usar dithering para misturar os pixels de cores disponíveis para simular cores faltando. Muitos designers escolher a opção No Dither porque hesitar pode criar manchas de cores não naturais em uma imagem.

    Escolha entre presets ou criar suas próprias configurações personalizadas.
    Escolha entre presets ou criar suas próprias configurações personalizadas.
  5. Se sua imagem está em uma camada transparente e você quiser manter a transparência em uma página da Web, selecione a caixa de seleção Transparência.

tabela de cores em Salvar para Web & caixa de diálogo Dispositivos



Quando você salvar uma imagem no formato GIF usando o Save for Web & caixa de diálogo dispositivos, consulte a tabela de cor para a imagem no lado direito da caixa de diálogo. A tabela de cores é importante porque não só lhe permite ver as cores usadas na imagem, mas também permite que você personalize a tabela de cores usando as opções na parte inferior.

Video: Photoshop CS5 Tutorial Qualidade de Gif

Você pode querer personalizar sua tabela de cor selecionando algumas cores para ser Web seguro e cores de bloqueio até que eles não estão colidido fora como você reduzir o número que é usado.

Para personalizar uma tabela de cores, siga estes passos:

  1. Se sua imagem tem apenas algumas cores que você deseja converter para cores aceitas pela Web, escolha a ferramenta Conta-gotas da esquerda do Save for Web & caixa de diálogo e clique na cor na vista otimizada dispositivos.

    A amostra de cor é realçada na tabela de cores.

  2. Clique no botão Web seguro na parte inferior da tabela de cores.

    Quando você atravessar este botão, os deslocamentos dica / Unshifts cores selecionadas para o Painel de Web aparece.

    Um diamante aparece, indicando que a cor é agora seguro web.

  3. cores bloqueio que você não deseja excluir como você reduzir o número de cores na tabela de cores.

    Selecione uma cor com a ferramenta Conta-gotas, ou escolhê-lo na tabela de cores e clique no botão Bloquear a cores. Um quadrado branco aparece no canto inferior direito, indicando que a cor está bloqueada.

    Se você bloquear 32 cores e em seguida, reduzir a tabela de cores a 24, algumas das suas cores bloqueados são excluídas. Se você optar por adicionar cores, essas cores bloqueadas são os primeiros a retornar.

    Personalizar as cores usando a tabela de cores no Salvar para Web e janela Devices.
    Personalizar as cores usando a tabela de cores no Salvar para Web e janela Devices.

Como está a tabela de cores criado? Com base no método algoritmo de redução de cor que você escolher, a Save for Web & Dispositivos possuem amostras o número de cores que você indicar. Se manter cores web segura é importante, selecione a opção restritiva (Web) para a metodolo- se você quiser que sua imagem para olhar melhor na maioria dos monitores, mas não necessariamente para ser seguro web, escolha a opção Adaptive.

  1. Use o menu drop-down Cores ou digite um número para adicionar ou excluir cores da tabela de cores.

  2. Se sua imagem usa transparência, selecione a caixa de seleção Transparência perto do topo da Save for Web & caixa de diálogo dispositivos.

    Lembre-se que a transparência é contado como uma das suas cores na tabela de cores.

  3. Selecione a caixa de seleção entrelaçado somente se sua imagem GIF é grande (25K ou maior).

    Video: Como colocar GIF em uma BASE - Photoshop CS6

    Selecionar esta opção faz com que a imagem para construir em vários scans na página da web - uma imagem de baixa resolução que aparece rapidamente e depois é atualizado com a imagem de maior resolução quando a transferência estiver completa. Entrelaçamento dá a ilusão do download indo mais rápido, mas faz com que o tamanho de arquivo maior, então usá-lo somente se necessário.

  4. Clique em Salvar.

    Agora a imagem está pronta para ser anexado a uma mensagem de e-mail ou usado em uma página web.


Publicações relacionadas