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.
A janela consiste em duas partes: um bloco de visualização
e bloco de configurações.
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.
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".
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.
Baixo abaixo é o botão com a inscrição "View". Ele abre a opção selecionada no navegador padrão.
Na janela do navegador, exceto para definir parâmetros, também podemos obter código GIF HTML.
Configurações de bloco
Neste bloco, os parâmetros da imagem estão configurados, consideram mais.
- Esquema de cores. Essa configuração determina qual tabela de cores indexadas será aplicada à imagem ao otimizar.
- 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.
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.
- Número máximo de cores na tabela de cores.
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.
- 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.
Exemplo:
- Dissrying permite suavizar as transições entre as cores misturando as tonalidades contidas na tabela de indexação selecionada.
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:
- Transparência. O formato GIF suporta apenas pixels absolutamente transparentes ou absolutamente opacos.
Este parâmetro, sem ajuste adicional, exibe mal as curvas de linhas, deixando as senhoras de pixel.
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.
- 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.
- A conversão SRGB ajuda a economizar cores máximas da imagem original enquanto economiza.
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.
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.
- Depois de processar a imagem, vá para o menu "Arquivo - Salvar para Web".
- Exibir o modo de visualização "4 opção".
- 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.
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.
- 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.
O tamanho gif diminuiu de 36.59 Kb para 26,85 KB.
- 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.
Ainda conseguimos reduzir o tamanho do arquivo, enquanto perdendo um pouco de qualidade. Gifs agora pesa 25,9 kilobytes.
Total, fomos capazes de reduzir o tamanho da imagem cerca de 10 kb, que é superior a 30%. Muito bom resultado.
- Outras ações são muito simples. Clique no botão Salvar.
Escolhemos um lugar para salvar, dar o nome do GIF, e pressione "Salvar" novamente.
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.
Como resultado, recebemos uma página e uma pasta com a imagem.
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.