Animação simples de personagens

1. Pré-visualização: Oi, meu nome é Fraser. Sou um animador de Londres. Eu crio animações e animações para a TV e a web. Para a minha aula de Skillshare, vou ensinar-te a criar personagens simples do After Effects, deixa-me aqui. Do design de um ilustrador aos ciclos de montagem e animação e ao After Effects. No final do curso, você terá um personagem ambulante como esses caras. Você pode se inscrever no link abaixo. 2. Design no Illustrator: Oi, aí. Bem-vindo ao meu curso de skillshare, criar um personagem animado simples. Nas próximas cinco seções, vamos do Illustrator ao After Effects e criar um ciclo de caminhada animado, como esse cara aqui. Esta é a seção um na qual vamos ilustrar o tronco e a cabeça do personagem. Usaremos traços para criar braços e pernas e, finalmente, separaremos o arquivo do Illustrator em camadas prontas para animação. Agora, a primeira coisa que vamos fazer é criar um novo arquivo do Illustrator. No exemplo que eu vou fazer, nós vamos criar um cara, muito parecido com a pessoa em loop lá, que eu mostrei a vocês. Ele vai ter um estômago grande e distendido e uma cabeça muito simples. Então, vamos começar com um círculo aqui. Vamos colorir, pode usar jeans azuis, deixe-me colorir azul. Livrar-se desse acidente vascular cerebral ao redor do lado de fora. Vamos dividir isso jeans dele e ele vai usar uma camiseta sem mangas. Então, o que eu vou fazer, eu vou criar uma série de linhas que vão nos deixar quebrar este círculo em partes constituintes. Eu vou colorir essas linhas usando a cor do traçado aqui, eu vou colorir elas de preto. Isso vai ser a cavilha dele, e este vai ser o buraco para o pescoço dele, e então tudo o que eu vou fazer, eu vou entrar na minha ferramenta de localizador lá, você pode encontrar isso em Janela e Pathfinder. Isso vai trazer este console, e se você apenas verificar a seção de divisão lá, o Windows vai se livrar dos bits que não precisamos, isso é o que temos como nosso círculo. Vamos colorir a camisa dele. Eu vou dar, eu vou colorir sua camisa aqui, um pouco fora de branco, só para que possamos vê-lo contra o fundo. Os jeans já são azuis e depois vou dar-lhe a cor da pele, vai ser um pouco bronzeado, então lá vamos nós. Então, este é o nosso torso. Eu só vou salvar esse arquivo, eu vou chamá-lo de personagem cinco, isso é só porque eu já estraguei isso quatro vezes, lá vamos nós. A próxima coisa que vamos fazer é dar-lhe uma cabeça. Agora, eu vou usar o arquivo de pastilhas aqui usando a cor que nós já temos para sua pele para criar uma espécie de forma de cabeça longa e longa, e eu vou apenas selecionar este ponto na parte inferior e liberá-lo, modo que agora nós temos um forma que se parece com isso, e que só vai sentar lá assim. Isso é tão simples quanto o nosso caráter. Ele tem apenas algumas formas básicas. Agora, só para lhe darmos um pouco de caráter aqui, eu vou desenhar um boné nele, deixe-me dar-lhe um boné de beisebol, vamos torná-lo vermelho. Aqui vamos nós. Agora, desenhando a parte de trás do boné de beisebol, ao lado da borda, usando a ferramenta de caneta, eu vou dar um pouco de sombra, basta enviar isso para trás e então eu vou copiar e colar a cabeça dele lá, sobre o topo do nosso boné, e depois apagar . Então, eu vou colorir que a mesma cor que seu boné, isso vai ser o topo da cabeça, e eu vou, novamente, eu vou usar nossa ferramenta pathfinder para excluir tudo no topo da tampa, lá vamos nós Aí está o nosso cara. Agora, o que eu vou fazer, eu vou sombra o rosto dele um pouco, só para que pareça que o boné está lançando com uma sombra em seu rosto. Mais uma vez, vai usar a ferramenta pathfinder. Vou apagar a peça que não quero. Eu vou fazer esta parte da cabeça dele um pouco mais escura, e então se você apenas editar, cortar e depois editar, colar na frente como seu boné de volta no lugar. Nós diminuímos, lá vamos nós, lá está o nosso personagem básico, há a cabeça e o tronco do nosso personagem, e estas são as partes do personagem que quando trouxermos para o After Effects vão permanecer constantes, embora vamos projetar os braços e pernas no Illustrator, vamos substituí-los por traços e outras formas no After Effects. Ok, então o que vamos criar é seus braços e pernas, e para isso vamos usar a ferramenta de caneta novamente. Comece com o ombro dele aqui, até as mãos dele e vamos reverter a cor para criar um derrame. Nós vamos preencher esse golpe, que é chamado de 20 largura, e vamos usar a tampa redonda no final disso, e o que eu posso fazer é apenas explodir o buraco para o braço dele lá. Eu vou copiar, eu vou colar o braço dele para o outro lado, eu vou refletir, aqui vamos nós, e organizar, enviar para trás. Em seguida, vamos criar as pernas dele, vamos usar o mesmo método que fizemos para os braços, exceto que eu vou colorir. Vou usar o seletor de cores para que eles sejam da mesma cor que os jeans. Desta vez vou deixá-los com uma ponta plana aqui. Nós temos o boné redondo e isso é o que chamamos de butcap, não sabia disso até agora. Então, esta é a dele, uma perna mais próxima de nós e vamos criar outra perna aqui um pouco mais longe. O que vamos fazer com este, vamos criar, novamente, vamos dar-lhe um pouco de sombra, então parece que quando o temos atrás do estômago, que o estômago está lançando uma sombra em seu Perna traseira. Então, o que eu fiz, é que eu copiei e colei a perna de volta sobre o topo de si mesmo. Eu vou selecionar os dois, e eu vou organizá-los e enviá-los para trás. Então, eu só vou encurtar este aqui, lá vamos nós. Aí está o nosso cara, tem os braços e as pernas no lugar. Você pode querer mover pedaços e pedaços ao redor. Eu só vou incliná-lo para trás um pouco mais. Pode mover os braços um pouco e ter este um pouco mais obscurecido pelo seu corpo. Mova a cabeça dele para trás, lá vamos nós e lá está o nosso homem. Agora, a parte final desta seção, vamos dividir nosso personagem pronto para animação e After Effects. Então, o que vamos fazer, vamos selecionar a cabeça, editar, cortar. Vamos criar uma nova camada. Novamente, Janela e você pode encontrar as camadas lá e que irá abrir o console de camada. Nós vamos criar uma nova camada e nós vamos editar, colar na frente, há nosso hitback em uma nova camada. Vou rotular esta camada, cabeça. Agora, vamos pegar todos os elementos do nosso tronco que criamos inicialmente, vamos fazer a mesma coisa editar, cortar, nova camada, editar, colar na frente, e lá vamos nós. Vamos chamar isto de torso. Agora, o que vamos fazer a seguir, os braços e as pernas, como eu disse, vamos reconstruí-los no After Effects, mas vamos gravá-los no arquivo do Illustrator como um guia para quando os construirmos. Vamos fazer a mesma coisa com as pernas que vão estar na frente do tronco. Você vai editar, cortar, criar uma nova camada e colocar a nova camada na frente do tronco aqui e editar, colar na frente, e vamos chamar isso braços e pernas na frente. Então, essa camada final que deixamos para trás no lugar certo, vamos chamar, braços e pernas para trás, e lá vamos nós. Aí está o nosso personagem dividido e pronto para a animação. Você pode ver como é simplesmente aqui, ele é apenas um par de formas. Há alguns círculos para a cabeça e o tronco, e depois estes quatro golpes que usamos para os braços e pernas. 3. Crie no After Effects: Está bem. Bem-vindo à segunda parte de criar um personagem animado simples intitulado Building In After Effects. Nesta seção, vamos ajustar nossas configurações e preferências do projeto. Vamos importar nosso personagem do Illustrator para o After Effects. Vamos escalar a composição e o caráter. Vamos criar braços e pernas usando as formas e a ferramenta de caneta, e finalmente, vamos criar sombras usando a função de caminho de corte. Então, vamos abrir o After Effects agora. A primeira coisa que vamos fazer aqui, vamos entrar em nossas preferências, em geral, e vamos transformar a interpolação espacial padrão em linear. Há uma razão muito boa, mas muito chata para fazermos isso, não vou explicar agora. A outra coisa que vamos fazer como parte de nossa limpeza, vamos para Arquivo, Configurações do Projeto, e queremos exibir o tempo em nossa linha do tempo aqui em quadros em vez de segundos, e veremos por que quando chegarmos à animação. Está bem. Então, agora, vamos importar nosso arquivo do Illustrator para o After Effects, e vamos para Arquivo, Importar e clicar em Arquivo, Importar e clicar em Arquivo, dentro da minha pasta Compartilhamento de habilidades e na pasta do Illustrator. Eu tenho o meu personagem, o meu é chamado personagem 5 aqui é provavelmente deve ser chamado personagem. Agora, o importante aqui a notar é que não queremos importar isso como filmagem. Não estamos importando que é um objeto plano. Queremos importá-lo como algo que possamos mover as camadas independentes dentro. Então, queremos importá-lo como uma composição, e você vai notar que estes dois, a pasta e a composição que eu importei, a pasta contém os braços, pernas, cabeça, dedos ou camadas individualmente, e se clicarmos duas vezes na pasta de composição, vemos que temos cabeça, braços dianteiros, tronco e braços e pernas, assim como tínhamos no arquivo do Illustrator. Então, temos nossa composição em fluxo aqui, e vocês notarão aqui é a escala da composição. Então estamos vendo metade do tamanho em 50%. Em tamanho real, esta ainda é uma composição bastante pequena. Então, o que vamos fazer, vamos para Composição e Configurações de Composição, e vamos fazer isso 1920 por 1080 full HD, e vamos torná-lo com 200 quadros de comprimento. Agora, se reduzirmos o zoom, veremos que nosso personagem agora é pequeno no quadro. Então, o que vamos fazer é abrir, selecionar todas as nossas camadas aqui, vamos transformar, e vamos deslizar o aumento de escala. Agora, você notará que ele começa a ficar um pouco desfocado, e isso porque ao importar arquivos do Illustrator, você precisa fazer o que é chamado de rasterização constante, o que significa usá-los como vetores, em vez de como imagens repousadas. Então, o que vamos fazer para compensar isso é clicar no pequeno ícone de rasterização constante aqui, e então eu vou tentar corrigir, e podemos ver se vemos esse tamanho completo que é a resolução perfeita, boa suavização de serrilhado em torno das bordas. Está bem. Então, temos nosso personagem agora, e o que vamos fazer é pensar em substituir os braços e pernas que desenhamos no Illustrator por camadas de forma que seremos capazes de animar. Então, a primeira coisa que vamos fazer é selecionar e aqui vamos abri-la, e queremos a opacidade aqui. Então, se você selecionar as camadas de braços e pernas, vamos baixar a opacidade de 100 por cento para cerca de 20 apenas para que eles sejam um guia agora, e nós podemos desenhar sobre eles. Então, podemos pressioná-los. Agora, você deseja selecionar a Ferramenta Caneta a seguir, certificando-se de que nenhuma dessas camadas está selecionada. Então você não tem a cabeça selecionada lá, você quer apenas clicar no console, nada selecionado, não tem nenhuma camada selecionada. A primeira coisa que fazemos é colocar um ponto onde o ombro está, e desenhar nosso traço exatamente como você faria no Illustrator. Então, criamos uma nova camada de forma chamada Camada de Forma 1, mas vamos renomear isso, vamos chamá-lo de Arm Front, lá vamos nós. Agora, se você abrir o braço, você verá que temos conteúdo aqui, e dentro disso todos os parâmetros desta linha são expressos. Então, se olharmos para um caminho, você pode ver que temos o caminho que criamos, e podemos movê-lo com o mouse, mas queremos focar no traço. Então, aqui dentro você tem a largura, a opacidade, a cor e a maneira como as extremidades das linhas são expressas exatamente como você faria no Illustrator. Então, a primeira coisa que vamos fazer é colorir o braço da mesma forma que o corpo. A próxima coisa que vamos fazer é expandir a largura do curso para combinar com a do nosso braço, e você vai notar aqui que novamente a parte inferior do braço é plana, e nós queremos pegar a tampa de linha e arredondar isso, então lá vamos nós. Então, agora temos um braço como temos no Illustrator. Agora vamos fazer a mesma coisa novamente e redesenhar outro braço, mas queremos que seja exatamente o mesmo, então o que podemos fazer é controlar C, copiar e editar colar, e temos um segundo aqui. Vamos chamar este braço de volta porque queremos este braço sentado atrás do tronco, e você colocá-lo atrás do tronco na composição. Agora novamente vamos fechar a frente do braço aqui e entramos em Arm Back para o Conteúdo, para a Forma, e finalmente para o Caminho , selecionamos o Caminho, vemos que temos o mesmo caminho que o braço na frente. Você quer pressionar Shift e apenas trazer a capacidade de alterar o caminho dentro da forma. Então, você seleciona a forma do caminho, e basta movê-la para a posição. Lá vamos nós, e então temos o braço atrás do corpo também. Então, agora, vamos fazer exatamente a mesma coisa para as pernas. Pegamos nossa ferramenta Caneta e, em vez de colocar um único ponto, vamos clicar e arrastar para criar uma tangente no Illustrator até o topo da perna, e clicar, arrastar e criar uma tangente na parte inferior. A razão pela qual vamos fazer isso é para que, mais tarde, quando viermos animar a perna, possamos fazer curvas. Então, nós temos a Camada 1 de novo e nós vamos chamar isso de Frente Perna, e nós vamos colocar isso na frente do tronco. Vamos abri-la e mexer com esses parâmetros. Então, vamos abrir o traço, queremos que a cor seja a mesma que o corpo. Queremos que a largura do traçado corresponda ao nosso arquivo do Illustrator, e vamos manter a tampa igual apenas com a extremidade plana da perna, e lá vamos nós. Vamos fazer a mesma coisa novamente, novamente você pode controlar C, controlar V e colar a perna no lugar. Em seguida, se você selecionar a ferramenta de seta aqui, você pode movê-la. Podemos fazê-lo com as teclas de seta do seu teclado apenas para movê-lo para o lugar. Agora essa perna vai se chamar Leg Back, e então o que queríamos fazer é colocá-la atrás do tronco. Então, nosso personagem está começando a se parecer com nosso arquivo do Illustrator novamente. Agora, você vai notar que a única coisa que está faltando é aquela pequena sombra. Então, o que vamos fazer com essa perna no banco, nós vamos copiar, editar, colar para que ele fique bem na frente dele e nós vamos chamar essa camada Leg Back Shadow. Mais uma vez, vamos abri-la. Agora você pode passar pelo processo de abrir todas as camadas como eu fiz aqui, onde você pode apertar U duplo, que é a tecla U duas vezes e que vai trazer as partes da camada de forma que você já mudou. Então é apenas uma maneira rápida de entrar lá, e nós vamos apenas fazer isso um pouco mais escuro. Agora, em vez de tornar a camada em si mais curta, o que nós vamos fazer é ir para adicionar e essas pequenas funções que você pode adicionar às camadas de forma, e nós vamos para Trim Paths, e você observe que um pouco de Trim Caminhos caem menus aparecem aqui. Nós vamos abrir isso, e o que isso vai permitir que você faça é afetar o comprimento da linha do caminho que você criou com o traçado. Então, você não precisa ter o derrame percorrido por todo o caminho. Nós só vamos ter que sentar em cerca de 50%, e lá vamos nós, lá está o nosso personagem. Agora, o que podemos fazer finalmente é selecionar os braços e pernas originais, e braços e pernas à frente, e excluí-los, nós não vamos precisar mais deles. Então lá vamos nós. 4. Manipulando no After Effects: Ok. Então, bem-vindo à terceira parte de criar um personagem animado simples. Esta parte é chamada de aparelhamento após efeitos. Nesta seção, vamos colocar nossos pontos de ancoragem para animação rotacional, vamos criar as nossas camadas a base do tronco, vamos combinar algumas expressões de traçado com a ferramenta pick whip, e vamos ocultar camadas não utilizadas e colorir e rotular nossas camadas para maior clareza. Então, vamos trazer nosso arquivo após efeito aqui, e eu organizei as camadas da seguinte maneira. Então, com os braços e pernas dianteiras na frente, a cabeça e o tronco no meio, e as pernas traseiras, e a sombra atrás deles. Então, a primeira coisa que vamos fazer é olhar para pontos de ancoragem. Então, vamos estar girando elementos da composição, e queremos que eles girem em torno de pontos específicos. Você pode ver no momento, este é um ponto de ancoragem aqui no meio que o tronco, as cabeças e todas as pernas e braços têm o ponto de ancoragem na mesma posição. O que vamos querer fazer é mover estes para que, se eu abrir a cabeça, e olharmos para a rotação da cabeça, possamos ver que no momento ele está girando em torno desse ponto central. Isso não vai ser bom para nós. Então, o que nós vamos fazer é clicar na ferramenta Pan Atrás ou apertar Y, e nós vamos apenas arrastar isso para a parte de trás do pescoço, e o que isso significa agora é que a cabeça vai girar em torno desse ponto, que vai ser um muito melhor para a nossa animação, fazer muito mais sentido. Então, vamos fazer isso para cada parte aqui. O torso, nós vamos ter girando em torno do quadril. O braço na frente, queremos que gire em torno do ombro. A perna na frente, nós queremos que isso gire em torno do quadril aqui. Então, você pode ver agora, nós temos algo que se assemelha a uma articulação do quadril. A sombra na parte de trás, queremos girar em torno do quadril, bem como a própria perna. Finalmente o braço na parte de trás, queremos que gire em torno do ombro aqui. Então, lá vamos nós. Então agora, todos os nossos pontos de ancoragem estão no lugar certo. A próxima coisa que vamos fazer é parar de criar camadas. Então, se selecionarmos a Ferramenta de Seleção aqui, e selecionar o tronco. O que você vai notar é que quando ele se move de alguma forma, se ele se move positivamente ou a rotação, todos os outros elementos permanecem onde eles estão, e o que nós queremos fazer é criar um equipamento para nosso personagem em que todos os elementos são unidos a todos os outros elementos. Então, a cabeça aqui, queremos conectar isso ao tronco. Assim, quando o tronco se move, a cabeça se move. A maneira como fazemos isso é com estes interruptores aqui, os pais mudam. Então, se não estiver na sua coluna, se não estiver nas configurações padrão, o que vamos fazer é clicar com o botão direito do mouse no acima que, onde os switches seriam, vá para baixo e clique em Pai, e isso irá Ligue os interruptores. Agora, o que queremos fazer é colocar a cabeça no tronco. Agora, você pode ver, se movermos o tronco, a cabeça vai com ele. Nós só queremos fazer o mesmo para quase todos estes, o braço aqui pai para o tronco, perna dianteira, tronco, perna traseira, e o braço traseiro. Agora, a única coisa que não queremos criar para o tronco é essa camada de sombra que criamos. Então, eu só vou solá-los aqui, e nós queremos prender a sombra na perna em que está sendo moldada. Então, você pode ver que quando movemos a perna aqui, agora, a sombra está presa a ela. O que você deve ter, se você fez um pouco corretamente, se você selecionar o tronco e mover o tronco ao redor, tudo deve segui-lo, então lá vamos nós. Então, agora, tudo o que resta a fazer no cordame é que queremos a sombra na perna traseira. Queremos combinar com o movimento da perna traseira em termos do caminho que criamos dentro da camada Shape. Se eu abrir isso, você pode ver o caminho de sombra aqui que desenhamos mais cedo com a ferramenta Caneta está lá dentro. Se entrarmos na perna traseira, vemos o caminho para a perna traseira está aqui. Agora, o que queremos fazer, o que queremos acontecer é, quando movemos a perna traseira, assim, queremos o caminho, queremos que a sombra o siga. Então, o que queremos é que este caminho copie este caminho aqui, queremos que a sombra da perna para trás esteja copiando a perna para trás. Então, o que vamos fazer é clicar neste ícone aqui, segurando Alt, e, em seguida, clicando para baixo no ícone Cronômetro, e ele vai trazer este console aqui que é o seu console Expression. Agora, vamos ignorar o que está dentro da caixa no momento. Tudo o que vamos fazer é pegar o Pick Whip, e vamos arrastá-lo para a camada de caminho para os textos do caminho na camada de perna traseira. Vai soar muito complexo, mas tudo o que significa é que agora, quando ajustamos o caminho na perna, a sombra o segue. Isso vai ser útil para mais tarde. Isso significa que você não precisa duplicar camadas e copiar quadros-chave em cada caminho. Então, lá vamos nós. Aí está o nosso [inaudível]. Agora, na picareta chicoteando a sombra na perna, o que isso significa é que não temos mais que nos preocupar com o que as sombras fazem, ele vai seguir a animação em nossas pernas. Então, o que podemos fazer é efetivamente nos livrar dele da linha do tempo, apenas ignorá-lo. Do jeito que vamos fazer isso, vamos clicar neste pequeno ícone aqui que é nosso ícone de Camada Tímida, e então quando escondemos nossas Camadas Tímidas, isso desaparece, e tudo o que significa é que podemos ignorá-lo e não é ficando no caminho de nossas outras camadas que vamos estar animando. Então, se você quiser ver essa camada novamente, se quiser ajustá-la, você pode trazê-la de volta apenas desativando o ícone Camada tímida. A última coisa que vamos fazer, vamos colorir essas camadas apenas para que saibamos de relance quais são braços, que são pernas. Então, a cabeça e o tronco, isso é simples, eu os faço cor-de-rosa. Os dois braços, eu vou colorir amarelo e eu vou deixar as pernas azuis, e nós não temos que olhar para trás aqui toda vez para verificar quais camadas. Só sabemos quais são as pernas dianteiras, as pernas traseiras, a cabeça e o tronco. 5. Anime o ciclo de caminhada - parte 1: Então, bem-vindos de volta à Parte 4 do personagem animado simples criativo. Esta seção é, Animate The Walk Cycle Parte 1. Nesta seção, usaremos marcadores para estabelecer um loop de linha do tempo. Vamos criar um fluxo usando as réguas e guias. Vamos enquadrar o tronco, e finalmente enquadrar a rotação da cabeça. Então aqui, estamos com um cara pronto para animação na linha do tempo. A primeira coisa que vamos fazer é marcar nosso espaço de trabalho de loop usando os marcadores. Agora, vamos começar nosso loop no quadro 100, e vamos marcar isso arrastando este marcador do lado da linha do tempo para o quadro 100. Isto vai marcar o início do nosso ciclo e o nosso primeiro passo. Vou chamar isso de passo para a esquerda. Vai ser onde o nosso pé esquerdo está lá fora. Vamos terminar o ciclo exatamente no mesmo lugar. Então, vamos chegar ao quadro 116. Então, 16 quadros de comprimento. Nós vamos marcar isso como esquerda também. Entre os dois no quadro 108, vamos arrastar o marcador novamente e vamos chamar este quadro de direita. Lá vamos nós. Finalmente, entre os dois quadros vamos apenas marcar estes a cada quarto quadros, vamos ver estes chamados um e dois. Então, lá devemos ter deixado, um, direita, dois, esquerda. Essa é a ordem do nosso ciclo. O que vamos fazer agora é criar uma área de visualização e um espaço de trabalho usando nossa barra de área de trabalho limitada. Eu só vou arrastar isso do lado e quadro 100, lá vamos nós. Então, ele alinha com o primeiro marcador e isso para alinhar com o marcador final lá. Lá vamos nós. Agora, este é o nosso espaço de trabalho temporal. Agora, nosso próximo passo é, nosso personagem está flutuando no ar e nós queremos ter um guia para onde estão nossa camada de terra vai estar para que nós saibamos que seus pés estão no chão em todos os momentos quando eles precisam estar. Uma maneira que vamos fazer isso, vamos usar alguns roteadores e guias e a maneira como você pode trazê-los para cima é para Exibir, mostrar roteadores e isso vai dar a você suas dimensões de pixel em X e Y na rua. O que você vai fazer é clicar dentro desta área no topo onde as medidas estão, e basta arrastar sua régua até os pés. Lá vamos nós. Uma vez que você tenha feito isso, pare de se mover, nós vamos apenas obter uma visão e bloquear guias. Agora, restam um terreno para o nosso personagem. Então, estamos prontos para animar nosso personagem agora. Como mencionei anteriormente, quando manipulamos nosso personagem, o tronco é a parte do corpo para a qual tudo o resto é criado. Então, esse é o cerne da nossa animação, e essa é a parte do corpo que vamos arredondar primeiro. Então, o que eu quero que você faça é selecionar o tronco e a cabeça com o solo, o verificador de camada solo e isso só vai ter esses dois pedaços. São as únicas peças na tela que podemos ver. No tronco, vamos cair em nossa camada de transformação para revelar nossa posição. Esta é a parte que vamos animar agora. Agora, o que vamos fazer no ciclo de caminhada é animar as partes entre o quadro-chave e as partes entre esses passos primeiro porque é onde nosso personagem vai ter uma perna no chão. Enquanto ele está caminhando para a frente, ele vai estar no seu ponto mais alto. Nós só vamos verificar a camada de posição lá. Ele vai estar no mesmo ponto verticalmente em nosso marcador número dois, onde ele está entre a passada direita e esquerda. Então, vamos apenas criar o quadro-chave lá e ver exatamente o mesmo que o anterior. Se voltarmos ao início, este é o nosso passo esquerdo. Isto é com a perna esquerda para a frente e a perna direita para trás. Como suas pernas estão mais distantes, seu corpo vai ficar um pouco mais baixo. Então, vamos puxar o tronco para lá. Vamos copiar este quadro-chave para que você possa editar a cópia. Nós vamos para o passo certo, e novamente suas pernas vão ser jogadas, então ele vai estar mais baixo no quadro novamente. Vamos editar, colar e colar o mesmo quadro-chave na passada esquerda. Agora, o que você vai ser capaz de fazer agora, se você for Janela e clicar em Visualizar, isso vai trazer seu console de visualização aqui e se você apenas clicar neste pequeno botão Executar visualização, você poderá ver o quadros-chave que até mesmo animado renderizado em tempo real. O que você vai notar com isso é que o nosso cara é bastante mecânico não há muito caráter para ele, ele está saltando para cima e para baixo e de uma maneira bem antinatural. Então, o que vamos fazer, vamos adicionar um pouco de flexibilização de quadros-chave e isso vai dar-lhe um salto que se sente um pouco mais orgânico e um pouco mais característico. O que vamos fazer, vamos aliviar os quadros onde ele está mais alto. Então, enquanto ele sobe para cima e para baixo, nós queremos que ele apenas relaxe no topo do seu salto antes de descer. Então, vamos fazer animação. Vamos selecionar esses dois quadros-chave, quadros-chave um e dois entre a esquerda e a esquerda e, em seguida, Animação, Keyframe Assistant e Fácil Atenuação. Isso vai nos dar esses quadros-chave facilitadores e quando nós reproduzirmos usando a visualização, ele vai se sentir um pouco mais como um salto. Agora, se quisermos melhorar isso ainda mais, podemos ajustar a influência do quadro-chave. Então, o que eu vou fazer é selecionar os quadros-chave novamente, eu vou para Animação, Keyframe Velocity. Agora, aqui, temos a influência dos quadros-chave de entrada e saída. No momento, eles estão definidos para 33 por cento. Vamos aumentar para 66, clique em “Ok”. Se reproduzirmos o nosso Run Preview novamente, sentir que agora ele está realmente começando a saltar, ele começou a se sentir como um personagem um pouco mais interessante. Então, agora que mancamos o tronco mancando, vamos fazer o mesmo pela nossa cabeça. Nós íamos fazer isso. Vamos abrir a nossa atração principal e depois transformar-nos aqui. Vamos lidar com o quadro-chave de rotação. Agora, quando nosso personagem estiver no auge de seu salto, eu vou fazer com que ele olhe ligeiramente para baixo, eu vou ajustar a rotação para cerca de três graus e você pode simplesmente deslizar isso junto. Vou fazer o quadro-chave. Eu vou fazer exatamente o mesmo quadro-chave aqui, o ponto dois, ou está no mesmo lugar verticalmente em seu passo. Em seguida, voltar para este marcador de passo esquerdo, onde ele está agora no fundo do tronco, seu ponto mais baixo. Vou tê-lo, com a cabeça inclinada ligeiramente para trás enquanto ele está olhando um pouco para cima agora. Novamente, cerca de três graus ou mais. Agora, vou copiar este quadro-chave. Eu vou colar isso no passo direito e novamente o passo esquerdo. Novamente, se jogarmos isso de volta, descobriremos que o movimento da cabeça dele parece um pouco mecânico. Então, o que vamos fazer, vamos selecionar nossos dois quadros-chave correspondentes aos que selecionamos anteriormente no tronco, desta vez em nossa camada de rotação, e vamos para o assistente de quadros-chave. Vou pegar um clique Easy Easy. Vamos para Animação, Keyframe Velocity, e novamente, vamos ajustar a influência dessa facilidade para 66. Então, é o mesmo que antes. Agora, se jogarmos isso de volta, lá vamos nós. Se você fosse um pouco mais característico. Agora, que temos nossos quadros-chave em loop, o que podemos fazer é selecionar todos esses quadros-chave aqui, e vamos copiá-los, ir para o final do nosso loop e vamos apenas colá-los novamente. Eu vou fazer a mesma coisa, camada torso. O que isso significa que podemos fazer agora é deslizar ambas as linhas do tempo umas das outras para criar uma peça ligeiramente mais interessante de animação secundária na cabeça. Então, se mudarmos o quadro da cabeça um quadro para a esquerda, veremos que o quadro-chave ainda corresponde, mas há um quadro à esquerda dos quadros-chave do tronco. Quando visualizamos isso, temos algo um pouco mais interessante. Ele lidera o torso. Se escorregarmos ainda mais. Então, é inteiramente diametralmente oposto. Agora, está balançando para cima e para baixo e você pode brincar com isso até conseguir algo que você gosta. Eu vou ter que definir um quadro atrás do loop. Então, lá vamos nós. Então, agora é a cabeça saltando como se levasse levemente pelo corpo. 6. Anime o ciclo de caminhada - parte 2: Olá, e bem-vindos à segunda parte da seção quatro: Animar o Ciclo de Caminhada. Nesta seção, vamos enquadrar as principais poses de passo, vamos adicionar animação entre essas poses, vamos enquadrar a rotação do braço e, finalmente, vamos adicionar alguma animação aos caminhos nos braços. Então, se abrirmos nosso After Effects novamente, temos nosso personagem em seu loop, o que vamos fazer, vamos desmarcar a cabeça solada, e a camada torso. Agora, quando reproduzirmos a nossa Pré-visualização de Corridas, vamos ver o nosso personagem a começar a saltar para cima e para baixo, vamos adicionar os passos a seguir. Então, vamos começar de novo aqui, volta para o marcador esquerdo, e começando vamos começar apenas com a perna esquerda, a perna esquerda e o marcador esquerdo que vai liderar. Então, abrimos nosso conteúdo, entramos em nossa forma, entramos em nosso caminho, encontramos nosso traçado novamente, o que você vai precisar fazer é segurar “Shift” e clicar para animar, e alterar o caminho aqui. Vamos ajustar as curvas, modo que esta perna esteja agora curva para a frente, queremos que o pé fique nivelado no chão. Temos onde queremos. Vamos enquadrá-lo. Em seguida, vamos para o marcador direito, e neste ponto o pé direito vai estar na frente, e assim nosso pé esquerdo vai estar na parte de trás. Agora, este pé não precisa mais se sentar nivelado no chão porque ele está prestes a levantá-lo, para dar seu próximo passo. Então, podemos curvar assim. Agora, temos um movimento entre os nossos passos. Finalmente, o que vamos fazer nesta etapa, é copiar e colar nosso primeiro quadro-chave para fechar o loop. Então, lá nós g. Agora temos uma animação de loop da perna esquerda. Agora, o que vamos fazer é selecionar nossa perna traseira, entrar em conteúdo, forma, caminho, e clicar em “Selecionar nosso caminho”. Segure “Shift” Clique em um ponto na perna e nesta posição, esta perna vai estar no estado para trás, então lá estamos. Vou enquadrar o nosso caminho. Nós vamos para o marcador certo, o marcador certo que queremos que nossa perna direita esteja liderando. Então, novamente, ajuste seu caminho, para que a curva crie uma perna dianteira agradável e, em seguida, novamente, feche o loop copiando colando seu quadro-chave original. Agora, o que vamos começar a ter se chegarmos ao nosso Preview de Corrida, é algo que se aproxima do início de um ciclo de caminhada. Agora, neste próximo passo, vamos criar a animação entre cada passo. Então, vamos selecionar nossa perna dianteira, esta é nossa perna esquerda, e veremos que se nos movermos ao longo da linha do tempo, entre nossos passos esquerdo e direito, esta perna está indo para trás, o que significa que no meio aqui, esta perna deve estar no chão empurrando nosso cara para a frente. Então, o que vamos fazer, selecionar nosso caminho e para este quadro-chave, o que vamos fazer é baixar nossa perna, e endireitá-la ligeiramente, eles vamos. É o nosso cara, e se passarmos os quadros-chave de novo, veremos que está começando a parecer que ele está puxando sua perna rara enquanto ele coloca a perna da frente. Nós vamos avançar para o ponto dois aqui entre os passos direito e esquerdo, eu vou ver que entre os passos direito e esquerdo, esta perna da frente vai estar puxando baixo antes que ele plante uma divisão novamente para a esquerda Passeio. Então, o que vamos fazer no ponto dois, é levantar a perna para cima e curvá-la para baixo assim. Então agora, se soltarmos nossa perna esquerda, teremos algo se aproximando de uma perna ambulante. Isso ainda não estava certo e vamos consertar isso em um minuto. Mas primeiro vamos fazer a mesma coisa com a nossa perna rara. Esta perna aqui está puxando para a frente, então, no primeiro ponto, vamos colocar esta perna para baixo e então você curva para fora. Então, no ponto dois, como a perna rara está nos empurrando para a frente, vamos plantá-la de volta no chão com nosso guia. Agora, se salvarmos isso, e apertarmos Run Preview, estamos começando a obter algo perto de um ciclo de caminhada. Agora novamente, ligeiramente mecânico porque estamos usando todos os quadros-chave planos, queremos adicionar algum caractere a ele, vamos selecionar todos os nossos quadros-chave correspondentes que vamos adicionar esses dois, e você pode detectá-los, eles são os que estão ao lado dos quadros-chave nas ferramentas, modo que têm flexibilização nesses quadros-chave ligeiramente mal moldados. Vamos selecioná-los nos pontos um e dois, vamos bater Animação, Keyframe Assistant, Easy Easy Easy. Vamos tocar Animation, Keyframe Velocity. Vou adicionar nossa alta influência 66% de influência quadro-chave novamente. Guarde isso, e agora se você jogar de volta o nosso ciclo de caminhada. Temos algo com muito mais caráter. Agora, por último, vamos adicionar alguma animação aos braços. Então, desta vez vamos adicionar animação rotacional a ambos. Então, queremos abrir nossa camada de braço, indo para a rotação, e agora como nossa perna dianteira está para frente, vamos puxar nosso braço dianteiro para trás. Vou enquadrar isso, e depois no nosso passo direito, quando a perna estiver de volta, vamos puxar o braço para a frente. Novamente, vamos copiar e colar para fechar nosso loop. Do outro lado aqui, vamos fazer a mesma coisa, vamos abrir nossa transformação. Quando este braço está para trás este vai ser para a frente, e os outros braços para a frente este vai estar de volta, e então copiar e colar para fechar o loop novamente. Vamos selecionar todos estes, em seguida, dar-lhes alguma flexibilização do assistente de quadros-chave. Desta vez para velocidade, porque estamos usando velocidade, todo o tempo vamos usar algo um pouco baixo, vamos usar 44, e vamos jogar de volta, e nosso cara está quase completo. A última coisa que vamos fazer, vamos adicionar alguma animação de caminho aos nossos braços. Então, deixe-me ir para a camada Forma, e selecionar o caminho. Aqui está o nosso caminho. Quando o nosso braço está dobrado para trás, nós vamos dobrar o cotovelo aqui, quando o braço do nosso cara está para a frente, nós vamos para o quadro-chave, um braço ligeiramente mais reto, então mais uma vez, nós vamos copiar e cole nosso quadro-chave para fechar nosso loop. Vamos fazer a mesma coisa neste braço raro. Então, no início da passada, este caminho vai ser achatado, lá vamos nós, vamos curvar para o outro lado. Enquanto ele está puxando o braço para trás, nós não vamos vê-lo aqui, mas nós vamos curvar o cotovelo dele para fora. Em seguida, mais uma vez copie e cole para fechar o loop. Vou selecionar estes quadros-chave, o que fizemos antes para ambos os braços. Vamos adicionar nossa flexibilização, e nossa velocidade do quadro-chave, 44. Seleciona tudo, fecha-o, e quando chegarmos ao nosso Run Preview, lá vamos nós, agora temos um tipo a andar. Agora, você pode parar por aí, mas o que vamos fazer, vamos selecionar todos os nossos quadros-chave, e no teclado, vamos apertar a letra U, e o que isso vai fazer é trazer todos os nossos quadros-chave usados. Agora, como fizemos antes com a cabeça, vamos apenas copiar. Vamos selecionar para cada camada, vamos copiar e colar nossos quadros-chave no final de cada loop, e isso vai apenas dobrar o comprimento do nosso loop. Então, vamos para ambos os braços, vamos copiar e colar os quadros-chave de ambas as pernas. Já fizemos isso em nosso corpo incrível. O que vamos fazer agora, é começar a deslizar esses quadros-chave ao redor, e criar animação que tem um pouco de movimento secundário para ele, e você pode apenas brincar com isso. Eu vou mover seus braços para a frente, você possa ver que ele está caminhando com um pouco mais de propósito, ou você pode deslizá-los para trás, e ver que eles estão ficando para trás do ciclo de caminhada. O que você pode fazer em cima disso, é mover os quadros-chave do caminho contra os quadros-chave rotacionais, e você terá braços que têm mais de um movimento circular para eles, e não apenas balançando, eles são de rotação. Agora, como nós tocamos o play na Preview Run, lá está ele, você está totalmente animado, loop, ciclo de caminhada de personagem. 7. Renderizar, exportar e compartilhar seu GIF animado: Ei, pessoal. Esta é a quinta e última seção de nossa classe intitulada Render, Export and Share your GIF. Nesta seção, vamos adicionar uma cor de fundo e sombra ao nosso personagem. Vamos preparar nosso ciclo para renderização. Vamos renderizar o loop como um QuickTime. Vamos importar o QuickTime para o Photoshop, exportar o GIF do Photoshop e, finalmente, postar nosso GIF animado. Então, vamos abrir nosso arquivo do After Effects. Aqui está nosso cara de novo. Ele está feliz em loop, e o que vamos fazer agora é adicionar uma cor de fundo a ele. Vamos para camadas, novas, sólidas. Vou usar este verde brilhante aqui. Então, camada para a frente, então nós vamos arrastá-lo para baixo para a parte de trás da composição para que você possa ver todos os elementos do nosso personagem. Só vou mudar o nome deste fundo. Agora, nosso personagem parece que está flutuando no ar, então vamos adicionar uma sombra só para nos dar uma noção de onde está o chão. Eu vou fazer isso da mesma forma que fizemos todos os braços e pernas, em seguida, pegar o pedágio da caneta, certifique-se de que nada é selecionado na linha do tempo para que quando desenhamos uma linha abaixo do nosso cara aqui, nós criamos uma nova camada de forma. Eu só vou chamar essa camada de sombra. Vou levar isto para trás, mas em frente aos fundos. Eu vou abrir isso como eu fiz antes, e eu vou entrar em nossa camada de traço e eu vou fazer essa camada preta. Você percebe que quando eu aumentei a largura do traço, está um pouco escuro demais. Então, eu vou entrar em nossas funções de transformação ou para baixo para nossa opacidade, eu vou fazer isso 20 por cento. Agora, você vai notar quando nós jogamos de volta que enquanto as pernas do cara se movem, ele bate para cima e para baixo. As sombras provavelmente devem mudar de forma. Então, o que vamos fazer quando ele estiver mais alto é nós vamos fazer as sombras menores, então quando ele estiver mais baixo e mais espalhado, nós vamos mantê-la ampla. Do jeito que vamos fazer isso, vamos fazer o quadro-chave muito simplesmente. Nós vamos entrar em nossa camada de caminho dentro da sombra, pegar sua ferramenta de seleção, mantenha a tecla shift apenas para trazer a capacidade de edição do caminho, eu vou arrastar isso um pouco mais. Vamos passar para o meio do nosso passo e eu vou diminuir o comprimento deste. Eu vou para a direita, e eu vou copiar e colar nosso quadro-chave original, grande quadro-chave , que se encaixa muito bem. Então, vou copiar uma sombra mais estreita. Na verdade, isso provavelmente poderia ser suficiente para mim, e então eu fecho nosso loop, copiando e colando a sombra larga. Então, lá vamos nós. A seguir, está um pouco fora de novo, precisamos ajustar a velocidade do nosso quadro-chave usando o assistente de quadro-chave, facilidade fácil, animação, velocidade do quadro-chave, fazer com que este 66 e 66 dentro ou influência, e isso vai apenas coincidir com onde o nosso torso está. Agora, quando tocamos de volta, lá vamos nós. Ele se encaixa com a animação. Então agora, temos o nosso personagem animado. Vamos exportar isto e criar um GIF. Mas antes de fazermos isso, você notará que nossas configurações de composição são bastante grandes. Temos um 1920 por 1080 comp no momento. Vamos querer algo menor para a Web. Agora, vou exportar isto para o Dribbble. Então, o que eu vou fazer, eu vou selecionar meu personagem no console do projeto e eu vou arrastá-lo para uma nova composição. Vai parecer exatamente o mesmo de antes. Vai adotar as configurações da composição original. Então, o que vamos fazer, vamos para composição, configurações de composição, e eu vou chamar isso de Dribbble de Caracteres, e Dribbble usa um painel de 400 por 300. Então, agora, aqui está a nossa composição original. É um pouco grande, então vamos encolher isso. Se o vermos para resolução e em grande escala, este será o nosso produto final. Então agora, temos que trazer nossas barras de renderização de volta para que nós apenas renderizemos nosso loop. Você vai notar que quando importamos o personagem, ele traz consigo nossos marcadores. Então só queremos ter certeza de que amarramos nossos marcadores como antes. Nós vamos salvá-lo e vamos fazer um teste de pré-visualização rodada rápida. Lá vamos nós, perfeito. Então agora, temos nossa composição final e nossa escala final saltando corretamente. Estamos prontos para renderizar. Então, nós limitamos nossa composição e nós vamos para a composição, e nós vamos dizer sucesso fazer filme. Isso vai trazer nosso console de renderização. Se olharmos para o módulo de saída, tudo isso deve ser configurado corretamente. Queremos um QuickTime, todas as nossas opções de tamanho estão corretas, sem áudio, e se você selecionar sua área de trabalho, eu vou produzir a área de trabalho, ele renderizar, lá vamos nós. Você ouvirá o carrilhão quando a renderização estiver pronta. Se você vai para a sua área de trabalho, o que você deve encontrar é um loop muito curto. Um único loop do seu personagem. Ok, ótimo. Então, nós temos nosso personagem aqui em nossa área de trabalho. Vamos abrir o Photoshop e vamos arquivar, abrir, e vamos selecionar nosso QuickTime Movie, e aqui está ele. Agora, ele vai aparecer como uma imagem estática nisso, e o que nós vamos querer fazer é ir arquivo e salvar para Web e dispositivos, e isso vai trazer este console aqui. Vou tirar uma captura de tela das configurações necessárias, apenas as configurações padrão. A única coisa que vamos mudar são as nossas opções de loop. Queremos que o nosso ciclo viva para sempre, e lá vamos nós. Você pode visualizar seu loop, e esse será seu GIF animado. Agora, vamos fazer, uma vez que mudamos as opções de loop para sempre, vamos salvar isso em nossa área de trabalho. É isso. Finalmente, vou partilhar o meu trabalho. Vou enviar o meu personagem para o Dribbble. Eu nomeei meu arquivo, vou publicá-lo, lá vamos nós. Se você não tem uma conta Dribbble, não há problema, você ainda pode compartilhá-la na seção de projetos de estudantes. Carregei meu cara aqui, vou postá-lo. Lá vai você, o GIF animado. 8. Mais aulas criativas no Skillshare: