Agora aprendemos muitos métodos de fazer animações, mas ainda não temos muita clareza sobre a forma final da animação. Como gerar animação? Onde é usado? O que devemos prestar atenção durante o uso? Nesta lição, explicaremos essas questões em detalhes.
Atualmente, o principal formato de imagem animada em sistemas Windows é o GIF, que também pode ser exibido diretamente em páginas da web. Atualmente é o formato de imagem animada mais utilizado. Incluir animações nas agora populares mensagens MMS para celulares também pertence ao formato GIF. O formato GIF suporta expressões estáticas e animadas. Quer sejam estáticas ou animadas, as características são as mesmas.
O princípio de implementação da animação no formato GIF não é complicado. Você pode entendê-lo como uma combinação de várias imagens estáticas (quadros) para exibição. Existem também relações operacionais entre estas imagens (frames), que são semelhantes às operações de qualquer caminho selecionado, nomeadamente adição, subtração e eliminação. Isso é para otimizar a contagem de bytes da animação.
Se um determinado quadro for adicionado, o quadro anterior será mantido e o conteúdo deste quadro será adicionado para formar uma nova imagem. Por exemplo, a animação comum da barra de progresso é um exemplo típico, conforme mostrado na figura abaixo. Suponha que uma barra de progresso consista em 3 quadros. Em termos da forma teórica do quadro que vemos, parece que os quadros mais curtos e médios são armazenados. nestes 3 quadros respectivamente e a imagem da barra de progresso mais longa. Mas, na verdade, o segundo quadro contém apenas os pixels que não estão no primeiro quadro, e então atua no primeiro quadro de forma aditiva, formando uma imagem “1+2”. O mesmo vale para o quadro 3. Essa otimização reduz efetivamente a contagem de bytes da imagem.
O método de subtração é exatamente o oposto. Ele apaga certos pixels do quadro anterior da imagem, que podem ser entendidos pela “barra de progresso reversa”. O método de eliminação consiste em apagar completamente o quadro anterior. É usado principalmente quando não há correlação entre os dois quadros antes e depois. Por exemplo, ao mudar de totalmente vermelho para totalmente verde, se não houver pixels iguais entre eles. nos quadros anteriores e seguintes, é utilizado o método de eliminação.
Na produção real, o Photoshop decidirá automaticamente qual método adotar com base na situação da imagem, sem intervenção manual. Basta compreender esses métodos de cálculo como um conhecimento. Também pode ser usado como referência na concepção de animações.
Agora vamos falar sobre o seguinte recurso importante do formato GIF, que é o limite do número de cores. O GIF só pode suportar no máximo 256 cores , o que significa que uma imagem GIF só pode ter no máximo 256 cores. Isso é especialmente óbvio em GIFs estáticos. Algumas imagens com cores ricas, como gradientes de várias cores, são difíceis de expressar perfeitamente em GIFs. Conforme mostrado na imagem à esquerda abaixo, uma parte de uma foto (observe que é uma parte, não a imagem completa) é uma imagem em PNG24 bits e GIF256 sem pontilhamento e pontilhamento de difusão. A imagem completa é uma vitrine tirada em Veneza, conforme mostrado abaixo à direita.
Pode-se ver claramente que PNG24 bits tem a melhor cor e pode ser considerado a imagem original. O formato GIF tem pouca expressão de cores. Sem pontilhamento, manchas coloridas aparecem em algumas áreas com transições de cores na imagem original. No pontilhamento por difusão, os pontos ficam um pouco mais claros, mas a granulação é mais pesada. Isso é causado pelo próprio princípio do pontilhamento. O conceito de pontilhamento foi introduzido no tutorial básico.
Deve-se observar que 256 cores referem-se à imagem inteira. Se toda a imagem original tiver o tamanho mostrado abaixo, a diferença entre as 256 cores e a imagem original não será muito grande. Isso porque ao reduzir as cores para 256 cores, o Photoshop irá organizá-las de acordo com as cores da imagem original. Esse processo também é chamado de indexação, que consiste em agrupar cores semelhantes em uma só.
Se as cores na imagem original contiverem vários matizes, quando a média das 256 cores for calculada, o número alocado para um único matiz será muito pequeno. Pelo contrário, se a tonalidade da imagem original for basicamente igual ou próxima, 256 cores também podem ser bem expressas. É por isso que as 256 cores anteriores sem imitação pareciam que as manchas eram óbvias, mas agora as manchas são menos óbvias. Como a imagem original da primeira contém mais matizes, algumas cores são atribuídas ao azul, vermelho, etc., e menos cores são atribuídas à fase amarela. A imagem original deste último possui basicamente apenas a fase amarela, não havendo necessidade de atribuir cores a outras tonalidades.
A foto abaixo é uma foto de rua tirada em Piacenca. Comparamos diferentes partes dela. Os quadrados abaixo são tabelas de cores e os blocos de cores representam as 256 cores utilizadas. O impacto da composição de cores da imagem original no índice de cores pode ser facilmente visto na tabela de cores. Há mais matizes na imagem à esquerda, então o número de fases azuis alocadas ao céu entre as 256 cores é menor e há manchas coloridas óbvias no céu da imagem. A imagem à direita contém basicamente apenas a parte do céu, então a maioria das 256 cores são atribuídas à fase azul, fazendo com que o céu na imagem tenha um melhor desempenho.
Use [Arquivo>Salvar para Web e Dispositivos] [CTRL+SHIFT+ALT+S] e a caixa de configurações para salvar aparecerá. Esta é a nossa função de saída mais comumente usada, especialmente nos tutoriais de extensão de web design que aprenderemos no futuro.
Após entrar na interface de configuração, preste atenção na seta vermelha O que você deve ver na aba “Otimização” é o efeito real após a saída, ou seja, o efeito no navegador ou software de visualização de imagens. A aba “Original” é o efeito do Photoshop e não pode ser usada como padrão de referência.
A seta verde é a área de configuração correspondente, a partir da qual definimos o formato da imagem para GIF, definimos o número de cores para 256 e desligamos a opção de pontilhamento. Suas configurações correspondem ao efeito do lado esquerdo da imagem acima.
Preste atenção na indicação de contagem de bytes na seta azul, este é um indicador muito importante, sempre que devemos tornar este número o menor possível, caso contrário não conseguiremos utilizar imagens ou animações de forma eficaz.
Para diminuir o número de bytes, o número de cores precisa ser reduzido e o número de blocos de cores na tabela de cores será reduzido de acordo. Mas é óbvio que poucas cores terão um impacto significativo na qualidade da imagem e podem facilmente formar manchas coloridas. Embora ativar o pontilhamento possa reduzir manchas coloridas, também aumentará o número de bytes. É como uma gangorra entre contagem de bytes e qualidade. Você não pode ter os dois. Para imagens destinadas a serem transmitidas pela Internet, o número de bytes costuma ser mais importante porque a maioria dos visitantes não terá paciência de esperar vários minutos para que uma página da web seja exibida. Além das imagens, as páginas web também possuem outros códigos que também precisam ocupar bytes. Portanto, minimizar o número de bytes é um princípio básico. É claro que este princípio entra em conflito com a qualidade da imagem, o que exige que tenhamos competências suficientes para equilibrar os dois no processo de concepção e produção. Essas técnicas incluem:
1. Não use cores muito ricas na animação. O motivo já foi mencionado. Mais cores levarão a uma diminuição na qualidade da imagem após a indexação e formarão manchas coloridas desagradáveis. Neste caso, é melhor usar uma única cor. Embora possa não ser bonita o suficiente, pelo menos pode evitar o aparecimento de falhas como manchas.
2. Se forem necessárias cores ricas, os pixels nas partes ricamente coloridas deverão ser mantidos estacionários na animação. Como existe uma relação operacional entre os quadros anteriores e seguintes da animação GIF, a parte no estado estático pode ser usada nos quadros subsequentes e não há necessidade de armazenar esta parte da imagem nesses quadros subsequentes. Isso pode reduzir efetivamente o número de bytes, mantendo as cores ricas de toda a animação. Pelo contrário, se os pixels mais ricos também estiverem em movimento, os pixels mais ricos deverão ser armazenados nos quadros subsequentes, o que aumentará bastante a contagem geral de bytes da animação.
Comparação das duas animações abaixo A primeira mantém o brilho externo, a projeção e outras partes da bola inalteradas, e apenas a parte de destaque muda. O segundo é o movimento geral da bola. Sob a premissa da mesma taxa de quadros, da mesma duração e de 256 e sem pontilhamento, o número de bytes do primeiro é 9,29K e o do último é 57,1K. A diferença chega a 6 vezes. Então, o tempo que leva para serem transmitidos na rede será diferente em 6 vezes.
Quando concebemos a animação, devemos considerar antecipadamente a sua finalidade. Se for para ser utilizada numa página web, devemos também referir a sua importância na página web. Se não for muito importante e for decorativa, tente reduzir o. número de bytes tanto quanto possível. Isso pode ser alcançado a partir de dois aspectos: redução do número de cores durante o armazenamento e um bom planejamento da produção. Se você encontrar uma animação com instruções importantes que devem ser coloridas ou dinâmicas, reduza o tamanho da animação o máximo possível. Como o número total de pixels em uma imagem pequena também é pequeno, a indexação com 256 cores não parecerá tão restrita. Você pode aprender isso por meio de seus próprios experimentos.
Outra característica importante do GIF é que ele suporta transparência de fundo , o que permite que ele se misture bem com o plano de fundo da página da web. Você também pode gerar um GIF com fundo transparente desativando a camada de fundo. No entanto, a transparência de fundo do GIF só pode estar em dois estados, totalmente transparente ou totalmente opaco, mas não translúcido entre eles. Portanto, a menos que os limites da imagem sejam linhas horizontais, verticais ou diagonais de 45 graus, será formado um aliasing óbvio devido à transparência. Conforme mostrado na figura abaixo, um conjunto de gráficos com limites diferentes aparece sob diferentes cores de fundo. Não é difícil ver a diferença entre os dois.
Deve-se notar que o princípio de formação de bordas irregulares não é apenas um problema de imagem, mas também fatores relacionados às limitações físicas da exibição. O conhecimento relevante é mencionado no tutorial básico.
Para imagens com pixels semitransparentes (como estilos de sombra projetada), se quiser salvá-las como um fundo transparente, você precisa ativar o projeto de pontilhamento de transparência, para que pequenos pontos dispersos com densidade diferente possam ser usados para simular translucidez . Conforme mostrado na figura abaixo. Pode-se observar que embora o GIF em “No Transparency Dithering” também tenha um fundo transparente, a parte translúcida original ainda mantém o branco, portanto só pode ser aplicada sobre um fundo branco. Este último pode ser aplicado a qualquer fundo. Conforme mostrado abaixo à direita.
Deve-se notar que o pontilhamento de transparência não é uma solução perfeita, podendo até ser considerado uma solução muito pobre. Mas devido às limitações de transparência do próprio GIF, também é uma solução. Na produção real, se você decidir usar o formato GIF, evite gerar pixels semitransparentes nos limites da imagem. Em outras palavras, tente evitar o uso de pontilhamento de transparência.
Outra coisa a observar é que se a animação de saída tiver fundo transparente, isso pode alterar a relação de cálculo de cada quadro no estado não transparente, podendo também aumentar o número de bytes da animação.
Agora vamos falar brevemente sobre o uso de animações como mensagens MMS em telefones celulares.
Atualmente, o China Mobile permite no máximo 100 mil mensagens MMS. É melhor controlar as animações abaixo de 95 mil e deixar algum espaço para o texto e o código do próprio SMS. Outra coisa a se observar é o tamanho da animação. Diferentes modelos de celulares possuem diferentes tamanhos de animações que podem ser perfeitamente exibidas devido às diferentes resoluções de tela. A chamada exibição perfeita significa que a resolução da tela do celular é igual ou maior que o tamanho da animação. Se o tamanho da animação exceder a resolução da tela do celular, o celular irá reduzi-la para exibição. Mas a qualidade da animação reduzida ficará muito ruim. Os tamanhos de tela comuns são:
128×128: Comum nos primeiros e atuais telefones celulares de baixo custo. É o tamanho básico das animações MMS. A maioria das animações MMS baixadas da Internet são desse tamanho porque podem ser executadas em quase todos os telefones celulares que suportam MMS.
128×160: Embora tenha alguns pixels a mais que o anterior, é usado principalmente para exibir algumas informações, portanto a maioria dos tamanhos de animação que podem ser executados ainda são 128×128.
176×208, 240×320: Comumente usado em telefones celulares com sistemas operacionais abertos, como Symbian e Windows Mobile, e pode reproduzir animações em tela cheia. Existem também telefones celulares comuns que usam essa resolução, mas não é certo se eles suportam a reprodução em tela cheia.
480×640: Comum em modelos de celulares de última geração, embora teoricamente possa suportar a reprodução em tela cheia de animações do mesmo tamanho, devido às limitações do próprio GIF, a suavidade da reprodução não é garantida.
Ao fazer animações MMS, 128×128 deve ser o tamanho principal a considerar, porque tem a melhor compatibilidade e, devido ao seu tamanho pequeno, o número de bytes de animação para o mesmo conteúdo é menor do que tamanhos maiores. Claro, se a resolução da tela do receptor for determinada, ela também poderá ser feita em um tamanho comparável a ela. O fundo da animação é melhor branco para que não haja bordas óbvias. Porque o branco também é a cor de fundo quando os telefones celulares exibem mensagens MMS, assim como o fundo das páginas da web. Claro, às vezes é necessário criar deliberadamente uma sensação de limite (como o contorno de um selo. Você pode tomar sua própria decisão com base na situação específica). Além disso, como a maioria dos telefones celulares não pode alterar o plano de fundo ao exibir mensagens MMS, não faz muito sentido usar um plano de fundo transparente na animação das mensagens MMS.
Existe um botão "Device Central..." no canto inferior direito de "Salvar para Web e Dispositivos". Após pressioná-lo, você pode visualizar o efeito da animação no dispositivo móvel selecionado. Conforme mostrado abaixo. Você pode selecioná-lo na lista de dispositivos à esquerda. O selecionado na imagem é o Nokia 3110. Adobe Device Central é na verdade um banco de dados de dispositivos móveis que fornece um ambiente centralizado para quem produz para dispositivos móveis. Além da exibição comum, ele também pode simular a situação de exibição quando a luz de fundo da tela do telefone celular está desligada e a tela externa está iluminada. No entanto, essas características são atualmente de pouca importância para nós.
Outra questão a se prestar atenção é a taxa de quadros da animação. Em um computador, as animações a 30fps podem basicamente ser reproduzidas sem problemas, mas o processador de um telefone celular não é melhor que um computador desktop e seus recursos são limitados. A taxa de quadros da animação deve ser definida para 2 ~ 5 fps. Para telefones celulares com sistemas operacionais abertos, como o desempenho do processador é melhor do que os telefones celulares comuns, ela pode ser definida para 10 fps ou superior. Ao mesmo tempo, fatores como tamanho, duração total, número de bytes, etc. também afetam o efeito de reprodução em telefones celulares. É melhor experimentar a animação no seu celular para ver como ela fica suave.
Se você deseja gerar animações de vários tamanhos diferentes, é melhor usar o formato vetorial para produção, e o formato vetorial também é o melhor formato para salvar a imagem original, de acordo com o princípio de "preservar a máxima editabilidade" que sempre temos defendido.