Animação de personagem: simule giros em 3D com o Adobe After Effects

1. Introdução: Oi. Meu nome é Carminys Guzman. [MÚSICA] Eu nasci e cresci na República Dominicana, e agora estou morando em Portugal. Sou cofundador do Operary, um estúdio de animação, onde trabalho como animador, ilustrador e roteirista. Produzimos vídeos de sub-redes há mais de uma década. Temos o prazer de trabalhar com algumas empresas incríveis, como Intel, Deloitte, Bayer, Porsche e muitas outras. Agora, estamos decidindo compartilhar nosso conhecimento com você. Neste curso, você descobrirá como simular curvas 3D a partir de ilustrações 2D com o Adobe After Effects, sem usar nenhum plug-in. A melhor maneira de impressionar e impressionar seu público. Começaremos organizando os designs no Adobe Illustrator para que possamos trabalhar com eficiência no After Effects. Em seguida, entraremos em contato com a interface do After Effects e veremos os atalhos de teclado que usaremos durante o curso. Vou te ensinar como preparar o personagem para poder animá-lo de uma forma simples. Feito isso, a melhor parte começará: criar maravilhosos 360 curvas. Por fim, criaremos o projeto final, onde você aprenderá a integrar o personagem a um cenário animado. Você terá a opção de baixar todos os arquivos que usaremos durante o curso. Dessa forma, você poderá seguir as instruções em tempo real e será muito mais fácil aplicar o que está aprendendo. Este curso é ideal para animadores, ilustradores, designers gráficos, artistas criativos e, em geral, qualquer pessoa que queira dar vida às suas ilustrações. Este é um curso de nível intermediário. Se você nunca usou o After Effects antes, recomendo que faça meu curso para iniciantes, anime suas ilustrações em tempo recorde usando primeiro o Adobe After Effects. Com pacientes, uma atitude positiva e perseverança, você terá sucesso. Sua hora é agora. Participe do curso. 2. Projeto: [MÚSICA] Olá. Estou muito feliz que você tenha decidido fazer este curso. Eu adoraria te conhecer melhor. Então, por favor, deixe-me saber de onde você está se juntando a nós e sua motivação para aprender animação por meio do fórum de discussão. Como seu projeto final, você criará uma fantástica rotação de personagens em 360 graus e a incorporará em uma cena. Normalmente, esse tipo de animação é feito com software 3D ou animação tradicional quadro a quadro. Neste curso, você aprenderá outro método mais simples do que a animação 3D e sem a necessidade de ter boas habilidades de ilustração para animação quadro a quadro. Sinta-se à vontade para usar minha arte para praticar se você não tiver tempo para criar seu design do zero. Depois de cada aula, darei algumas diretrizes para garantir que você as siga e pratique para obter os melhores resultados. Estou ansioso para ver seu trabalho, então, faça o upload para a galeria de projetos do curso. Se você tiver comentários ou perguntas, publique-os no fórum de discussão. Mal posso esperar para ver o que você vai inventar. Divirta-se. [MÚSICA] 3. Preparação dos arquivos: [MÚSICA] Olá. Nesta lição, daremos uma olhada no design do nosso personagem e veremos como organizar as camadas. Usamos o Adobe Illustrator para criar o personagem. Você pode baixar o arquivo do Illustrator dos projetos na seção Recursos para aplicar tudo o que aprendeu durante o curso em tempo real. Na animação, a organização é fundamental. É por isso que precisamos separar todos os elementos que animaremos em camadas antes de começarmos a animar no After Effects. Isso facilitará muito nosso trabalho e nos ajudará a trabalhar mais rápido. Se você olhar para o personagem, verá que é um design muito simples. Quanto mais simples for nosso personagem, mais fácil será animá-lo. É por isso que os designs dos personagens são básicos na maioria dos vídeos explicativos animados. Para ver melhor a organização das camadas, iremos ao Painel de camadas e clicaremos em “Opções do painel de camadas”. Em Tamanho da linha, inseriremos um valor de 50 pixels e clicaremos em “OK”. Agora parece muito maior. Ótimo. Vamos ver como organizamos as camadas. Primeiro, temos as sobrancelhas. Nós os combinamos em uma camada, assim como os olhos. Se continuarmos, nos deparamos com a boca e os ouvidos. Ao contrário das sobrancelhas ou dos olhos, as orelhas foram separadas em duas camadas independentes. Por quê? Bem, porque vamos animá-los de forma independente. Vamos desativar a camada de cabelo por enquanto. Vamos deixar para o final, pois é a parte mais complexa do design. Se continuarmos, podemos ver que separamos a cabeça, a faixa e o coque em camadas, pois precisamos animá-los de forma independente. Da mesma forma, nos separamos nesse corpo, braços e pernas. Como você pode ver, é uma configuração muito simples. Agora, vamos ativar a camada de cabelo. No After Effects, aplicaremos uma máscara para que possamos ver apenas as partes do cabelo dentro da cabeça. Como queremos criar um giro completo, precisamos que o cabelo trabalhe em todas as posições frontal, lateral e traseira. É por isso que o cabelo precisa continuar nos lados esquerdo e direito, para que possa se expandir facilmente em qualquer direção. Se pudermos apagar isso, você verá que é uma forma muito simples. Desenhamos o cabelo e, quando ele fica atrás das orelhas, fazemos uma curva para baixo para desenhar a parte atrás da cabeça. Vou esconder as orelhas por um momento para que você possa ver melhor. Depois que o cabelo estiver desenhado, precisamos duplicar o cabelo dos dois lados. Não acho que seja necessário, mas apenas no caso de preenchermos os espaços vazios com um retângulo. Lembre-se de que essas partes aqui correspondem à parte de trás da cabeça , então precisamos torná-la mais ou menos do mesmo tamanho da cabeça. Podemos selecionar a camada de cabelo e arrastá-la sobre a cabeça para verificar se ela funciona bem. Ótimo. Isso é perfeito. Pronto, temos nosso personagem pronto para começar a animar no After Effects. [MÚSICA] 4. Primeiros passos: [MÚSICA] Olá. Antes de começarmos a animar o projeto, vamos entrar em contato com a interface do After Effects. Trabalharemos com o espaço de trabalho padrão, mas você pode escolher sua opção preferida. O primeiro passo é criar uma nova composição. Vamos para Composição, Nova Composição. Abra uma nova composição de 1920 por 1080 em 24 quadros. Espere três segundos e dê um nome a ele. Como segunda etapa, importaremos nosso design do Adobe Illustrator. Vá para Arquivo, selecione “Importar”, “Arquivo” e selecione o arquivo desejado. Quando importamos um arquivo em camadas na opção Importar como, devemos selecionar “Composição Reter tamanhos de camada”. Como você pode ver, uma composição e uma pasta com camadas foram criadas. Vamos trabalhar na composição. Primeiro, arraste a composição importada para a composição principal. Ativaremos a opção “Alternar grade de transparência” clicando aqui para ver melhor o design. Além disso, fecharei a guia Fila de renderização. Agora vamos dar uma olhada rápida interface do After Effects. O painel em que você vê o personagem é a janela de visualização. Este painel mostrará os resultados de nossos designs e animações. Na parte inferior, podemos ver o painel Timeline. É nesse painel que passaremos mais tempo criando nossas animações. A partir daqui, podemos modificar facilmente as propriedades de transformação da camada. Se olharmos para a esquerda, podemos ver o painel do projeto, onde aparecerão todas as composições que criamos e todos os arquivos que importamos. No topo, podemos encontrar as ferramentas essenciais. Perfeito. Agora, daremos uma olhada nos atalhos de teclado indispensáveis para este curso. Os atalhos se referem às propriedades das camadas e às ferramentas mais usadas. Vamos ver como abrir as propriedades da camada com um único clique. Pressione “A” para o ponto de ancoragem, “P” para a posição, “S” para a escala, “R” para a rotação e “T” para a opacidade. Além disso, se mantivermos pressionada a tecla “Shift”, podemos abrir várias propriedades simultaneamente. Agora veremos como acessar as principais ferramentas com o toque de uma tecla. Pressione “V” para a ferramenta de seleção, segure “Espaço” para a ferramenta manual, “Z” para a ferramenta de zoom, “W” para a ferramenta de rotação e “Y” para a ferramenta panorâmica atrás. É uma questão de prática. Em Projetos e Recursos, você tem um arquivo PDF disponível para download com os atalhos mais úteis 5. Rotação principal 1: [MÚSICA] Olá. É hora de começar a animar o personagem. Primeiro, entraremos na composição do personagem. Podemos ver todas as camadas que compõem o personagem a partir daqui. Agora, vamos criar vários marcadores na linha do tempo para definir o tempo das animações. Para fazer isso, certifique-se de colocar no início da linha do tempo e criar o primeiro marcador com a tecla de asterisco. Precisamos garantir que não tenhamos nenhuma camada selecionada porque, se selecionarmos uma camada, o marcador será aplicado à camada. Em seguida, clicamos duas vezes no “Marcador” para inserir sua configuração e escrevemos na frente. Dessa forma, definimos que nosso personagem estará voltado para frente no início. Avançamos 12 quadros, equivalentes a meio segundo e, com a tecla de asterisco, criamos outro marcador. Acessamos sua configuração com um clique duplo e a chamamos de “Lado”. Nessa tela, podemos ver em qual quadro estamos. Avançamos mais 12 quadros para o segundo e criamos outro marcador chamado “Voltar”. Mais uma vez, avançamos 12 quadros, criamos um novo marcador e também o chamamos de “Lado”. Para finalizar, avançamos 12 quadros novamente, criamos o último marcador e o chamamos de “Front”. Ótimo. Definimos os tempos de animação e podemos usar os marcadores como guias para evitar erros. Em resumo, vamos criar uma rodada completa, que terminará na mesma posição em que ela começa, e teremos uma duração de dois segundos. Não se preocupe com a duração dessa rodada. Em aulas futuras, mostrarei como jogar com facilidade com o tempo das rodadas. Antes de configurar o personagem, aplicaremos a rasterização contínua em todas as camadas. Simplesmente clicamos e arrastamos para baixo em todas as camadas. Ao aplicá-las, garantimos que nosso personagem não seja pixelizado. Além disso, eles retiram o fosco da camada de fato que aplicaremos posteriormente, precisa que essa opção esteja ativa. Ótimo. Agora vamos pré-compor os elementos faciais em uma nova composição. Se selecionarmos as sobrancelhas, os olhos e a boca, enquanto pressionamos a tecla “Shift”, podemos selecionar várias camadas simultaneamente e, com o botão direito do mouse, clicamos em “Pré-compor”, nomeamos e pressionamos “Ok”. Agora ficou mais fácil modificar os elementos da face. Além disso, em aulas futuras, precisaremos duplicar esses elementos. Agrupá-los em uma composição nos ajudará a trabalhar com mais conforto. Obviamente, com um clique duplo, podemos acessar os elementos da face. Vamos voltar à composição principal e criar um objeto nulo para controlar os movimentos do rosto e do cabelo ao mesmo tempo. Para fazer isso, vamos para, camada, novo objeto nulo. Nós o selecionamos, pressionamos a tecla “Enter” e o chamamos de “Controlador facial”. Objetos nulos são camadas invisíveis no After Effects que podem ser usadas para controlar com eficiência os movimentos de outras camadas. Colocamos um objeto nulo no topo da cabeça e simplesmente vinculamos a nova composição pré-composta e o cabelo ao controlador facial. Para fazer isso, arraste o chicote dessas camadas até o controlador facial. Agora, se movermos o controlador facial todos os elementos vinculados também se moverão. Para finalizar esta lição, aplicaremos um efeito para que só possamos ver o cabelo quando ele estiver dentro da cabeça. Para fazer isso, selecionamos a camada de cabelo e vamos para efeito, canal, definimos fosco nos controles de efeito na opção tirar fosco da camada, escolhemos a camada da cabeça, pois só queremos ver o cabelo quando ele está dentro da cabeça. Ótimo. Nosso personagem agora está mais bonito. Se você não conseguir ver a janela de controles de efeitos, ative-a na janela. Agora, queremos aplicar o mesmo efeito no rosto. Selecionamos o efeito e o copiamos com “Controle C” ou “Comando C” no Mac para economizar tempo. Em seguida, selecionamos a camada facial e colamos com “Control V” ou “Command V” no Mac. Agora, se nos movermos para a posição da camada do controlador facial, configuramos o movimento da face. Opa, há um erro, os elementos faciais não devem sair da cabeça. Você se lembra que eu disse que precisávamos ativar a opção de rasterização contínua na camada para que o efeito de tirar fosco da camada funcionasse. Ao pré-compor os elementos da face, esqueci de ativar essa opção na nova composição. Vamos simplesmente ativá-lo e agora só podemos ver os elementos faciais quando eles estão dentro da cabeça. Na próxima lição, animaremos a rotação da cabeça do nosso personagem. Não perca isso. Te vejo lá. [MÚSICA] 6. Rotação principal 2: [MÚSICA] Olá de novo. Nesta lição, vamos começar a animar. Vamos começar com a parte mais complicada da animação; a rotação da cabeça. Antes de começarmos, vamos desligar as orelhas, bandana e o coque, para que não atrapalhem. Para animar a rotação da cabeça, precisamos criar apenas três quadros-chave. Garantimos que estamos no início da linha do tempo, onde está localizado o primeiro marcador que corresponde à posição frontal. Abrimos a propriedade de posição da camada do controlador facial e criamos um quadro-chave clicando no cronômetro. Em seguida, avançamos para o marcador central chamado de volta e movemos a posição até que a parte de trás do cabelo esteja centralizada na cabeça. Finalmente, avançamos para definir nosso marcador chamado front e modificamos a posição até que o cabelo fique centralizado no rosto do personagem novamente. Observe que não conseguimos ver os elementos faciais do personagem na pose final. Não se preocupe, é uma solução fácil. Vamos para o início da linha do tempo, selecionamos a camada Face e a duplicamos com o Controle D ou o Comando D no Mac, depois vamos para a opção [inaudível] e movemos o link da nova camada duplicada. Finalmente, avançamos até o último marcador e vinculamos a camada ao controlador facial. Agora, se pré-visualizarmos, teremos a rotação completa. É muito fácil. A vantagem desse método é que, depois de entender a dinâmica, você pode criar uma rotação 3D em alguns minutos. Agora é a hora de animar o movimento das orelhas. Novamente, precisamos criar apenas três poses. Vamos embora. Agora podemos ativar as camadas que desativamos. Selecionamos a orelha direita, abrimos a propriedade Posição e criamos um quadro-chave clicando no cronômetro. Avançamos para o marcador central e arrastamos a orelha para o lado oposto. Finalmente, avançamos para o último marcador. Selecionamos o primeiro quadro-chave e o copiamos com o Controle C ou o Comando C no Mac e, com Controle V ou o Comando V no Mac, colamos. Nós fazemos exatamente o mesmo com a orelha esquerda. Crie um quadro-chave no início da linha do tempo, avance até o marcador central e arraste a orelha para o lado oposto. Por fim, vá até o último marcador, selecione o primeiro quadro-chave , copie-o e cole-o. Se fizermos uma prévia, veremos que ainda há alguns detalhes que precisamos melhorar. No momento, as orelhas estão sempre na frente da cabeça, o que deve parecer estranho. Para resolver isso, vamos duplicar as orelhas, mas antes de continuar, acabei perceber que havia batizado erroneamente as orelhas. Eles estão invertidos. Eu vou consertá-lo rapidamente. Só precisamos selecionar a camada e pressionar a tecla Enter para modificar o nome da camada. Feito. Voltando ao problema dos ouvidos, vamos duplicar os ouvidos. Selecionamos um ouvido, duplicamos com o Control D ou o Command D no Mac e fazemos o mesmo com o outro ouvido. Selecionamos as camadas duplicadas enquanto pressionamos a tecla Control e as arrastamos abaixo da cabeça. Para manter tudo organizado, as camadas atrás da cabeça sempre serão as identificadas com o número 2. Durante a primeira metade da animação, que é até chegar ao marcador central que define a pose das costas, queremos que a orelha direita fique acima da cabeça. Vamos para a camada da orelha direita e animamos sua opacidade. Criamos um quadro-chave no quadro 23; um quadro antes do marcador central, depois avançamos um quadro e diminuímos a opacidade para zero. Durante os primeiros 23 quadros, a orelha ficará visível e, no quadro 24, ficará invisível. Para trabalhar mais rápido, selecionamos os quadros-chave e os copiamos com o Controle C ou o Comando C no Mac. Durante a segunda metade da animação, queremos que a orelha passe por trás da cabeça. Vamos para o ouvido direito 2. Novamente, colocamos um quadro antes do marcador central e colamos a animação. Com os quadros-chave selecionados, clique com o botão direito do mouse em “Assistente de quadros-chave” , “Quadros-chave com reversão de tempo”. Dessa forma, criamos a animação oposta. Quando a camada superior está visível, a camada inferior fica invisível, e quando a camada superior fica invisível, a camada inferior fica visível. Se fizermos uma prévia, podemos ver que a animação funciona perfeitamente. Agora vamos fazer o oposto com a orelha esquerda. Nesse caso, queremos que a orelha esquerda fique atrás da cabeça durante a primeira metade da animação. Em outras palavras, queremos que a camada da orelha esquerda fique invisível durante a primeira, segunda. Vamos para o quadro 23 e animamos sua opacidade. Reduzimos a opacidade para zero, avançamos um quadro e o elevamos para 100%. Assim como fizemos com a outra orelha, copiamos o quadro-chave, vamos até a camada atrás da cabeça e colamos. Clique com o botão direito do mouse em “Assistente de quadros-chave”, “Quadros-chave com inversão de tempo”. Vamos dar uma olhada. Ótimo. Nós temos isso, pessoal. Vamos desativar temporariamente a bandana e o coque. Agora temos nossa rotação da cabeça quase terminada. Se nosso personagem não tivesse um coque, teremos terminado de configurar a rotação da cabeça. Agora, tudo o que precisamos fazer é animar a bandana e o coque. Vamos ativar as camadas. O processo é semelhante ao que fizemos com as orelhas. Vamos criar um quadro-chave na posição de ambas as camadas no início da linha do tempo, depois avançaremos para o segundo marcador que chamamos de lado e movemos os elementos para a direita. Avançamos para o quarto marcador e movemos o coque e a faixa de cabelo para o lado oposto. Ótimo. Finalmente, passamos para o último marcador. Camada por camada, copiamos o primeiro quadro-chave e o colamos. É importante fazer isso camada por camada, pois se copiarmos e colarmos quadros-chave de diferentes camadas ao mesmo tempo, as camadas serão duplicadas. Vamos dar uma olhada. Nós quase o temos. Agora temos que ver quando eles precisam estar acima e quando precisam estar abaixo da cabeça. Nesse caso, queremos que eles fiquem acima da cabeça na parte central da animação, seja, de um lado para o outro, do segundo marcador ao quarto marcador. Vamos começar a animar a camada do pão. Movemos um quadro antes do segundo marcador e criamos um quadro-chave na opacidade. Avançamos um quadro e diminuímos a opacidade para 0%. Selecionamos os quadros-chave e os copiamos. Avançamos para o quarto marcador, voltamos um quadro e colamos os quadros-chave. Clique com o botão direito do mouse em “Keyframe Assistant”, “Time-Reverse Keyframes”. Para ir mais rápido, podemos copiar a animação de opacidade e colá-la na faixa de cabelo. Para fazer isso, passamos para o primeiro quadro-chave que aplicamos à opacidade. Selecionamos todos os quadros-chave e os copiamos e, com a faixa de cabelo selecionada os colamos. Ok, pessoal. Agora vamos duplicar as camadas. Arrastamos as camadas originais acima da cabeça. Lembre-se de que as camadas numeradas com o número 2 devem ficar abaixo para manter tudo organizado. Agora, basta selecionar os dois primeiros quadros-chave aplicados à opacidade de ambas as camadas e, com um clique com o botão direito, e, com um clique com o botão direito, aplicar os quadros-chave Time-Reverse e seguida, fazer o mesmo com os dois últimos quadros-chave. Vamos ver como fica. A camada do coque deve estar acima da camada da faixa de cabeça. Pronto, terminamos nossa animação da cabeça. No momento, a animação parece robótica. Não se preocupe com isso. Vamos consertar isso mais tarde. Se você quiser animar o personagem com cabelos compridos, siga exatamente o mesmo processo que fizemos durante esta aula. Na próxima lição, continuaremos com a rotação dos braços. vejo lá. [MÚSICA] 7. Criando a animação dos braços: [MÚSICA] Oi pessoal. Agora que animamos a cabeça, é hora de animar o corpo do personagem. Vamos começar com os braços. O processo é muito parecido com o que fizemos para animar os ouvidos. Mas antes de começarmos a animar, vamos colocar os pontos de ancoragem nos braços com a ajuda da ferramenta Pan Behind. Os pontos de ancoragem serão o eixo no qual o braço girará ao animar a rotação. Vamos colocá-los na junção entre os ombros e o corpo. Ótimo. Agora vamos animar a posição dos braços. Nós adicionamos um quadro-chave no início da linha do tempo. Avançamos para o marcador central e movemos os braços para o lado oposto. Finalmente, passamos para o último marcador. Copiamos o primeiro quadro-chave e o colamos. Nós fazemos o mesmo com o outro braço. Novamente, vamos ao início da linha do tempo e criamos um quadro-chave. Avançamos para o marcador central e movemos o braço para o lado oposto. Finalmente, vamos até o último marcador e copiamos e colamos o primeiro quadro-chave. Vamos dar uma olhada. Para tornar a animação mais natural, também precisamos animar a rotação do braço. Simplesmente animamos a rotação de uma forma natural, para que os braços se abram ou adicionem os extremos. Por fim, copiamos o primeiro quadro-chave e o colamos. Obviamente, também fazemos o mesmo com o outro braço. [MÚSICA] Vamos dar uma olhada. Perfeito. Agora só precisamos duplicar os braços e decidir quando eles devem estar acima e quando embaixo, da mesma forma que fizemos na lição anterior. Selecionamos as camadas do braço e as duplicamos com Control D ou Command D ou Mac. Nesse caso, queremos que as camadas do braço sem números fiquem acima do corpo e as camadas com o número 2 permaneçam abaixo. Simplesmente colocamos as camadas para conseguir isso. Nesse caso, para que a rotação seja natural, o braço direito ficará acima durante a primeira metade da animação. Na lição anterior, usamos a opacidade para decidir quando elas deveriam estar visíveis e quando deveriam estar ocultas. Nesse caso, vamos jogar com o comprimento das camadas para ver diferentes métodos de fazer o mesmo. Como queremos que o braço direito fique acima durante a primeira metade da animação, colocamos o segundo e simplesmente arrastamos da extremidade direita da camada até a marca central da linha do tempo. Fazemos o mesmo com a camada do braço direito que está abaixo. Mas, nesse caso, arrastamos do lado esquerdo para que a camada se torne ativa a partir do marcador central. Isso é para que fique visível quando a camada superior estiver invisível. Por outro lado, queremos que o braço esquerdo comece atrás do corpo. Vamos para a camada superior e arrastamos do lado esquerdo para que ela permaneça invisível no início. Novamente, fazemos o oposto com o braço esquerdo que está abaixo do corpo. Nesse caso, arrastamos do tamanho certo para que ele permaneça ativo durante a primeira metade da animação. Vamos pré-visualizar. Nós temos isso. princípio, pode parecer um método tedioso, mas depois de aprendê-lo, é uma maneira relativamente rápida de dar uma terceira dimensão aos seus personagens. Em apenas 20 minutos, você poderá criar animações incríveis. Na próxima lição, veremos como animar as pernas do personagem. vejo lá. [MÚSICA] 8. Animação das pernas: [MÚSICA] É hora de animar as pernas. Nesta lição, aprenderemos como animar caminhos para animar facilmente os movimentos dos pés, mas primeiro precisamos animar a posição das pernas da mesma forma que fizemos com os braços. Colocaremos os pontos de ancoragem das pernas com a ajuda da ferramenta Pan Behind. Vamos colocá-los na junção entre as pernas e o corpo. Selecionamos a perna direita, abrimos a propriedade de posição e criamos um quadro-chave no início da linha do tempo. Em seguida, avançamos para o marcador central e movemos a perna para o lado oposto. Finalmente, passamos para o último marcador e copiamos e colamos o primeiro quadro-chave. Obviamente, fazemos exatamente o mesmo processo com a perna esquerda. Criamos um quadro-chave no início da linha do tempo, avançamos até o marcador central e movemos a perna para o lado oposto. Finalmente, passamos para o último marcador e copiamos e colamos o primeiro quadro-chave. Vamos dar uma olhada. Ótimo. Agora, assim como fizemos com os braços, vamos animar a rotação das pernas. Criamos um quadro-chave na rotação do primeiro marcador, avançamos para o marcador central e abrimos um pouco as pernas para dar ao personagem uma postura mais natural. Por fim, avançamos para o marcador final e copiamos e colamos o primeiro marcador. É claro que precisamos fazer exatamente o mesmo com a outra perna. Ótimo. Agora vamos animar os pés do personagem. Para fazer isso de forma rápida e fácil, vamos animar as partes das pernas. Para acessar as peças, precisamos selecionar as camadas, clicar com o mouse em Criar, Criar formas a partir de camadas vetoriais. Ao fazer isso, as camadas da forma foram criadas e as camadas originais agora estão ocultas. Vamos arrastá-los para que fiquem juntos. Se selecionarmos as camadas da forma e, na barra de pesquisa da linha do tempo, escrevermos o caminho, poderemos acessar os caminhos mais rapidamente. Perfeito. Agora só precisamos animá-los. Vamos ampliar um pouco para poder ver melhor. Vou criar uma diretriz para garantir que os pés estejam sempre em contato com o solo. Vamos desativar a opção grade de transparência ativada para poder ver tudo melhor. Para animar os caminhos, precisamos ter a opção de visibilidade do caminho em forma ativada. Vamos selecionar o caminho. Agora, se clicarmos em um dos pontos de controle do caminho que compõe o pé, o caminho que precisamos animar na linha do tempo será selecionado. Nesse caso, o caminho 1 permanece selecionado, então esse é o que precisamos animar. Colocamos no início da linha do tempo e criamos um quadro-chave. Se você não tem muita experiência em animar caminhos, você pode selecionar todos os caminhos. Dessa forma, você se certifica de selecionar o caminho que deseja animar. Avançamos para o marcador central e, com a ferramenta de seleção, modificamos os pontos de controle do caminho ao nosso gosto. Primeiro, selecionamos os pontos de controle do caminho e depois o modificamos. Nesse caso, estamos procurando o pé olhe para o lado oposto, então simplesmente mudamos a posição do pé, garantindo que a base do pé fique sempre em contato com o solo. Finalmente, avançamos para o último marcador e copiamos e colamos o primeiro quadro-chave. Feito. Agora faremos o mesmo com o outro pé. Selecionamos um dos caminhos e clicamos em um dos pontos de controle que pertencem ao pé. Novamente, o caminho 1 permanece selecionado, então é o que devemos animar. Criaremos um quadro-chave no início da linha do tempo. Avançamos até o marcador central e modificamos o caminho para que o pé olhe para o lado oposto. Lembre-se de que, primeiro, selecionamos os pontos de controle do caminho e depois o modificamos. Finalmente, avançamos para o último marcador e copiamos e colamos o primeiro quadro-chave. Vamos ver como está ficando. Fantástico. Eu gosto muito disso. Reduziremos um pouco o zoom da parte de visualização e reativaremos a grade de transparência para poder vê-la melhor. Bem, é hora de duplicar as pernas. Como normalmente, queremos que a camada que não tem números fique acima do corpo e as camadas com o número 2 permaneçam abaixo. Da mesma forma, com os braços, queremos que a perna direita permaneça na frente do corpo, no marcador central. Portanto, a perna direita número 2 ficará invisível no marcador central [inaudível] . Com a perna esquerda, ocorre o contrário. Estará atrás [inaudível] do marcador central. Vamos escondê-lo durante a primeira parte da animação e ativaremos a perna esquerda número 2 no marcador central. Vamos dar uma última olhada, quase lá. Temos que reorganizar um pouco as camadas porque as pernas e os braços estão atrapalhando. Você vê que o braço está entre o corpo e o pescoço, não parece natural. Para resolver esses caras, simplesmente arrastaremos o braço esquerdo número 2 abaixo das camadas da perna. Vamos ver. Também precisamos arrastar o braço direito número 2 abaixo das camadas da perna, seja, os dois braços devem estar abaixo. Ótimo. Nós entendemos. Temos a virada completa do nosso personagem. Na próxima lição, veremos como integrar o personagem em uma cena e criar uma curva muito mais fluida e dinâmica. Nos vemos lá. 9. Projeto final 1: [MÚSICA] Oi pessoal. Nesta lição, começaremos a criar a animação que você vê na tela. Primeiro, quero mostrar o arquivo do Adobe Illustrator. É um design simples composto por vários elementos separados em camadas. Uma seta do mouse, um botão dividido em duas camadas e, finalmente, o plano de fundo. O arquivo tem um tamanho de 1920 por 1080 pixels, o mesmo tamanho com o qual estamos trabalhando no After Effects. Vamos voltar ao nosso projeto After Effects. A partir daqui, iremos para Arquivo, Importação, Importação como Tamanhos de Camada de Retenção de Composição. Com um clique duplo, inserimos a composição do projeto 1. Antes de mais nada, modificaremos a duração da composição. Iremos para Composição, Configurações de composição e definiremos uma duração de quatro segundos. Vamos arrastar as camadas até o final da composição. Selecionamos a primeira camada e, enquanto pressionamos a tecla Shift, selecionamos a última camada e arrastamos as camadas até o final. Vamos começar a animar o movimento das plantas. Para fazer isso, primeiro colocaremos os pontos de ancoragem de todas as plantas em sua base com a ajuda da ferramenta Pan Behind. O ponto de ancoragem será o eixo no qual as plantas girarão. Perfeito, agora vamos animar as plantas muito rapidamente com a ajuda de uma expressão muito simples. Abrimos a rotação da primeira planta e, enquanto pressionamos a tecla Alt, clicamos no cronômetro e escrevemos a expressão de oscilação que você vê na tela. Graças à expressão de oscilação, as plantas se moverão aleatoriamente sem a necessidade de criar quadros-chave. Com o primeiro valor, definimos quantas vezes eles se moveriam por segundo e, com o segundo valor, definimos as amplitudes dos movimentos. Estabelecemos a frequência em 0,5 e a amplitude em cinco, mas você pode brincar com os valores. Selecionamos a expressão, clicamos com o botão direito do mouse em Copiar somente expressão. Em seguida, selecionamos o resto das plantas , colamos e visualizamos. Ao animar as plantas, as partes que estão do lado de fora são cortadas. Para corrigi-lo, acessamos o arquivo do Illustrator e garantimos que todas as plantas estejam dentro da área de trabalho e salvamos. Em seguida, voltamos ao After Effects e pré-visualizamos. Adoro usar essa expressão para animar o movimento da planta. É super fácil e parece muito bom, perfeito. Agora vamos animar a seta do mouse. Abrimos a propriedade Posição, criamos um quadro-chave e tiramos a seta do mouse da tela. Em seguida, avançamos um segundo e colocamos a seta em cima do botão. Uma vez aqui, criamos um quadro-chave na escala. Avançamos três ou quatro quadros e reduzimos a escala para 80%. Avançamos mais quatro quadros e copiamos e colamos o primeiro quadro-chave. Agora vamos animar a interação da seta do mouse com o botão. Para fazer isso, coincidindo com o momento em que animamos a seta do mouse, criaremos um quadro-chave na propriedade de posição do botão. Avançamos quatro quadros e movemos o botão para que fique logo acima da camada do botão 2. Finalmente, avançamos mais quatro quadros e copiamos e colamos o primeiro quadro-chave. Vamos pré-visualizar e ver como isso funciona. Perfeito, agora, tudo o que precisamos fazer é melhorar o movimento da seta do mouse. Selecionamos os quadros-chave e, com a tecla F9, aplicamos o Easy Ease. Ao fazer isso, aplicamos a suavização à aceleração e desaceleração do movimento para que fique mais fluido e orgânico. Em seguida, clicamos com o botão direito do mouse em um dos quadros-chave selecionados, Keyframe Velocity, e definimos a influência para 60%. Quanto maior o valor de influência, maior a suavização da aceleração e desaceleração. Vamos dar uma olhada. Agora, parece muito melhor. Finalmente, vamos aplicar um efeito para adicionar mais profundidade ao nosso projeto. Primeiro, selecionamos as camadas da planta, clicamos com o botão direito do mouse, pré-Comp, renomeamos e pressionamos “Ok”. Com a nova composição selecionada, vamos para Effect, Blur & Sharpen, Gaussian Blur. Coincidindo com o momento em que clicamos, criamos um quadro-chave desfocado. Avançamos alguns quadros e alteramos o valor para 20. Ao fazer isso, a planta fica embaçada. Vamos para a opção de desfocagem, clicamos com o botão direito do mouse nela e selecionamos “Revelar na linha do tempo” para poder ver os quadros-chave que aplicamos. Agora, selecionamos os quadros-chave e os copiamos com o Controle C ou o Comando C no Mac. Voltamos ao momento em que criamos o primeiro quadro-chave. Selecione a camada de seta do mouse e cole a animação com Control V ou Command V no Mac. Também vamos selecionar a camada inferior e colar a animação novamente. Se visualizarmos, veremos que, no início, os elementos do primeiro plano estão em foco e depois ficam desfocados. Vamos selecionar o botão para colocar em camadas e colar a animação nessa camada também. Agora vamos fazer o mesmo com os elementos de fundo. Selecionamos a camada de fundo e, com Control V ou Command V, colamos os quadros-chave. Vamos arrastar o personagem para a cena. Nós o colocamos e ajustamos sua escala. Novamente, também colamos o efeito de animação de desfoque gaussiano no personagem. Com a camada de caractere selecionada, clicamos com o botão direito do mouse na desfocagem e selecionamos “Revelar na linha do tempo”. Em seguida, selecionamos a chave e, com o botão direito, aplicamos quadros-chave com inversão de tempo. Nós fazemos o mesmo processo na camada de fundo. Dessa forma, no início da animação, quando os elementos do primeiro plano estão em foco, damos prioridade a esses elementos. Então, quando clicamos com o mouse, focamos no personagem e na animação de fundo. Esse é um recurso que gostamos de usar em nosso estúdio e dá uma aparência muito profissional às animações. Como você pode ver, o personagem desaparece da segunda árvore. Isso acontece porque sua composição dura apenas três segundos. Na próxima lição, veremos como resolver isso e terminar de animar tudo. Nos vemos lá. [MÚSICA] 10. Projeto final 2: [MÚSICA] Oi, pessoal. Vamos continuar animando o projeto final. Ativaremos a opção de remapeamento de tempo. Essa opção nos permitirá fazer o personagem girar mais rápido ou mais devagar, e podemos até suavizar a animação para que o movimento fique muito mais fluido. Selecionamos o personagem, clicamos com o botão direito do mouse e ativamos o remapeamento do tempo. Quando o aplicamos, dois quadros-chave são criados automaticamente. Vamos passar para o último marcador e criar um quadro-chave clicando neste pequeno diamante aqui. Dessa forma, temos dois quadros-chave, um no primeiro marcador e outro no último marcador. Podemos excluir a última chave e estender a camada até o fim. [MÚSICA] Vamos pré-visualizar novamente antes de fazer qualquer coisa. A mágica é que agora podemos modificar a velocidade com que a animação do personagem é reproduzida simplesmente movendo os quadros-chave. Por exemplo, podemos mover o segundo quadro-chave para o marcador central. Agora, se o reproduzirmos, podemos ver que ele gira na metade do tempo. O problema é que o movimento é muito rígido. [MÚSICA] Para resolvê-lo, selecionamos os dois quadros-chave e, com a tecla F9, aplicamos o Easy Ease e podemos suavizá-lo ainda mais. Novamente, selecionamos os quadros-chave, clicamos com o botão direito do mouse em Keyframe Velocity e modificamos o valor da influência. Assim como antes, podemos deixar em 60%, por exemplo. Você vê agora que o movimento é muito mais dinâmico e atraente. Moveremos os quadros-chave até o momento em que clicarmos com o mouse. [MÚSICA] Agora só precisamos adicionar um segundo turno ao giro do personagem. Para fazer isso com facilidade, movemos um quadro após o último quadro-chave e copiamos os quadros-chave. Em seguida, os colamos com Control V ou Command V no Mac. Se pré-visualizarmos, podemos ver que a animação faz uma parada entre a rotação e a rotação. Isso interrompe a respiração do giro. Isso ocorre porque o chapéu de animação está se movendo aplicado à aceleração e desaceleração em todos os quadros-chave. Para resolver isso, removeremos esse movimento. Para fazer isso, selecionamos os dois quadros-chave centrais e clicamos em um deles mantendo pressionada a tecla Control ou Command no Mac. Agora, sim, teremos o giro duplo funcionando perfeitamente. A partir daqui, você pode usar os giros dos personagens de 1.000 maneiras. É uma maneira incrível de tornar suas animações mais atraentes e atraentes. O único limite é você. [MÚSICA] 11. Como criar uma animação em loop: [MÚSICA] Olá, de novo. Nesta lição, aprenderemos como criar um loop de nossa animação de forma muito simples. Para contextualizar um loop, criamos uma cena simples de 8 segundos. Arrastamos a animação do personagem e a colocamos na cena. Em seguida, como já vimos na lição anterior, selecionamos o personagem, clicamos com o botão direito do mouse, a hora e ativamos o remapeamento do tempo. Criamos um quadro-chave no último marcador. Selecionamos e excluímos o último quadro-chave e, finalmente, arrastamos a camada até o final. Até agora, estamos repetindo o que vimos na lição anterior. Perfeito. Agora vamos aplicar a expressão loop out a tempo e remapear. Para criar a expressão, clicamos no cronômetro enquanto mantemos a tecla Alt pressionada e escrevemos uma expressão de loop out que você vê na tela. Se fizermos uma prévia, poderemos ver nosso maravilhoso personagem girando sem parar. Para melhorar a aparência da rotação, vamos aplicar um efeito com a camada selecionada, vamos para efeito, tempo, tempo posterização e reduzimos a taxa de quadros para 12. Ao reduzir a taxa de quadros, obtemos uma aparência mais de desenho animado que eu gosto. Nos vemos na próxima aula. [MÚSICA] 12. Renderização: [MÚSICA] Agora que temos nossos projetos prontos, podemos exportá-los. Lembrando que a composição que atualmente abrimos será exportada. Para isso, vamos para Composição e selecionamos “Adicionar ao Adobe Media Encoder”. O Media Encoder nos ajuda a exportar projetos com mais eficiência. Primeiro, escolhemos o codec. Nesse caso, usaremos o H264. Ele exporta o vídeo em MP4, o formato mais usado para a web. Em relação à resolução de saída, podemos escolher a opção Match Source, alta ou média taxa de bits para evitar erros e exportá-la no mesmo tamanho em que trabalhamos no projeto. Por fim, escolhemos o local em que exportaremos o vídeo e daremos um nome ao arquivo. Para finalizar, clique no botão play aqui. Com esses caras, tudo estará pronto. Quando o processo terminar, você poderá abrir seu vídeo e compartilhá-lo com todos nós na galeria de projetos do curso. Estou muito ansioso para ver seu trabalho. [MÚSICA] 13. Considerações finais: [MÚSICA] Parabéns pela conclusão do curso. Estou muito orgulhoso de tudo o que você realizou e do progresso que fez. Seu trabalho árduo e dedicação valeram a pena, e agora você está equipado com as habilidades para criar rotações de personagens em 360 graus. Como professor, foi um prazer guiá-lo nessa jornada e estou ansioso para que você aplique tudo o que aprendeu criando sua animação do zero. Você pode usar os arquivos do curso ou, melhor ainda, animar seus próprios designs. Compartilhe seus projetos na galeria ou marque-me em suas postagens no Instagram. Ficarei muito feliz em lhe dar feedback e ajudá-lo a melhorar. Lembre-se de que a prática é a chave e não desanime se precisar repetir o processo ou cometer erros. O processo de aprender animação não é fácil, mas é incrivelmente gratificante. Convido você a visitar meu perfil para se manter atualizado sobre novas aulas e descobrir outras aulas relacionadas ao mundo da animação. Seu feedback é muito importante para mim, então, reserve um momento para deixar uma avaliação do curso e contar a outras pessoas sobre sua experiência. Eu vou agradecer. Obrigado por fazer parte desta aula e espero ver você em meus outros cursos em breve. Feliz aprendizado. [MÚSICA]