Uma série de tutoriais sobre como criar animação plana no Photoshop CS3 (1): Visão geral.
O princípio da formação da animação é que o olho humano tem a característica de persistência da visão. A chamada persistência da visão significa que depois de ver um objeto, mesmo que o objeto desapareça rapidamente, ainda deixará uma imagem contínua nos olhos. um certo período de tempo. Isso é verdade quando o objeto é relativamente brilhante. O mais comum é usar o flash ao tirar fotos à noite. Embora o flash já tenha sido extinto há muito tempo, o halo ainda permanecerá nos olhos do sujeito e durará um período de tempo.
A primeira aplicação desse recurso pode ter sido feita por nós quando estávamos no ensino fundamental. Era desenhar os movimentos de vários personagens no rodapé do livro e, em seguida, folheá-lo rapidamente para obter imagens contínuas nos olhos. é animação. Deve-se notar que a animação aqui não se refere à animação de desenho animado. Embora os princípios de produção da animação de desenho animado sejam os mesmos, a animação aqui geralmente se refere a todas as imagens contínuas.
Resumindo, a chamada animação consiste em usar várias imagens estáticas para reproduzir continuamente e usar a persistência da visão para formar uma imagem contínua. Por exemplo, os filmes tradicionais usam uma longa série de filmes para gravar continuamente quadros únicos e projetá-los na tela com luzes em sequência a uma determinada velocidade. Há um requisito de velocidade aqui. Imagine que, se folhearmos lentamente o livro, experimentaremos apenas várias imagens estáticas em vez de imagens contínuas. O mesmo se aplica à reprodução de filmes. Se a velocidade for muito lenta, o que o público vê equivale a uma apresentação de slides giratória. Para permitir ao público vivenciar imagens contínuas, o filme é reproduzido a uma velocidade de 24 quadros por segundo, ou seja, 24 imagens estáticas são projetadas continuamente na tela em um segundo. A unidade para velocidade de reprodução da animação é fps, onde f é a palavra inglesa Frame (imagem, quadro), p é Per (por) e s é Segundo (segundo). Em chinês, significa quantos quadros por segundo ou quantos quadros por segundo. Os filmes têm 24 fps, geralmente chamados de 24 quadros.
Outros dispositivos que podem produzir imagens na vida real também possuem o conceito de taxa de quadros, como os sinais de TV. O formato PAL usado na China e na Europa é de 25 quadros, e o formato NTSC usado no Japão e nas Américas é de 29,97 quadros. Se a animação for reproduzida em um monitor de computador, 15 quadros poderão obter o efeito de imagens contínuas. Dessa forma, quando você fizer vídeos no futuro, terá que pensar em qual dispositivo publicá-los e definir diferentes taxas de quadros.
A precisão do reconhecimento do olho humano é, na verdade, muito maior do que as taxas de quadros acima, porque o sistema visual composto pelo olho humano e pelo cérebro é muito desenvolvido. Apenas possui diferentes níveis de sensibilidade dependendo do ambiente. Por exemplo, em um ambiente escuro, o tempo de persistência visual de fontes de luz mais brilhantes é maior, portanto o filme requer apenas 24 quadros. Aliás, à parte, apenas alguns animais têm olhos que superam os humanos em alguns aspectos, mas todos são seriamente deficientes em outros aspectos. Por exemplo, a águia, o “Rei dos Detalhes”, é daltônica, enquanto a coruja, o “Rei da Visão Noturna”, tem olhos fixos e precisa virar a cabeça para observar o que está ao seu redor.
Nos tutoriais de design do Photoshop que assistimos no Tianji Design Online, o Photoshop é usado principalmente para criar imagens estáticas, como pôsteres e manuscritos impressos. Mencionamos que ele tem a capacidade de produzir animações. Agora vamos criar uma animação composta por vários frames no Photoshop. Expanda uma única tela para várias telas. E crie uma espécie de continuidade de imagem entre essas múltiplas cenas para dar forma à animação.
Hoje em dia, muitas animações produzidas em Flash podem vir com dublagem e interatividade, tornando toda a animação mais vívida. A animação produzida pelo Photoshop só pode ser chamada de animação simples, principalmente porque contém apenas imagens e não pode adicionar som, e o público só pode assisti-la de forma fixa. Mas simplicidade não significa grosseria. Embora o primeiro forneça mais métodos de produção e expressão, o último ainda tem suas próprias vantagens exclusivas. Por exemplo, a animação em estilo de camada pode criar facilmente algumas coisas bonitas que são difíceis de obter com outros softwares. Além disso, assim como desenhar no papel é um ato muito simples, pessoas diferentes desenham de maneira diferente. Portanto, uma excelente animação não requer necessariamente uma tecnologia complexa, o importante é uma excelente criatividade.
Não importa qual software seja, seus princípios de produção são os mesmos, assim como o modo de cores RGB que estudamos tanto, ele pode ser aplicado em qualquer lugar. Portanto, nossa tarefa atual é usar o conhecimento básico de Photoshop que aprendemos, estendê-lo à produção de animação e aprender as habilidades e métodos gerais de produção de animação. Esse conhecimento ainda pode ser aplicado a outros aspectos posteriormente. E também apresentaremos como converter animações do Photoshop em vídeos e adicionar som a eles.
Além das diferenças na produção, também existem diferenças no uso. Muitas vezes, as animações são colocadas em uma determinada área de uma página da web para enfatizar determinado conteúdo, como animações publicitárias. Esse tipo de animação geralmente possui tamanhos fixos correspondentes de acordo com diferentes locais de posicionamento, como 468x60, 140x60, 90x180, etc. A animação também pode ser aplicada a MMS de telefones celulares (um serviço de mensagens de texto multimídia que pode enviar imagens, sons e vídeos). Cada um desses usos possui características próprias e há outros fatores a serem considerados além do tamanho. Como o limite do número de bytes, tempo de permanência do quadro, etc. Explicaremos passo a passo no tutorial.
Nota: Antes de iniciar esta série de tutoriais, solicitamos que os leitores tenham aprendido o básico do Photoshop, entendam e dominem conceitos e operações como camadas de ajuste, estilos de camada, etc., como "Como criar uma camada de ajuste de curva" e assim por diante. será dada apenas uma breve introdução à operação e os princípios não serão explicados em detalhes. Portanto, é recomendável que os novos leitores aprendam primeiro o básico.
Além disso, apenas a versão Photoshop CS3 Extended (estendido) possui a função de produção de animação, que não está disponível na versão comum. A versão CS2 vem com funções de criação de ações e o funcionamento é semelhante ao CS3 Extended. CS e versões anteriores requerem o software ImageReady incluído para produção de animação. É recomendado que você use a mesma versão CS3 Extended do tutorial.
Por ser chamado de animação, significa fazer as imagens na tela se moverem. Vamos desenhar e criar uma animação "simples e grosseira" agora.
Crie uma nova imagem em branco de 150×150, crie uma nova camada e desenhe um retângulo, aproximadamente como mostrado à esquerda abaixo, e a paleta de camadas conforme mostrado à direita. Pode-se ver a partir disso que esta é uma camada de rede comum. Você deve usar camadas vetoriais tanto quanto possível nas operações reais. Também prestaremos atenção a isso nos tutoriais a seguir.
Abra a paleta de animação através de [Window_Animation], conforme mostrado na imagem abaixo à esquerda. Neste momento, também existem mais algumas opções na paleta de camadas, conforme mostrado pela seta vermelha na imagem abaixo à direita. Se você fechar a paleta Animação, ela será restaurada ao seu estado original. Não se preocupe com isso por enquanto. Além disso, a paleta de animação é frequentemente combinada com a paleta de registro de medição. Esta última não tem nada a ver com o nosso conteúdo atual e pode ser desativada.
Após abrir a paleta de animação, podemos começar a fazer animações. Clique no botão "Copiar quadro selecionado" na seta vermelha na paleta de animação. 
, você verá um novo quadro adicionado. Conforme mostrado abaixo. De acordo com nossos hábitos anteriores, este ícone deve representar um novo, como uma nova camada, etc. Embora a explicação literal aqui seja cópia, na verdade é uma nova, mas o quadro recém-adicionado é na verdade igual ao quadro anterior . Mesmo conteúdo. Da mesma forma, todos deveriam ser capazes de imaginar 
A função do botão é deletar o quadro.
Certifique-se de que o segundo quadro copiado esteja selecionado na paleta de animação e, em seguida, use a ferramenta Mover para mover o quadrado na camada por uma certa distância, aproximadamente como mostrado na imagem à esquerda abaixo. Neste momento, a paleta de animação é mostrada na imagem do meio abaixo. Pode-se observar que embora a posição do bloco tenha mudado no quadro 2, a posição do bloco no quadro 1 permanece inalterada. Este é um recurso muito importante.
Repita esta operação de primeiro copiar o quadro e depois mover o bloco várias vezes, e finalmente você obterá algo como a imagem à direita abaixo (semelhante a esta). Agora temos 7 quadros e os blocos estão em posições diferentes em cada quadro. Preste atenção na frase “A posição dos quadrados em cada quadro é diferente” e depois observe a paleta de camadas. É óbvio que existe apenas uma camada (a camada de fundo não é contada por enquanto), o que leva a. um recurso: para uma camada, digamos, sua posição (ou coordenadas) pode ser especificada individualmente em quadros diferentes. De acordo com este recurso, podemos animar o movimento dos objetos utilizando apenas uma camada.
Agora você pode pressionar o botão play na paleta de animação 
, você pode ver o efeito da caixa se movendo na janela da imagem, mas ela se move muito rápido. Isso ocorre porque o tempo de atraso do quadro não está definido. Observe que agora há “0 segundos” abaixo de cada quadro na paleta de animação. Este é o tempo de atraso do quadro (ou tempo de permanência). O tempo de atraso do quadro indica quanto tempo o quadro é exibido durante a animação. Por exemplo, se o atraso de um determinado quadro for definido para 2 segundos, quando esse quadro for reproduzido, ele permanecerá por 2 segundos antes de continuar a reproduzir o próximo quadro. O atraso padrão é 0 segundos e pode ser definido independentemente para cada quadro.
O método para definir o atraso do quadro é clicar no tempo abaixo do quadro e selecionar o tempo correspondente na lista pop-up. Conforme mostrado na imagem à esquerda abaixo, defina o quadro 7 para 0,5 segundos. "Sem atraso" na lista é 0 segundos. Se não houver tempo que você deseja definir, você pode selecionar "Outro" e inserir o valor você mesmo (em segundos). Você também pode modificar o atraso uniformemente após selecionar vários quadros. O método de seleção de vários quadros é o mesmo que selecionar várias camadas. Primeiro clique no quadro 1 na paleta de animação para selecioná-lo, depois mantenha pressionada a tecla SHIFT e clique no quadro 6. . Basta selecionar os quadros 1 a 6. Em seguida, defina o fuso horário de qualquer quadro, conforme mostrado na imagem abaixo, definido como 0,1 segundos. Este é um tempo de atraso mais comumente usado.
Reproduza a animação novamente e você verá que o bloco se move mais devagar e permanece por mais tempo no final do movimento. Obviamente, isso se deve ao longo atraso para o qual foi definido. Na verdade, esse longo atraso desempenha um papel importante e pode ser usado para destacar um determinado tema na produção real. Também encontraremos tempo para apresentar algumas técnicas de expressão em tutoriais subsequentes.
Além do tempo de atraso, outro recurso da animação é que você pode definir o número de loops de reprodução. Observe que há um “para sempre” abaixo do primeiro quadro da paleta de animação, que é o número de loops. Após clicar, você pode escolher “uma vez” ou “para sempre”, ou definir você mesmo o número de ciclos. Em seguida, reproduza a animação novamente para ver o efeito da configuração do número do loop.
Embora na maioria dos casos as animações sejam repetidas continuamente (ou seja, para sempre), loops únicos ou algumas vezes (2 a 3 vezes) também são usados em alguns lugares, principalmente ao usar animação para criar componentes da web. Por exemplo, anime o nome de uma coluna do zero para aparecer gradualmente, de modo que quando o nome for totalmente exibido, ele seja corrigido e não possa desaparecer novamente e depois desaparecer novamente. Neste momento, é necessário usar a configuração do ciclo “uma vez”.
Pressione 〖CTRL+S〗[Arquivo>Salvar] para salvar as configurações de animação e o formato do arquivo é psd. Este formato de arquivo é propriedade do Photoshop e pode registrar todas as informações relevantes. Recomenda-se que todos salvem seus trabalhos neste formato para facilitar futuras modificações. Se você precisar de um arquivo de animação independente que possa ser usado em páginas da web, você precisará usar [CTRL+ALT+SHIFT+S] [Arquivo>Salvar para Web e Dispositivos], e uma grande janela aparecerá conforme mostrado abaixo à esquerda . Esta grande janela tem muito a cobrir. Mas agora você só precisa consultar as configurações na área da seta vermelha.
Ao mesmo tempo, um botão de reprodução e opções de loop aparecerão na área de seta verde no canto inferior direito da janela. Alterar o número de loops aqui também alterará as configurações no arquivo de origem. Observe que se nenhum GIF for selecionado na área da seta vermelha, o botão de reprodução não estará disponível. Isso ocorre porque apenas o formato GIF suporta animação. Se você salvá-lo à força em outros formatos, como JPG ou PNG, a imagem gerada terá apenas o primeiro quadro.
Durante o processo de armazenamento, poderá aparecer a mensagem de aviso mostrada abaixo à direita. Não ignore e apenas confirme. Você também pode torná-lo invisível novamente. No entanto, todos devem prestar atenção ao usar números ou inglês de meia largura ao nomear arquivos, e não usar caracteres de largura total ou caracteres chineses. Isto deve ser mais amplamente compatível com navegadores de vários idiomas.
Neste capítulo, o que todos precisam dominar são dois atributos da animação, a saber, tempo de atraso do quadro e número de loops. Além disso, você precisa dominar os métodos de criação de animações simples de deslocamento de objetos, como "copiar quadros e mover camadas". E use este método para criar uma animação com o deslocamento de dois objetos ao mesmo tempo. O efeito é semelhante à imagem abaixo.
Na próxima seção apresentamos a segunda parte: as características de propagação do primeiro quadro.