Básicos de animação de personagens: combinando técnicas no Adobe After Effects, Animate e Photoshop

1. Apresentação: A bola quicando é uma das primeiras animações que um iniciante deve aprender e também pode funcionar como ponto de partida para animações muito Ei, meu nome é Gui Jorge, sou designer e animador brasileiro e trabalho aqui na MediaNerd no Reino Unido Trabalho como designer de movimento há pelo menos cinco anos. Como generalista, sempre usei diferentes softwares e técnicas para apoiar meus projetos, mas trabalhar com quadro a quadro me dá limites para o que posso fazer, e é por isso que eu amo tanto isso Nesta aula, vamos criar a animação de bola quicando perfeita no Adobe After Effects e usá-la como base para criar uma animação de personagem, quadro a quadro, quadro, usamos o Adobe Animate e o Adobe Photoshop No Adobe After Effects, você aprenderá a usar o Editor de gráficos, que é a ferramenta mais importante para controlar sua animação e criar uma bola quicando perfeita Depois disso, quero mostrar minha abordagem para criar o design dos personagens que animaremos, e você pode criar o seu próprio usando o mesmo método Quando tivermos a forma básica do personagem pulando, iremos ao Adobe Animate para criar o ciclo de execução quadro a quadro Faremos a limpeza usando o Adobe Photoshop para dar à sua animação um loop final desenhado à mão Então, você também aprenderá a trabalhar com animação usando o Adobe Photoshop No final, voltaremos ao After Effects para fazer a composição final e exportar nosso projeto final. Essa aula é perfeita para designers de movimento iniciantes ou até mais experientes que desejam começar a adicionar quadro a quadro aos seus pipelines, especialmente para animar personagens. Você entenderá o processo que usa muitos softwares diferentes para criar uma animação muito legal. Estou super empolgada em ver o que vocês vão criar, então vamos lá. 2. O projeto final: Bem-vindo à minha primeira aula no Skillshare. O projeto final desta aula é interessante porque abordaremos muitas habilidades e técnicas que um bom animador deve ter Começando com a bola quicando, esse é o exercício perfeito para entender os dois principais fundamentos da animação, tempo Obviamente, como estamos fazendo isso no Adobe After Effects, é uma ótima oportunidade para entender como o editor gráfico funciona. Se você não sabe o que é o editor gráfico, não se preocupe, abordaremos isso. As bolas saltitantes também estão muito presentes na animação de personagens, mesmo que você não perceba à Na verdade, quando andamos ou corremos, por exemplo, algumas partes do nosso corpo, por exemplo, nossos quadris, elas se movem de forma semelhante a uma bola quicando É por isso que o estamos usando como base para animar personagens Aqui está o plano. Primeiro, aprenderemos o que torna uma bola quicante convincente Em seguida, criaremos um personagem e animaremos suas formas básicas saltando Usando o Adobe Animate, faremos o ciclo de execução quadro usando a bola quicando como referência O Adobe Photoshop, será usado para fazer a limpeza, que é o processo de finalização dos quadros da nossa animação Para fazer isso, você precisa de três softwares, Adobe After Effects, Adobe Animate e Adobe Photoshop Também é importante ter um tablet, especialmente quando estamos fazendo a parte quadro a quadro deste curso É isso aí, pessoal. Há muito a ser abordado, então vamos começar. 3. A Física de uma bola de salto: Bem-vindos a esta aula, pessoal, e vamos começar a falar sobre algumas teorias de nosso grande amigo, Isaac Newton É importante entender a física. Então, quando vemos algo errado em nossa animação, podemos adivinhar o porquê. Confira. Esta é uma bola quicante básica. Agora vamos ver cada quadro dessa animação. Quando a bola está caindo, a gravidade a puxa para baixo Isso faz com que a velocidade aumente quando está caindo. À medida que a bola está ficando mais rápida, a distância entre as bolas ao longo dos quadros está ficando maior. É claro que quando a bola está subindo, ocorre o contrário. As molduras estão cada vez mais próximas umas das outras. Isso acontece porque a aceleração, também conhecida como gravidade, está puxando a bola na direção oposta ao seu movimento A bola quicando é muito importante na animação porque nos ajuda a entender muito bem os dois conceitos mais fundamentais animação, que são tempo e espaço Basicamente, o tempo é o tempo que a bola leva para quicar Nesse caso, a bola leva um segundo para sair do salto superior e chegar à posição original espaçamento é aproximadamente a distância entre cada desenho de um quadro para o outro Não importa a técnica usada, esse é sempre o papel de um animador, gerenciar o tempo e o espaçamento para criar o movimento de que ele precisa Há alguns detalhes que você pode adicionar para tornar sua bola quicando mais convincente, e isso nos dá a chance de falar sobre um princípio importante de animação, squash Squash e stretch são essas deformações da bola que tornam o movimento muito Quando a bola ganha velocidade, ela se estica. Quando a bola toca o chão, ela se esmaga. Porém, é muito importante manter a mesma massa. É bom notar que o momento de maior alongamento é logo antes da bola tocar o chão e, quando isso acontece, vai direto para a pose mais esmagada Essa mudança muito rápida de forma é o que dá impacto e peso a essa animação. Agora que você entende deve ser a aparência de uma bola quicando, estamos prontos para animá-la Faremos isso usando o Adobe After Effects. 4. Apresentando o Adobe After Effects: O Adobe After Effects pode parecer um pouco assustador quando você o abre pela primeira vez, mas tudo fica mais fácil quando você entende o básico Bem-vindo ao After Effects. Isso é o que você vê quando o abre. Só para ter certeza de que o layout que vejo é o mesmo que você. Vamos ao Windows, Workspace e verificar se você está no modo padrão. Para ter certeza de que você pode até mesmo clicar em Redefinir o layout padrão para salvo. Você verá a mesma tela que estou vendo agora. A primeira coisa a fazer geralmente é criar uma composição. A composição é o seu Canvas, onde a animação acontecerá. Você pode criar uma nova composição de três maneiras diferentes. Clicando aqui neste botão grande, isso é mais um aqui ou indo para uma nova composição. Você está clicando na nova composição? Aqui você pode renomear sua composição. Vou escrever a composição da Classe 4. Aqui eu posso escolher o tamanho da composição. Você tem algumas predefinições aqui, mas 1920 por 1080, esse é o tamanho full HD, que eu uso para a maioria das minhas A taxa de quadros é muito importante. Isso é quantos quadros por segundo a animação terá. As taxas de quadros mais comuns na animação são 24. Aqui você tem a duração da composição. Criaremos uma composição de cinco segundos. A cor de fundo pode permanecer cinza. Agora vamos clicar em Ok, agora vou mostrar como navegar em sua composição. Você pode aumentar e diminuir o zoom, girando a roda do mouse ou pressionando Command ou Control e Plus ou Minus Minha maneira favorita de navegar é segurar barra de espaço, clicar e arrastar Dessa forma, você pode mover sua prancha de arte. Deixe-me mostrar agora algumas das principais ferramentas. O primeiro, o atalho V, é a ferramenta de seleção para selecionar e mover o objeto A mão e a lupa são formas alternativas de mover, aumentar e diminuir o zoom, mas eu sempre prefiro o atalho que usei Agora, vamos ver como podemos desenhar e criar formas. Se eu clicar e segurar os botões que têm esse pequeno triângulo na parte inferior, ele revelará mais opções. Essas são as formas que eu poderia desenhar retângulos, bordas arredondadas nos retângulos, elipses, polígonos Vamos selecionar elipses, clicar e arrastar para desenhar. Se você segurar a tecla Shift, você desenha um círculo perfeito. Se você selecionar Shift e command, você cria o círculo perfeito a partir do centro. Se você selecionar apenas o comando criado a partir desse centro, mas sem bloquear as proporções Então, vamos criar um círculo perfeito. Agora, com a Ferramenta de Seleção, posso selecionar e mover a posição. Aqui eu posso mudar a cor de preenchimento e aqui a cor do traçado. Essa é a largura do meu traço em pontos. Clicar e arrastar é uma boa maneira de aumentar ou diminuir Vamos mudar minha cor de preenchimento e a cor do traçado também. Ao clicar na palavra preenchimento, posso remover qualquer preenchimento ou criar um gradiente O mesmo funciona para o derrame. Vamos sair como está por enquanto. Você deve ter notado que, como eu desenho qualquer forma na minha tela, uma nova camada aqui é criada. O zero é minha linha do tempo. Posso selecionar minha forma clicando aqui, pressionando a tecla Enter, posso renomeá-la Vamos escrever o círculo 01, clique fora. Agora meu círculo tem um nome próprio. Também posso mudar a cor da minha camada, clicando aqui, isso é muito importante para organizar meu projeto, especialmente quando tínhamos muitas camadas. Aqui está minha guia de projetos, todos os ativos que eu uso são importantes para o After Effects estarão aqui, vídeos, áudios, imagens, tudo Também podemos ver nossa composição aqui. O que acabamos de criar já está lá. Também posso criar pastas clicando aqui. Posso renomear a Pasta 1 e agora posso clicar, arrastar e organizar o projeto Se eu selecionar algo e clicar na lixeira, excluirei o que estiver selecionado Agora, vamos nos concentrar na linha do tempo. Isso é muito importante para entender como a linha do tempo funciona Se eu clicar e arrastar essa agulha, posso navegar pela minha animação. É claro que ainda não há animação aqui. Precisamos entender esse número aqui, que é a hora em que minha agulha está no momento e o número exibido aqui está nesta ordem; hora, minutos, segundos e quadros. Se eu arrastar minha agulha lentamente, posso ver os números mudando. Quando chego ao quadro 24, tenho um segundo, pois 24 é o número escolhido de quadros por segundo. Também é importante saber como navegar pela linha do tempo até o teclado Você pode digitar Comando e seta para a esquerda ou para a direita para percorrer um quadro de cada vez, indo para frente e para trás Se, em vez disso, eu segurar Command e Shift juntos, e depois as setas, moverei as agulhas a cada 10 quadros Aqui no lado direito, temos algumas guias importantes para visualizar onde posso reproduzir minha animação, clicando em reproduzir O que eu mais uso aqui é o botão Mute. Às vezes eu queria tocar sem som e aqui posso dizer se quero que ele faça um loop ou não. Eu também tenho aqui efeitos e predefinições. Eles são tantos que eu não conheço e eu nunca conheceria todos, mas você tem que saber que você pode encontrá-los aqui, até mesmo pesquisar por seus nomes. Mais adiante neste curso, veremos alguns efeitos. Agora que você está familiarizado com os conceitos básicos do Adobe After Effects, é hora de aprender a animar nele. Vamos embora. 5. Animação no Adobe After Effects: Gente, agora estamos prontos para falar sobre animação no After Effects. É aí que a diversão realmente começa. Eu já tenho meu círculo verde aqui. Eu gostaria de mostrar essas propriedades aqui abaixo da minha camada. Dentro de Conteúdo, tenho minhas propriedades de elipse, mas falaremos sobre isso mais tarde Agora vou ver as opções que temos em Transformar. Temos o ponto de ancoragem, que é aquele pequeno alvo no meio do círculo Propriedades como escala e rotação modificam o objeto com base nesse ponto. Você pode ver que se eu mudar minha escala, o tamanho mudará usando o ponto de ancoragem como centro Eu tenho que usar a ferramenta de movimentação do ponto de ancoragem para modificá-lo. Se eu segurar Command ou Control, o ponto de ancoragem se encaixa em lugares específicos Se eu colocar o ponto de ancoragem aqui, a forma como a balança funciona é diferente Agora ele tem a parte inferior como centro da escala. Quando você anima a rotação, o ponto de ancoragem é ainda mais que você pressiona o Comando Z para voltar, vamos centralizar meu ponto de ancoragem Vou segurar o Comando para que ele se encaixe no centro. Também temos posição com os eixos x e y. Você pode se mover horizontal ou verticalmente. Por fim, temos uma opacidade que vai de 0 a 100%. É bom conhecer o atalho para revisar cada parâmetro para que você possa ver apenas aqueles que deseja animar Vou fechar tudo, selecionar minha camada e pressionar A para ancorar o ponto, P para posicionar, S para escalar, R para rotação e T para opacidade, e T para opacidade, que na verdade Se eu pressionar P para revelar a posição, mas também quiser animar a escala, pressionarei Shift mais o atalho da propriedade que quero ver, que é S. Agora vejo posição e Agora vou duplicar essa forma pressionando o comando D. Podemos ver que agora eu tenho esse Círculo 2 aqui Eu clico e arrasto o Círculo 2 para baixo sabendo que se eu segurar a tecla Shift enquanto arrasto, ele mantém o mesmo eixo, x ou y. Vou selecionar os dois ao mesmo tempo, clicar e arrastá-los aqui Agora eu quero que o Círculo 2 tenha uma cor diferente, então vou mudar os poucos clicando aqui e selecionar uma cor laranja. Também mudarei cor da minha camada para manter tudo organizado. Agora, vamos animar a posição. Vou selecionar os dois ao mesmo tempo e pressionar “P”. Então eu posso ver minhas propriedades de posições. Você deve ter notado que todas as propriedades têm esse pequeno ícone aqui. Isso significa que ele pode ser animado. Com os dois selecionados, vamos clicar nesse ícone e você verá que ele está ficando azul. Agora, temos essa pequena forma de diamante na minha linha do tempo. Isso é um quadro-chave. Agora eu posso ir para a hora em um segundo na minha linha do tempo. Vou selecionar os dois novamente e clicar e arrastar pressionando a tecla Shift, então vou movê-los apenas horizontalmente Agora eu gostaria de alterar minhas configurações de composição. Você está clicando nas configurações de composição? Mude aqui de cinco segundos para um segundo e meio. Em um segundo e 12 quadros, clico em “Ok”, e agora, se eu for ao início e pressionar a barra de espaço, vejo minha animação. Lembre-se de que, depois de criar os primeiros quadros-chave, você não precisa mais clicar no pequeno relógio para criar novos quadros-chave Sempre que você mover seu objeto agora o quadro-chave será criado automaticamente Você também pode criar um novo quadro-chave clicando neste pequeno diamante aqui. Ótimo. Agora eu gostaria de selecionar os dois quadros-chave da minha ferramenta circular e pressionar “F9" Agora vemos que o pequeno diamante muda de forma. Se eu clicar em “Jogar”, vejo que o movimento é diferente. Para mostrar, vou selecionar os dois e quero que você veja esta linha que mostra a trajetória da nossa bola Você vê que há pequenos pontos ao longo da linha. Cada um dos pontos é a posição meu ponto de ancoragem do objeto estará em cada quadro da animação Você pode ver isso navegando pela linha do tempo, pressionando Comando e seta para a direita ou para a esquerda Toda vez que você pressiona, o ponto de ancoragem estará na posição de um desses pontos. Na bola verde sem F9 pressionado, todos os pontos têm a mesma distância entre Diferente da bola laranja, você pode ver que no início os pontos estão mais próximos um do outro, no meio estão distantes e, no final, estão próximos um do outro novamente. O que acabei de fazer, adicionei facilidade à minha animação, acelerar e diminuir a velocidade. Agora, a bola laranja começará baixa, ganhará velocidade e diminuirá novamente no final até parar. A bola verde tem um movimento linear que não existe na natureza, a menos que seja o robô, nada mais pode se mover assim. É bom dizer que as duas animações têm o mesmo tempo Ambos têm um segundo de duração, mas o espaçamento é diferente. O espaço é representado pela distância entre os pequenos pontos. Na próxima aula, falaremos sobre o editor gráfico. Mas, por enquanto, eu gostaria de mostrar a vocês como está o gráfico no momento. Se eu clicar aqui, abrirei meu editor gráfico. Você não pode ver nada porque eu não selecionei minha animação. Se eu selecionar Posição, vejo o gráfico de barras laranja. Se eu selecionar este, você verá o gráfico de barras verdes, que é muito linear. Esse é o gráfico de velocidade. Também temos o gráfico de valores, mas isso é algo sobre o qual falar na próxima aula. Gente, agora vamos entender melhor como esses gráficos funcionam e como manipulá-los para controlar o espaçamento da nossa animação 6. O editor gráfico: Já vimos como criar quadros-chave, mas usar o editor gráfico é o trabalho real de um animador Você quase sempre editará 99% das vezes o editor gráfico de suas animações. Pressionar F9 quase nunca é bom o suficiente. Deixe-me explicar isso. Vamos falar sobre os gráficos. Como você viu, eu tenho que clicar aqui para revelar o gráfico e depois selecionar a animação que eu quero exibir. Este é o gráfico de velocidade da animação da posição do círculo laranja. O gráfico de velocidade mostra a mudança de velocidade em todo o tempo. No eixo y, vejo a velocidade em pixels por segundo O eixo x é o tempo, é claro. Então é possível ver que no começo, minha velocidade é zero, depois aumenta e volta a zero no final. Por outro lado, se eu clicar no círculo verde, a velocidade é linear, nunca muda. Então, de repente, os dois começam a se mover e param repentinamente, sendo um movimento muito antinatural Você pode comparar os dois. Agora, vamos nos concentrar no círculo laranja. Se eu selecionar esse primeiro ponto, que é o primeiro quadro-chave como esse, essas alças aparecerão e me ajudarão a modificar a curva Então, vamos clicar e puxar. Agora vemos que o pico da minha velocidade aumenta ainda mais se eu puxar o outro lado também. Agora, a bola começa, o movimento é mais baixo, acelera até uma velocidade maior e depois desacelera novamente, está parando suavemente Veja como a bola laranja tem um movimento melhor agora, muito mais natural Agora, adicionarei o padrão fácil à bola verde pressionando F9, para que possamos comparar Agora você vê a bola se movendo com o F9 dianteiro pressionado e compara com a laranja que eu adiciono à curva Pessoalmente, sempre puxo essas alças de uma forma ou de outra para todas as minhas animações O padrão fácil para mim é um pouco robótico. Agora, vamos selecionar o círculo laranja e eu mostrarei o outro gráfico do After Effects. Vou clicar nesse botão e selecionar a opção. Gráfico de valor agregado. Esse é apenas um gráfico diferente que exibe o mesmo movimento que o outro gráfico mostra. Mas, nesse caso, podemos notar que temos duas linhas diferentes, uma verde e uma vermelha. Isso ocorre porque esse gráfico mostra as dimensões x e y separadamente. A linha vermelha é x, horizontal, e a verde é y, vertical. Como essa bola não se move verticalmente, a linha verde é uma reta Somente a linha vermelha altera o valor. Mas tudo bem, o que esse gráfico realmente mostra. Se eu pressionar Command ou Control R, revisarei essas regras aqui no meu quadro de arte. Aqui eu posso ver os valores de zero no canto superior esquerdo até o último pixel da minha composição no lado oposto. O mesmo acontece no eixo y. Esses são os valores aos quais esse gráfico se refere. Isso significa que cada pixel da minha prancheta tem um valor diferente de x e y. É isso que o gráfico de valores exibe. A variação da posição de cada eixo. Podemos dizer que quando a linha está na horizontal, o valor não muda. Quanto mais inclinada a linha, mais rápido os valores mudam Então, quanto mais rápido meu objeto está se movendo. Então, olhando para essa linha, podemos ver que o movimento começa lentamente, ganha velocidade e para suavemente. Assim como vimos no outro gráfico. O diferente vem agora. Se eu tentar selecionar o quadro-chave como fiz no gráfico de velocidade, não vejo nenhuma dessas alças Para ver, então eu tenho que separar as dimensões da minha posição. Para fazer isso, eu me posiciono, com o botão direito do mouse e vou para dimensões separadas Agora eu tenho dois parâmetros, posição x e posição y. Vou desligar a posição y, pois não estamos animando verticalmente Acabei de clicar no pequeno relógio. Agora eu seleciono os dois quadros-chave da posição x, pressiono F9 para ter a facilidade padrão Agora vejo que a curva agora é semelhante à de antes, mas agora posso ver e editar minhas alças. Eu realmente recomendo que você agora brinque com a curva e observe o que acontece em sua animação. Por exemplo, se eu arrastar essa alça para baixo assim , o que acontece? A bola laranja vai parar repentinamente, como se estivesse colidindo com uma parede. E se essa alça cair? Então a bola volta antes de seguir em frente. Isso porque a linha passa por valores na direção oposta ao movimento. Então é bom para você ver o que acontece na animação. Tentando entender o porquê com base no gráfico. Apenas divirta-se, brinque e você aprenderá muito. Saber usar bem o editor gráfico é o que torna um bom animador Com o tempo, também entenderemos qual gráfico é melhor para cada situação Quando se trata de bolas quicando, usaremos o gráfico de valores porque nos concentraremos no eixo y. Normalmente, faz mais sentido usar o gráfico de valores quando precisamos separar as dimensões. Na próxima aula, finalmente animaremos nossa bola quicando 7. Animando a bola de salto: Agora você já conhece as ferramentas que vamos usar para animar nossa bola quicando Como você sabe que a bola ganhará velocidade ao cair e perderá ao subir, precisaremos descobrir como será esse gráfico. O melhor gráfico a ser usado para isso é o gráfico de valores, porque vamos separar as dimensões, pois nos concentraremos apenas no eixo y. Vou criar uma nova composição, vamos chamá-la de saltar de 1920 por 1080, 24 quadros por segundo e duração de 2 O fundo cinza está bem. Nova composição criada, agora vamos fazer um círculo. Vou selecionar a cor antes de criá-la, clicar e arrastar, segurar a tecla Shift para manter as proporções, centralizarei a bola usando a aba alinhada no lado direito, vamos chamá-la de bola 1 e mudar a cor da camada Agora vou criar um retângulo preto para ser o piso da minha animação Agora eu tenho que bloquear esse retângulo para evitar clicar nele por engano Mas primeiro, vamos dar um nome, pinte a camada de verde escuro e eu clicarei nesse pequeno quadrado de cadeado, para que eu não possa mais selecionar e mover o chão Vamos arrastar minha bola pelo chão e eu pressionarei “P” para revelar meu parâmetro de posição. Clique com o botão direito do mouse, separe as dimensões. Agora, criaremos um quadro-chave somente para o eixo y. Vamos colocar a bola na posição inicial, segure a alavanca para não descentralizá-la Agora eu quero que essa bola pegue 12 quadros para atingir o chão, então, no quadro 12, eu posiciono minha agulha, eu a arrasto assim , segurando a tecla Shift para que isso não aconteça até que a bola toque o chão Agora, quando a bola sobe, ela não alcança a mesma posição porque perdeu parte de sua energia. Se eu tirei 12 quadros para cair, quero tirar, vamos ver, 8 quadros para subir, então vou até o quadro 20, clicar e arrastar, acho que essa altura é boa. Agora, a bola precisou de oito quadros para subir , serão necessários os mesmos oito quadros para descer. Se quiser, você pode pressionar a seta lateral de comando ou controle para escrever oito vezes o quadro 28. Então eu arrasto minha bola para o chão, o que eu posso fazer tão bem é, como eu sei, que esse quadro-chave aqui é onde a bola está tocando o Posso simplesmente copiar o Comando C e o Comando V e terei a bola na mesma posição. Agora, eu quero que a bola leve seis quadros para subir, indo um pouco mais baixo do que antes e seis quadros à frente, eu arrastaria ou, de forma mais eficiente, copiarei e colarei o quadro-chave em que a bola está no chão Agora eu quero pegar apenas três quadros, pois salto aumenta um pouco mais ou menos Três quadros à frente, copie e cole os quadros-chave do chão Se eu clicar em “Jogar” pressionando a barra de espaço, a bola está se movendo. Mas ainda é um kit muito robótico e irreal, vamos dar uma olhada em nosso gráfico de valores Podemos ver aqui que a posição está mudando de uma forma muito linear, não há aceleração. Vamos clicar e arrastar assim para selecionar todos os quadros-chave no meu gráfico e pressionarei F9 para usar o padrão é Ao clicar em play, posso ver que a bola está se movendo como uma mola, não é exatamente o que eu quero Vamos pensar que, se soubermos a bola ganhará velocidade ao cair e perderá ao subir e já soubermos que, no gráfico de valores, ela está mais inclinada a linha, quanto mais rápido a bola se move Quero começar devagar, tendo a curva mais horizontal no início , mas neste ponto eu estarei a velocidade mais alta, então ela deve estar muito inclinada aqui Agora, a curva está ficando cada vez mais íngreme desde o início até esse ponto A partir desse ponto, a bola não funciona, ela diminuiu a velocidade. Ele muda de direção muito drasticamente por causa do impacto Neste ponto, a curva é horizontal, o que significa que a bola parou. Se eu clicar em “Jogar”, vejo agora que o primeiro salto parece muito bom Seguindo a mesma lógica, vou adicioná-la às curvas do resto da animação Agora posso clicar em “Jogar” e minha bola quicando está funcionando Agora estou feliz com isso. É interessante que, ao separar as dimensões, agora eu possa animar o eixo x sem alterar nada na minha animação vertical Se eu criar um quadro-chave aqui no início da minha posição x, posso alterar o número e, no final, vou para a direita Vou pressionar F9, o último quadro-chave, então aqui está minha bola saltando e se movendo na Eu já tenho os arcos do movimento. Agora vamos desenhar o personagem e eu vou provar que a bola quicando tem tudo a ver com a animação do personagem 8. Desenho de personagens: O design de personagens é um grande tópico, mas nesta aula, eu gostaria de propor uma abordagem simples e divertida para criar personagens. A ideia é combinar formas simples para criar algo interessante. Como não temos nenhum resumo em nossos clientes, podemos criar o personagem que queremos. Podemos até mesmo deixar que a forma nos diga qual deve ser o personagem. Deixe-me mostrar o que quero dizer com isso. Bem-vindo ao Adobe Photoshop. Vamos nomear o arquivo aqui Character Sketches. O tamanho será esse, 1920 por 1080. Eu gostaria de ter certeza de que a prancheta está ativada, a cor deve ser RGB e vamos clicar em “Criar” Agora, vamos selecionar a ferramenta de pincel. Eu posso escolher aqui qual pincel eu quero e o tamanho aqui em cima. O tamanho será 12, dureza, 100. Vamos mudar a cor. Eu sempre gosto de desenhar usando um azul bem claro como esse Agora estamos livres para desenhar. Também podemos usar o apagador, atalho E. Para excluir tudo isso, pressionarei Command ou Ctrl A para selecionar toda a tela, backspace para excluir e Command ou Ctrl Agora vamos pressionar B para voltar ao pincel e eu gosto de desenhar alguns círculos assim. Eu desenharia um segundo aqui. A ideia é que seja muito esboçado, sem linhas perfeitas. Ao observar essa primeira combinação de círculos, já podemos começar a imaginar um personagem a partir dela. Imagine se tivéssemos pernas como essas, braços. Essa pode ser a forma do nosso primeiro personagem. Posteriormente, poderíamos adicionar detalhes de uma forma muito rápida. Agora é o garoto usando shorts. Este é um exemplo do que eu gostaria que fizéssemos. Vamos brincar com diferentes escalas de círculos, combiná-las e fazer com que a forma nos diga quem poderiam ser os personagens. Dê uma olhada. Como você diria que o contraste é muito importante para criar silhuetas interessantes para nossos personagens, então é bom combinar esses círculos pequenos e grandes Por exemplo, se eu desenhar um personagem com os dois círculos mais ou menos do mesmo tamanho, é muito menos interessante do que quando temos tamanhos muito contrastantes como este Pode ser um cara com cabelo frio. Eu diria que ele é muito melhor do que este. Neste, eu tenho algumas formas de elipses que também podem ser usadas Neste, usei três círculos em vez de dois. Pode se tornar um cara muito forte. Não, só precisamos jogar e ver o que encontramos. Mantendo o desenho muito simples, precisamos apenas criar variações de forma , contraste e posição. Como minha prancheta está cheia, deixe-me pressionar Command ou Ctrl menos para diminuir Eu gostaria de ter outra prancheta. Para fazer isso, seleciono a ferramenta de movimentação, o atalho V, clico na prancheta 1 e clico neste sinal de adição aqui Agora eu posso ter uma segunda prancheta. Vemos que aqui em nossas guias de camadas, criei uma nova prancheta de grupo 2 Mas para desenhar qualquer coisa, preciso criar uma nova camada clicando nesse pequeno ícone aqui. Agora, com a camada selecionada, eu posso desenhar, pressiono B para o pincel, posiciono a tela clicando e arrastando segurando a barra de espaço e vamos continuar Eu também poderia usar essa ferramenta Lasso para selecionar e posicionar minhas formas com a cabeça Eu seleciono assim e uso minha ferramenta de movimentação para mover a seleção. Comando ou Ctrl D, eu desmarco. Também posso selecionar uma peça específica. Selecionando a ferramenta de movimentação e pressionando Command T para transformação, posso mudar as posições. Quando tenho muitas formas, posso começar a olhar para elas e ver o que cada uma pode me trazer. Vamos então para a primeira prancheta. Crie uma nova camada na parte superior. Mude meu pincel para preto e você começa a desenhar sobre minhas formas favoritas. Eu tenho um cara forte. Isso poderia ser um ET. A mesma coisa, esse outro lado, nova camada criada. Este pode ser um chato. Na verdade, estou apenas me divertindo. É bom não ter um cliente para que eu possa fazer qualquer coisa. Esse, por exemplo, é um camponês com uma barriga grande Agora eu posso esconder as camadas azuis e dar uma olhada. Aqui estão elas. Agora, para fazer um desenho adequado do meu cara favorito, vou criar uma nova prancheta, criar uma nova camada aqui Acho que esse aqui é o meu favorito porque ele tem barriga grande e acho que vai ficar muito engraçado na animação Deixe-me verificar se essa camada está selecionada. Copie, Command C e coloque nessa outra camada o Comando V. Vamos pressionar o Comando T para que eu possa escalá-lo um pouco. Agora, aqui está minha referência principal. Vamos criar mais uma camada. Selecione o azul claro novamente e você o desenha novamente, de forma muito grosseira. Agora é hora de começar a finalização. Sempre criando novas camadas para isso. Agora vou fazer um desenho mais polido. É importante prestar atenção à quantidade de elementos e detalhes que o personagem tem. cada elemento, aumentaremos o tempo da fase de limpeza Vamos reduzir a opacidade do desenho aqui. Crie uma nova camada. Aqui eu tenho uma pessoa da biblioteca de cores que estou usando para selecionar as cores do personagem. Quero selecionar um pincel diferente para dar um pouco de textura. Gosto muito desses pincéis de mídia seca. Vou escolher este, mudar o tamanho para 15. Vamos garantir que essa camada de linha preta com baixa opacidade esteja acima da camada que vou pintar Agora eu posso pintar e ainda ver as linhas. Eu sempre gosto de colocar cores diferentes em camadas diferentes, caso eu queira mudar algumas cores. Então, toda vez que uso uma nova cor, adiciono uma nova camada. Nomear as camadas também é uma boa ideia. Ao clicar com o botão direito do mouse, você pode alterar facilmente o tamanho do pincel caso queira preencher espaços maiores Gosto muito de deixar algumas imperfeições no meu desenho. Essa é realmente a beleza disso. Agora, vou criar mais uma camada para adicionar detalhes. Uma boa dica também é pressionar R para girar a tela. Isso lhe dará uma posição melhor para desenhar. Aqui está, nosso personagem final. Agora, vamos salvar as imagens como referência para a animação. Vamos mudar a opacidade do desenho da linha preta. Arraste-o aqui. Este, eu vou deletar. esse outro, azul, Quero guardar esse outro, azul, porque me permitirá ver as formas básicas do personagem. Esta é a imagem que vou salvar agora. Vou para Arquivo, Exportar, Exportar como, certificar-me de ter selecionado apenas a prancheta que quero exportar Eu não preciso de nenhuma transparência. Exporte, selecione a pasta e nomeie-a como Referência de Caractere. É isso mesmo. Bem, parece que já temos um personagem com quem jogar. Agora vamos pegar suas formas e fazer a bola quicando com elas Então, vamos ao Adobe After Effects. 9. Referência de bola saltando parte 1: Agora estamos levando o design do nosso personagem para o After Effects e recriando suas formas principais lá Vamos ver como fazemos isso. Aqui estamos novamente no After Effects. Vamos criar uma nova composição. Dê um nome, viva o tamanho 1.920 por 1.080. Certifique-se de que a taxa de quadros seja 24. A duração que eu gostaria que fosse de um segundo e um quadro. Um segundo será a duração de um ciclo da corrida. É por isso que essa é a duração da nossa composição. Importaremos a imagem que criamos como referência. Posso clicar com o botão direito do mouse no arquivo “Importar”. Eu encontro a referência do personagem da imagem. Eu posso arrastá-lo para o meu quadro de arte. Vamos criar algumas formas básicas com seu corpo. Deixe-me centralizar esse desenho aproximado azul aqui. Vou bloquear essa camada clicando neste cadeado, para não movê-la por acidente Em vez de elipses para a camada de forma, selecionarei a ferramenta de retângulo arredondado Eu posso desenhar e, enquanto ainda estou segurando o mouse, posso pressionar para cima algumas vezes e vou mudar os cantos do retângulo Agora está arredondado. Isso é o que eu queria. Vamos mudar a cor agora para algo assim. Vou mudar o modo aqui para multiplicar. Eu posso ver através da minha forma. É claro que não precisa ser perfeito. É só uma referência. Vamos nos certificar de que clicamos fora da forma, então eu a desmarcarei Vamos desenhar elipses. Desta vez, vou mudar a cor primeiro. Vou desenhar a barriga, segurar o Shift, então vai ser um círculo perfeito Finalmente, farei o mesmo para desenhar a cabeça. Essas são as três formas que estamos animando aqui, conforme referenciado para o ciclo de execução Vamos criar uma referência para o piso que é realmente importante, então vou pressionar o Comando R para revisar essas regras aqui. Em seguida, posso clicar e arrastar as regras para abrir uma diretriz. Posso ocultar minha imagem de referência deixando apenas minhas camadas de forma na tela. Também adicionarei uma cor de fundo. Vamos selecionar o retângulo, deixá-lo branco e pressionar “Ok”. Se eu clicar duas vezes na ferramenta de retângulo aqui, criarei automaticamente um retângulo exatamente do tamanho da minha composição Vamos organizar o nome de todas essas camadas. Eu gostaria de me concentrar primeiro no meu corpo, vamos esconder as outras duas camadas. Pressione “P” para revelar minha posição e separar as dimensões. Vamos animar a posição Y. Vamos arrastar o corpo até aqui. Acho que esse é o ponto mais alto que existe. No quadro 6, estaria no ponto mais baixo. Sempre tendo o piso como referência. Eu copio e colo a posição que eu quero; cada seis quadros para cima e para baixo. Em um segundo, a posição precisa ser a mesma do quadro 0, então o loop funcionará. Isso é o que temos por enquanto. Vou selecionar tudo e pressionar “F9". Vá para meus gráficos, verifique se estou usando o gráfico de valores e edite a curva como vimos na aula anterior Temos a primeira forma animada e já podemos sentir um pouco da cobertura do ciclo de corrida Vamos fazer o mesmo com todas as outras formas. [inaudível], isso é o que temos. Uma dica importante. Quando um personagem se move, nem todas as partes do corpo se movem juntas. Nesse caso, gostaríamos que o movimento da barriga fosse retardado em comparação com o corpo principal Na animação, isso é chamado de acompanhamento quando partes secundárias do corpo, como o cabelo ou a cauda se movem em um tempo diferente do Para fazer isso, selecionarei todos os quadros-chave do corpo clicando na posição e arrastarei dois quadros à frente, criando a sensação de que a campainha está macia e está seguindo o Eu quero fazer o mesmo com a cabeça, que ela não se mova exatamente ao mesmo tempo do corpo, mas em vez de dois, arrastarei os quadros-chave apenas um quadro Podemos assistir e ver o que temos. Depois de assistir, decidi colocar a cabeça um pouco mais alta neste ponto aqui, para que sua forma não se funda completamente com o corpo Depois de editá-lo, posso simplesmente copiar e colar esse quadro-chave na outra parte da animação quando a cabeça estiver no mesmo lugar. Brilh 10. Referência de bola saltando parte 2: É isso aí, nosso movimento básico está feito. Agora eu só quero adicionar menos detalhes, o que também é mais fácil de fazer aqui nos efeitos posteriores do que na parte quadro a quadro do projeto. Deixe-me visualizar novamente minha referência porque eu gostaria de criar uma forma para ser o chapéu Vou criar um retângulo como esse. Vamos mudar a cor para azul. Com o retângulo selecionado, desenharei outro retângulo como esse Aqui está a referência para o meu chapéu. Vamos clicar na camada e pressionar R para revisar a rotação. Vou girá-lo um pouco e posicioná-lo sobre minha cabeça de referência Lembre-se de nomear sua camada e torná-la amarela. Agora eu quero colocar meu chapéu na minha cabeça para que , quando a cabeça se move, o chapéu fique com ele. Vou clicar nesse pequeno ícone em seus pares, vinculá-lo e arrastá-lo até a camada principal. É isso mesmo. Vou esconder minha referência novamente. Quando eu clico em play, você pode ver que o chapéu segue a cabeça. Agora preciso adicionar um pouco de movimento no próprio chapéu. Vamos pressionar P para posicionar e adicionar um quadro-chave em que a cabeça esteja no ponto mais alto Agora eu pressiono Shift R, então eu também posso ver a rotação. Neste ponto, eu gosto do chapéu um pouco mais alto. Aqui no ponto mais baixo da cabeça, eu movia o chapéu desse jeito e o girava um pouco assim Agora, vamos copiar e colar todos esses quadros-chave. Para completar o loop, vou até este momento, copiar e colar os quadros-chave iniciais verdadeiros e arrastá-los um quadro à frente Essa é a animação que temos agora. Agora pressiono F9 com todo o quadro-chave do chapéu selecionado, abro minhas curvas e, no gráfico de valores, gostaria que a curva de rotação fosse semelhante à curva da bola saltitante que Na curva de posição, como não separamos as dimensões, escolherei usar o gráfico de velocidade em vez do gráfico de valores e fazer algo assim. Agora eu quero fazer a mesma coisa que fiz antes, colocar um quadro dos parâmetros que eu animei. Vamos selecionar todos os quadros-chave de rotação e arrastá-los um quadro à frente Isso torna a animação um pouco mais fluida. Como essa diretriz azul não será renderizada, preciso desenhar uma referência para ser meu piso Desta vez, selecionarei a ferramenta de caneta, atalho g. Posso alterar aqui a largura do traçado Vamos fazer com que sejam três pixels. A cor do traço pode ser preta. Aqui, clicando em Preencher, posso remover qualquer preenchimento. Agora eu clico aqui, mantenho a tecla Shift pressionada e clico aqui. No outro lado, selecionarei os dois pontos da linha e posicionarei assim sobre minha guia. Agora temos a hora do amanhecer da animação e ela parece muito boa O único problema aqui é que fizemos tudo em 24 quadros por segundo. Mas como faremos as coisas quadro a quadro na próxima etapa, é muito aconselhável fazer a animação em dois, o que significa um desenho a cada dois quadros Nesse caso, teremos 12 quadros por segundo. Fará mais sentido quando usarmos o Adobe Animate. Mas, por enquanto, só preciso que você saiba que ter 12 quadros por segundo em vez de 24 significa cortar metade da quantidade de trabalho que teremos. Como preciso que essa animação tenha na verdade, 12 quadros por segundo, adicionarei um efeito para alterar a taxa de quadros de toda a minha animação. Para fazer isso, clique com o botão direito do mouse em algum lugar aqui e selecione Nova camada de ajuste. camada de ajuste não tem nenhuma forma, mas qualquer efeito que você adicionar a ela afetará todas as camadas abaixo dela. Agora, vou adicionar um efeito chamado posterizar o tempo. Para fazer isso, vou até minha aba de efeitos e predefinições, tipo de hora de posterização. Eu posso encontrá-lo aqui e arrastá-lo para minha camada de ajuste. Esse efeito me permite alterar a taxa de quadros da animação. Aqui onde eu tenho 24, vou mudar agora para 12. Agora, ao clicar em Reproduzir, você pode ver que a animação se move de forma um pouco diferente. Isso porque agora temos menos quadros por segundo. Agora é hora de exportar o vídeo. Vamos para Arquivo, exportação e adição ao Adobe Media Encoder Queue Ele abrirá o Adobe Media Encoder. Vamos clicar aqui para ver minhas configurações. Certifique-se de selecionar H264, que gerará um vídeo MP4 Todo o resto deve ficar bem. Aqui, eu escolho onde quero que o vídeo seja salvo. Pressione Play e pronto. 11. Apresentando o Adobe Animate: Chegou a hora do pessoal do Adobe Animate. Vamos clicar em criar novo para criar um novo projeto. Aqui eu tenho o tamanho do meu Canvas 1920 por 1080, taxa de quadros 24 Clique em criar. Vou te dar uma visão geral super rápida desse software antes de animarmos. Aqui estamos. Primeiro comando ou controle mais e menos para aumentar e diminuir o zoom Segurando a barra de espaço, posso clicar, arrastar e mover a prancheta dessa forma. Aqui temos o pincel para desenhar. Lembre-se de que tudo o que desenharmos aqui no Adobe Animate será um vetor Aqui eu posso mudar o tamanho do pincel. A suavização também é importante. O que afeta as linhas que você desenha, fazendo com que elas sejam movidas. Claro, eu posso mudar a cor do pincel assim. É interessante notar a diferença entre o pincel que acabei de usar e o lápis e o que está abaixo do pincel. Quando desenhamos com o lápis, você vê que ele tem a cor do traçado, não a cor de preenchimento. Obviamente, eu poderia clicar aqui e mudar a cor se eu quiser. Aqui também, eu posso alterar o tamanho do traço. Deixe-me deletar tudo para mostrar a diferença entre o pincel e o lápis. Aqui, eu desenho com o lápis, aqui eu desenho com o pincel. Se eu selecionar a ferramenta de seleção branca clicando, segurando essa ferramenta preta aqui e selecionando também a subseleção branca, discurso ou seleciona o ponto do desenho, não a não a Se eu clicar na linha criada pela ferramenta de lápis, posso controlar cada ponto individualmente. O pincel é diferente porque desenha uma forma, não um traçado, ele adiciona muitos pontos e precisa ser possível ter algum controle sobre o desenho. É por isso que eu nunca uso o pincel quando estou desenhando minhas animações quadro a quadro, estou desenhando minhas animações quadro a quadro, eu só uso o lápis. Eu também tenho a borracha para apagar. Também posso desenhar formas como faço no After Effects. Basta clicar e segurar e selecionar a forma que eu quero desenhar. Quando eu o crio, posso clicar em um traçado específico como esse para mudar sua cor. Eu posso mudar a cor de preenchimento. Se eu selecionar tudo assim, mudo todos os traços de uma vez Vamos selecionar e clicar em excluir ou retroceder para excluir tudo Agora falaremos sobre a linha do tempo animada. Esse pequeno quadrado que estou vendo aqui é um quadro da minha animação. Como você pode ver agora, que eu apaguei tudo o que desenhei antes, esse pequeno círculo está vazio e cinza. Se eu desenhar alguma coisa, um pequeno círculo fica preto. Agora, você aprenderá as três chaves mais importantes para trabalhar na linha do tempo do Adobe Animate, F5, F6 e F7 F5 estende o quadro que você selecionou. Se eu pressionar várias vezes, é isso que acontece. Eu estendo o desenho que fiz ao longo da linha do tempo, tornando-o menos longo na minha animação Se eu colocar minha agulha neste ponto e pressionar F6, criarei um novo quadro-chave, mas o desenho permanecerá o mesmo Agora, se eu modificar meu desenho editando as curvas, posso fazer isso pressionando V para ativar minha seleção para clicar e mover as linhas dessa forma Eu posso ver que do quadro anterior para o próximo, o desenho muda como se estivesse animado. Finalmente, o F7 que também cria um novo quadro-chave, mas um novo e M2,1 Gosto de usar o ponto de atalho e a vírgula para navegar para frente e para trás na linha do É muito útil quando estamos animando quadro a quadro. Para excluir a moldura que criei, posso selecioná-la clicando, arrastando e pressionando Shift F5 Eu só guardei os dois primeiros quadros. Agora, vou clicar na moldura. O que me faz selecionar o desenho inteiro e eu pressiono backspace ou delete Agora eu tenho uma tela vazia novamente. Esse é o básico do Adobe Animate. Agora vamos importar os vídeos e as referências que temos e instalar a animação quadro a quadro 12. Animando quadro por quadro: Agora vamos importar o vídeo de referência e falar sobre ciclos de execução. Agora vamos nos tornar sete metros. Primeiro, vamos importar nossas referências. Vá para Arquivo, Importar, importe o vídeo, escolha esta terceira opção aqui, clique em Navegador, selecione meu vídeo de referência de animação, próximo, próximo, finalizar. Aqui está. Vou clicar com o botão direito do mouse nas propriedades da minha camada Aqui eu posso renomear a camada, referência de vídeo. Lembre-se de não usar nenhum espaço porque o animate não suporta isso Vou reduzir a opacidade para 25. Vamos bloquear a camada. Eu não clico e o movo. Agora, vou clicar aqui para criar uma nova camada para importar a referência do design. Vamos para arquivar, importar, importante para o estágio, e vamos encontrar e selecionar nossa adorável referência. Vou arrastá-lo para o lado. Agora, também quero reduzir a opacidade da mesma forma que fiz antes e dar um nome Eu gostaria de alinhar seus pés no chão. Agora, eu também vou desenhar um piso sobre este. Vamos criar uma nova camada, clicar duas vezes para nomeá-la e, com essa linha aqui, selecionando a cor preta para o traçado, eu simplesmente clico e arrasto para desenhar Se eu segurar Shift , será uma linha reta. Em seguida, pressionarei V para ativar minha ferramenta de seleção. Clique e arraste para reposicioná-lo da maneira que eu quiser. Quero bloquear todas essas formas para não movê-las. Agora, vamos ver como é tradicionalmente o ciclo de corrida. Lembre-se de que nossa animação será muito caricatural e exagerada Bem, aqui temos que pensar na pose mais baixa e mais alta do personagem. Temos a pose mais baixa, que é quando o personagem atinge o chão, e a pose mais alta é quando ele está no ar sem os pés no chão. Outra pose importante é logo antes do personagem cair no chão e quando ele se alonga para obter impulso Vamos começar a desenhar o corpo do personagem porque já temos uma referência clara para isso. Vou criar uma camada e chamá-la de corpo. Agora, quero criar minha moldura em branco aqui na minha linha do tempo enquanto estamos animando em dois Quero fazer um desenho para cada um desses espaços aqui, 1, 2 e aqui. Pressionando F6, eu gostaria de criar meu novo quadro-chave. Vamos fazer isso até o final do cronograma. Este último quadro-chave aqui terá o mesmo desenho do primeiro quadro Dessa forma, completamos o loop. Vamos para o primeiro quadro-chave, selecionar meu lápis, escolher verde como cor do traçado e o tamanho do traçado, dois pontos Agora vamos desenhar o corpo sobre a referência. Fique de olho na minha referência de design aqui. Vou deixar a barba para mais tarde. É basicamente assim que meu corpo é. Agora, farei o mesmo com todas as molduras que criei. Pressionar vírgula e ponto é muito útil porque posso folhear rapidamente meus desenhos e ver se eles são consistentes Você não precisa se preocupar em alongar algumas partes do corpo, como no pescoço, aqui, isso tornará a animação ainda mais agradável Porque no ciclo de corrida, o corpo salta duas vezes. Neste ponto, podemos simplesmente copiar as mesmas molduras que desenhamos antes e colá-las à frente. Confira, eu posso selecionar todas essas molduras, segurar e arrastá-las para frente assim. Se eu ativar esse botão de loop aqui, verei essa área azul aqui que determina qual parte vamos assistir quando reproduzirmos a animação Eu posso ver que o loop funciona. Se eu esconder minha referência, isso é o que eu tenho. Agora, vamos pensar nas pernas. Vou criar uma nova camada para isso chamada pernas. Criaremos os quadros-chave como eu fiz antes. Agora, quero desenhar a posição que considero mais importante. A posição em que o personagem está no ponto mais alto logo antes de tocar o chão e no ponto mais baixo do movimento É assim que a perna ficaria no ponto mais alto da trajetória corporal Aqui, quando estiver no ponto mais baixo, a perna estará se cruzando. Para me ajudar, vou ligar minha casca de cebola. A casca de cebola é essa ferramenta aqui que nos permite ver algumas molduras antes e depois da moldura em que estamos desenhando. Isso ajuda muito quando você está animando para determinar quantos quadros à minha frente e atrás de mim querem ver Use essas linhas azuis e verdes aqui. Precisamos prestar atenção em qual perna está por trás. Para identificar isso, vou fazer uma sombra nesta perna aqui. Nesse movimento, essa perna estará aqui, e essa outra perna, assim. Agora, vou desenhar a moldura antes desta, logo antes da perna tocar o chão. É bom ter uma perna muito esticada. Agora que tenho duas molduras entre essa vazia, a casca da cebola vai me ajudar muito a desenhar a perna entre elas. Eu sempre gosto de ter meu joelho como referência. Não quero que os joelhos fiquem no meio. Nesse caso, eu o aproximaria um pouco mais do anterior à medida que o movimento ganhasse velocidade. Eu posso usar o mesmo princípio para a outra perna. Nesse caso, posso até desenhar sobre o anterior e apenas mover e girar assim Se eu assistir apenas essa parte da animação, posso ver que o movimento da perna está funcionando bem. Agora, neste quadro, a perna de fundo está cruzando a outra, então vamos desenhá-la assim. A barriga está escondendo parte da perna, mas tudo bem. Aqui está o momento em que o corpo se estica, então eu quero uma perna esticada Lembre-se de prestar atenção em qual perna está em primeiro plano. A partir desse momento, a referência do vídeo não é mais muito importante. Agora, como sei que esse é o ponto mais alto da trajetória novamente, sei que minha perna estará em uma posição semelhante à que eu tinha antes, mas invertida A perna da frente não é a perna do fundo e vice-versa. Algo parecido com isso. Aqui, novamente, terei praticamente a mesma pose, mas temos pernas invertidas assim Na moldura logo antes desta, como vimos antes, terei uma perna bem esticada antes de cair no chão Novamente aqui, posso aproveitar depois ter essas duas molduras para desenhar a do meio, sempre me certificando de que ela esteja um pouco mais próxima da moldura anterior. Agora, aqui eu tenho as pernas se cruzando novamente. A perna de fundo está sendo coberta. Para desenhar o único quadro que está faltando, eu quero copiar o primeiro quadro, Controle ou Comando C, e colá-lo no último, Control ou Command Shift V para colá-lo na mesma posição que tínhamos antes. Agora eu posso vê-lo usando a casca da cebola e usá-lo como referência para desenhar a moldura que falta. Eu posso até imaginar a trajetória em arco da perna para desenhar a perna entre elas Agora, clique em Reproduzir e veja. Isso está parecendo bom. Agora posso corrigir alguns detalhes que gostaria de corrigir. A parte mais difícil acabou. Agora é hora dos braços. Você precisa saber que o braço gira na direção oposta às pernas. perna direita está na parte de trás, o braço direito está na frente e vice-versa. Criando uma nova camada, nomeie-a de braços. Essa é a primeira posição. Vou pressionar F7 aqui, pressionando F6 a cada dois quadros Agora, vou desenhar as posições-chave dos braços quando estão cruzando o corpo e quando estão nos extremos Agora vou preencher as lacunas usando a casca da cebola para me ajudar. Os desenhos que estão chegando ao final da trajetória precisam estar muito próximos um do outro para que possamos ter um movimento suave quando os braços pararem um movimento suave quando os braços Pressionando Play, este é o movimento dos nossos braços. Agora, só nos falta o chapéu e alguns outros detalhes. Vamos criar novamente uma nova camada, nomeá-la com detalhes e criar as teclas a cada dois quadros. Lembre-se de que posso girar minha tela clicando neste botão aqui. Como o formato da cabeça não mudará, em vez de desenhá-la várias vezes, vou apenas pressionar F6 para criar novas molduras, mas mantendo o desenho que tenho para que eu possa simplesmente reposicioná-lo e girá-lo em Está pronto. Temos nossa animação. Algumas pessoas gostariam de desenhar uma linha mais refinada sobre esses desenhos antes de levá-los ao Photoshop para a limpeza Mas eu prefiro ir direto para o Photoshop para economizar algumas vezes. Lá, poderemos usar qualquer pincel ou textura que quisermos. É isso aí, pessoal. A animação está pronta, mas é um esboço por enquanto Agora temos que redesenhar cada quadro no Adobe Photoshop. Vamos exportar nosso vídeo. Agora, vamos renderizar essa animação. Eu excluiria todos esses últimos quadros. Eles não fazem parte do circuito principal. Vou selecionar todos eles e pressionar Shift F5. Agora, preciso selecionar minha camada de referência, o vídeo e a referência de design. Clique com o botão direito do mouse e selecione Guia para que elas não sejam renderizadas Agora vamos clicar em Arquivo, Exportar, Exportar mídia de vídeo, aqui eu seleciono onde quero que a animação seja salva. Certifique-se de que essa caixa esteja marcada. Clique em Exportar e está pronto 13. Animação no Adobe Photoshop: Por fim, falaremos sobre a animação do Adobe Photoshop. Photoshop é uma boa ferramenta porque nos permite usar qualquer pincel ou textura em nossa animação, diferente do Adobe Animate, que faz apenas vetores Vamos fazer uma visão geral rápida de como é animar usando o Photoshop Vou criar um documento aqui chamado Animation Clean Up. 1920 por 1080 é o tamanho, mas desta vez certifique-se de que a prancheta não esteja ativada Precisamos que o modo de cor seja RGB e clique em “Criar”. Primeiro, vou ao Windows para abrir minha linha do tempo. Agora vou ter minha linha do tempo aqui embaixo. Tudo o que preciso fazer é clicar em “Criar linha do tempo do vídeo”. Agora você pode ver que eu tenho minha camada zero aqui e minha camada zero está na linha do tempo também. Aqui está o zoom da minha linha do tempo e aqui eu posso ver meus segundos em quadros muito semelhantes aos que vejo depois dos efeitos Mas antes de fazer qualquer coisa, preciso configurar a taxa de quadros que gostaria de usar, então clicarei neste menu aqui e clicarei em “Definir taxa de quadros do cronograma”, e aqui posso escolher a taxa de quadros que quero usar, que é 24 Agora vou posicionar minhas agulhas em algum ponto da minha linha do tempo e criaremos uma nova camada, para que você possa ver o que acontece Clique aqui para criar uma camada. Agora eu tenho uma nova camada que foi criada no ponto em que minha agulha estava. Isso é algo importante para você saber. Agora eu posso clicar e arrastá-lo até o início da linha do tempo. Quero mostrar agora como a ferramenta de tesoura funciona aqui. Se eu clicar, cortarei a camada selecionada no ponto em que minha agulha está. No painel de camadas, como você pode ver, agora tenho uma cópia da Camada 1, então esta aqui é a Camada 1 e esta é a cópia da Camada 1. Agora, quero criar mais camadas cortando-as com essa tesoura Só preciso selecionar a camada, posicionar minha agulha e clicar nessa tesoura Dessa forma, continuo criando novas camadas, como você pode ver aqui. A parte legal agora é que, se eu clicar e arrastar essa camada para baixo para ficar na mesma linha da outra, eu crio automaticamente um grupo de vídeo aqui no meu painel de camadas Isso significa que quando eu tenho as camadas na mesma linha da minha linha do tempo, elas estão agrupadas aqui Se eu fizer o mesmo com o outro, ele se junta ao grupo Isso torna o trabalho aqui no Photoshop mais organizado. Para desenhar uma das camadas, preciso selecioná-la na linha do tempo ou na guia da camada, não importa, não importa, e também verificar se minha agulha está sobre ela, caso contrário, não conseguirei desenhar nada Por exemplo, se essa camada estiver selecionada, mas minha agulha estiver aqui, não consigo desenhar como você pode ver. Arrastando minha agulha aqui, agora eu posso desenhar normalmente e, claro, se eu desenhar nesse quadro e arrastar a agulha para o outro, o desenho desaparece porque o próximo quadro está vazio Se eu quiser desenhar aqui, preciso selecionar a camada. Agora eu tenho um desenho de cada quadro e é assim que criamos animações. Lembre-se de que você pode ajustar facilmente a duração das camadas, clicando e arrastando as bordas ou cortando-as como vimos antes e, claro, toda vez que eu corto, crio uma nova Posso cortar quantas vezes quiser para ter quantas camadas eu quiser e, claro, todas elas estarão aqui neste grupo. Dito isso, você já pode ver que, ao alterar a ordem das minhas camadas na minha guia de camadas, eu também mudei a ordem na minha linha do tempo e vice-versa. Agora, vamos aumentar o zoom. Eu gostaria que cada camada ocupasse dois quadros na minha linha do tempo, pois nossa animação está disponível, então vou me certificar de ajustá-la corretamente A cada dois quadros, uma nova camada. Agora eu poderia vir e desenhar algo diferente em cada quadro. Posicione a agulha, selecione a moldura e desenhe. Agora eu posso clicar em “Jogar”. Opa, o problema é que minha animação está durando cinco segundos , o que é o padrão Vamos reduzir o tamanho da camada zero. Essa camada zero, aliás, é meu fundo branco. Se eu excluí-lo, você verá que meu plano de fundo agora está transparente. Controle ou comande Z para trazê-lo de volta. Agora, clicando em “Play”, você pode assistir a essa animação maluca e aleatória que eu criei Essa barra aqui também me permite controlar a duração que estou jogando, caso eu queira apenas assistir a uma parte específica da animação. Esse é o básico da linha do tempo do Photoshop, pessoal. Agora estamos mais do que prontos para limpar nossos desenhos. 14. Limpeza: Agora é hora de finalizar cada quadro da nossa animação. Vamos começar. É hora da limpeza. Primeiro, vamos importar a animação aproximada, Arquivo, Colocar vinculado e selecionar o vídeo. Vamos pressionar aqui para confirmar, e agora já posso pressionar a barra de espaço para jogar. Agora, eu também preciso da minha referência de designer aqui, da mesma forma que vou para File, Place Linked e selecionarei a referência. Foi colocado um pouco mais tarde na linha do tempo, porque é onde minha agulha estava Então, vamos pegá-lo até o início, e aqui você o corta e exclui essa outra parte. Eu gostaria que toda a minha referência tivesse a multiplicação como modo de mesclagem Posso selecionar os dois aqui e escolher multiplicar. Vamos mudar minha referência de design. Vou pressionar V para selecionar meu movimento para clicar e arrastá-lo aqui. Este será o look final do meu desenho. Agora, seria útil reduzir a opacidade do meu vídeo, então eu virei aqui para fazer isso Agora, vamos trancá-los. Clique neste pequeno cadeado. Agora, eu não posso movê-los. Minha maneira preferida de trabalhar é criar primeiro todas as molduras vazias, para depois me concentrar apenas nos meus desenhos. Tudo o que preciso fazer é levar minha agulha até o início, criar uma nova camada, clicar aqui. Vou colocar duas molduras à frente e clicar nessa tesoura, então vou cortá-la Arraste-a para baixo até ficar na mesma linha do outro quadro, o que me faz criar automaticamente um novo grupo de vídeo aqui. Vamos nomeá-lo para o corpo. Vou desenhar meu corpo aqui. Agora, quero cortar a camada a cada dois quadros para facilitar. Quero clicar aqui neste menu suspenso e me certificar de ativar as teclas de atalho da linha do tempo Dessa forma, se eu pressionar as teclas de seta, posso navegar pela linha do tempo. Isso significa que posso selecionar minha camada, cortar, caminhar duas molduras para o lado com a seta e cortar novamente. Eu farei isso até o final do vídeo. O que sobrou eu posso simplesmente deletar. Agora, eu já tenho todas as minhas molduras criadas para o corpo. Agora, eu já criei todas as minhas molduras vazias para o corpo para facilitar nossa vida. Também quero duplicar isso algumas vezes para desenhar as outras partes do personagem Para fazer isso, selecionarei meu grupo, pressionarei a tecla alt, clicarei e arrastarei. Agora, tenho a cópia do corpo, que posso renomear para Leg1 Eu farei o mesmo para criar as molduras para todo o personagem. Leg2, Arm1 e Arm2. Cabeça, barba, chapéu. Finalmente, uma camada para os detalhes na parte superior. Agora, criei todas as minhas camadas , o que significa que posso simplesmente desenhar. Só preciso ter cuidado, porque preciso sempre desenhar as partes certas dos personagens no quadro certo. Também é bom ter meu vídeo de referência em cima de tudo, para que eu ainda possa ver suas linhas quando estou desenhando. Agora, tudo o que preciso fazer é selecionar a moldura certa e pintar meu corpo. Se eu pressionar a tecla I, selecionarei minha cor, escolha dois, e posso escolher a cor para minha referência, b para o pincel. Este é o pincel que eu quero usar, mas você pode usar o seu favorito. O tamanho 50 para mim é bom. Agora vamos pintar. Pressionando r. Eu posso girar a tela, que também é útil Quando termino um quadro, clico no próximo e continuo o processo. Da mesma forma que fizemos quando estávamos desenhando a animação, eu gostaria de repetir os seis primeiros quadros da minha animação corporal, pois sabemos que eles se O que vou fazer é selecionar meus seis últimos quadros. Posso clicar no primeiro, segurar a tecla Shift e clicar no último. Exclua-os clicando nesta pequena caixa, clique em “Sim” e, em seguida, selecionarei esses aqui. Mantenha pressionada a tecla Alt, clique e arraste-os assim. Agora, eu já terminei o corpo com um pouco de tempo economizado. Esqueci uma das molduras. Sem problemas, vou pintá-lo e substituir o que está mais tarde na linha do tempo. Agora, vamos animar a cabeça. Mesmo processo de antes. Às vezes, gosto de folhear minhas animações, pressionar as teclas de seta para ver como está Dessa forma, posso identificar e corrigir alguns detalhes aqui. Se eu esconder meu vídeo de referência, posso ver como está o desenho final. Como fizemos com o corpo, as seis primeiras molduras da cabeça também podem ser duplicadas. Vamos até a cabeça, mesma lógica. Depois a barba. Finalmente, desenharemos as pernas. Como tenho Leg1 e Leg2 em camadas diferentes, preciso ter certeza de que a correta está na frente da outra Nesse caso, quero que a Perna1 seja minha perna em primeiro plano, então a Perna2 deve estar Tenha cuidado, pois é fácil arrastá-lo para dentro do grupo corporal. O que não é o que você quer. Vamos desenhar todas as pernas agora. Agora, para fazer minha perna de fundo, eu gostaria de usar um tom mais escuro desse roxo, ou até mesmo esse preto aqui, então vou diferenciar as Vamos selecionar as camadas Leg2 e começar a pintar. Você pode notar que, às vezes, nessa fase de limpeza, identifique e corrija alguns problemas que eu não via antes, como a posição da perna ao cruzar a outra Mudei um pouco a pose desobedecendo minha referência. Essa não é a abordagem mais recomendada, mas geralmente funciona para mim. As pernas estão prontas. Vamos desenhar os braços. Sabendo que um deles deve estar atrás do corpo, vou arrastar o Arm2 para trás de tudo Agora, vou selecionar a camada Arm1 e desenhar. Agora, finalmente, os detalhes finais. Como os olhos são elementos pequenos, é fácil ser inconsistente com seu tamanho e posição, então eu sempre gosto de folhear usando as Como alternativa, eu também poderia contar com a casca de cebola, que o Photoshop também tem Posso clicar aqui e ativar a casca de cebola. Eu poderia esconder minha referência e escolher essa casca de cebola transparente, para ver onde está o desenho anterior, e desenhar o próximo olho na posição correta. Agora, está tudo pronto. Vamos reduzir todas as pastas, ocultar minhas camadas de referência e clicar na barra de espaço para jogar Olha como isso está legal. A última coisa que eu gostaria de fazer aqui é desenhar um piso. Vou criar uma nova camada, cortar a ponta para ter a duração certa. Exclua essa parte e agora, em qualquer ponto da minha linha do tempo, posso simplesmente desenhar meu piso Vou ativar minha referência novamente. Vou clicar e arrastar pressionando Shift, então terei uma linha reta. Chame-o de Floor e arraste-o abaixo de todos os meus desenhos. Agora está pronto. Gente, é isso mesmo. A animação está pronta. Agora, precisamos levá-lo ao After Effects para fazer nossa composição final. Especialmente porque essa animação aqui tem um segundo de duração, precisamos torná-la mais longa para publicá-la. Claro, podemos até adicionar alguns efeitos lá, para mudar a cor de fundo, então vou te mostrar como. 15. Composição final: Agora, na etapa final, vamos fazer a composição final no Adobe After Effects. Finalmente estamos aqui, criando a composição final para o nosso projeto. Vamos importar nossa sequência PNG para que você possa ver como ela funciona. Vamos clicar com o botão direito do mouse em Importar arquivo. Agora, eu tenho que encontrar minha sequência de imagens aqui nesta pasta Clean up. Aqui estão elas. Tudo o que preciso fazer é clicar em um deles e verificar se a caixa de sequência PNG está marcada Clique em “Abrir”. Agora, temos essa sequência PNG aqui, mas o efeito posterior ainda não sabe em qual taxa de quadros queremos que essas imagens sejam reproduzidas, então vamos clicar com o botão direito do mouse na filmagem separada e Agora, temos esse 30, que é a taxa de quadros padrão. Queremos que seja 24, então vamos arrastar essa sequência aqui para criar uma nova composição. Essa nova composição tem o tamanho e a duração exatos da animação, com duração de um segundo. Se eu pressionar a barra de espaço, posso jogar e ver agora como está. Eu gostaria de reposicionar a animação um pouco assim e criarei uma camada de forma com a cor de fundo eu quero, minhas bibliotecas aqui Vamos clicar no retângulo para remover o traçado e garantir que alguns estejam ativados Vamos escolher algumas cores, talvez esse verde aqui. Agora, clique duas vezes na ferramenta retângulo e agora eu criei essa forma Arraste-o abaixo e agora temos um fundo colorido. Vou renomeá-lo, mudar a cor para verde escuro e bloqueá-lo Agora, vamos adicionar alguma textura ao meu plano de fundo. Para fazer isso, eu criaria uma elipse. Vou segurar Control ou Command para criá-lo a partir do centro e escolher uma cor verde um pouco mais brilhante. Agora, eu quero aplicar um efeito na elipse. Vamos aos efeitos e predefinições. Pesquise por desfoque gaussiano. Clique e arraste o efeito até minha elipse. Aqui, junto com minha guia Projeto, posso ver as propriedades do efeito. Vou aumentar o embaçamento. Clique e arraste o número para a direita. Para evitar essas linhas estranhas aqui, vamos desmarcar os pixels de borda repetidos Agora, vamos mudar o modo de mesclagem da textura. Vamos escolher Dissolver. Agora, temos uma textura legal aqui. Vamos nomear a camada, mudar a cor da camada para verde e colocá-la atrás do personagem. Agora, quero criar outro retângulo a mesma cor do meu plano de fundo original Vou desenhar o retângulo assim, ele vai esconder a parte inferior da minha textura assim Vamos chamá-lo de Floor. Sinta-se à vontade para alinhar este piso à linha que temos. Você pode reposicionar a textura, aumentar, reduzir o desfoque O que você quiser. É assim que parece. Você pode até selecionar Dancing Dissolve, em vez de apenas dissolver, para que a textura se mova um pouco. O único problema que temos agora é que esse vídeo tem apenas um segundo de duração. Isso é muito curto para qualquer um assistir. É por isso que vou aumentar a duração da composição. Vamos para Composição, Configurações de composição e eu quero que dure 10 segundos. Clique em “Ok”. Agora, eu tenho uma composição muito mais longa. Tudo o que preciso fazer é desbloquear as camadas de bloqueio, para que eu possa esticar o fundo e as texturas até o final da minha composição, da animação, posso simplesmente duplicá-la, pressionar Control ou Command D arrastá-la para a direita Você pode ampliar para certificar que não há uma lacuna entre essas camadas Agora, posso duplicar novamente, ambos ao mesmo tempo, e fazer o mesmo até o final da minha composição Agora, temos uma composição de 10 segundos com nossa animação. Como eu quero publicá-lo no Instagram. Sempre gosto de ter animações quadradas, então posso acessar minhas configurações de composição e definir o tamanho para 1080 por 1080 Agora, é mais adequado para minha conta do Instagram. Agora, podemos atrapalhar o vídeo. Para fazer isso, vamos até Arquivo, Exportar e adicionar à fila do Adobe Media Encoder Aqui abrimos o Adobe Media Encoder. Ele é a animação. Posso clicar aqui para ver as configurações. Eu sempre escolho o H264 para animações de mídia social. Aqui, podemos alterar o nome e o local em que a visualização será salva. Eu sempre pressiono Usar qualidade máxima de renderização. Agora, só precisamos clicar em Play e torcer, temos nossa animação Parabéns. 16. Obrigada!: Gente, essa foi uma jornada emocionante, cobrimos muito. Muito obrigado por chegar ao final desta aula. Espero que você perceba que, primeiro, animação não tem regras nem limites, você pode usar todos os softwares e técnicas disponíveis ao mesmo tempo e aproveitar o melhor que cada software pode nos oferecer. Eu realmente quero ver o que vocês vão criar. Por favor, envie seu produto aqui, e eu verei comentários sobre cada um deles. Para se inspirar, dê uma olhada nos outros personagens que criei usando o mesmo processo. Espero que você tenha achado divertido e nos vemos na próxima.