Como manter o gif no Photoshop

Anonim

Como manter o gif no Photoshop

Depois de criar uma animação no Photoshop, ele deve ser salvo em um dos formatos disponíveis, um dos quais é gif. Um recurso deste formato é que se destina a exibir (jogar) no navegador.

Se você estiver interessado em outras opções para salvar animação, recomendamos ler este artigo:

Lição: Como salvar o vídeo no Photoshop

O processo de criação de uma animação GIF foi descrito em uma das lições anteriores, e hoje falaremos sobre como salvar o arquivo no formato GIF e nas configurações de otimização.

Lição: Crie uma animação simples no Photoshop

Salvando gif.

Para começar, repetimos o material e lemos a janela Salvar configurações. Ele se abre clicando no item "Salvar for web" no menu Arquivo.

Ponto Salvar para Web no menu Arquivo para salvar os gifs no Photoshop

A janela consiste em duas partes: um bloco de visualização

Uma unidade de recepção nas configurações dos parâmetros da preservação de GIFs no Photoshop

e bloco de configurações.

Configurações de bloco na janela Configurações de preservação Gifki no Photoshop

Block Preview.

Selecione o número de opções de exibição selecionado na parte superior do bloco. Dependendo das necessidades, você pode selecionar a configuração desejada.

Selecionando as opções de visualização na janela Configurações de conservação do Gifki no Photoshop

A imagem em cada janela, exceto o original, é configurada separadamente. Isso é feito para que você possa escolher a opção ideal.

No lado esquerdo do bloco há um pequeno conjunto de ferramentas. Vamos usar apenas a "mão" e "escala".

Ferramentas de mão e escala na janela Configurações de conservação do Gifki no Photoshop

Usando a "mão", você pode mover a imagem dentro da janela selecionada. A escolha também é feita por esta ferramenta. "Escala" executa a mesma ação. Aprox e excluir a imagem também pode ser botões na parte inferior do bloco.

Escala de imagem na janela Configurações de conservação do Gifki no Photoshop

Baixo abaixo é o botão com a inscrição "View". Ele abre a opção selecionada no navegador padrão.

Botão de visualização de imagem no navegador na janela Configurações dos parâmetros do gifting no Photoshop

Na janela do navegador, exceto para definir parâmetros, também podemos obter código GIF HTML.

Visualizar a imagem no navegador padrão, mantendo os gifs no Photoshop

Configurações de bloco

Neste bloco, os parâmetros da imagem estão configurados, consideram mais.

  1. Esquema de cores. Essa configuração determina qual tabela de cores indexadas será aplicada à imagem ao otimizar.

    Seleção do esquema de indexação de cores, mantendo gifs no Photoshop

    • Perceptivo e simplesmente "esquema de percepção". Quando é usado, o Photoshop cria uma tabela de cores, guiadas pelos tons atuais da imagem. De acordo com os desenvolvedores, esta tabela é o mais próxima possível de como o olho humano vê a cor. Além disso, a imagem é a mais próxima do original, as cores são salvas maximamente.
    • O esquema seletivo é semelhante ao anterior, mas as cores relacionadas à Web Secure para a Web são usadas predominantemente nela. Ele também se concentrou na exibição de sombras aproximadas para a inicial.
    • Adaptativo. Nesse caso, a tabela é criada a partir de cores mais comuns na imagem.
    • Limitado. Consiste em 77 cores, algumas das amostras são substituídas por branco sob a forma de um ponto (grão).
    • Personalizado. Ao escolher este esquema, é possível criar sua própria paleta.
    • Preto e branco. Esta tabela usa apenas duas cores (preto e branco), também usando grãos.
    • Nos graus de cinza. Existem vários níveis 84 de tons de cinza.
    • MacOS e janelas. Os dados da tabela são compilados com base nos recursos de mapeamento de imagens nos navegadores que executam esses sistemas operacionais.

    Aqui estão alguns exemplos de aplicação de esquemas.

    Amostras de imagem usando várias tabelas de indexação de cores, mantendo gifs no Photoshop

    Como você pode ver, as três primeiras amostras têm qualidade bastante aceitável. Apesar do fato de que visualmente eles quase não diferem uns dos outros, em imagens diferentes, esses esquemas funcionarão de forma diferente.

  2. Número máximo de cores na tabela de cores.

    Definindo o número máximo de cores na tabela de indexação, mantendo os gifs no Photoshop

    O número de tons na imagem afeta diretamente seu peso e, consequentemente, na velocidade de download no navegador. O valor de 128 é mais usado, já que essa configuração quase não afeta a qualidade, reduzindo o peso do GIF.

    Exemplos de configurações para o número máximo de cores na tabela de indexação, mantendo os gifs no Photoshop

  3. Cores da web. Essa configuração estabelece a tolerância com a qual as tonalidades são convertidas para equivalente a partir de uma paleta web segura. O campo do arquivo é determinado pelo valor definido pelo slider: O valor é maior - o arquivo é menor. Ao configurar as cores da Web não deve também esquecer a qualidade.

    Definindo a tolerância à conversão de imagens para as cores da Web enquanto mantém gifs no Photoshop

    Exemplo:

    Exemplos de configuração de conversão de cores para o Weeb, mantendo gifs no Photoshop

  4. Dissrying permite suavizar as transições entre as cores misturando as tonalidades contidas na tabela de indexação selecionada.

    Configuração de distering, mantendo gifs no Photoshop

    Além disso, a configuração ajudará a preservar os gradientes e a integridade dos sites monocromáticos. Ao usar a distribuição aumenta o peso do arquivo.

    Exemplo:

    Exemplos de aplicação de configurações de distering, mantendo gifs no Photoshop

  5. Transparência. O formato GIF suporta apenas pixels absolutamente transparentes ou absolutamente opacos.

    Definir a transparência de fundo, mantendo gifs no Photoshop

    Este parâmetro, sem ajuste adicional, exibe mal as curvas de linhas, deixando as senhoras de pixel.

    Exemplos do uso de ajuste Matte, mantendo os gifs no Photoshop

    O ajuste é chamado "fosco" (em alguns editores "Kaima"). Com ele, é configurado para misturar imagens de pixels com um plano de fundo da página em que será localizado. Para o melhor display, escolha uma cor correspondente à cor do fundo do site.

    Ajustando a mistura de imagens de pixel com o fundo das páginas de imprensa ResoE no Photoshop

  6. Entrelaçado. Um dos mais úteis para as configurações da Web. No caso de o arquivo ter um peso considerável, permite mostrar imediatamente uma foto na página, pois carrega melhorar sua qualidade.

    Definindo o entrelaçado enquanto mantém gifs no Photoshop

  7. A conversão SRGB ajuda a economizar cores máximas da imagem original enquanto economiza.

    Definindo a conversão de cores no SRGB enquanto mantém gifs no Photoshop

A criação de "transparência de distrying" agrava significativamente a qualidade da imagem, e falaremos sobre o parâmetro "perda" na parte prática da lição.

Configurações de Dissrying para transparência e perda de dados, mantendo gifs no Photoshop

Para a melhor compreensão do processo de configuração da preservação de Gifs no Photoshop, você deve praticar.

Prática

O objetivo de otimizar imagens para a Internet é a redução máxima do peso do arquivo, mantendo a qualidade.

  1. Depois de processar a imagem, vá para o menu "Arquivo - Salvar para Web".
  2. Exibir o modo de visualização "4 opção".

    Escolhendo o número de opções para visualizar resultados, mantendo gifs no Photoshop

  3. Em seguida, você precisa de uma das opções para tornar o mais semelhante ao original. Deixe ser uma foto à direita da fonte. Isso é feito para estimar o tamanho do arquivo com máxima qualidade.

    As configurações são as seguintes:

    • Esquema de cores "seletivo".
    • "Cores" - 265.
    • "Diazering" é "aleatório", 100%.
    • Remova os Daws em frente ao parâmetro "entrelaçado", já que a imagem final da imagem será bastante pequena.
    • "Cores da Web" e "Perdas" - zero.

      Definir os parâmetros da imagem de referência, mantendo os gifs no Photoshop

    Compare o resultado com o original. Na parte inferior da janela de amostra, podemos ver o tamanho do GIF atual e a velocidade de carregamento na velocidade especificada da Internet.

    Comparação do resultado da otimização da imagem com o original, mantendo os gifs no Photoshop

  4. Vá para a foto abaixo apenas configurada. Vamos tentar otimizá-lo.
    • Deixe o esquema inalterado.
    • O número de cores reduzem até 128.
    • Valor dismering reduzido para 90%.
    • As cores da Web não tocam, porque, neste caso, não nos ajudará a manter a qualidade.

      Definindo os parâmetros da imagem de destino enquanto mantém os GIFs no Photoshop

    O tamanho gif diminuiu de 36.59 Kb para 26,85 KB.

    Reduziu o tamanho da imagem após a otimização, mantendo gifs no Photoshop

  5. Como algumas granulações e pequenos defeitos já estão presentes na imagem, vamos tentar aumentar "perdas". Este parâmetro define um nível permitido de perda de dados ao compactar gif. Altere o valor para 8.

    Definindo o nível de perda de dados permissível ao compactar gif para salvar os gifs no Photoshop

    Ainda conseguimos reduzir o tamanho do arquivo, enquanto perdendo um pouco de qualidade. Gifs agora pesa 25,9 kilobytes.

    Tamanho da imagem Depois de configurar a perda, mantendo gifs no Photoshop

    Total, fomos capazes de reduzir o tamanho da imagem cerca de 10 kb, que é superior a 30%. Muito bom resultado.

  6. Outras ações são muito simples. Clique no botão Salvar.

    Salvar o botão na janela Configurações de conservação do Gifki no Photoshop

    Escolhemos um lugar para salvar, dar o nome do GIF, e pressione "Salvar" novamente.

    Escolhendo um lugar e nome da preservação de gifs no Photoshop

    Por favor, note que há uma oportunidade junto com o GIF para criar um documento HTML para o qual nossa foto será construída. Para fazer isso, é melhor escolher uma pasta vazia.

    Salvando Gifs junto com o documento HTML no Photoshop

    Como resultado, recebemos uma página e uma pasta com a imagem.

    Pasta com gif salvo no photoshop

Dica: Ao atribuir um nome de arquivo, tente não usar caracteres cirílicos, porque nem todos os navegadores são capazes de lê-los.

Esta lição para salvar a imagem no formato GIF é concluída. Nele, descobrimos como você pode otimizar o arquivo para colocação na Internet.

Consulte Mais informação