Micro animação no Adobe After Effects: motion graphics para aplicativos e sites

1. Apresentação: Olá, estou feliz que você tenha escolhido aprender design de movimento comigo. Neste curso, aprenderemos tudo sobre como trabalhar com formas básicas no after effix E a boa notícia é que não só aprenderemos como criá-los e animá-los, mas também aprenderemos como aplicá-los nos projetos do mundo real que você pode oferecer aos seus clientes Na primeira lição, criaremos uma animação básica de formas e aprenderemos como exportá-la para um lote ou arquivo JSON, o que é perfeito para sites e aplicativos Na segunda lição, criaremos uma animação complexa que se transformará em uma assinatura de e-mail profissional. Na terceira lição, transformaremos camadas em camadas tridimensionais e aprenderemos como criar um ângulo de câmera isométrico Além disso, aprenderemos como podemos integrar a animação em vídeos mais longos, como podcasts, videogames e muito mais. Na lição final, criaremos uma animação de carregador super bacana e aprenderemos como exibi-la em nosso portfólio, como Em cada lição, aprenderemos como explorar nossa animação para compartilhar nas redes sociais, que você possa compartilhá-la em seus canais de mídia social e no site do seu portfólio. Mas espere, tem mais. Para oferecer a melhor experiência de aprendizado, você receberá uma notificação clara sobre quando trabalhar comigo e quando simplesmente ouvir sem tocar no computador Você também recebe uma pergunta de classe média para ajudá-lo a memorizar melhor as aulas, e eu até lhe digo quando fazer uma pausa de dez minutos, como em uma sala de aula real Além disso, criei um curso gratuito para iniciantes, no qual você aprende todos os fundamentos importantes e entende como é trabalhar depois do affix Portanto, se durante este curso você se deparar com um tópico que lhe interessa e quiser aprender mais sobre ele, fique à vontade para assistir ao curso gratuito que mencionei. Você pode encontrar o link na descrição deste vídeo. Ah, e não se preocupe. Você não precisará ouvir meu sotaque descolado e exótico durante as aulas Este curso é dublado por uma voz profissional ligada. Ok, não com um token, vamos começar com a primeira aula. 2. Seção 1: Animação com Lottie e JSON: Oi, pessoal. Nesta lição, criaremos uma animação interessante usando formas básicas e aprenderemos como exportá-la para arquivos Jason ou Lodi perfeitos para sites e aplicativos Esta lição está dividida em sete partes. Na primeira parte, entenderemos o que são os arquivos Lodi e Jason e por que é importante saber como criá-los Criaremos uma pasta principal para o curso e instalaremos as fontes que usaremos nesta lição. Vamos entrar no After Effects, criar nossa primeira composição e ajustar as configurações do software para um melhor fluxo de trabalho. Em seguida, aprenderemos sobre os parâmetros básicos de uma camada no After Effects. Na segunda parte, projetaremos a cena do zero e depois dos efeitos, e aprenderemos métodos para um trabalho mais organizado. Na terceira parte, aprenderemos o que são quadros-chave e começaremos a animar a cena, além de aprender como cronometrar e sincronizar a animação que criamos Na quarta parte, aprenderemos a criar uma animação em loop. Na quinta parte, melhoraremos a animação que criamos e aprenderemos sobre o editor gráfico. Na sexta parte, instalaremos um script gratuito e aprenderemos a usá-lo. Identificaremos quaisquer problemas que possam surgir. Em seguida, resolveremos esses problemas e exportaremos um arquivo de vídeo finalizado que pode ser usado em sites e aplicativos. Por fim, na parte final, aprenderemos como renderizar a animação que fizemos em um arquivo MP four de alta qualidade para compartilhar nas redes sociais. Depois disso, no final da aula, você receberá uma pequena tarefa para realizar. A tarefa tem como objetivo ajudá-lo a lembrar e entender o que você aprendeu. Não se preocupe. A tarefa não ocupará muito do seu tempo. Ele foi projetado para ser feito em apenas 2 horas. Se você tiver algum problema ou dúvida, sinta-se à vontade para pedir ajuda a mim ou a seus colegas de classe em nosso grupo comunitário fechado Tudo bem. Chega de falar. Vamos começar. 3. Vamos começar!: Então, o que são arquivos Lodi e JSN, afinal? Lodi e JSN são animações leves que podem ser usadas em sites, aplicativos móveis e outras Saber como criar e renderizar animações nos arquivos Lottie e Jason pode ajudar designers e desenvolvedores a criar animações envolventes e de alta qualidade que melhoram suas plataformas, animações envolventes e de alta qualidade que melhoram suas plataformas, do usuário Tudo bem. Chega de falar. Vamos começar. Como designer de movimento profissional. Posso dizer que trabalhar com pastas organizadas é muito importante. Quando você está trabalhando em um projeto de animação gráfica, há muitos ativos diferentes que você precisa monitorar, como imagens, vídeos, arquivos de como imagens, vídeos, áudio e assim por diante Organizar esses arquivos em pastas permite que você encontre rapidamente o que está procurando e mantenha seu projeto supereficiente. Além disso, uma estrutura de arquivos organizada se torna ainda mais importante se você estiver trabalhando com uma equipe. Todos na equipe precisam ser capazes encontrar rapidamente os ativos de que precisam. Ter um projeto organizado pode ajudar a garantir que todos estejam na mesma página. Vamos ver quais pastas precisamos criar. Mas antes disso, lembre-se de baixar a pasta desta lição. Para quem ainda precisa instalar o software after effects, você pode ver como fazer isso no curso gratuito que mencionei anteriormente. Você pode encontrar o link para o curso na descrição abaixo ou no arquivo PDF encontrado na pasta que você baixou de mim. OK. Agora vamos encontrar uma pasta no computador onde criaremos a pasta principal do curso. Encontre uma pasta adequada para você. Agora vamos criar a pasta principal do curso. Vamos chamá-la de microanimação DM. Agora, dentro dessa pasta, precisamos abrir mais três pastas. A primeira é A. Vamos salvar todos os arquivos do After Effects aqui. O segundo são os ativos. Aqui, salvaremos todos os ativos gráficos usados no projeto. O terceiro são renderizações ou amostras. Nessa pasta, salvaremos todas as renderizações e testes do projeto Agora, vamos abrir a pasta de ativos e transferir para essa pasta os ativos necessários para esta lição. Abra a pasta que você baixou de mim. Certo. E copie todos os ativos para a pasta de ativos que você acabou de criar. Você pode fechar a pasta agora, se quiser. Agora, vamos instalar a fonte que usaremos nesta lição. mostrarei como instalar fontes para usuários de Windows e Mac. O nome dessa fonte é Montserrat e a usaremos apenas para fins educacionais. Abra a pasta e entre na pasta chamada estática. Para usuários do Windows, selecione todos os arquivos, clique com o botão direito do mouse e escolha Instalar para todos os usuários ou Instalar. Eu já instalei essa fonte, então não vou instalá-la novamente. Usuários de Mac com o localizador selecionado, clique em. Vá. Agora, clique em. Vá para Pasta e digite essa linha. Em seguida, pressione Enter. Isso o levará à pasta de fontes instalada no seu sistema. Agora, arraste todas as fontes da pasta do curso para a FonceFolder, ou você pode copiar a fonte e colá-la lá Então, depois de instalar a fonte, podemos fechar a pasta. Vou mover essa pasta para o lado bem rápido e agora vamos almoçar juntos no After Effects. Podemos sair por essa janela. Vou maximizar a janela e, primeiro, vamos clicar no padrão para que todos vejamos a mesma disposição do painel. E agora, como acontece com qualquer software de edição, precisamos abrir um novo arquivo. Para fazer isso no After Effects, precisamos criar uma primeira composição. Vamos clicar na nova composição e agora definir as configurações da nossa primeira composição. Vamos chamá-lo de animação para o tenente. Aqui vamos definir o tamanho da nossa composição Desta vez, trabalharemos em um formato quadrado de 1080 pixels de largura e dez 80 pixels de altura Aqui, escolheremos o número de quadros em que nossa animação consistirá. Anotaremos 60, o que significa criar 1 segundo de animação. Vamos passar 60 quadros. Por quê? Exatamente 60? Porque essa animação foi projetada para sites e aplicativos. Aqueles que não sabem o que significa taxa de quadros são bem-vindos para ver o curso gratuito que mencionei anteriormente. Neste curso, explico detalhadamente sobre esse tópico. Você pode encontrar o link para o curso na descrição deste vídeo ou no arquivo PDF localizado na pasta principal do curso que você baixou de mim. Tudo bem. Vamos seguir em frente. Aqui, escolheremos a duração da nossa primeira composição. 10 segundos são suficientes para nós desta vez. Por fim, vamos escolher a cor de fundo da composição. É importante observar que podemos alterar facilmente todas essas configurações em qualquer estágio da animação posteriormente. Agora vamos clicar. Agora, antes de continuarmos, gostaria de fazer algumas anotações importantes para quem vê a tela dessa maneira. Não se preocupe dessa forma porque a tecla Caps Lock está ativada Desative a tecla Caps Lock para que você possa ver a tela normalmente Agora, quando trabalhamos em um projeto e no After Effects, é importante mudar o idioma do nosso computador para inglês. Dessa forma, os atalhos de teclado usaremos no curso funcionarão corretamente Em seguida, se você ver a tela de visualização de forma diferente da minha, clique aqui. Se você vê os números aqui de forma diferente da minha, você pode passar o mouse aqui com o cursor Em seguida, mantenha pressionada a tecla de controle e clique nos números aqui. OK. E se você ver a tela menor ou maior que a minha, basta vir aqui e selecionar ajustar. Por fim, defina aqui a qualidade da pré-visualização como completa. Depois de criar nossa primeira composição, a primeira coisa que precisamos fazer é salvar o projeto e dar um nome a ele. Porque atualmente, como você pode ver, arquivo After Effects não tem nome no momento. O nome que demos foi o nome da nossa primeira composição. A composição em que estamos agora. Vamos até o arquivo e clique em Salvar. Agora vamos encontrar a pasta que criamos para a lição. Entraremos na pasta A e nomearemos o arquivo de After Effects em que estamos trabalhando. Você pode chamá-lo do mesmo nome nossa composição principal ou de qualquer outro nome que desejar. Depois disso, clique em Salvar e nosso projeto agora tem um nome. Após a primeira gravação do projeto. Além de dar o nome ao projeto. Também ativamos a função de salvamento automático. É muito importante fazer isso porque agora o After Effects salvará automaticamente nosso projeto a cada poucos minutos. Agora, vamos editar as preferências e definir as melhores configurações para um melhor fluxo de trabalho. Usuários de Mac, você pode acessar as preferências dessa forma. Clique em Geral e agora selecione as configurações exatamente como eu fiz. Você pode interromper a aula e continuar depois de selecionar tudo. Enquanto isso, continuarei na próxima coluna. E aqui está o salvamento automático. Aqui, decidimos com que frequência o After Effects salvará o projeto automaticamente. Eu escolhi a cada 5 minutos. Finalmente, vamos ver o script e as expressões e selecionar tudo o que eu selecionei. E agora podemos clicar e começar a aula. Observe que você não precisa alterar essas configurações toda vez antes de iniciar um novo projeto. OK. Então, a primeira coisa que faremos é importar a paleta de cores para o projeto Para importar ativos para o projeto, clicaremos duas vezes na área cinza no painel do projeto. Agora precisamos encontrar a pasta que criamos para a lição e entrar na pasta de ativos. Agora, selecione a paleta de cores. Verifique se a sequência PNG não está selecionada e clique em Importar. Agora, para ver a paleta de cores em nossa composição, precisamos arrastá-la para o painel de composição localizado aqui Para fazer isso, arrastaremos a paleta para a composição dessa forma Aqui, vemos a paleta na tela de pré-visualização. Podemos reduzir essa camada manualmente pegando a borda daqui e segurando a tecla shift para reduzir a camada Agora solte o clique do mouse e, em seguida, solte a tecla shift. Além disso, podemos reduzir a camada do painel de composição por meio da própria camada. Se clicarmos na pequena seta da camada, podemos ver as propriedades básicas de transformação da camada. Se abrirmos essas propriedades, podemos ver os parâmetros básicos cada camada no After Effects. Aqui veremos o parâmetro de escala. Podemos alterar o valor desse parâmetro manualmente ou clicar no valor e inserir o número desejado. Anote 30 e clique em Enter. Vamos fechar os parâmetros a partir daqui. Agora podemos mover essa camada aqui para o lado, que ela não nos incomode mais tarde Vamos trancá-lo a partir daqui. Dessa forma, não poderemos tocá-lo ou movê-lo durante o trabalho. Agora, para que não vejamos essa camada no painel de composição. Podemos fazer com que desapareça usando a função shy encontrada aqui Vamos clicar nesse ícone. Para quem não vê o ícone, você pode clicar aqui e ver o mesmo arranjo de funções que eu vejo. Vamos selecionar essa camada como uma camada invisível e, para executar a função, também clicaremos no ícone tímido aqui E agora não vemos essa camada aqui. Isso não nos incomoda e não podemos movê-lo. Ok, agora vamos começar a projetar nossa cena. Para fazer isso de forma conveniente, podemos abrir uma grade adaptada à nossa composição Agora, vamos ajustar a tela de visualização para caber no tamanho do nosso painel. Iremos aqui e selecionaremos o ajuste. Certifique-se de que a qualidade da sua prévia também esteja completa. Se você não vê a cor de fundo que escolheu no início, clique aqui para vê-la. Se quisermos alterar essa cor de fundo, podemos fazer isso por meio das configurações de composição. Para acessar as configurações de composição em que estamos agora, precisamos clicar em Control K. Observo novamente que todos os atalhos funcionarão quando o idioma do teclado estiver definido como Vamos clicar em Control K. Aqui, vemos as configurações de composição que criamos anteriormente Para ver as alterações que estamos fazendo, clique em pré-visualizar. Agora você pode alterar a cor de fundo para qualquer outra cor. Tudo bem. Vamos clicar em Cancelar e começar a criar nossa cena. 4. Projetando a cena do zero: Então, vamos criar nossa primeira forma. Para isso, selecione a ferramenta Caneta, clique em preencher e D selecione-a. Agora vamos clicar no traçado e escolher uma cor clara da nossa paleta usando o conta-gotas Clique em OK e vamos criar a forma a partir do centro. Coloque o cursor aqui e crie o primeiro ponto. Agora, mantenha pressionada a tecla Shift e clique aqui para criar uma linha reta. Podemos escolher a espessura da linha aqui. Vamos clicar no número, digitar 40 e pressionar enter. Agora, vamos voltar para a ferramenta de seleção usando o atalho v. Vamos selecionar a camada e usar a roda de rolagem do mouse Vamos ampliar a tela de pré-visualização. Para aqueles que não têm uma roda de rolagem no mouse, você pode aumentar e diminuir o zoom usando essas teclas. Então, depois de ampliarmos o zoom para ver nossa forma de perto, podemos ver que o final dessa linha é reto Vamos aprender como arredondá-lo. Para isso, vamos abrir as propriedades dessa camada, abrir o conteúdo, abrir a forma e abrir o traçado. Podemos ampliar o painel assim, e aqui, em um traçado, podemos arredondar as bordas e as conexões Agora podemos fechar tudo, minimizar o painel e aprender a mover a tela de visualização enquanto estiver no Zoom. Para mover a tela, precisamos manter pressionada a barra de espaço e depois movê-la assim. Ou podemos mover a tela clicando com o botão do meio do mouse. Agora, quero falar sobre um tópico importante chamado ponto de ancoragem Por favor, não toque em nada e apenas me escute. Vou abrir o parâmetro de rotação e alterar o valor. Preste atenção em como a camada se move. Ele não gira a partir do centro da forma. É porque o ponto de ancoragem está localizado aqui. Como você pode ver, há um pequeno ícone aqui. Vamos movê-lo juntos para o centro agora. Para isso, vamos selecionar a ferramenta de ponto de ancoragem e arrastar o ponto de ancoragem dessa camada para outro local Se movermos o ponto de ancoragem enquanto pressionamos a tecla de controle, o ponto de ancoragem se moverá simetricamente Dessa forma, podemos centralizá-lo facilmente no centro da camada. Depois de colocar o ponto de ancoragem, vamos pressionar para voltar para a ferramenta de seleção e ir para uma linha Para quem não consegue encontrá-lo, você pode abri-lo por meio de uma janela. Vamos clicar aqui para centralizar nossa forma no centro da composição. Agora podemos definir a pré-visualização para ajustar e cancelar a grade. No entanto, desta vez, não vamos cancelá-lo a partir daqui. Vamos cancelá-lo usando o atalho. Pressione a tecla do apóstrofo. Vamos pressioná-lo algumas vezes para praticar. Usaremos essa grade com frequência. Agora vamos criar essa esfera. Para fazer isso, clicaremos e seguraremos a ferramenta retângulo. Agora solte-o e selecione a ferramenta de elipse. Agora, não faça isso comigo porque eu quero te mostrar algo interessante. Vamos ver o que acontece se eu tentar criar essa esfera aqui. Observe que a esfera é criada em uma camada existente. Vou pressionar o controle Z para desfazer a ação. Agora vamos fazer isso juntos. Se quisermos criar essa esfera em uma nova camada, precisamos ter certeza de que não estamos selecionando nenhuma camada e, em seguida, podemos escolher a cor da esfera. Vamos escolher a cor azul. E vamos cancelar o derrame desta vez. Agora, quando criarmos essa esfera, ela estará em uma nova camada. Vamos criar a esfera aqui enquanto pressiona a tecla Shift para torná-la simétrica Agora vamos soltar o clique do mouse e depois soltar a tecla shift. Em seguida, vamos alinhar a esfera ao centro, usando uma linha e movê-la para baixo Não conseguiremos pegá-lo porque ainda estamos usando a ferramenta de elipse. Para mover essa esfera, vamos voltar para a ferramenta de seleção pressionando. Agora, vamos selecionar a camada, pegar a esfera e movê-la para baixo enquanto pressiona tecla shift para um movimento simétrico OK. E agora vamos nomear nossas camadas. Para fazer isso, precisamos selecionar a camada e pressionar enter. Podemos mudar o nome para traçar um. Pressione enter para concluir a ação. Vamos fazer a mesma coisa com a esfera. Chamaremos essa camada de esfera um. Em seguida, vamos criar a escala do texto. Para fazer isso, precisamos selecionar a ferramenta de texto e escolher a fonte Manst que instalamos anteriormente Clique em deseja abrir a linha de texto e, em seguida, digite a escala. Pressione shift para colocar a primeira letra em maiúscula e continuar digitando o resto da palavra sem pressionar a tecla shift. Clique duas vezes no texto para selecioná-lo. Altere o tamanho para 30 e pressione enter. Selecione o estilo da fonte para colocar a barra de ferramentas em negrito ou usando os botões de seta Finalmente, vamos escolher a cor do texto a partir daqui. Agora, digamos que queremos mover o texto. Para sair da linha de texto, precisamos pressionar control enter. Agora saímos da linha de texto e posso pressionar V para retornar à ferramenta de seleção Agora vá para o parágrafo e verifique se o texto está alinhado e centralizado à esquerda Vamos nos aproximar um pouco e centralizar o ponto de ancoragem da camada de texto no centro Desta vez, não usaremos a ferramenta Anchor Point. Faremos isso com um atalho super útil Control Alt home Usuários de Mac, prestem atenção em como fazer isso no teclado. Vamos usar o atalho juntos. E a, o ponto de ancoragem salta para o centro, e agora podemos centralizar o texto e trazê-lo para baixo enquanto pressionamos a tecla shift Agora, vamos trazer de volta a grade pressionando a tecla apóstrofo Agora vamos selecionar todas as camadas e mover tudo para cima usando as teclas de seta do teclado. Para movimentos maiores, pressionaremos as setas enquanto pressionamos a tecla Shift Vamos colocar a camada aqui e, para atribuí-las todas ao mesmo grupo, podemos clicar no quadrado aqui e marcar todas essas camadas em azul. Agora vamos duplicar todas essas camadas. Para fazer isso, selecionaremos todas as camadas e pressionaremos o controle de atalho D. Em seguida, vamos selecioná-las e movê-las para baixo para que fiquem posicionadas lado a lado Para diferenciá-las das três primeiras camadas, vamos marcá-las em amarelo E agora, enquanto todas as camadas estão selecionadas, vamos movê-las para a esquerda. Vamos segurar a tecla shift e movê-los com a tecla de seta esquerda no teclado. Ok, mais uma vez, vamos duplicar as três primeiras camadas novamente. Desta vez, posicionaremos as camadas para cima. Vamos marcá-los em vermelho. Enquanto tudo estiver selecionado, vamos mover todas as camadas para a direita enquanto pressionamos a tecla Shift. Tudo bem. Agora vamos mudar as palavras que temos aqui. Podemos deixar essa camada de texto inalterada e substituir seu nome no painel de camadas Pressione Enter e exclua o número dois. Agora vamos clicar duas vezes nessa palavra e alterá-la para rotação. Não se esqueça de pressionar Control Enter para sair da linha de texto. Por fim, alteraremos esse texto para esticar. Pressione Control Enter e depois V para retornar a essa ferramenta de seleção. Agora, quero que movamos as camadas para ficarem um pouco mais afastadas umas das outras. Desta vez, usaremos uma grade chamada grade proporcional. Vou desligar essa grade por enquanto e mostrar como abri-la usando um atalho O atalho para essa grade é Alt e a tecla de apóstrofo. Agora vamos mover essas camadas para cá. E aquelas camadas ali. Agora podemos cancelar a grade, então vamos pressionar e pressionar a tecla apóstrofo Em seguida, vamos configurar a tela de visualização para ajustar e alterar as cores das esferas. Este está em amarelo. Mas essa esfera será vermelha. Agora, vamos criar a letra A, que deveria estar aqui em cima. Para fazer isso, selecionaremos a ferramenta de texto, clicaremos uma vez aqui e pressionaremos Shift A para deixar a letra maiúscula Selecionaremos a letra clicando duas vezes e alteraremos o tamanho da fonte para 300. Desta vez, escolheremos o estilo da fonte preta. Agora, vamos clicar aqui. Para sair da linha de texto, pressionaremos Control Enter e V para retornar à ferramenta de seleção. Agora vamos centralizar o ponto de ancoragem dessa camada usando o atalho que aprendemos Pergunta, qual é o atalho para centralizar o ponto de ancoragem Para fazer isso, pressione Control Alt home. Agora, vamos até uma linha e centralizaremos a camada na composição. Vamos trazer de volta nossa grade pressionando a tecla de apóstrofo e continuar desenhando a cena Na minha opinião, podemos ampliar um pouco essa camada. Desta vez, não a ampliaremos por meio do tamanho da fonte, mas ampliaremos a própria camada por meio do parâmetro de escala Vamos selecionar a camada e pressionar para abrir o parâmetro de escala. Vamos mudar o tamanho para 130. Agora, vamos aumentar um pouco essa camada. É muito grande. Vamos alterar o tamanho para 120 e aumentar o texto novamente. Agora, pressionarei para abrir o parâmetro de rotação e girar a camada para verificar se ela não toca nas outras formas da cena Ótimo. OK. E agora, vou trazer a rotação para zero. Agora podemos fechar os parâmetros e colocar a camada acima de todas as outras e alterar sua cor para nenhuma. Dessa forma, a camada ficará cinza. Tudo bem. Terminamos de desenhar a cena e agora vamos para a fase de animação. Mas antes disso, eu recomendo fazer uma pausa de dez minutos. Levante-se da cadeira, faça alguns alongamentos leves, faça um chá ou café e volte se refrescando para a próxima 5. Sua primeira animação!: Então, neste estágio, não precisamos da paleta de cores, então podemos clicar aqui para ver todas as camadas ocultas e simplesmente desligar a camada a partir daqui Também podemos desbloquear e excluir completamente a camada usando a tecla backspace ou delete A camada é excluída do painel de camadas, mas não é excluída do projeto em si. Então não se preocupe. usar a paleta novamente se precisarmos Tudo bem, então, por enquanto, vou excluí-lo, e também podemos fechar a grade pressionando a tecla apóstrofo, e agora estamos prontos para começar a animação A primeira coisa que vamos animar são as esferas. Para fazê-los se mover, precisamos criar quadros-chave. Os quadros-chave são um conceito fundamental em animação e gráficos em movimento. No After Effects, os quadros-chave são usados para definir os pontos inicial e final de uma animação ou transição São pontos no tempo que marcam a posição, o tamanho, rotação, a opacidade e outras propriedades de um elemento ou camada Os quadros-chave também são usados para controlar a velocidade e o tempo de uma animação. Ao ajustar a distância entre os quadros-chave, você pode controlar a velocidade de uma animação Eu abordo esse tópico em profundidade no curso gratuito que mencionei no início deste curso. Se algum de vocês quiser saber mais sobre isso, fique à vontade para assistir. Você pode encontrar o link para o curso gratuito na descrição abaixo ou no arquivo PDF. Isso está na pasta principal do curso que você baixou de mim. Tudo bem Para começar, vamos selecionar todas as esferas enquanto pressionamos a tecla shift para que possamos selecionar várias camadas ao mesmo tempo Em seguida, verifique se o indicador de tempo está no início da linha do tempo E, finalmente, pressione P para abrir o parâmetro de posição porque esse é o parâmetro para qual criaremos quadros-chave. Agora, diremos ao After Effects para manter as esferas em sua posição atual neste momento Portanto, clicaremos no cronômetro e criaremos o primeiro quadro-chave Em seguida, moveremos o indicador de tempo para o segundo número um e moveremos as esferas para a posição desejada enquanto pressionamos a tecla shift para garantir um movimento reto do eixo Essa ação criará automaticamente um novo quadro-chave. Agora, para visualizar nosso trabalho, vamos mover o indicador de tempo para o início da linha do tempo e pressionar a barra de espaço. Bom trabalho. Você criou sua primeira animação. Vamos colocar o indicador de tempo no início. Agora, quero cronometrar a animação dessa esfera de forma diferente para que elas não se movam todas juntas. Quero que a primeira esfera a se mover seja amarela, depois azul e só depois vermelha. Precisamos criar uma ação sobreposta ou uma compensação. Para conseguir isso, precisamos mover nossos quadros-chave na linha do tempo Vamos deixar a esfera amarela onde está agora, pois será a primeira esfera a se mover. Agora, vamos mover a camada da esfera azul para começar somente depois que a esfera amarela atingir seu segundo ponto. Mas como eu movo a camada inteira, há uma parte vazia na animação e não consigo ver a esfera azul. Para evitar que isso aconteça, moveremos apenas os quadros-chave e não a camada inteira. Para fazer isso, vamos selecionar todos os quadros-chave ou clicar no parâmetro aqui. Agora podemos mover esses quadros-chave aqui enquanto mantemos pressionada a tecla Shift Dessa forma, os quadros-chave ficarão no final dos quadros-chave das esferas amarelas Agora vamos fazer a mesma coisa com os quadros-chave da esfera vermelha. Vamos selecionar todos eles e movê-los para o momento em que a esfera azul já tenha atingido seu último ponto. Se assistirmos à animação novamente, veremos que as esferas agora estão se movendo uma após a outra, conforme queríamos A próxima etapa em nossa animação é combinar a animação da letra e com a animação em escala que criamos. Fazer isso para escala e rotação é muito simples, mas criar a animação de texto extensível pode ser um pouco mais desafiador. Como você pode ver, se eu esticar essa camada dessa maneira, não conseguirei criar o efeito desejado. Vamos ver como criar isso corretamente. Como você pode ver no exemplo na tela, um ilustrador, usando a função criar contornos, podemos transformar qualquer camada de texto em uma forma com um caminho Depois disso, podemos nos mover e mudar esse caminho. Tudo bem E agora, para fazer isso no After Effects, precisamos clicar com o botão direito do mouse na camada de texto, acessar criar e escolher Criar formas a partir do texto. Agora temos uma nova camada na qual o texto se tornou uma camada de forma simples com um caminho. Podemos excluir essa camada de texto. Agora, vamos mudar a cor da camada para nenhuma. Agora temos um caminho do qual podemos mudar a forma. Vamos ver como fazer isso. Antes de começarmos, vamos nos aproximar e posicionar a tela de uma forma que seja confortável para trabalharmos nessa parte. Vamos abrir a grade e selecionar a ferramenta caneta. No momento, podemos ver pequenos pontos e, se selecionarmos um deles, podemos movê-lo para onde quisermos. Vou pressionar o controle Z. Também posso escolher vários pontos Vou manter pressionada a tecla e agora posso selecionar vários pontos. OK. Também posso mover todos esses quatro pontos. Vou manter pressionada a tecla Alt e agora também posso selecionar todos esses pontos. Agora vamos ver o que acontece se eu quiser mover todo o lado direito para o lado. Vou pressionar Alt e selecionar todos os pontos nesta seção e depois mover os pontos aqui. Observe que a letra está esticada incorretamente. Isso acontece porque não há pontos suficientes aqui. Vamos criar esses pontos juntos. Para fazer isso com precisão, usaremos guias. Vamos chegar um pouco mais perto. Podemos ampliar esse painel assim. Agora, vamos criar os guias. Precisamos trazer as réguas usando o controle, nosso atalho Agora, para criar um guia, basta clicar aqui e arrastar o mouse para baixo. E agora precisamos bloqueá-los por meio da visualização e, em seguida, escolher as guias de bloqueio. E aqui, as guias estão trancadas e podemos criar os pontos. Vamos nos posicionar no topo do caminho das camadas. Quando virmos o ícone do mouse mudar para um sinal de mais, saberemos que clicar no caminho criará um ponto. Então, vamos criar alguns pontos aqui. Podemos selecionar e excluir pontos usando backspace ou delete Podemos ampliar um pouco mais e alinhar os pontos. Depois disso, para ocultar a guia, podemos usar um controle de atalho útil na tecla ponto e vírgula Pressionar o atalho do teclado novamente trará de volta as guias Finalmente, vamos pressionar control para ocultar as réguas. Tudo bem Então, agora vamos esticar o texto. Primeiro, explicarei como funciona e, em seguida, animaremos o caminho juntos Vou me mudar um pouco para poder selecionar o ponto. Agora estou pressionando a tecla Alt e selecionando todos os pontos desse lado . Exceto por esse. Em seguida, movo o caminho para o lado enquanto mantenho pressionada a tecla Shift Legal. Vou pressionar o controle Z para desfazer a ação e vamos animar esse caminho juntos Então, a primeira coisa que precisamos fazer é encontrar seu parâmetro na própria camada. Como você pode ver, há dois caminhos aqui, um para essa parte da carta e outro para essa parte da carta. Precisamos animar esses dois blocos. Em vez de abrir manualmente todos esses parâmetros, podemos simplesmente selecionar a camada e o caminho estreito na barra de pesquisa. Em seguida, pressionaremos enter e veremos os dois caminhos se abrirem convenientemente Agora vamos cronometrar a animação dos caminhos das letras até a animação da esfera vermelha. Vamos ajustar a visualização novamente e ver onde a animação da esfera vermelha começa. Para fazer isso, selecionaremos a camada da esfera vermelha e pressionaremos a tecla U para ver seus quadros-chave. Agora, vemos que a animação da esfera vermelha começa a partir do segundo número dois. Vamos mover o indicador de tempo para esse quadro-chave enquanto pressiona a tecla Shift Agora vamos selecionar a camada da letra A e o caminho apertado na barra de pesquisa. Pressione Enter e agora diremos ao After Effects que, a partir do segundo, o caminho estará na forma em que está atualmente. Porque não há quadros-chave adicionais antes desses quadros-chave . A carta ficará nesse formato durante todo esse tempo. Agora vamos mover o indicador de tempo para o segundo número três, no mesmo momento em que a esfera vermelha termina sua animação e muda a forma da letra para a forma que queremos que ela tenha Vamos manter pressionada a tecla Alt. Selecione todos os pontos desse lado. Certifique-se de que não estamos selecionando esse ponto. E agora vamos arrastar o caminho aqui enquanto pressiona a tecla Shift. Depois disso, agora pressionaremos e seguraremos a tecla alt e selecionaremos todos os pontos desse lado. Vamos mover esses pontos aqui. Também podemos mudar a posição desses pontos para cima. Vamos selecionar esse ponto, segurar a tecla shift e também selecionar esse ponto. Agora, vamos mover os dois pontos que selecionamos anteriormente para cima Agora vamos selecionar apenas esse ponto. Mantenha pressionada a tecla alt, selecione somente este ponto e mova-o enquanto pressiona Shift. Finalmente, vamos selecionar esse ponto e movê-lo aqui enquanto pressionamos a tecla shift. Agora, esses dois quadros-chave indicam After Effects que, nesse momento, o design do caminho da letra ficará assim Nesse quadro-chave, o design da carta se parece com isso Tudo bem Vamos seguir em frente. Vamos fechar as camadas. Defina a visualização para caber e fechar a grade. E agora podemos mudar para a ferramenta de seleção e ver toda a animação que criamos até agora. Parece bom. A próxima etapa em nossa animação é sincronizar as animações de escala e rotação Vamos começar cronometrando a animação de rotação. Primeiro, devemos selecionar a camada da esfera azul e pressionar para ver seus quadros-chave Como podemos ver na animação final, a letra deve estar de cabeça para baixo desde o início da animação A letra gira à medida que a esfera azul sobe. Portanto, precisamos chegar ao ponto em que a esfera azul já está levantada pressionar R para ver o parâmetro de rotação e definir a rotação da letra neste momento. Em seguida, clicaremos no cronômetro sem alterar o valor desse parâmetro E neste momento, quando a esfera azul estiver na parte inferior, a rotação será, digamos, -180. Durante esse tempo, a letra ficará de cabeça para baixo e, após esse quadro-chave, e, após esse quadro-chave, a letra começará a girar até atingir o valor que definimos para ela Agora, as duas animações são sincronizadas ao mesmo tempo. Vamos ver como fica. Parece ótimo. Agora, vamos animar a animação em escala Já sabemos que o tamanho da letra deve ser do mesmo tamanho de quando a esfera amarela sobe, e também sabemos que leva 1 segundo para que a esfera amarela complete sua animação. Portanto, definiremos o parâmetro de escala dessa camada para o valor atual. Agora voltamos no tempo, que é quando a animação começa no segundo zero e definimos um valor diferente para o parâmetro de escala, como 50 ou 60. Em seguida, fecharemos a camada, expandiremos o painel e mostraremos todos os parâmetros de todas as camadas. Para fazer isso, precisamos garantir que não selecionemos nenhuma camada e, em seguida, pressionemos você. Agora vamos passar para a próxima parte e aprender como fazer com que toda essa animação reproduzida perfeitamente em um loop perfeito 6. O que é uma animação com loop?: Então, para fazer com que toda essa animação reproduzida perfeitamente em um loop perfeito Primeiro, precisamos entender o que é uma animação em loop. Uma animação em loop é um tipo de animação em que o início e o fim da animação se misturam perfeitamente, criando um loop infinito Em outras palavras, a animação é reproduzida continuamente sem nenhum ponto inicial ou final discernível Há várias maneiras de criar um loop para essa animação. Faremos isso da maneira mais simples, que é criar uma animação reversa para tudo o que acontece aqui. Vamos ver como fazer isso. Para facilitar, vamos ocultar as camadas sem quadros-chave para que elas não interrompam nosso fluxo de trabalho no painel de camadas Assim como ocultamos a paleta de cores anteriormente, podemos selecionar essa camada pois ela não tem quadros-chave Se você não vê o ícone tímido, clique aqui. Ok, vamos clicar aqui e selecionar essa camada dois. Esse, dois. Como não há quadros-chave aqui, vamos selecionar essa camada também Também não há quadros-chave aqui. Vamos selecionar essa camada dois. Não há nenhum aqui. Vamos selecionar essa camada também. Legal. E agora precisamos clicar aqui para ativar a função tímida. Ótimo, agora vemos apenas as camadas relevantes e podemos seguir em frente para criar o loop. OK. Então, a primeira coisa que precisamos fazer é criar a animação de alongamento reverso. Ou seja, precisamos criar uma animação de retorno para a esfera vermelha e também para o caminho da letra A. Então, primeiro de tudo, vamos decidir em que momento queremos retornar a esfera vermelha. Queremos que ele retorne depois atingir o topo no terceiro segundo. Então, no quarto segundo, queremos que ele volte. Assim, podemos simplesmente copiar esse quadro-chave e colá-lo na posição do indicador de tempo Então, vamos selecioná-lo e pressionar o controle C e depois o controle V. Vamos ver como fica. Então a esfera sobe e imediatamente desce. Agora, vamos criar a animação reversa para a esfera azul. Eu quero trazer a esfera azul para baixo somente depois que a esfera vermelha terminar a animação Portanto, vou para o segundo número cinco, copiarei o primeiro quadro-chave da esfera azul e colarei aqui. Vamos ver o que eu tenho. Note que depois que a esfera azul chega ao topo, ela já começa a descer, que não é o que eu queria. Eu precisava ficar acordado todo esse tempo e só começar a voltar a partir do quarto segundo. O que precisamos fazer é criar uma pausa. Vamos aprender como fazer isso. A pausa só será criada se não houver alteração no valor do quadro-chave Portanto, precisamos copiar seu último quadro-chave e colá-lo no quarto segundo Esses dois quadros-chave são completamente idênticos, o que significa que eles têm o mesmo valor Dessa forma, sabemos que não haverá mudança na animação ao longo desse tempo. A alteração só começará logo após esses quadros-chave, pois há quadros-chave com valores diferentes Agora, vamos criar a animação reversa para a esfera amarela. Primeiro, precisamos encontrar o momento em que queremos que a esfera comece a retornar. O segundo número cinco é ótimo porque a esfera azul completa sua animação nesse ponto Também precisamos criar uma pausa, o que significa que a esfera amarela estará na mesma posição em que está agora Podemos copiar esse quadro-chave e colá-lo aqui. Durante esse período, não haverá alteração em sua animação. Em seguida, no segundo número seis, retornaremos a esfera amarela à sua posição inicial. Vamos copiar esse quadro-chave. E cole aqui. Como resultado, a esfera amarela retornará ao seu ponto de partida. Em ambos os casos, copiamos o último quadro-chave e o colamos aqui, depois copiamos o primeiro quadro-chave e o quadro-chave e Em outras palavras, pegamos esses dois quadros-chave e os invertemos Vamos ver como podemos aplicar esse conhecimento para criar a animação reversa da letra A. Precisamos cronometrar a animação reversa da letra A com a animação reversa de todas as esferas Primeiro, vamos combinar a animação reversa do texto extensível com a esfera vermelha. Nesse caso, é muito simples. Simplesmente copiamos os primeiros quadros-chave quando a letra não está esticada e os colamos nesse momento em que a esfera vermelha volta para baixo Vamos copiar esses quadros-chave usando o Controle C e colá-los com o controle V. Agora, a letra é esticada e retorna à sua forma original E agora, quando a esfera azul começa a retornar, precisamos girar a letra volta para o que era no início Ou seja, de um valor de -180 a zero. Mas agora precisamos fazer a animação inversa. Portanto, podemos copiar esses dois quadros-chave com Controle C e colá-los aqui com o controle V. E agora, quando os dois quadros-chave estiverem selecionados, clique com o botão direito do mouse em um deles Vá para o assistente de quadros-chave e selecione quadros-chave reversos. Agora, invertemos a animação dos últimos quadros-chave Em seguida, a partir desse ponto, à medida que a esfera amarela retorna, precisamos inverter a escala da letra. Novamente, selecionaremos os dois quadros-chave do parâmetro de escala e os colaremos na posição do indicador de tempo, pois é aqui que a esfera amarela começa a retornar. Agora vamos reverter esses quadros-chave usando quadros-chave reversos. Vamos ver como tudo fica junto. Ok, agora eu quero te ensinar outro atalho útil. Em vez de colocar manualmente o indicador de tempo no início da linha do tempo, podemos simplesmente pressionar a tecla home Usuários de Mac, preste atenção nas teclas que você precisa pressionar. Legal, e agora vamos aprender como podemos melhorar nossa animação. Mas antes disso, eu recomendo fazer uma pausa de dez minutos. Levante-se da cadeira, faça alguns alongamentos leves, faça um chá ou café e volte se refrescando para a próxima 7. Melhore a animação: Agora, melhoraremos a animação convertendo os quadros-chave de quadros-chave lineares em quadros-chave de fácil atenuação Easyse é um recurso em efeitos posteriores que ajuda a criar uma animação mais suave e natural Ele funciona diminuindo e acelerando gradualmente a animação entre dois quadros-chave, tornando o movimento mais orgânico e menos acelerando gradualmente a animação entre dois quadros-chave, tornando o movimento mais orgânico e Eu abordo esse tópico em profundidade no curso gratuito que mencionei no início deste curso. Se algum de vocês quiser saber mais sobre isso, fique à vontade para assistir. Você pode encontrar o link para o curso gratuito na descrição abaixo ou no arquivo PDF. Isso está na pasta principal do curso que você baixou de mim. Então, para converter os quadros-chave em ESEs, precisamos selecionar todos os quadros-chave Clique com o botão direito em um deles. Vá para o Keyframe Assistant e escolha Ess. Ou podemos usar o atalho F nove. Vamos fazer isso e ver o que temos. Como você pode ver, o ícone dos quadros-chave mudou. Vamos pressionar a barra de espaço e ver como fica. Enquanto isso, há uma diferença muito pequena relação à animação que tínhamos antes. Vamos tentar melhorar ainda mais a animação alterando a velocidade da animação ao longo do tempo. Faremos isso com a ajuda do editor gráfico. Vamos ver como fazer isso. Selecione somente os quadros-chave dessa camada para que possamos ver a diferença das outras camadas Agora, vamos clicar no editor gráfico. Em seguida, clique com o botão direito para garantir que estamos no gráfico de velocidade. Certifique-se de que esse ícone esteja selecionado. Se você ver o gráfico um pouco diferente do meu, clique aqui e você verá todos os quadros-chave. Vamos diminuir um pouco o zoom. Agora, vamos selecionar os quadros-chave novamente e arrastar essa alça aqui enquanto mantém pressionada a tecla shift. Preste atenção às porcentagens de influência. Deve estar em torno de 88%. Vamos também arrastar o outro lado até atingir cerca de 88% Agora, observe o tempo da animação da esfera amarela em comparação com os outros objetos na cena. A duração da animação não mudou, mas a velocidade do objeto no início e no final do movimento mudou. Isso faz com que a esfera amarela se mova de uma forma muito mais interessante do que as outras esferas Vamos aplicar esse movimento a todos os objetos na cena. Como vimos antes, quando movemos as alças, na verdade mudamos a influência dos quadros-chave, que era de cerca de 88% nos dois lados Vamos aprender como alterar a influência com mais precisão sem precisar usar o editor gráfico toda vez. Primeiro, vamos reverter esses quadros-chave para EaseS regulares pressionando F nove Agora, a influência dos quadros-chave voltou ao seu estado original. Em seguida, vamos selecioná-los novamente e, em vez de entrar no editor gráfico, basta manter pressionada a tecla Alt e clicar duas vezes em um dos quadros-chave. Isso abrirá o painel de velocidade do quadro-chave onde podemos inserir a porcentagem de influência Vamos começar definindo-o para 85% no início e 85% no final. Clique em OK. E se verificarmos o gráfico, veremos que a influência agora é igual em todos os quadros-chave Agora vamos mudar a influência de todos os quadros-chave. Não faça isso comigo porque quero explicar algo importante primeiro. É importante observar que só podemos alterar a influência de um tipo de parâmetro. Ou seja, não podemos selecionar todos os quadros-chave, inserir a velocidade do quadro-chave e alterá-los todos para 85% de uma vez Observe que, embora eu tenha selecionado todos eles e os alterado, se verificarmos a influência desses quadros-chave, veremos que na verdade não mudou Não podemos selecionar dois parâmetros diferentes. Precisamos selecionar o parâmetro de escala ou o parâmetro de rotação. No curso gratuito, aprendemos como alterar a influência de todos os parâmetros de uma só vez usando um script gratuito. Para quem quiser conferir isso, fique à vontade para assistir ao curso. Enquanto isso, vamos praticar isso manualmente. Vamos selecionar todos os quadros-chave do parâmetro de posição. Agora, mantenha pressionada a tecla Alt e clique duas vezes em um dos quadros-chave. Então vamos mudar a influência para 85% em 85%, clicar e repetir o mesmo processo com o parâmetro de rotação. Selecionaremos esses quadros-chave, manteremos pressionada a tecla Alt e clicaremos duas vezes em um dos quadros-chave Mudaremos a influência para 85% em 85% e clicaremos. Vamos fazer a mesma coisa com o parâmetro de escala. Precisamos selecionar os quadros-chave do parâmetro de escala, manter pressionada a tecla Alt e clicar duas vezes em um dos quadros-chave. Mudaremos a influência para 85% em 85% e clicaremos. Também precisamos fazer a mesma coisa para o caminho da letra a. Então, vamos selecionar todos os quadros-chave do parâmetro path. Mantenha pressionada a tecla Alt e clique duas vezes em um dos quadros-chave. Mudaremos a influência para 85% em 85% e clicaremos em OK. Finalmente, vamos ver como tudo fica junto. Parece ótimo parar a pré-visualização, precisamos pressionar a tecla de espaço. Então, para voltar ao início da linha do tempo, precisamos pressionar a tecla home Agora, certifique-se de que não estamos selecionando nenhuma camada e pressione para fechar todas as camadas. Em seguida, precisamos restaurar todas as camadas ocultas, desativar o Shi para todas elas e continuar com a lição para aprender como renderizar a animação que criamos como um arquivo de lote. 8. Converta a animação para arquivos LOTIE e JSON: Portanto, para exportar nossa animação em um arquivo adequado para aplicativos e sites, precisamos instalar o plug-in gratuito do Lotti Antes de fazer isso, vamos salvar o projeto pressionando os controles. Depois disso, feche o projeto e prossiga com a instalação do plugue. Primeiro, precisamos acessar o site oficial da Lotti. Você pode encontrar o link na descrição das aulas ou no documento PDF localizado na pasta principal do curso que você baixou de mim. Ou você pode pesquisar arquivos Lotti no Google e visitar o primeiro Agora cadastre-se no site. Depois de se registrar, vá para design e selecione Create with After Effects. Agora, aprenderemos duas maneiras diferentes de instalar o plug-in. O primeiro método é usar o Adobe Creative Cloud, enquanto o segundo método é adequado para quem não tem uma conta do Adobe Creative Cloud. É importante observar que os dois métodos são idênticos para usuários de Mac e Windows. Começarei com o primeiro método do meu PC e depois mostrarei o segundo método usando meu Macbook Vamos começar com o primeiro método e clicar aqui. Você precisa ter certeza de que está conectado à sua conta. Agora clique em Gerenciar e instale o plug-in usando o aplicativo Creative Cloud. Você pode abrir o aplicativo aqui ou procurá-lo no seu computador. Se você não tiver esse aplicativo, poderá acessar a Creative Cloud pelo navegador da Internet e baixar a versão para desktop. Como eu já tenho o aplicativo, não vou baixá-lo novamente. Depois de baixar e instalar o aplicativo, faça login em sua conta, acesse o estoque e o mercado e, em seguida, entre no futuro. Agora digite na barra de pesquisa e instale a versão para o After Effects. Clique e aguarde alguns instantes. Agora vamos passar para o segundo método. Esse processo é idêntico para usuários de Mac e Windows. A primeira coisa que precisamos fazer é clicar aqui e baixar o arquivo ZXP Se tentarmos abrir esse arquivo, não teremos sucesso. Para instalar esse arquivo, precisamos usar o gerenciador de extensões. Podemos encontrar o link para baixar a extensão no guia de instalação dos arquivos Li. Agora, se rolarmos para baixo, veremos um link para o site do Anastas Extension Manager Vamos clicar no link. Baixe a versão que mais nos convém. Como estou fazendo isso usando meu Macbook, vou baixar esta versão Agora, vamos extrair esse arquivo e excluir o arquivo zip ou win. Em seguida, vamos abrir a extensão. Se estiver usando um Mac, você pode marcar como mover duas pastas de aplicativos. Aqui, você pode selecionar verificar automaticamente. Agora você deve ver os nomes dos programas da Adobe instalados no seu computador. Vamos escolher o After Effects. E agora, para instalar o plug-in, basta arrastar o arquivo ZXP para a extensão Clique e aguarde alguns instantes. Em seguida, clique novamente. O plug-in agora está instalado com sucesso e podemos vê-lo no After Effects. Você pode fechar a extensão e outras janelas e retornar ao nosso projeto. Depois de instalar o plug-in, vamos voltar para a pasta que criamos para e para a pasta AE e abrir nosso projeto. Agora você pode fechar esse painel. Em seguida, vamos abrir o plugue. Vá para a janela, depois para as extensões e escolha Arquivos Lottie Clique nele e o painel Lottie será aberto. Agora, vamos nos registrar pelo navegador. Depois disso, você pode fechar o navegador e retornar ao nosso projeto. Aqui, podemos ver o nome da composição em que estamos trabalhando. E agora, clique no botão verde e espere a Lotti ficar pronta E aqui podemos ver que nossa animação está pronta. A propósito, podemos pegar esse painel aqui e anexá-lo aqui por conveniência. Agora vemos que temos uma nota de erro. Se clicarmos nele, veremos os erros que temos. Devido a esses erros, a animação não funcionará nos dispositivos exibidos aqui. Vamos começar corrigindo o erro do arquivo lottie na web. Podemos voltar aqui para a composição e fazer algumas mudanças. A primeira coisa que faremos é excluir as camadas de texto ativo. Para fazer isso, podemos converter essas camadas de texto em formas com caminho, como fizemos com a letra A. Selecionaremos a camada que queremos alterar. Clique com o botão direito, vá para criar e escolha Criar formas a partir do texto. Agora podemos excluir essa camada de texto e alterar a cor para vermelho para saber que essa camada pertence a esse grupo. Vamos fazer a mesma coisa para as próximas duas camadas de texto. Agora podemos excluir essa camada de texto dois. Não há necessidade de mudar a cor aqui porque já é azul. Vamos fazer isso mais uma vez para essa camada. Clique com o botão direito, crie e escolha Criar formas a partir do texto. Agora, excluiremos a camada de texto e alteraremos a cor para amarelo. Agora, precisamos nos livrar dos caminhos de mesclagem. Depois de converter a camada de texto em uma camada moldada, é criado um parâmetro chamado caminhos de mesclagem, que precisamos excluir para que o arquivo lottie funcione Podemos encontrar caminhos de mesclagem em conteúdo. Selecione e pressione backspace ou delete. Agora, em vez de abrir cada camada manualmente, podemos simplesmente selecionar as camadas relevantes. E agora, digite merge na barra de pesquisa e veja todos os caminhos de mesclagem existentes no projeto Vamos deletar todos eles. E agora podemos clicar na seta verde novamente. Como você pode ver, a mensagem de erro desapareceu. Agora, vamos abordar outro problema que temos. Observe que, quando a animação termina, vemos a cena inteira parada. Ou seja, temos muitos quadros desnecessários nos quais não vemos nenhuma alteração. Para corrigir isso, precisamos reduzir a duração da nossa composição Vamos voltar à composição e ver exatamente onde nossa animação termina. Para saber exatamente onde termina, precisamos encontrar o último quadro-chave nessa cena Para isso, precisamos ver todos os quadros-chave do projeto. Pergunta: qual tecla devemos pressionar para ver todos os quadros-chave de todas as camadas. Então, para conseguir isso, vamos garantir que não estamos selecionando nenhuma camada e pressione a tecla U. Se expandirmos o painel, veremos onde os últimos quadros-chave estão localizados. Aqui está nos seis segundos. Precisamos encurtar a área de trabalho para seis segundos. Podemos fazer isso manualmente arrastando a área de trabalho ou usando a tecla n, que reduzirá a área de trabalho até o local do indicador de tempo E se pressionarmos o botão criar novamente, veremos que a animação agora é reproduzida em um loop perfeito. OK. Agora vamos aprender como renderizar essa animação em um arquivo Lotti ou JSON Também aprenderemos como podemos visualizar a animação que criamos em um navegador da web ou em um dispositivo móvel. Para renderizar a animação, clique aqui e escolha em qual formato renderizá-la. Mas antes disso, vamos ver como fica no navegador da web e em um dispositivo móvel. Para fazer isso, vamos clicar em Carregar. Agora vemos o nome da nossa composição. Aqui, escolhemos em qual pasta salvá-lo na conta Lotti em que nos inscrevemos Vamos clicar em carregar. Aguarde alguns segundos. Agora vamos voltar ao site da Lotti. Se você já se inscreveu, pode clicar aqui, acessar meu painel e ver a animação que acabamos de criar. Vamos abri-lo e ver como é. A partir daqui, você pode ver como ele aparece em um telefone ou tablet simplesmente abrindo a câmera e digitalizando esse código QR. A partir daí, podemos renderizar a animação em um arquivo JS leve. Também podemos baixá-lo daqui como um arquivo lotado que pesa ainda menos e salvá-lo em seu computador No entanto, vamos fechar isso porque renderizaremos a animação por meio do After Effects. Outra consideração importante antes da renderização é como sua animação aparecerá em diferentes cores de fundo Ao descartá-lo, você pode fazer os ajustes mais adequados às suas necessidades Ao pressionar esse botão, podemos ver a animação no modo de tela cheia. Na minha opinião, parece fantástico. Ok, pressione o botão de escape e vamos voltar ao After Effects e continuar renderizando a animação Vamos clicar aqui e renderizá-lo como arquivo JSON. Salvaremos o arquivo na pasta de amostras que criamos anteriormente. Verifique se o nome é bom. É o mesmo nome da composição. Estou bem com isso, então vou clicar em Salvar. Agora vamos abrir nossa pasta de amostra e verificar a renderização. O arquivo está lá e pesa apenas 32 kilobytes. Agora vamos salvá-lo como um arquivo de lote. Já estamos dentro da pasta de amostra. Desta vez, a extensão é L, o que é ótimo. Vamos clicar em Salvar. Vamos voltar para nossa pasta, atualizá-la e podemos ver que arquivo Lotti pesa 5 kilobytes Esses são os arquivos que você pode enviar para seu cliente ou para um programador ou para quem está trabalhando em seu site ou Agora, vamos voltar ao projeto e continuar com a lição. Em relação ao plugue , podemos arrastá-lo até aqui para que não nos incomode Solte-o do painel ou feche-o dessa maneira. Agora vamos preparar nossa animação para compartilhar nas redes sociais e em seu portfólio. 9. Faça a animação para compartilhar em seu portfólio!: Então, para compartilhar a animação que criamos nas redes sociais e em nosso portfólio. Precisamos renderizá-lo em um arquivo MP four. Então, agora vamos aprender como renderizar essa animação com um plano de fundo como um arquivo MP four de alta qualidade. Como você pode ver, o plano de fundo que temos aqui não é um plano de fundo real. É feito apenas para a tela de pré-visualização. Para criar um plano de fundo real, precisamos criar um novo sólido clicando com o botão direito do mouse nessa área cinza. Vamos para novo e selecionaremos sólido. Ou podemos usar o atalho Control Y. Então, vamos pressionar o controle y e criar uma nova camada sólida Agora, vamos escolher a cor do sólido. Antes de pressionarmos ok, vamos garantir que o sólido tenha o mesmo tamanho da composição. Podemos clicar aqui para que isso aconteça, e agora vamos pressionar OK. Aqui está o sólido. Vamos arrastá-lo para baixo de todas as camadas. Antes da renderização, garantimos que a área de trabalho termine tempo para evitar a renderização de peças desnecessárias E agora, para renderizar o vídeo, navegamos até a composição e escolhemos adicionar duas renderizações Q. Agora estamos no painel de renderização do After Effects , onde podemos ver qual composição estamos renderizando Aqui, selecionamos o formato de arquivo que queremos renderizar o vídeo dois. Escolheremos H 0.2 64, que é o arquivo MP quatro. Nas opções de formato, escolhemos VBR e garantimos que a codificação de hardware esteja Aqui escolhemos a qualidade do MP four. Defina para 40. Isso renderizará um tamanho de arquivo um pouco maior, mas com melhor qualidade de vídeo. Agora clique e escolha onde salvar a renderização. Vamos selecionar a pasta de amostras que criamos e usar o mesmo nome da composição do arquivo. Por fim, clicamos em Salvar e depois no botão renderizar para iniciar o processo de renderização Agora, vamos esperar alguns segundos. E agora, para ver a renderização, podemos encontrar a pasta manualmente ou clicar no link aqui no modo de saída. Isso nos levará diretamente para a pasta em que o vídeo é renderizado Vamos abrir o vídeo e ver como fica. Parece ótimo. Agora você pode compartilhar a animação criada nas redes sociais e exibi-la no site do seu portfólio. E se você gostou do curso, eu realmente agradeceria se você avaliasse este curso de acordo com sua experiência. Além disso, não se esqueça de deixar um feedback, para que eu saiba se você aprendeu algo interessante no curso ou não. Ok, vamos voltar ao nosso projeto. Vamos voltar à composição e, antes de sair do projeto, vamos salvá-la. Pressione os controles. E agora você pode fechar o projeto e se juntar a mim na próxima aula, onde aprenderemos como criar uma animação interessante e usá-la como uma assinatura de e-mail. Estou muito orgulhoso de você. Você aprendeu muito hoje. Você pode compartilhar sua animação em nosso grupo comunitário privado. E, claro, você pode me fazer perguntas lá. Prometo responder a qualquer pergunta que você tenha. Espero que você tenha gostado e, antes de começar a próxima aula, recomendo fortemente que você faça uma pausa de dez minutos Levante-se da cadeira, faça alguns alongamentos leves, pegue uma xícara de café e recarregue seu cérebro para a próxima aula. OK. 10. Seção 1: Tarefa de projeto: Tudo bem E agora vamos praticar o que aprendemos. Por favor, crie esta animação. Você pode usar cores diferentes das minhas, mas tente manter a animação igual. Essa tarefa tem como objetivo ajudá-lo a lembrar e entender o que você aprendeu. Não se preocupe A tarefa não ocupará muito do seu tempo. Ele foi projetado para ser feito em apenas 2 horas. Se você tiver algum problema ou dúvida, sinta-se à vontade para pedir ajuda a mim ou a seus colegas de classe em nosso grupo comunitário fechado M 11. Seção 2: Assinatura de Gmail animado: Olá a todos, e obrigado por se juntarem a mim novamente. Nesta lição, criaremos uma animação super legal que será convertida em uma assinatura de e-mail profissional. Desta vez, nossa animação será composta por três partes animadas separadas. Aprenderemos o fluxo de trabalho correto ao trabalhar em projetos um pouco mais complicados. Esta lição está dividida em seis partes nas quais aprenderemos. Na primeira parte. Criaremos a primeira parte animada da animação e aprenderemos como criar um equipamento básico para controlar facilmente a forma que criamos . Na segunda parte. Aprenderemos como agrupar todas as camadas em um grupo e aprenderemos sobre o conceito de pré-composição Em seguida, continuaremos a animar a cena na terceira parte Vamos projetar e animar a segunda parte animada da animação Usaremos e aprenderemos um efeito interessante. Em seguida, criaremos a terceira parte animada e sincronizaremos entre todas as partes. Na quarta parte. Prepararemos a animação que criamos para renderização e aprenderemos como criar um arquivo de presente usando o Photoshop. Na quinta parte. Aprenderemos como criar a assinatura do Gmail usando o Google Docs Aprenderemos como transferir a assinatura que criamos para a conta do Gmail Em seguida, identificaremos quaisquer problemas em potencial que possamos encontrar, resolveremos os problemas e exportaremos um arquivo de presente adequado. Na sexta parte. Prepararemos a animação que criamos para compartilhamento nas redes sociais e renderizaremos a animação que fizemos em um arquivo MP four de alta qualidade. Por fim, organizaremos o projeto antes de fechá-lo. Depois disso, no final da aula, você receberá uma pequena tarefa para realizar. A tarefa tem como objetivo ajudá-lo a lembrar e entender o que você aprendeu. Não se preocupe A tarefa não ocupará muito do seu tempo. Ele foi projetado para ser feito em apenas 2 horas. Se você tiver algum problema ou dúvida, sinta-se à vontade para pedir ajuda a mim ou a seus colegas de classe em nosso grupo comunitário fechado Tudo bem Chega de falar. Vamos começar. 12. Vamos começar a projetar a cena: Então, primeiro, vamos abrir o software After Effects. Podemos sair dessa janela, ampliar a janela do software e ver os mesmos layouts de painel Vamos clicar em padrão. Agora, vamos clicar na nova composição e criar nossa primeira composição. Vamos chamar isso de animação para o Gmail. Trabalharemos em um formato quadrado de dez 80 por dez 80 pixels a uma taxa de quadros de 30 quadros por segundo. A duração da composição será de 10 segundos. Podemos deixar a cor de fundo em branco e clicar. Ótimo, agora que criamos nossa primeira composição, precisamos salvar o projeto e dar um nome a ele. Vamos até a pasta que criamos para a lição. Entraremos na pasta A e nomearemos arquivo do After Effects em que estamos trabalhando no momento. Podemos dar a ela o mesmo nome da nossa composição principal. Agora, vamos clicar em salvar. Agora, vamos importar a paleta de cores para o projeto. Para isso, clicaremos duas vezes na área cinza no painel do projeto. Agora, encontraremos a pasta que criamos para a lição e entraremos na pasta de ativos. Selecionaremos a paleta de cores e clicaremos em importar. Depois disso, vamos arrastar a paleta para a composição, pressionar e definir o tamanho da camada para 30 Vamos colocá-lo aqui, para que não nos incomode. Podemos bloquear a camada e ocultá-la do painel de camadas. Para quem não vê o ícone do tímido, você pode clicar aqui. Vamos selecionar a camada como uma camada oculta e ocultá-la clicando no ícone aqui. Lá, essa camada está escondida do painel de camadas, mas ainda podemos vê-la na tela. Ok, agora vamos começar a criar nossa cena. A primeira coisa que faremos é selecionar a ferramenta retangular. Vamos desligar o preenchimento. Selecionaremos o traçado e a cor escura da nossa paleta E agora vamos criar o retângulo enquanto pressionamos a tecla shift para criar uma forma simétrica O ponto de ancoragem da forma é automaticamente colocado no centro porque selecionamos essa função nas preferências Para aqueles cujo ponto de ancoragem não está no centro da forma, você pode selecionar a ferramenta de ponto de ancoragem e arrastar o ponto de ancoragem até o centro da forma enquanto mantém pressionado o controle Não se esqueça de voltar à ferramenta de seleção. Agora vamos destacar a grade pressionando a tecla apóstrofo para ver o centro da composição Agora vamos alinhar a camada ao centro da composição usando a ferramenta de alinhamento Clique aqui e aqui. Agora, vamos liberar os cantos dessa forma para que possamos mover cada um separadamente. Para fazer isso, precisamos converter o caminho dessa forma em um caminho de Bézier. Vamos abrir o conteúdo da camada. Abra o retângulo até vermos o caminho do retângulo. Clique com o botão direito do mouse e escolha converter o caminho do Tobi. Agora, se selecionarmos a ferramenta caneta e selecionarmos um dos cantos, poderemos movê-la separadamente desta forma. Agora, precisamos usar um script gratuito do Aftereffects. Isso nos ajudará a mover os pontos de uma forma mais conveniente. Mas antes de usar o script, precisamos abrir o caminho e selecioná-lo. Agora podemos voltar para a ferramenta de seleção. Agora podemos ir até a janela, rolar para baixo e escolher abrir o script chamado criar nulos a partir de caminhos Enquanto o caminho estiver selecionado, precisamos clicar nos pontos que seguem os caminhos. Agora podemos fechar o painel ou movê-lo aqui. Também podemos fechar a janela a partir daqui. Agora temos quatro nulos, que são quatro camadas vazias que nos permitem controlar os cantos da nossa Agora vamos criar as pequenas esferas que deveriam estar nos cantos da forma Vamos garantir que não selecionemos nenhuma camada. Clique e segure a ferramenta retângulo e selecione a ferramenta de elipse Vamos mudar a cor para azul e desativar o traçado. OK. Criaremos a esfera enquanto pressionamos a tecla shift para que ela fique simétrica OK. Agora vamos mudar o nome da camada. Vamos selecioná-lo e pressionar enter. Vamos chamá-la de esfera um. Pressione enter para finalizar a ação. Porque mudamos o nome. Agora podemos ver os nomes secundários de nossas camadas. Para voltar a ver os nomes normalmente. Vamos clicar aqui. Agora, vamos colocar a primeira esfera ao lado do primeiro nulo. Porque em breve controlaremos e animaremos os cantos da forma a partir das esferas e não dos Vamos selecionar o nulo para ver onde ele está localizado. Agora vamos mover a esfera para essa área. Vamos voltar às ferramentas de seleção que possamos mover as camadas na composição e vamos mover a esfera aqui. Nosso objetivo é localizar o ponto de ancoragem da esfera a ser localizado exatamente no canto da forma Para fazer isso, podemos usar a função de encaixe. Vamos clicar aqui e ativar as duas funções localizadas ao lado dela. Agora, quando movemos a esfera do centro, ela se moverá de forma rápida Soltaremos o mouse quando percebermos que a esfera foi colocada onde queremos. Agora vamos duplicar essa esfera usando o controle de atalho D. Vamos movê-la um pouco para baixo e colocá-la ao lado desse Vamos também alterar a posição da camada no painel de camadas por conveniência. Agora vamos pegá-lo do centro e movê-lo em direção ao canto da forma. Vamos duplicar a forma novamente usando o controle D. Mova-a até o local desse nulo e coloque a esfera próxima a ela no painel de camadas Agora vamos movê-lo para o canto da forma. Vamos repetir essa ação uma última vez. Controle D para duplicar. Mova a esfera para o canto da forma e posicione-a ao lado desse nulo no painel de camadas Agora podemos cancelar a captura e continuar. Como vocês sabem, movemos o caminho da nossa forma usando os nulos Agora eu quero mover o caminho usando as esferas e não os nulos Podemos conectar o nulo e a esfera usando a função pai e link pais e a vinculação são ferramentas poderosas e efeitos posteriores que permitem controlar o movimento de uma camada ou propriedade com base no movimento de A paternidade é uma relação entre duas camadas em que uma camada, a criança está ligada e segue o movimento de outra camada, a mãe Quando você cria uma camada em outra camada, qualquer movimento ou transformação aplicado à camada principal também é aplicado à camada secundária. Isso é útil para criar animações complexas, como personagens ou veículos, que o movimento de uma parte afeta o movimento de outra A vinculação, por outro lado, é uma relação mais flexível que permite controlar uma propriedade ou parâmetro de uma camada com base em outra Eu abordo esse tópico em profundidade no curso gratuito que mencionei no início deste curso. Se algum de vocês quiser saber mais sobre isso, fique à vontade para assistir. Você pode encontrar o link para o curso gratuito na descrição abaixo ou no arquivo PDF. Isso está na pasta principal do curso que você baixou de mim. Então, tudo o que precisamos fazer agora é simplesmente arrastar o botão de seleção da camada nula para a camada esférica Agora você pode ver que quando movemos a esfera, ela move o caminho. Vamos fazer o mesmo com o resto dos nulos. Vamos conectar o nulo três à esfera três. Veja se funciona. Em seguida, faça o mesmo com nulo dois e esfera dois, nulo um e esfera um Agora, na verdade, não precisamos mais ver esses nulos, então podemos selecioná-los todos clicando na tag, escolhendo selecionar grupo de rótulos e ocultar todos no painel de camadas Agora, vamos marcar a camada da forma com qualquer cor para diferenciá-la das camadas da esfera Então, depois de criarmos nossa cena e controlarmos o caminho da forma pelas esferas, estamos prontos para seguir em frente e começar a animar a cena. OK. 13. Aprenda como fazer camadas de grupo (: Tudo bem. Então, primeiro, vamos selecionar todas as esferas Selecionaremos a primeira esfera, depois pressionaremos a tecla Shift e selecionaremos a última esfera. Neste estágio, sei que as esferas da minha animação precisam ser colocadas onde estão agora Digamos que isso aconteça no segundo número um. Agora, pressionaremos P para abrir o parâmetro de posição e criar um quadro-chave. E agora, no segundo zero, que está no início da animação, quero que eles apareçam do centro. Podemos colocá-los no centro usando a ferramenta de alinhamento. Apenas certifique-se de que o alinhamento esteja de acordo com a composição e clique aqui e aqui Novos quadros-chave foram criados automaticamente com a nova localização das esferas Então, o que vai acontecer agora é que no segundo número zero, as esferas estarão aqui e no segundo número um as esferas chegarão Agora, no segundo número dois, quero que as esferas voltem ao centro Podemos fazer isso usando a ferramenta de alinhamento novamente. Ótimo, e agora vamos melhorar a animação. Pergunta: como podemos tornar nossa animação mais interessante? Para fazer isso, vamos selecionar todos os quadros-chave e convertê-los facilmente pressionando a tecla F nove Tudo o que resta fazer agora é criar um deslocamento para a animação das esferas para que elas não se movam todas juntas ao mesmo tempo Vamos decidir se as quatro esferas serão as primeiras, então selecionaremos todas as outras esferas Agora, avançaremos com o indicador de tempo quatro quadros e moveremos os quadros-chave aqui Também podemos selecionar os quadros-chave que queremos mover no tempo e movê-los usando um atalho interessante Pressionaremos a tecla alt e moveremos os quadros-chave para o lado usando as setas do Vamos fazer isso com esses quadros-chave também. Mantenha pressionada a tecla alt e mova os quadros-chave quatro quadros para frente com a seta para a direita Ok, vamos ver o que temos. Tenha uma aparência doce. mudar a espessura do traçado bem rápido. Selecionaremos a camada e alteraremos a espessura do traçado para dez ou até 12. Sim, 12 parece melhor. Então, depois de terminarmos a primeira parte animada e antes de prosseguirmos, vamos agrupar todas as camadas relacionadas à animação da primeira parte animada em um grupo. No After Effects, chamamos isso de precomposição. pré-composição é uma técnica usada para agrupar camadas e tratá-las como uma É uma ferramenta muito útil no After Effects que pode simplificar sua linha do tempo e ajudá-lo a organizar seu projeto Em seguida, você pode tratar essa camada pré-composta como qualquer outra camada em sua composição e aplicar efeitos, transformações e outros ajustes nela Eu abordo esse tópico em profundidade no curso gratuito que mencionei no início deste curso. Se algum de vocês quiser saber mais sobre isso, você pode encontrar o link para o curso gratuito na descrição abaixo ou no arquivo PDF. Isso está na pasta principal do curso que você baixou de mim. Ok, então vamos ver como isso é feito. Primeiro, vamos esconder todos os quadros-chave. Certifique-se de que não selecionamos nenhuma camada e pressione você. Agora, vamos mostrar os nulos que atingimos anteriormente porque eles têm um papel essencial nessa parte animada Vamos selecionar todas as camadas, excluindo a paleta de cores pois ela não faz parte dessa parte animada Ok, agora vamos selecionar as camadas relevantes. Clique com o botão direito do mouse em um deles e escolha pré-compor ou use o atalho Control Shift C. Por enquanto, vamos Vamos chamá-lo de animação sublinhado um. Agora, vamos verificar se os dois estão selecionados e pressionar OK. Também podemos ver a pré-composição que fizemos no painel do projeto. Nada mudou na animação e, se clicarmos duas vezes na pré-composição, poderemos inseri-la Vamos desligar o plano de fundo e a grade. Podemos usar a função shy novamente para ocultar os nulos e continuar a lição Agora, vamos voltar à nossa composição principal. Como você pode ver, o tamanho dessa pré-composição é igual à composição principal Na verdade, não preciso que essa pré-composição tenha esse tamanho porque há muito espaço vazio tenha esse tamanho porque há muito espaço vazio aqui. Vou desligar a rede. Como não preciso de todo esse espaço, preciso diminuir o tamanho da pré-composição. Para fazer isso, precisamos entrar na pré-composição e alterar suas configurações Para acessar as configurações de composição, pressionaremos o controle K. Agora, vamos garantir que a visualização esteja selecionada e diminuir o tamanho Vamos alterá-lo para 800 pixels por 800 pixels. Vamos nos certificar de que eu não o tornei muito pequeno. E quando voltarmos à composição principal, veremos que agora diminuímos o tamanho da pré-composição e isso tornará nosso trabalho mais conveniente A pré-composição que criamos se torna automaticamente uma camada regular do After Effects Como qualquer camada e efeitos posteriores, a camada de pré-composição tem os parâmetros básicos Nesse caso, animaremos o parâmetro de escala para tornar nossa animação mais interessante Para ver o parâmetro de escala, vamos selecionar a camada e pressionar. Podemos ocultar a paleta de cores para que ela não fique no nosso caminho. Agora vamos decidir que, no início da nossa animação, o tamanho da pré-composição será zero Então, vou criar um quadro-chave com esse valor. No quadro 15, essa camada crescerá para 100%. Agora vamos selecionar os quadros-chave e convertê-los em ECEs usando F nove. Vamos ver como fica. OK. Agora vamos diminuir o tamanho dessa camada quando a animação dentro dessa pré-composição estiver concluída Vamos para o segundo número dois. Como aprendemos na lição anterior, podemos copiar esses quadros-chave usando o Controle C e colá-los no lugar do indicador de tempo usando o Controle V. Agora, vamos invertê-los com um clique direito em um deles, acessar o Assistente de quadros-chave e selecionar quadros-chave com inversão de tempo Vamos verificar se o tempo da animação em escala reduzida corresponde ao da animação. Acho que deveria começar a diminuir um pouco mais cedo por aqui Então, vamos mover os quadros-chave aqui. Ok, agora vamos dar uma olhada novamente. Tudo bem. Vamos seguir em frente. Como você pode ver, a animação dessa camada já está finalizada aqui. Ou seja, a partir do segundo, não vemos nada, mas a duração dessa pré-composição é muito Nós realmente não precisamos de todo esse comprimento. Vamos aprender como encurtar a pré-composição. Vamos até o final da animação e arrastaremos a camada pelo canto desta forma, ou podemos encurtar a pré-composição de verdade. Para fazer isso, precisamos entrar na pré-composição. Agora precisamos encontrar o momento em que a animação termina. É aí que está nosso último quadro-chave. Para isso, garantiremos que não selecionemos nenhuma camada e pressionaremos você. Aqui está o último quadro-chave. Colocaremos o indicador de tempo aqui e colocaremos a área de trabalho no lugar do indicador de tempo manualmente. Ou usando o atalho que aprendemos. Imprensa. Agora, para eliminar todo o comprimento desnecessário, precisamos clicar com o botão direito do mouse na parte cinza da área de trabalho e selecionar trim comp to work area E aqui, o comprimento ficou menor. E se voltarmos à composição principal, veremos que o comprimento desse prec é menor Vamos ver como fica. A única coisa que resta a fazer é mover esses quadros-chave para o final da pré-composição Agora, quero criar a mesma animação, mas com pequenas alterações na cor das esferas e na espessura do traço moldado Podemos duplicar a animação e fazer tudo o que planejamos Vamos ver o que acontece se eu duplicar essa pré-composição no painel de camadas Agora vou entrar na pré-composição e mudar a cor de uma das esferas Quando eu voltar à composição principal, verei que a cor mudou nas duas pré-composições, não é o que eu queria Eu só queria mudar a cor nesta pré-composição e não na outra OK. Vou pressionar o controle Z para desfazer minhas ações e vamos ver como fazer isso corretamente O que precisa ser feito não é duplicar a pré-composição desse painel, mas por meio do painel do projeto Caso tenhamos muitas pré-composições no projeto e queiramos encontrar uma específica Podemos clicar com o botão direito do mouse na pré-composição que queremos encontrar, ir para revelar e selecionar a fonte e o projeto da camada de revelação Agora, pressionaremos Control D para duplicar essa pré-composição. A pré-composição não está atualmente em nossa composição principal porque ainda não a arrastamos para lá Podemos fazer isso depois de fazer as mudanças que planejamos. Por enquanto, vamos inserir essa pré-composição a partir daqui. Agora vamos selecionar nossa paleta de cores painel do projeto para ver as cores Vamos selecionar todas as esferas e mudar suas cores usando o conta-gotas Vamos experimentar a cor vermelha da nossa paleta. Depois disso, podemos mudar a cor do nosso traçado modelado para amarelo. Também vamos definir a largura do traçado como oito. Podemos restaurar o plano de fundo para ver sua aparência. Agora vamos diminuir o tamanho das esferas nesta pré-composição Fecharei todas as camadas e exibirei o parâmetro de escala somente para essa camada. Veja o que acontece quando mudamos o tamanho dessa camada. Como está vinculado ao nulo e o nulo está vinculado ao caminho, isso arruína o design da Vamos ver como fazer isso corretamente. Vamos abrir a camada. Dentro das camadas da forma. Há dois lugares onde podemos controlar o tamanho da forma. Podemos controlar o tamanho da forma usando as propriedades básicas de transformação da própria camada. No entanto, descobrimos que não funcionou para nós dessa vez. Felizmente, nas camadas de forma, também existem propriedades básicas de transformação para a forma dentro da camada, que é chamada de elipse um Dessa forma, nossa forma encolherá adequadamente. Então, vamos encolher todas as esferas por meio da transformação das formas e não da transformação das camadas Vamos reduzi-lo para talvez 50. Ou 80. Acho que 60 seria a melhor opção. Vamos fazer o mesmo com o resto das esferas. Para não abrir manualmente a transformação de cada esfera, podemos simplesmente selecionar as camadas que queremos reduzir e digitar a escala na barra de pesquisa e pressionar enter Agora, vemos que cada camada tem dois tipos de escala, as formas se transformam e as camadas se transformam. No nosso caso, usaremos a escala moldada. Vamos escrever 60 aqui. Agora, podemos excluir a palavra da barra de pesquisa e continuar. Agora vamos voltar à nossa composição principal e arrastar a nova pré-composição aqui. Vamos desligar essa pré-composição para ver a nova. Como você pode ver, essa pré-composição não tem a animação em escala que existe na primeira Podemos selecionar o parâmetro aqui. Dessa forma, selecionaremos todos os seus quadros-chave. Agora vamos pressionar Control C para copiá-los. Em seguida, podemos colá-los na nova pré. Vamos pressionar control V. Agora, vamos pressionar S para ver o parâmetro de escala e os quadros-chave que acabamos de colar Observe que os quadros-chave foram colados no mesmo local em que estava o indicador de tempo Vamos mover os quadros-chave para o início da pré-composição. Finalmente, vamos ativar a primeira pré-composição novamente. Tudo bem. Vamos seguir em frente. Agora, criaremos um deslocamento entre essas duas pré-composições. Vamos selecionar essa camada e movê-la para frente no tempo. Vamos ver o que temos. Parece ótimo. Vamos posicionar essa camada abaixo da primeira. Agora, para criar uma animação mais interessante. Vamos criar uma animação de rotação para a primeira pré-composição. Para isso, vá até o início da animação e pressione R para abrir o parâmetro de rotação. Agora, vamos criar um quadro-chave com o valor atual, que é rotação de zero graus. No final dessa pré-composição, vamos configurar a camada para girar uma rotação completa Vamos ver como fica. Agora, selecionaremos os quadros-chave e os converteremos em EaseS Looks better now Vamos fazer algo parecido com a segunda pré-composição. Iremos para o início dessa pré-composição, pressionaremos R, criaremos o primeiro quadro-chave e, desta vez, definiremos a camada para girar Vamos selecionar os quadros-chave e convertê-los também em asys Tudo bem. Vamos ver como tudo fica junto. Vamos ver isso de novo. Parece bom. Agora, vamos fechar as camadas e alterar um pouco o tempo entre as duas animações. OK. Parecendo bem. E estamos prontos para passar para a próxima parte. 14. Movendo-se para projetar e animar a segunda parte: Então, agora, vamos criar a animação das cinco esferas giratórias Para fazer isso, insira a primeira pré-composição, copie uma das esferas e cole-a na composição principal Vamos também copiar a esfera da segunda pré-composição. Agora vamos desligar as pré-composições para que não nos incomodem Agora, vamos excluir a animação nessas esferas. Selecione as duas camadas, pressione você, selecione os quadros-chave e use o backspace ou a tecla delete para excluí-los das camadas Em seguida, vamos centralizar essas duas esferas na composição usando a ferramenta de alinhamento Certifique-se de que a composição esteja selecionada. Em seguida, clicaremos aqui e aqui. Agora, vamos projetar a cena inteira. Vamos ampliar um pouco usando a roda do mouse. Para quem não tem a roda do mouse, você pode ampliar a partir daqui ou pressionar essas teclas. Ok, vamos mover essa esfera aqui enquanto pressionamos a tecla shift. Vamos duplicar a esfera azul e movê-la aqui. Vamos também duplicar a esfera vermelha e movê-la aqui. Agora, vamos selecionar as duas esferas vermelhas com shift e marcar essas camadas em rosa para que possamos distinguir facilmente entre as esferas Agora vamos ver como podemos verificar se as distâncias entre as esferas são iguais Para fazer isso, abriremos a grade proporcional pressionando e pressionando a tecla apóstrofo Agora precisamos ir para editar e depois para as preferências e selecionar grades e guias Aqui, podemos alterar o número de linhas na grade proporcional Vamos configurá-lo para oito no eixo vertical e pressionar. Agora podemos ajustar as posições das esferas de acordo com a nova grade Pressione sal e a tecla apóstrofo novamente para fechar a grade Agora estamos prontos para animar as esferas. Então, vamos diminuir o zoom um pouco. Selecione todas as esferas. E agora vá para o segundo número um. Pressione P para ver o parâmetro de posição e criar o primeiro quadro-chave. Agora vá para o segundo zero, centralize todas as esferas usando a ferramenta de alinhamento Certifique-se de que estamos selecionando a composição e clique aqui e aqui. Depois disso, vá para a segunda segunda e centralize os quadros-chave novamente com uma linha. Agora, vamos cortar essas camadas na posição do indicador de tempo, porque é quando a animação dessas camadas termina. Para fazer isso, usaremos o atalho Alt e o colchete direito Agora, vamos alterar os quadros-chave para facilitar e ajustar sua animação com o editor gráfico Selecione esses quadros-chave e arraste as alças aqui. Vamos ver como fica. Parece bom. Agora, vamos colocar as esferas vermelhas sob as azuis, fechar as camadas e seguir em frente E agora, quero adicionar uma animação de rotação a todas as esferas à medida que elas se abrem para os lados Para isso, podemos usar um objeto nulo. No After Effects, um objeto nulo é um tipo de camada que não é renderizada nem aparece na tela, mas pode ser usado como ponto de referência para outras camadas na composição É uma camada invisível que pode ser usada para controlar a posição, rotação, escala e outras propriedades de outras camadas na composição. Uma das principais vantagens de usar um objeto nulo é que ele permite controlar várias camadas ao mesmo tempo, vez de precisar ajustar cada camada individualmente Por exemplo, você pode criar várias camadas um objeto nulo e depois controlar as camadas com o nulo Estou falando sobre esse tópico em profundidade no curso gratuito que mencionei no início do curso. Para quem quiser entender esse tópico em profundidade, fique à vontade para assistir ao curso gratuito. Você pode encontrar o link para o curso na descrição abaixo ou no arquivo PDF na pasta principal que você baixou de mim. Então, vamos fazer isso. Clique com o botão direito do mouse aqui, vá para novo e selecione o objeto nulo O nulo está centralizado na composição e é ótimo. Agora podemos selecionar todas as esferas e vinculá-las ao nulo Vamos cortar o nulo no comprimento das camadas das esferas Para fazer isso, usaremos o atalho Alt e o colchete direito Agora vamos ao início da animação, pressione R para exibir o pressione R para exibir parâmetro de rotação do nulo e criar o primeiro quadro-chave Vamos passar para o segundo número dois e definiremos que, no segundo, o nulo fará uma rotação O que acabamos de fazer foi adicionar uma animação adicional a todas as esferas com a ajuda do nulo Portanto, todas as esferas giram enquanto se abrem para os lados Agora vamos simplificar esses quadros-chave vamos mudar o comportamento da animação da rotação para algo assim A rotação dos nulos começará lentamente e, em direção ao segundo quadro-chave , aumentará em velocidade. Vamos ver o que curtir. Agora, para que as esferas não apareçam aleatoriamente Vamos adicionar uma animação em escala ao nulo. Selecionaremos o nulo, pressionaremos definiremos seu tamanho como zero no início da animação Agora vá para o segundo número e defina-o para 100 e volte para zero no segundo número dois. Vamos mudar os quadros-chave para *** e ajustar seu comportamento usando o editor gráfico Vamos ver isso de novo. Parece ótimo. Agora vamos melhorar nossa animação com um efeito interessante chamado echo Vamos ao painel de efeitos e predefinições. Digite echo na barra de pesquisa e agora arraste o efeito para a esfera Em seguida, em tempo de eco, defina-o para -0,001 30 para o número de ecos, e aqui, altere-o para o máximo Quando essa esfera se mover rapidamente, veremos um efeito de trilha interessante. Agora vamos copiar e colar o efeito nas outras esferas Tenha cuidado para não usar demais esse efeito, pois ele pode tornar o computador mais lento. OK. É um bom momento para salvar o projeto pressionando menos o controle. Como você pode ver, como usamos o efeito, pulamos para o painel de efeitos para retornar ao painel do projeto. Podemos clicar aqui ou usar as setas e selecionar o painel do projeto Agora, para manter uma composição organizada, vamos agrupar todas as camadas que criamos agora em uma. Para fazer isso, vamos selecionar todas as novas camadas e pressionar Control Shift C. Agora, vamos nomear essas esferas giratórias pré-compostas Verifique se as duas opções estão selecionadas e clique em. Também podemos encontrar essa pré-composição no painel do projeto. Tudo bem. Vamos seguir em frente. Se olharmos mais de perto, podemos ver que essa pré-composição é grande em relação à animação que ela contém Vamos entrar na pré-composição em si e desligar o plano de fundo E agora vamos cuidar disso. Para pressionar Control I, acesse as configurações da composição. Agora vamos reduzir o tamanho para 500 por 500. Clique e retorne à composição principal. Agora, vamos criar a esfera cinza. Para isso, vamos garantir que não selecionemos nenhuma camada e escolhamos a ferramenta de elipse. Selecione a cor de preenchimento para ser preta e desative o traçado. Agora, vamos destacar a grade pressionando a tecla apóstrofo para ver o centro da composição Agora, vamos criar a esfera enquanto pressiona a tecla Shift. Vamos centralizar isso. Agora, vamos mudar para a ferramenta de seleção. Finalmente, vamos mudar o nome da camada. Selecione-o, pressione enter e chame-o de esfera grande. Em seguida, pressionaremos enter novamente. Agora, vamos abrir o parâmetro de escala dessa camada pressionando S. Podemos desativar essa camada. No segundo zero, o tamanho da esfera será zero. Na segunda, a esfera chegará a 100%. Nos dois segundos, ele retornará a zero. Vamos converter os quadros-chave *** e ajustá-los no editor gráfico desta forma Vamos ver como fica. Acho que é muito lento. Vamos ver como podemos acelerar essa animação. Digamos que queremos que a duração da animação da esfera seja de 1 segundo em vez de 2 segundos. Em vez de mover manualmente os quadros-chave um por um, podemos simplesmente selecionar os quadros-chave, manter pressionada a tecla alt, pegar o último quadro-chave e movê-lo para outra posição Dessa forma, todos os quadros-chave se movem juntos, mantendo uma distância igual e precisa entre eles. Vamos colocar o último quadro-chave na posição do indicador de tempo enquanto também pressionamos a tecla shift Dessa forma, os quadros-chave se encaixarão na posição do indicador de tempo Agora, essa animação dura 1 segundo em vez de 2 segundos. Agora vamos cortar essa camada aqui porque esse é o momento em que a animação termina e não podemos mais ver a esfera. Usaremos o atalho alt e o colchete direito. Agora, vamos criar a ondulação amarela. Para isso. Primeiro, vamos duplicar essa camada usando o controle D. Em seguida, vamos pressionar S e alterar o valor desse quadro-chave para 200 Agora, vamos habilitar o traçado nessa camada e pintá-la de amarelo. Por fim, desligaremos o preenchimento. É assim que parece por enquanto. Acho que o traço é muito grosso. Vamos reduzir para cinco. Agora, vamos avançar um pouco essa camada no tempo para criar um bom deslocamento Vamos ver como fica. Parece melhor agora. Finalmente, vamos posicionar essa camada sob a grande esfera. Vamos ver isso de novo. Parecendo bem. Ok, agora renomeie essa camada para traçado grande e marque-a em amarelo Podemos marcar essa camada em cinza. Agora vamos sincronizar e sincronizar todas as partes da animação. A animação das esferas giratórias é a primeira animação que abre o vídeo, então vamos deixá-la aqui no início da linha do Quando essa animação terminar, a animação da grande esfera começará. Vamos arrastar essas duas camadas aqui. Vamos ativá-los e ver onde é melhor colocá-los. Acho que é uma boa hora. Vamos ver como fica. É melhor a partir daqui. Ok, parece melhor agora. E depois disso, vamos começar as animações da forma. Vamos mover essa pré-composição aqui e ver como fica . É melhor a partir daqui. Eu acho que parece ótimo. Finalmente, vamos criar o quadrado que deveria estar por trás de toda a cena. Agora podemos cancelar a grade. Vamos desligar o plano de fundo e garantir que nenhuma camada esteja selecionada. Em seguida, iremos para a ferramenta de elipse, pressionaremos e seguraremos e selecionaremos a ferramenta retangular Vamos ativar o preenchimento e escolher a cor branca. Em seguida, desligaremos o derrame. Agora vamos criar um quadrado com esse tamanho enquanto pressiona a tecla Shift. Agora, vamos centralizá-lo na composição usando uma linha. Em seguida, colocaremos essa camada abaixo de todas as outras camadas Vejo que o quadrado ficou um pouco grande demais, então vamos pressionar S e reduzi-lo. Vamos escrever 85. Agora vamos contornar os cantos. Para isso, fecharemos a camada e a abriremos novamente para ver todas as propriedades. Podemos fechar as transformações. Agora abriremos o conteúdo, abriremos o retângulo um, abriremos o caminho do retângulo e aqui encontraremos o parâmetro para arredondar os cantos Vamos configurá-lo para 130. Ok, agora vamos ver como tudo fica junto. Parece ótimo. E agora estamos prontos para renderizar a cena. Mas antes disso, eu recomendo fazer uma pausa de dez minutos. Levante-se da cadeira, faça alguns alongamentos leves, faça um chá ou café e volte se refrescando para a próxima 15. Aprenda a criar um GIF: Nesta lição, renderizaremos a cena e usaremos o photoshop para convertê-la em um arquivo de presente Para quem precisa instalar o software photoshop. Você pode ver como fazer isso no curso gratuito que mencionei anteriormente. Você pode encontrar o link para o curso na descrição abaixo ou no arquivo PDF encontrado na pasta que você baixou de mim. Vamos preparar nossa cena para renderização. A primeira coisa que podemos fazer é excluir a paleta de cores da composição pois não precisamos mais dela Vamos selecionar a ferramenta de seleção e clicar aqui para ver as camadas ocultas. Agora, desbloqueie essa camada e exclua-a usando a tecla backspace A próxima coisa que precisamos fazer é ajustar a área de trabalho até o final da animação para não renderizar partes desnecessárias. A animação termina aqui. Então, vamos trazer a área de trabalho aqui usando o atalho que aprendemos pressionando a tecla End Vamos ver se tudo está funcionando perfeitamente. Como você pode ver, temos uma animação em loop perfeita, significa que o vídeo termina e começa A próxima coisa que precisamos fazer ao preparar uma animação para a assinatura do G mail é ajustar o tamanho da nossa composição principal. Se deixarmos o tamanho como está agora, podemos encontrar um problema na próxima etapa. As bordas do vídeo interferirão na colocação correta da animação na assinatura. Portanto, vamos inserir as configurações da composição e ajustar seu tamanho. Pergunta, qual é o atalho para acessar as configurações da composição Para fazer isso, pressionaremos controle K e alteraremos o tamanho dessa composição. Vamos configurá-lo para 900 pixels por 900 pixels. Agora clique e verifique se não a reduzimos demais, que significa que toda a animação permanece dentro das bordas da composição. A última coisa que precisamos fazer antes de renderizar é clicar na função de colapso localizada aqui Para quem não vê esse ícone, você pode clicar aqui. Deixe-me explicar o que ele faz. Vou ampliar para que possamos dar uma olhada mais de perto. Veja o que acontece quando eu ativo a função nesta preparação. A qualidade dos objetos melhorará. Veja essa esfera de perto. Então, vamos ativá-lo nesta pré-composição e também na pré-composição de esferas rotativas Tudo parece bem e estamos prontos para renderizar. Para fazer isso, vamos até a composição e clicaremos em adicionar para renderizar Q. E agora estamos no painel de renderização Aqui, vemos a composição que estamos renderizando. Para transformar essa animação em uma assinatura do G mail, primeiro precisamos criar um presente com essa animação. Então, primeiro, precisamos renderizar nossa animação como um arquivo MOV com fundo transparente Vamos ver como fazer isso. Vamos clicar aqui e, no formato, escolheremos o horário rápido. Agora, vamos para as opções de formato e, no Codec de vídeo, escolheremos a animação Vamos clicar. Nos canais, selecionaremos GB Alpha. Dessa forma, depois que o Effect souber que queremos renderizar o vídeo com um fundo transparente, clicaremos. Vamos clicar aqui e decidir onde renderizar o vídeo. Obviamente, escolheremos nossa pasta de amostras. Vamos garantir que o nome seja bom. Clique em salvar e, finalmente, clique em Renderizar. Agora espere alguns instantes. Assim que a renderização for concluída, vamos abrir o software photoshop, pois é assim que transformaremos o vídeo renderizado em Vamos ao arquivo, clicar em Abrir e encontrar a animação que acabamos de renderizar Obviamente, está localizado em nossa pasta de amostras. Vamos selecionar a animação e clicar em Abrir. Vamos esperar alguns segundos. Então aqui está nossa animação. Agora vamos para o arquivo, depois para a porta e depois para salvar na web. Vamos esperar alguns segundos. Ok, então aqui precisamos mudar algumas coisas. Primeiro, escolheremos o presente aqui. Garantiremos que a caixa de seleção de transparência esteja marcada. Em cores, você pode selecionar o máximo. Isso significa que o presente será de máxima qualidade, mas o tamanho do arquivo será um pouco maior. Se você não quiser que o arquivo seja muito grande, selecione 32. Vou selecionar 256. Aqui não escolheremos nenhum. E como não precisamos desse vídeo nesse tamanho, podemos clicar aqui para obter 50% para que o presente tenha metade do tamanho. Agora, vamos esperar até que a renderização seja concluída. Aqui podemos ver quanto pesará o arquivo final. Agora, vamos selecionar para sempre e clicar em Salvar. Vamos escolher onde guardar o presente. Vamos salvá-lo em nossa pasta de amostras. O nome parece apropriado. Vamos clicar em salvar e esperar alguns segundos. Agora vamos abrir nossa pasta de amostras. Vou apenas ampliar minha visão aqui para vê-la como ícones, e aí está o presente pronto. Parecendo bem. Ok, vamos voltar ao nosso projeto. Não o feche por enquanto, pois voltaremos a usá-lo em breve. Agora, vamos aprender como criar uma assinatura GML profissional usando a animação que criamos 16. Crie uma assinatura do Gmail: Então, a primeira coisa que eles precisam fazer é acessar o Google Docs. Agora, vamos entrar com nossa conta do Gmail. Se este documento não abrir automaticamente para você e você visualizar o navegador dessa forma, clique no sinal de adição grande e crie um novo documento. Ok, você pode fechar isso agora. Agora, vamos chamar esse documento assinatura Gail e pressionar Enter Para nossa conveniência, vamos ao arquivo e, em seguida, à configuração da página. Aqui, escolheremos que o documento não tenha bordas e coloriremos a página com essa cor Pressione ok e vamos preparar a assinatura. Para fazer isso, vamos inserir e criar uma tabela com três colunas. Agora, garantiremos que nossa linha de texto esteja dentro dessa parte da tabela. Vamos para Inserir novamente e depois para a imagem e escolher carregar do computador. Agora, vamos encontrar nosso presente. Vamos selecioná-lo e clicar em abrir, e aqui o presente está sendo reproduzido perfeitamente. Agora, vamos selecionar a imagem e ir para as opções de imagem. Então, podemos reduzir o tamanho para cinco ou até três. Podemos fechar a imagem por enquanto. Em seguida, vamos fortalecer esta seção e adicionar o texto que queremos. Se estivermos escrevendo o endereço de um site, precisamos pressionar Enter após terminar escrever para tornar a linha de texto clicável Em seguida, vamos selecionar todo o texto e alterar a fonte para Montserrat Para aqueles que não veem essa fonte na lista, eles podem acessar mais fontes, pesquisar essa fonte e selecioná-la. Ou você pode pesquisá-lo no Google Fonts. Acesse o site, selecione Fontes, pesquise a fonte. Clique nele e baixe todos os estilos para seu computador ou clique no ícone de adição do estilo de fonte desejado. Agora, vamos voltar à nossa assinatura e alterar a fonte Mont Surat Então, podemos mudar o título para preto. Em seguida, vamos reduzir essa seção e selecioná-la para aumentar a espessura do traçado para três Depois disso, para remover as outras linhas da tabela, podemos acessar as opções da tabela, digitar zero no alinhamento. E selecione zero na cor e na borda da tabela. A linha grossa desaparecerá, mas isso não é um problema. Podemos selecioná-lo e retornar sua espessura para três. Por fim, vamos clicar aqui e mover o texto um pouco para baixo. Se quisermos ampliar o presente, podemos selecioná-lo, acessar as opções de imagem e alterar o tamanho para cinco Depois de confirmarmos que tudo está bem, podemos transformá-lo em uma assinatura no G mail. Para fazer isso, vamos entrar em nossa conta de e-mail do G. Abra as configurações, clique em ver todas as configurações e role para baixo até as assinaturas Agora clique em Criar novo e dê um nome a ele. Em seguida, precisamos copiar a assinatura que criamos no Google Docs. Vamos selecionar tudo manualmente ou usar o atalho Control A. Agora, pressione Control C para copiá-lo Vamos voltar às configurações de GML e pressionar Control V para colá-las Se você tiver assinaturas adicionais, precisará selecionar a nova assinatura criada Agora, role para baixo e clique em Alterações seguras. Por fim, vamos criar uma nova mensagem e ver a aparência da assinatura. Na minha opinião, não parece bom. A animação é muito grande em relação ao texto. Vamos consertar isso. Para isso, vamos voltar às configurações e editar a assinatura. Para reduzir a animação, precisamos voltar e editá-la no Google Docs. Agora selecione o presente, abra as opções de imagem, diminua para três, mova o texto para cima excluindo essas linhas e acho que devemos reduzi-lo para duas Vamos aproximar a linha. Agora selecione tudo usando o Controle A. Ele pode ser fechado. Em seguida, pressione Control C para copiá-lo. Vamos voltar às configurações do Gmail, selecionar tudo usando o Controle A e excluí-lo Agora exclua todas as linhas vazias até chegarmos ao início. Agora pressione Control V para colá-lo. Role para baixo e clique em Alterações seguras. Vamos criar uma nova mensagem e verificar sua aparência. Como você pode ver, a assinatura não está alinhada à esquerda. Para corrigir isso, precisamos voltar às configurações. Selecionaremos nossa assinatura usando o Controle A e escolheremos o alinhamento à esquerda Vamos fazer isso de novo e agora a assinatura está alinhada à esquerda Vamos rolar para baixo e clicar em Alterações seguras. Vamos criar uma nova mensagem e verificar sua aparência. Parece ótimo. Mas agora, digamos que o cliente tenha decidido mudar alguma coisa na animação da assinatura. Eles pediram que mudássemos a cor do quadrado no fundo para que ele não se misturasse com a cor branca do Gmail Vamos ver como lidamos com isso. A primeira coisa que precisamos fazer é voltar ao nosso projeto e ao After Effects. Agora, vamos selecionar o quadrado e também selecionar a paleta no painel do projeto para que possamos amostrar as cores Em seguida, vamos alterar a cor de preenchimento para uma cor cinza claro da nossa paleta Finalmente, vamos renderizar a animação novamente. Vamos até a composição e clique em adicionar ao Adobe Render Q. Vamos renderizar tudo com as mesmas configurações de antes Vamos salvá-lo no local da animação que temos. Agora selecione o vídeo aqui e clique em Salvar. Depois dos efeitos, perguntaremos se queremos substituir a renderização antiga pela nova e diremos que sim. Em seguida, clique em Renderizar e After Effects, perguntaremos se temos certeza e confirmaremos. No entanto, o After Effects não pode renderizar a animação mesmo se clicarmos. Isso acontece porque o arquivo que queremos renderizar ainda está aberto no photoshop Então, clicaremos e fecharemos esse arquivo sem salvá-lo. Em seguida, tentaremos renderizá-lo novamente. Desta vez, vamos usar o atalho Control M. Selecionaremos todas as configurações como antes E agora vai funcionar. Vamos voltar ao Photoshop, abrir nosso novo vídeo e exportá-lo novamente como presente OK. Desta vez, vamos renderizá-lo com 64 cores. Vamos reduzi-lo como antes para 50%. Clique aqui para ativar a ação, aguarde alguns segundos e salve esse presente no lugar do anterior. Vamos selecioná-lo e clicar em Salvar e substituir. Agora, vamos voltar ao Google Docs. Selecionaremos o presente antigo, clicaremos em Substituir imagem e escolheremos fazer upload do computador. Selecionaremos nosso novo presente e clicaremos em Abrir. Por fim, vamos mudar a cor da página para branco para que a nova cor se misture bem Agora, vamos selecionar tudo com o Controle A e pressionar o Controle C para copiá-lo. Agora volte para as configurações do G mail. Em seguida, selecione tudo aqui com o Controle A e exclua-o. Agora, exclua todas as linhas vazias até chegarmos ao início. Agora vamos pressionar Control V. Em seguida, selecione todas as assinaturas com Controle A e alinhe o texto à esquerda duas vezes Por fim, rolaremos para baixo e clicaremos em Alterações seguras. Agora vamos criar uma nova mensagem e verificar sua aparência. E aqui está nossa assinatura finalmente pronta. E é assim que fica no G mail no modo escuro. Agora, vamos voltar ao projeto e continuar com a lição. Você também pode fechar o photoshop. Não há necessidade de salvar esse arquivo. Vamos voltar ao nosso projeto, organizá-lo e renderizá-lo para compartilhar nas mídias sociais ou no site do seu portfólio. 17. Faça a animação para compartilhar em seu portfólio!: Agora, vamos renderizar essa animação com um belo plano de fundo como um arquivo MP4 de alta qualidade, para que possamos compartilhá-la nas redes sociais. Para criar um plano de fundo, criaremos um novo sólido clicando com o botão direito do mouse nessa área cinza. Vamos para novo e selecionaremos sólido. Vamos escolher o branco como a cor do sólido. Vamos arrastá-lo para baixo de todas as camadas. E se você quiser alterar a cor do seu sólido para uma cor diferente da nossa paleta de cores, você precisa pressionar a tecla control shift Isso abrirá as configurações de sólidos, nas quais você pode experimentar uma cor diferente e clicar. Gosto mais da cor anterior, então pressionarei o controle Z para desfazer a ação E agora, para renderizar o vídeo, vamos para a composição, selecione Adicionar duas renderizações Q. Desta vez, escolheremos a predefinição MP quatro de alta qualidade que está Clicaremos aqui e escolheremos salvar o arquivo na pasta de amostras que criamos. Para o nome, podemos excluir o número um, clique em Salvar e renderizar. Para visualizar a renderização, clique no link localizado no modo de saída. Abra o vídeo para ver como fica. Parece bom, mas lembrei que renderizamos o vídeo em um tamanho de composição adequado para um presente Vamos voltar ao nosso projeto e renderizá-lo novamente com um tamanho adequado para mídias sociais. Se você quiser excluir as últimas renderizações, selecione-as e pressione backspace OK. Agora, feche tudo até chegar à composição principal. Então, como você pode ver, o tamanho da composição é muito pequeno. Vamos pressionar o controle K para acessar as configurações da composição e aumentar o tamanho para dez 80 pixels por dez 80 pixels. Agora, como aumentamos o tamanho da composição, precisamos aumentar o sólido adequadamente. Veja como podemos fazer isso rapidamente. Selecione o sólido, clique com o botão direito do mouse, vá para transformar e selecione PitoCM Você também pode ver o atalho para essa ação. Clique nele e o sólido agora terá o mesmo tamanho da composição. Agora vamos renderizá-lo novamente pressionando Control M. Selecione um formato MP four de alta qualidade. Escolha salvar o arquivo no último local de renderização. Clique em Salvar, substituir Renderizar e. Confira o vídeo agora. Parece ótimo. Agora você pode mostrar a animação criada nesta lição nas mídias sociais e compartilhá-la no site do seu portfólio. E se você gostar do curso, eu agradeceria muito se você avaliasse de acordo com sua experiência. Além disso, não se esqueça de deixar um comentário, para que eu possa saber se você aprendeu algo interessante no curso ou não. Tudo bem, vamos voltar ao nosso projeto e aprender como organizar o painel do projeto usando pastas. Uma pasta como a que foi criada automaticamente quando criamos o sólido. Vamos garantir que não selecionemos nada, clicamos no ícone da pasta e agora alteramos o nome para precomposições É aqui que salvaremos todas as precomposições que criamos para este projeto, exceto a composição principal Vamos marcá-la em azul e colocar todas as outras precomposições na pasta que criamos Agora, salvaremos a paleta de cores em outra pasta chamada assets Então, vamos garantir que não selecionemos nada. Criaremos uma nova pasta, alteraremos o nome para ativos e arrastaremos a paleta de cores e a pasta sólida para essa pasta Esse é o fim da aula. Vamos salvar o projeto antes de fechá-lo. Você pode compartilhar sua animação em nosso grupo comunitário privado. Você também pode me fazer qualquer pergunta lá. Prometo responder a qualquer pergunta que você possa ter. Espero que tenham gostado. Te vejo na próxima aula. Mas antes disso, eu recomendo fazer uma pausa de dez minutos. Levante-se da cadeira, faça alguns alongamentos leves, faça um chá ou café e volte se refrescando para a próxima 18. Seção 2: tarefa de projeto: Tudo bem. E agora vamos praticar o que aprendemos. Por favor, crie esta animação. Você pode usar cores diferentes das minhas, mas tente manter a animação igual. Essa tarefa tem como objetivo ajudá-lo a lembrar e entender o que você aprendeu. Não se preocupe. A tarefa não ocupará muito do seu tempo. Ele foi projetado para ser feito em apenas 2 horas. Se você tiver algum problema ou dúvida, sinta-se à vontade para pedir ajuda a mim ou a seus colegas em nosso grupo comunitário fechado 19. Seção 3: Animação 3D para vídeos longos: Olá a todos. Nesta lição, criaremos uma animação muito interessante transformando as camadas em três camadas D e criando um ângulo de câmera isométrico Também aprenderemos como integrar nossa animação em vídeos longos para canais do YouTube ou podcasts longos Esta lição está dividida em quatro partes. Na primeira parte. Nós projetaremos o quadro na segunda parte. Criaremos uma câmera e aprenderemos como criar um ângulo isométrico Em seguida, transformaremos as camadas em três camadas D. A terceira parte. animar nossa cena e renderizá-la em um arquivo MOV de alta qualidade com fundo transparente na quarta parte Aprenderemos como fazer a animação ser reproduzida sem parar. Em seguida, organizaremos o projeto antes de fechá-lo. Por fim, renderizaremos a animação como um arquivo MP4 de alta qualidade para compartilhamento nas redes sociais. Depois disso, no final da aula, você receberá uma pequena tarefa para realizar. A tarefa tem como objetivo ajudá-lo a lembrar e entender o que você aprendeu. Não se preocupe A tarefa não ocupará muito do seu tempo. Ele foi projetado para ser feito em apenas 2 horas. Se você tiver algum problema ou dúvida, sinta-se à vontade para pedir ajuda a mim ou a seus colegas de classe em nosso grupo comunitário fechado Tudo bem Chega de falar. Vamos começar. 20. Vamos começar a projetar a cena: Primeiro, vamos abrir o software After Effects. Como de costume, podemos sair dessa janela. Vamos clicar em padrão para que todos possamos ver os mesmos arranjos de painéis. E agora vamos clicar na nova composição e agora definiremos as configurações para nossa primeira composição. Chamaremos isso de animação para um canal. Novamente, trabalharemos em um formato quadrado de dez 80 por dez 80 pixels e a 30 quadros por segundo. A duração da composição será de 10 segundos. Por fim, vamos escolher a cor de fundo da composição. Escolheremos uma cor cinza e clicaremos em. Lembro que, se você ver esse erro vermelho, precisará pressionar a tecla caps lock para desligá-lo Tudo bem, agora clicamos aqui para ver o plano de fundo da tela de visualização e maximizar a janela do software. Agora podemos salvar o projeto. Vamos encontrar a pasta que abrimos para a aula. Vá até a pasta AE e nomeie a animação do projeto para um canal. Agora vamos importar nossa paleta de cores para o projeto. Clique duas vezes na área cinza no painel do projeto. Encontre a pasta que criamos para a lição e acesse a pasta de ativos. Selecionaremos a paleta de cores e clicaremos em Importar. Vamos arrastar a paleta para a composição, agora pressione e reduza o tamanho dessa camada para 30 Vamos posicioná-la aqui, bloquear a camada e ocultá-la do painel de camadas. Para quem não vê o ícone sh, você pode clicar aqui. Vamos selecionar a camada como uma camada oculta e ocultá-la clicando no ícone localizado aqui. Agora, vamos projetar o primeiro objeto na cena, que é o painel azul da janela. Vamos criá-lo usando a ferramenta retangular. Vamos colorir na cor azul da paleta. Vamos desligar o traçado e criar um retângulo. Agora vamos centralizá-lo usando a ferramenta de alinhamento. Para quem não vê esse painel, você pode encontrá-lo na janela. Ok, então vamos clicar uma vez aqui e aqui. Agora, vamos arredondar os cantos do retângulo. Para fazer isso, abriremos o retângulo, abriremos também o caminho do retângulo e, aqui, em arredondamento, mudaremos Agora você pode fechar todas as propriedades da camada. Agora vamos pressionar enter para alterar o nome para a forma principal. Pressione enter novamente para finalizar a ação. Agora, vamos voltar para a ferramenta de seleção usando o atalho V. Agora vamos criar a parte superior dessa janela. A maneira mais rápida de fazer isso é duplicando essa forma usando o Controle D. Vamos alterar o nome da nova camada para forma ascendente Agora, mude a cor da nossa paleta para cinza escuro. Em seguida, precisamos cortar toda a parte inferior dessa forma. Se arrastarmos essa forma daqui, ela não funcionará. Para fazer isso da maneira correta, precisamos transformar essa forma em um caminho de Bézier. Vamos abrir todas as propriedades dessa forma até chegarmos ao próprio caminho. Clique com o botão direito do mouse e selecione converter o caminho do Tobi. Agora temos pontos que podemos mover e modificar. Eu vou entrar para que possamos chegar mais perto. Tudo bem. Vamos seguir em frente. Vamos apagar esse ponto usando as teclas backspace ou delete Exclua este também. Agora, vamos nos livrar das bordas curvas. Para fazer isso, podemos manter pressionadas as teclas alt e control e clicar nesse ponto uma vez. Vamos fazer o mesmo neste ponto também. Agora, vamos selecionar os dois pontos usando shift e movê-los para cima enquanto pressionamos a tecla Shift. Parece bom. Depois de terminar com o design da parte superior, vamos centralizar o ponto de ancoragem dessa forma em seu centro Como você pode ver, ele não está localizado no centro da forma. Em vez de usar a ferramenta de ponto de ancoragem, podemos usar o atalho que aprendemos, Control Alt home E agora o ponto de ancoragem dessa forma está centralizado em seu Agora, vamos criar os três pontos que estão localizados aqui. Para fazer isso, certifique-se de que não estamos selecionando nenhuma camada e clique e segure a ferramenta retângulo e selecione a ferramenta de elipse Vamos colorir a primeira esfera em azul. Agora vamos ampliar um pouco e criar a esfera aqui enquanto pressionamos a tecla shift. Para criar outra esfera, poderíamos duplicar a própria camada e movê-la Mas desta vez, quero ensinar outro método para que todas as esferas estejam na mesma camada Para fazer isso, podemos duplicar a forma dentro da camada. Vamos selecionar a elipse aqui e pressionar Control D. Agora, vamos abrir as propriedades da nova elipse e movê-la pelo parâmetro de posição Agora feche isso e abra o preenchimento e mude a cor para amarelo. Podemos fechar isso agora. Agora, vamos duplicar essa esfera novamente. Para fazer isso, precisamos selecionar o caminho da elipse. Agora podemos fechá-la, selecionar a elipse aqui e pressionar Control D. Vamos mover a nova esfera Finalmente, vamos mudar sua cor para vermelho na paleta. Agora vamos mudar o nome dessa camada para esferas. Vamos também centralizar o ponto de ancoragem dessa camada pressionando control Alt home Criamos uma camada com três esferas internas. Agora, se quisermos reduzir as esferas, pressionaremos S. Dessa forma, reduziremos todas elas de uma vez Vamos reduzir a camada para 80. Agora, vamos criar a camada de texto que deveria estar aqui. Para isso, usaremos a ferramenta de texto e escreveremos o design. Agora, vamos selecionar todo o texto e clicar aqui para que todas as letras estejam em maiúsculas. Vou mudar o estilo da fonte para claro e a cor para branco. Por algum motivo, a fonte não mudou. Se isso acontecer com você também, basta procurar o nome da fonte aqui e alterar o estilo da fonte a partir daqui. Agora, vamos clicar aqui e pressionar Control enter para sair da linha de texto. Agora vamos pressionar V para mudar para a ferramenta de seleção. Em seguida, vamos alterar o tamanho da fonte para 100. Tudo bem. Pensando bem, vou mudar o estilo da fonte para fino. Agora, vamos centralizar o ponto de ancoragem no centro da camada E posicione essa camada no centro dessa forma. Para isso, vamos ativar o snapping a partir daqui. Arrastaremos a camada do ponto de ancoragem e tentaremos encontrar a posição correta Aqui, isso parece bom. Agora podemos desligar o disparo. Vamos ajustar a tela de visualização, ampliar um pouco essa janela e continuar Agora, quero mudar a forma do painel que criamos. Não seremos capazes de fazer isso dessa forma. Puxá-lo pelos cantos não funcionará porque estragará os cantos arredondados Pergunta, o que precisamos fazer para tornar essa forma editável Para fazer isso corretamente, precisamos converter o caminho dessa forma em um caminho de Bézier, como fizemos antes para a forma superior Agora, podemos selecionar um dos pontos, depois selecionar os pontos inferiores e alterar a forma da janela para a forma que você preferir. Dessa forma, os cantos arredondados não serão afetados. Vou deixar como estava. O que é importante lembrar nesse processo é que, depois de mudarmos o caminho para um caminho de Bézier, não poderemos alterar e controlar os cantos arredondados Como você pode ver, o parâmetro de arredondamento não existe mais aqui Apenas tenha isso em mente. Ok, então, depois de ficarmos satisfeitos com nosso design, vamos selecionar todas as camadas e testá-las em uma única preparação. Usaremos o atalho que aprendemos como Control Shift C. Agora, vamos chamar esse painel de janela de pré-composição de sublinhado Certifique-se de que ambos estejam selecionados e pressione. Como você pode ver, o tamanho da pré-composição é muito grande. Temos muito espaço vazio. Vamos cortar essa pré-composição. Para isso, vamos entrar na pré-composição. Podemos desligar o plano de fundo aqui. Agora vamos abrir as configurações de composição usando o atalho de teclado Control K. Vamos verificar a pré-visualização para que possamos ver o que estamos fazendo Agora vamos reduzir o tamanho dessa composição. Vamos mudar a largura para 800 e a altura para 400. Vamos digitar 400 e pressionar enter. Isso é um pouco demais. Vamos voltar às configurações da composição e alterá-las para 600. Acho que talvez 500 seja melhor. Sim, 500 é ótimo. Vamos pressionar k ou enter. Agora, quando retornamos à composição principal, podemos ver que as bordas dessa pré-composição foram reduzidas e estamos prontos para passar para a próxima etapa, na qual criaremos o ângulo simétrico 21. Camadas para câmera e 3D: Para criar o ângulo isométrico, usaremos a câmera do After effects . Vamos ver como fazer isso. Primeiro, vamos criar uma nova câmera clicando com o botão direito do mouse aqui, indo para nova e selecionando câmera. Se você quiser saber mais sobre a câmera e o After Effects, assista ao curso gratuito que mencionei no início deste curso. Você pode encontrar o link para o curso gratuito na descrição abaixo ou no arquivo PDF na pasta principal que você baixou de mim. Tudo bem. Vamos seguir em frente. No tipo, escolheremos uma câmera de dois nós e aqui escolheremos 50 milímetros Em seguida, clicaremos. Agora vamos abrir as opções da câmera a partir daqui. Em Zoom, escreveremos 10.000. Agora, abriremos a transformação e, na posição, a alteraremos para -10.000 E agora vamos fechar a camada. Em seguida, criaremos um novo nulo. Vamos vincular a câmera ao nulo. Podemos ativar o colapso para a camada nula e desativar a camada porque realmente não precisamos vê-la Só usaremos as propriedades de transformação dessa camada. Mas antes disso, é muito importante converter essa camada em uma camada de três D para que ela possa funcionar com a câmera. Agora vamos mudar a orientação para 45 aqui. 35 aqui. E 30 aqui. Vamos fechar tudo. Agora, tudo o que resta a fazer é converter nossa camada de pré-composição em uma camada de três D para que a câmera possa ver e interagir com ela. Aí está. Criamos uma câmera com um ângulo isométrico. Agora vamos criar duas pré-composições adicionais dos painéis das janelas Mas, como aprendemos, para duplicar a pré-composição forma que possamos fazer alterações sem afetar a pré-composição original, precisamos duplicar a pré-composição por meio do painel do projeto Vamos encontrar essa pré-composição no painel de projetos clicando com o botão direito do mouse e selecionando revelar e, em seguida, revelar a fonte e o projeto da camada Agora vamos pressionar control D. Vamos inserir a nova pré-composição e alterar o texto em dois Agora vamos duplicar essa pré-composição novamente e alterar o texto na nova prec Agora, vamos voltar à composição principal e arrastar as duas novas pré-composições para nossa cena Como essas duas camadas não são três camadas D, a câmera não as vê. Vamos clicar aqui e converter essas camadas em três camadas D. Finalmente, vamos voltar à ferramenta de seleção. Agora, se eu mover essa camada aqui e aquela ali, veremos todas as camadas do ângulo isométrico Ok, vamos pressionar Control Z e agora vamos simular a visualização. 22. Anime a cena e faça com que ela: Primeiro, vamos animar essa camada para cima e a inferior para baixo. Deixaremos o painel central da janela em seu lugar sem movê-lo. Vamos selecionar este e, enquanto pressionamos o controle, também selecionaremos aquele. Agora vamos pressionar P para abrir o parâmetro de posição. Neste momento, definiremos que essas camadas estarão localizadas aqui. Segundo número um, selecionaremos somente essa camada. Abra a grade e arraste-a até aqui. Agora vamos selecionar a camada inferior e arrastá-la até aqui. No segundo número dois, quero que ambas as camadas retornem às suas posições originais. Então, vamos simplesmente copiar esse quadro-chave e colá-lo aqui. A mesma coisa com essa camada. Vamos ver como fica. Agora eu quero que essas janelas girem à medida que se movem. Desta vez, também moveremos o painel da janela no meio. Vamos selecionar todas essas camadas com shift e pressionar R para abrir o parâmetro de rotação. Porque essas camadas são camadas tridimensionais. Temos eixos de rotação diferentes. Podemos girar as camadas no eixo x. Parece assim no eixo y. Parece assim, no eixo z, é assim. Portanto, neste momento, no início da animação no segundo número zero, todas as camadas devem estar nesse valor no eixo z. Então, no próximo segundo, quando elas já estiverem abertas, giraremos todas as camadas em 90 graus. Agora, no segundo número dois, eles retornarão a zero, assim como no início. Agora, vamos selecionar todas as camadas e pressionar você para ver todos os quadros-chave que criamos até agora. Agora vamos melhorar nossa animação usando *** e o editor gráfico Primeiro, vamos clicar aqui para isolar essa camada para que possamos ver somente ela Agora vamos selecionar todos os quadros-chave e pressionar F nove para convertê-los em *** Vamos ver isso de novo. Agora vamos mudar a forma como essa animação se move ao longo do tempo. Vamos ver o que quero dizer. Primeiro, selecione os quadros-chave para o parâmetro de posição e vá para o editor gráfico. Agora vamos selecionar os quadros-chave do meio e arrastar as alças assim. Agora a camada começará a subir rapidamente, faça uma pequena pausa quando estiver no ar e depois retornará rapidamente à sua posição original Depois disso, vamos selecionar os quadros-chave do parâmetro de rotação e executar a ação inversa. Faremos com que a camada comece a girar lentamente e retorne lentamente também Caso você não veja o gráfico como eu, clique com o botão direito do mouse e verifique se você está no gráfico de velocidade. OK. Vamos sair do editor gráfico e ver como fica. Eu adoro isso. Agora, vamos fazer a mesma coisa com a camada inferior. Selecione essa pré-composição e pressione você para ver seus quadros-chave. Em seguida, selecionaremos todos os quadros-chave e os converteremos em ECEs. Agora precisamos ajustar os quadros-chave para uma posição como essa E a rotação para se comportar assim. Vamos ver como fica. Agora, vamos selecionar a camada intermediária, pressionar você para ver seus quadros-chave e exibir todas as camadas para ver todas elas Agora, selecionaremos todos os quadros-chave dessa camada. Mude-os para Ess usando F nove e ajuste as alças no editor gráfico desta forma. Vamos ver como tudo fica junto. Parece excelente. Agora, vamos criar um bom deslocamento para todas as camadas para criar uma animação mais interessante Mas desta vez, não moveremos os quadros-chave dessa forma , pois as animações das camadas terminarão em momentos diferentes No nosso caso, desta vez, quero que todos os painéis das janelas voltem às suas posições originais ao mesmo tempo. Portanto, em nosso caso, basta mover apenas os quadros-chave do parâmetro de rotação dessa camada aqui e os quadros-chave dessa camada aqui. Vamos ver isso. Ok, acho que precisamos mudar isso um pouco para cá. Também podemos mover um pouco esse quadro-chave. Agora, vamos criar uma sobreposição de sombra nessas janelas. Para fazer isso, podemos usar um efeito chamado níveis. Vamos arrastar esse efeito para a camada intermediária e alterar o valor do branco de saída para 200. Talvez 209. Agora vamos copiar o efeito e colá-lo na camada inferior e alterar o valor do branco de saída aqui também. Nosso objetivo aqui é criar uma ilusão de sombra. 170 parece bom. Tudo bem. Vamos desligar a rede. Também podemos fechar as camadas e vamos ver como tudo fica junto. Agora vamos ver onde essa animação termina. Para fazer isso, precisamos ver onde está o último quadro-chave nessa cena Vamos garantir que nenhuma camada esteja selecionada e pressionar você para ver todos os quadros-chave de todas as camadas A animação nessa cena termina no segundo número dois. Vamos ficar aqui com o indicador de tempo e pressionar para encurtar a área de trabalho até a posição do indicador de tempo Agora vamos ver nossa animação algumas vezes. OK. Acho que a animação está se movendo muito rápido. Vamos ver como podemos desacelerar todos os quadros-chave e fazer com que a animação seja reproduzida por 3 segundos em vez de 2 segundos. Para isso, vamos mover a área de trabalho para cá por enquanto. Agora vamos colocar o indicador de tempo no segundo número três. Agora, selecionaremos todos os nossos quadros-chave. Mantenha pressionada a tecla ult e arraste um dos últimos quadros-chave para o lado Para que os quadros-chave se encaixem na posição do indicador de tempo, precisamos pressionar Shift Agora vamos pressionar novamente para encurtar a área de trabalho para a nova posição do indicador de tempo Vamos ver o que parece agora. Eu acho que é muito melhor. Agora estamos prontos para renderizar a animação que criamos. Mas antes disso, vamos pressionar você para fechar todos os quadros-chave Vamos exibir as camadas ocultas e excluir a camada da paleta de cores Em seguida, desligue o plano de fundo da tela anterior. Agora vamos pressionar Control M. No módulo de saída, escolhemos o horário rápido. Aqui nas opções de formato, escolhemos animação. Vamos clicar e entrar nos canais. Pergunta, o que precisamos escolher aqui para exportar o vídeo sem fundo. Precisamos selecionar GB mais Alpha. Vamos clicar e escolher renderizá-lo em nossa pasta de amostra. Já renderizamos um arquivo no formato MOV, então podemos ver esse vídeo aqui Vamos verificar se o nome está bom, clicar em salvar e renderizar. Você pode clicar aqui para ver a renderização. E agora vamos aprender como podemos integrar a animação que renderizamos em um vídeo longo Então, vamos voltar à nossa composição principal. Traga de volta o painel do projeto. Já podemos fechar todas as pré-composições abertas a partir daqui. Vamos também fechar o painel de efeitos e estamos prontos para seguir em frente. 23. Faça com que Jogue Endlesley para vídeos longos: Então, para ver como podemos integrar isso em um vídeo longo. Vamos criar uma nova composição usando o atalho Control Vamos chamá-lo de vídeo para um canal. Vamos definir as dimensões para 1920 por dez 80 pixels, deixar a taxa de quadros em 30 e alterar a duração para 5 minutos. Agora vamos mudar o fundo para preto e pressionar. Agora, digamos que atualmente estamos trabalhando em um projeto completamente novo. Então, vamos sair dessa composição e importar o vídeo longo do CT localizado em nossa pasta de ativos aqui. Vamos arrastar o vídeo para nossa composição e aqui vemos o vídeo inteiro. Agora, vamos cortar a área de trabalho até o final do vídeo, recortaremos toda a parte desnecessária clicando com o botão direito do mouse na área de trabalho e selecionando Trim Comp Agora, vamos imaginar que este é um vídeo que queremos enviar para um de nossos canais de mídia social e adicionar, digamos, uma animação de logotipo a ele. Vamos usar a animação que criamos para aprender como fazer com que a animação seja reproduzida sem problemas até o final do vídeo Então, primeiro de tudo, vamos importar nossa renderização. Podemos encontrá-lo na pasta de amostras, selecioná-lo e clicar em Importar. Agora, vamos arrastar a renderização para a composição acima da camada de vídeo, lá vemos que o vídeo está realmente sem fundo, o que é excelente. No entanto, como a duração da animação é de apenas 3 segundos, paramos de ver essa camada nesse momento. Preciso que essa animação seja reproduzida até o final do meu vídeo. Vamos ampliar um pouco nossa linha do tempo e ver como fazer isso Como nossa animação é reproduzida em um loop perfeito, o que significa que termina e começa exatamente no mesmo ponto, podemos usar um truque interessante para fazê-la ser reproduzida sem parar Para isso, precisamos colocar o indicador de tempo aqui enquanto pressionamos a tecla Shift. Podemos desativar a camada de vídeo por enquanto. Agora, clique com o botão direito do mouse, vá até o horário e escolha habilitar remapeamento de horário Agora, precisamos garantir que o indicador de tempo esteja um quadro antes dos quadros-chave que vemos. Se você estiver em pé sobre os quadros-chave, mova um quadro para trás desta forma E agora vamos criar outro quadro-chave neste momento clicando aqui Agora precisamos excluir esse quadro-chave. E agora vamos criar uma expressão para esses quadros-chave. Expressão é um trecho de código que você pode usar para automatizar e controlar várias propriedades da sua animação É uma ferramenta poderosa que permite criar animações complexas sem precisar estruturar manualmente cada elemento Para criar uma nova expressão, precisamos manter pressionada a tecla Alt e clicar no cronômetro do parâmetro time remap Isso abrirá o código da linha de expressão. Não se preocupe Não precisamos escrever nada. Usaremos uma expressão incorporada. Para fazer isso, vamos clicar na pequena seta aqui. Vá até a propriedade e escolha essa expressão. Para finalizar a ação, vamos clicar aqui ao lado. Podemos recuar um pouco e agora vamos estender essa camada até o final da composição. Agora, tudo o que acontece entre esses quadros-chave, que é basicamente toda a nossa animação se repetirá até o final da composição, e aí está, nossa animação tocando sem parar Agora podemos voltar a ligar o vídeo e agora vamos pressionar S e reduzir a camada. Vamos movê-lo aqui para o lado. Podemos reduzi-lo um pouco mais. Vamos pressionar a tecla do apóstrofo para ver a grade. Isso tornará muito mais fácil sabermos onde colocar a animação. E aqui neste lado, você pode adicionar o endereço do seu site. Você pode colocá-lo aqui. Vamos fechar a grade. Então, basicamente, criamos uma animação que pode ser o logotipo do seu canal, que pode ser reproduzida até o final do seu vídeo. Ok. Agora, vamos criar o loop infinito novamente. Mas desta vez usaremos a composição dessa animação em vez do arquivo renderizado Vamos desligar nosso arquivo de renderização e inserir nossa composição principal chamada animação para um canal. Mas antes disso, vamos inseri-lo e cortar a área de trabalho até o final da animação porque não precisamos do resto da linha do tempo Caso contrário, a expressão não funcionará. Então, clique com o botão direito e escolha Trim Comp para a área de trabalho. Agora, vamos voltar para a composição do vídeo e arrastar a animação aqui, assim como fizemos com o arquivo renderizado Precisamos colocar o indicador de tempo aqui enquanto pressionamos a tecla Shift. Agora, vamos clicar, ir até horário e escolher habilitar remapeamento de tempo Precisamos garantir que o indicador de tempo esteja um quadro antes dos quadros-chave que vemos. Agora, criaremos um quadro-chave adicional neste momento clicando aqui Agora podemos excluir o último quadro-chave e, mantendo pressionada a tecla Alt, clicar no cronômetro do parâmetro de remapeamento de tempo Agora, vamos clicar na pequena seta aqui, ir até a propriedade e escolher essa expressão. Para finalizar a ação, vamos clicar aqui ao lado. Podemos diminuir o zoom e agora vamos estender essa camada até o final da composição. Agora, você pode estar se perguntando: por que não fizemos isso desde o início Por que tivemos que renderizá-lo como um arquivo MOV sem fundo e não usar a composição em si O motivo é que, se usarmos a composição original, isso tornará seu computador e seu fluxo de trabalho de edição mais lentos . Especialmente quando você está trabalhando em vídeos longos, como gravações de tela de jogos de computador ou podcasts Portanto, eu não recomendo usar composições diretamente É melhor renderizar sua animação e usar os arquivos MOV em seus projetos de edição de vídeo Ok, então vou colocar essa composição aqui. E antes de terminarmos, vamos organizar o painel do projeto. Primeiro, vamos garantir que não selecionemos nada e criemos uma nova pasta chamada assets onde colocaremos a pasta de sólidos, a paleta de cores, o vídeo e a renderização de nossa animação Em seguida, vamos garantir novamente que não selecionemos nada e criemos outra pasta chamada prep. Colocaremos nele todas as pré-composições que criamos no projeto, exceto a composição principal, que está em azul Agora podemos fechar essa composição a partir daqui. Agora, vamos renderizar essa animação como um arquivo MP4 de alta qualidade que podemos compartilhar nas redes sociais. Mas antes disso, vamos criar um plano de fundo. Para ver a paleta, abriremos a pasta de ativos e selecionaremos a paleta para que possamos vê-la daqui Agora, vamos criar o sólido e pintá-lo com essa cor. Vamos clicar em Ok, mover essa camada abaixo de todas as camadas, e agora vamos pressionar control M. Podemos ver aqui a renderização anterior. Podemos fechá-lo agora. Essa é a nova renderização. Vamos escolher H 0.2 64 40 MBPS e agora escolheremos renderizá-lo na pasta de amostras Excluiremos o número um do nome e clicaremos em Salvar e renderizar. Vamos ver o que temos. Parece excelente. Agora você pode compartilhar a animação criada nas redes sociais e publicá-la no site do seu portfólio. Se você gostou do curso, eu agradeceria muito se você pudesse classificá-lo de acordo com sua experiência. Também não se esqueça de deixar um comentário para que eu saiba se você aprendeu algo interessante no curso ou não. Tudo bem, vamos pressionar Escape para sair do vídeo. Voltaremos ao projeto, sairemos daqui e o fecharemos. Antes de fechar o projeto , não se esqueça de salvá-lo. Vamos pressionar o controle, e esse é o fim da lição. Espero que tenham gostado. Você pode compartilhar seu vídeo em nosso grupo comunitário privado e, claro, pode me fazer perguntas lá. Prometo que responderei a todas as perguntas que você tiver. encontraremos na próxima e última lição deste curso, na qual criaremos uma empolgante animação de carregador e veremos como podemos apresentá-la em nosso site de portfólio como uma prosa Mas antes disso, eu recomendo fazer uma pausa de dez minutos. Levante-se da cadeira, faça alguns alongamentos leves, faça chá ou café e volte se refrescando para a próxima 24. Seção 3: tarefa de projeto: Tudo bem. E agora vamos praticar o que aprendemos. Por favor, crie esta animação. Você pode usar cores diferentes das minhas, mas tente manter a animação igual. Essa tarefa tem como objetivo ajudá-lo a lembrar e entender o que você aprendeu. Não se preocupe. A tarefa não ocupará muito do seu tempo. Ele foi projetado para ser feito em apenas 2 horas. Se você tiver algum problema ou dúvida, sinta-se à vontade para pedir ajuda a mim ou a seus colegas em nosso grupo comunitário fechado 25. Seção 4: Animação de carregador para seu portfólio: S S Oi, pessoal. Nesta lição, criaremos uma animação de carregador super legal e aprenderemos como apresentá-la em nosso site de portfólio Esta lição está dividida em quatro partes. Na primeira parte. Vamos desenhar a cena e começar a animá-la. Na segunda parte. Aprenderemos métodos avançados para melhorar a animação. Na terceira parte. Criaremos o final da animação do carregador Então, na quarta parte. Prepararemos a animação para compartilhar em nosso portfólio. Por fim, vamos renderizá-lo no formato MP four de alta qualidade e organizar o projeto antes de fechá-lo. Depois disso, no final da aula, você receberá uma pequena tarefa para realizar. A tarefa tem como objetivo ajudá-lo a lembrar e entender o que você aprendeu. Não se preocupe A tarefa não ocupará muito do seu tempo. Ele foi projetado para ser feito em apenas 2 horas. Se você tiver algum problema ou dúvida, sinta-se à vontade para pedir ajuda a mim ou a seus colegas de classe em nosso grupo comunitário fechado Tudo bem Chega de falar. Vamos começar. 26. Vamos começar a projetar a cena: OK. Vamos abrir o software After Effects. Como de costume, podemos sair dessa janela. Vou ampliar a janela do software. Agora vamos clicar em padrão para que todos possamos ver os mesmos layouts de painel E agora vamos criar nossa primeira composição. Vamos chamá-la de animação de download. Trabalharemos em um formato quadrado de dez 80 por dez 80 pixels. Desta vez, trabalharemos a 60 quadros por segundo. A duração da composição será de 10 segundos. Por fim, selecionaremos uma cor de fundo cinza e clicaremos aqui. Agora, vamos trazer de volta o painel do projeto. Se você não o vê daqui, basta clicar no Projeto de setas e sapatos Agora, vamos salvar o projeto. Vamos encontrar a pasta que abrimos para a aula. Vá até a pasta A e nomeie a animação do projeto para o portfólio. Não temos nenhum problema com o nome do arquivo ser diferente do nome da primeira composição que criamos. Agora vamos importar nossa paleta de cores para o projeto. Clique duas vezes na área cinza no painel do projeto. Agora podemos encontrar a pasta que criamos para a lição e entrar na pasta de ativos. Vamos selecionar a paleta de cores e clicar em Importar. Vamos arrastar a camada para a composição, pressione e ajuste o tamanho dessa camada para 30. Vamos colocá-lo aqui para evitar que ele atrapalhe. Podemos bloquear a camada e ocultá-la do painel. Para quem não vê o ícone da função tímida, você pode clicar aqui Vamos marcar a camada como uma camada oculta e ocultá-la clicando no ícone localizado aqui. Agora, vamos começar a criar o círculo grande no qual as esferas menores se moverão Para fazer isso, pressionaremos e seguraremos a ferramenta retângulo e selecionaremos a ferramenta de elipse Vamos desligar o preenchimento. E pinte o traçado de preto na nossa paleta. Por enquanto, alteraremos o peso do traçado para dez. Claro, podemos mudar isso mais tarde. Ok, vamos criar o círculo enquanto pressiona a tecla Shift com aproximadamente esse tamanho. Agora vamos centralizar o círculo no centro da composição usando o atalho de controle inicial Agora vamos aumentar o peso do traçado. Vamos mudar para 30. Agora podemos voltar para a ferramenta de seleção, então vamos pressionar V e alterar o nome dessa camada para traçado. Podemos fechar a camada e bloqueá-la porque não a tocaremos tão cedo Agora vamos criar a primeira pequena esfera. Vamos selecionar a ferramenta de elipse e, desta vez, ativaremos o preenchimento Vamos colorir de azul e desligar o traçado. Agora vamos ampliar um pouco o círculo grande e tentar criar a esfera pequena com o mesmo tamanho da espessura do traçado do círculo grande. Algo parecido com isso. Vamos pressionar V para retornar à ferramenta de seleção e alterar o nome da camada para esfera um. Se esse círculo não sair no tamanho certo, você pode pressionar para reduzi-lo. Não vou alterar o tamanho, então pressionarei o controle Z. Vamos fazer com que a tela caiba novamente Agora, vamos animar a esfera. Ele se moverá para a forma de grandes círculos assim. Ok, vamos chegar mais perto. Pressione a barra de espaço, segure-a e arraste a tela para baixo para ver a parte superior da tela. Pressione a tecla apóstrofo para abrir a grade. Agora vamos colocar a esfera aqui e usar a ferramenta de alinhamento para centralizá-la na composição M chegue um pouco mais perto e mova o círculo aqui. E agora, para fazer a esfera se mover, criaremos quadros-chave para o parâmetro de posição. Vamos selecionar a camada e pressionar P. No início da animação, sabemos que a esfera precisa estar na posição em que está atualmente. Vamos criar o primeiro quadro-chave no segundo zero. Uma segunda, vamos mover a esfera aqui. Para colocá-la exatamente no centro da composição, usaremos uma linha e, agora, na segunda segunda, moveremos a esfera aqui. Novamente, usaremos a linha para centralizá-la na composição. Agora vamos nos aproximar um pouco e mover a esfera um pouco para a esquerda. Tudo bem, vamos seguir em frente. Agora, no segundo terceiro lugar, vamos mover a esfera aqui. E com a linha, vamos posicioná-la exatamente no centro da composição. Podemos abaixar um pouco a esfera. E agora, na segunda quarta, queremos que a esfera retorne à sua posição original. Para fazer isso, podemos copiar os primeiros quadros-chave e colá-los aqui. Vamos ver como fica. Obviamente, não parece muito bom porque o caminho que criamos para a animação da esfera é reto e não arredondado. Vamos ver como podemos contornar o caminho dessa animação. Primeiro, vamos até o ponto na linha do tempo em que a esfera não está em nenhum dos quadros-chave, para que possamos ver todos os pontos do Agora, para arredondar os cantos, precisamos usar uma ferramenta chamada ferramenta de conversão de vértice Vamos pressionar longamente a ferramenta caneta e aqui está. Podemos escolher a ferramenta aqui ou usar um atalho. Vamos fazer isso usando o atalho. Digamos que não escolhemos a ferramenta Caneta e estamos usando a ferramenta de seleção. Tudo o que precisamos fazer é selecionar um dos pontos. Mantenha pressionadas as teclas control e Ault e clique no ponto uma vez. E agora esse ponto se tornou arredondado. Com as alças que temos agora, controlaremos a curva do canto. Faremos isso novamente em um momento. Ok, então, por enquanto, vamos também selecionar esse ponto. Mantenha pressionadas as teclas control e Ault e clique neste ponto uma vez. Agora, vamos arrastar essa alça para a direita enquanto pressiona a tecla shift para mover a alça em uma linha reta. Vamos fazer isso desse lado também. Vamos fazer isso aqui também. Podemos pressionar alt e a tecla apóstrofo para destacar a grade proporcional Dessa forma, podemos ver que movemos as alças com relativa precisão. Além disso, sempre podemos verificar sua aparência enquanto está em movimento. Vejo que em certas partes a esfera está se desviando de seu caminho Para isso, continuaremos e organizaremos seu caminho. Enquanto isso, vamos desligar essa grade. Vamos pressionar alt e a tecla apóstrofo. Agora, vamos nos aproximar um pouco e ver como podemos consertá-lo. Ok, então neste ponto, essa esfera já está começando a se desviar de seu caminho Então, vamos pegar essa alça e ajustá-la. Se não conseguirmos ajustar o caminho corretamente com uma alça, também podemos arredondar esse ponto e navegar pela curva com suas alças. Vamos selecioná-lo, segurar Control e Alt e clicar nesse ponto uma vez. Agora temos uma alça adicional que podemos controlar. Vamos fazer o mesmo desse lado. Vamos selecioná-lo, segurar o controle e a tecla alt e clicar nesse ponto uma vez. Mas, como você pode ver, não tínhamos um controle como antes. Isso porque há dois pontos um em cima do outro. Enquanto isso, podemos mover esse ponto aqui. Vamos fazer com que seja um ponto regular e não arredondado. Vamos segurar o controle alt e clicar nele uma vez. Agora vamos selecionar esse ponto e torná-lo arredondado. E vamos ajustá-lo junto com esse ponto. E o mais importante, quando terminarmos, precisamos retornar esse ponto exatamente à sua posição original. Dessa forma, evitamos saltos no loop de animação que criaremos em breve Ok, vamos ajustar a tela para caber. Vamos ficar aqui com o indicador de tempo e encurtar a área de trabalho aqui usando a tecla n. Agora vamos ver a animação sendo reproduzida em loop. Vejo que há um pequeno problema aqui. Podemos ampliar e reorganizar as alças. Agora está ótimo e podemos seguir em frente. Agora eu quero encolher um pouco essa esfera. Vamos chegar um pouco mais perto. Selecione a camada, pressione e vamos reduzi-la para 85 Dessa forma, essa esfera sempre aparecerá dentro do caminho dos círculos. OK. Então, depois de fixarmos o caminho da pequena esfera, vamos melhorar sua animação. Podemos ajustar essa camada, ajustar a tela de visualização e passar para a próxima parte. 27. Métodos avançados de animação: Portanto, para melhorar a animação que criamos, primeiro suavizaremos os quadros-chave convertendo-os em quadros-chave EZ Es Vamos selecionar a camada, pressionar você para ver todos os quadros-chave, selecioná-los e pressionar F nove Vamos ver como fica. Ok, agora a animação não parece muito legal. Vamos ver como podemos melhorar isso. Vamos chegar mais perto. Vamos mover a tela até aqui e aprender como fazer isso. Em primeiro lugar, eu sei que nesse quadro-chave, essa esfera precisa se mover muito rapidamente para cima Para fazer isso, vamos ao editor gráfico. Certifique-se de que estamos no gráfico de velocidade. E agora vamos arrastar essa alça aqui e essa aqui. Isso fez com que a esfera se movesse muito rapidamente no início desse quadro-chave Agora eu quero que essa esfera desça rapidamente quando atingir esse quadro-chave Vamos selecionar esse quadro-chave, arrastar essa alça aqui e essa alça desse quadro-chave aqui Vamos ver como fica. Parece ótimo. Vamos mudar a cor da esfera para branca por enquanto, que possamos vê-la melhor. Agora vamos selecionar o parâmetro de posição novamente a partir daqui, para que possamos ver os quadros-chave e continuar Agora eu quero que essa esfera não pare neste ponto. Para fazer isso, vamos selecionar esse quadro-chave, pressioná-lo duas vezes e selecionar contínuo Clique em OK e mova esse quadro-chave para cima. Vamos ver como fica. Eu o criei demais. Vamos chegar mais perto. E agora vamos diminuir um pouco. Agora está ótimo. Depois disso, nesse momento, a esfera precisa continuar seu movimento rapidamente. Vamos ver como podemos fazer isso. Vamos sair do editor gráfico. Podemos transformar esse quadro-chave em um quadro-chave contínuo para conseguir isso Vou ampliar o quadro-chave para que possamos ver o que estamos fazendo Como você pode ver, o quadro-chave atualmente é uma facilidade e um quadro-chave Se mantivermos pressionada a tecla control e clicarmos no quadro-chave uma vez, ele retornará a um quadro-chave normal Mas se clicarmos nele novamente enquanto pressionamos o controle, ele mudará para um quadro-chave contínuo Então, vamos ver como fica. Então, quando a esfera atinge esse ponto, ela não para, ela continua seu movimento. Agora, eu também não quero que haja uma parada nesta parte. Então, vamos transformar esse quadro-chave em um quadro-chave contínuo ou retorná-lo a um quadro-chave normal Vamos manter pressionado o controle e clicar nesse quadro-chave uma vez. Vamos ver como fica. Mais uma vez. Parece bom. Mas agora vamos tentar fazer desse quadro-chave um quadro-chave regular e o outro, um quadro-chave contínuo Acho que vai ser melhor assim. Vamos deixar assim e seguir em frente. Transformaremos os últimos quadros-chave em contínuos. Vamos manter pressionado o controle e clicar de uma só vez. Vamos ver como fica. Ok, acho que retornaremos esse quadro-chave para contínuo e este para normal Eu intencionalmente mostro esse processo porque, quando animamos algo, sempre mudamos os quadros-chave até encontrarmos algo de que gostemos Esse é um fluxo de trabalho normal e efeitos posteriores. Ok, depois de terminarmos com os quadros-chave, vamos cronometrar a animação e movê-la na linha do tempo até alcançarmos velocidade de animação com a qual estamos satisfeitos Então, primeiro de tudo, neste momento, essa animação dura 4 segundos. Isso é muito longo, o que faz com que toda a animação pareça lenta. Vamos encurtar toda essa animação. Para isso, vamos selecionar todos os quadros-chave que temos. Vamos ficar no segundo número dois com o indicador de tempo, manter pressionada a tecla alt e arrastar o último quadro-chave enquanto mantemos pressionada a tecla Shift Vamos ver como fica. Agora, quero que todo o movimento que acontece na parte inferior do círculo se acelere. Para isso, vamos selecionar os últimos três quadros-chave. Agora, mantenha pressionada a tecla Alt e arraste o último quadro-chave. Digamos que para o quadro 30. Vamos ver como fica. Eu acho que é ótimo. Agora, vamos fazer com que essa esfera repita a mesma animação novamente. Eu quero que essa esfera não pare quando chegar a esse ponto. Eu quero que continue subindo. Para isso, podemos selecionar esse quadro-chave e todo o quadro-chave que vem depois dele Vamos copiá-los pressionando Control C e colá-los aqui, por enquanto, nos dois segundos. Vamos ver como fica. Parece bom. Agora, para uma melhor movimentação, vamos converter esse quadro-chave em um quadro-chave contínuo Pergunta: como podemos converter um quadro-chave em um quadro-chave contínuo? Para fazer isso, manteremos pressionada a tecla control e clicaremos nesse quadro-chave uma vez e depois novamente. Vamos ver o que sai. Também percebo que haverá um pequeno problema aqui porque o quadro-chave aqui é de um tipo diferente Vamos torná-lo contínuo também. E o último contínuo. Vamos ver o que sai. Agora vamos fazer a esfera funcionar em outro salto. Primeiro, vamos ampliar a área de trabalho. E como fizemos antes, quando copiamos toda a animação desse quadro-chave Agora podemos copiar esses quadros-chave daqui porque é quando a esfera começa a subir, permanece no ar e depois desce rapidamente Agora, vamos para o quadro 30 e colá-los aqui. De alguma forma, esses quadros-chave se tornaram fáceis e fáceis. Isso não é um problema. Vamos convertê-los em quadros-chave contínuos Agora vamos ver como tudo fica junto. Na minha opinião, a animação é lenta. Vamos encurtar um pouco. Para isso, selecione todos os quadros-chave. Digamos que queremos que toda a animação dure até o segundo número quatro. Mantenha pressionada a tecla lp e arraste o último quadro-chave enquanto mantém pressionada a tecla Shift Observe que, à medida que movemos esse quadro-chave, ficou fácil e fácil Por enquanto, isso não nos incomoda. Nós cuidaremos disso mais tarde, se necessário. Por enquanto, estamos apenas verificando a velocidade de toda a animação. Parece ótimo. Agora eu quero a animação que ocorre na parte inferior seja rápida e suave. O que podemos fazer é aproximar esses quadros-chave uns dos outros dessa forma Vamos fazer isso em todas as partes em que a esfera está na parte inferior da animação. Vamos ver como fica. Na minha opinião, podemos acelerar isso ainda mais. Vamos aproximar ainda mais esses quadros-chave um do outro. Vamos ver isso de novo. Ok, agora parece muito melhor. Vamos fazer essa esfera fazer outra rotação. Para isso, vamos para o segundo e 30 quadros. Copiaremos todos os quadros-chave dessa esfera e os colaremos na posição do indicador de tempo. Vamos mudar esses quadros-chave para quadros-chave contínuos. Depois de terminarmos essa animação, vamos fazer com que a esfera entre no quadro de alguma forma, porque ela não pode simplesmente ficar aqui e depois pular. Não parece bom. Por exemplo, a partir desse momento, podemos criar uma animação em escala para a esfera. Vamos pressionar S e criar os primeiros quadros-chave aqui. Agora, vamos pressionar você para ver todos os quadros-chave nessa camada Agora, vamos voltar um pouco no tempo, por exemplo, até aqui e tornar a esfera de tamanho zero. Vamos converter esses quadros-chave AsyEAS e ver como Eu acho que parece bom. Agora que estamos começando a ver a esfera a partir desse momento, não precisamos realmente de toda a parte inicial. Mas, para salvar a animação e evitar danos, não excluiremos os quadros-chave. Vamos apenas encurtar a camada. Podemos encurtar manualmente a camada ou usar o atalho lt e o colchete esquerdo E agora o que podemos fazer é criar uma animação do desaparecimento da esfera Para isso, podemos copiar os quadros-chave do parâmetro de escala que criamos anteriormente. Depois disso, cole-os no final da animação e inverta sua ordem clicando com o botão direito do mouse em um deles, acessando o assistente de quadros-chave e selecionando quadros-chave com reversão de tempo Porque neste momento, não vemos mais a esfera, podemos cortar a camada. Vamos ficar aqui com o indicador de tempo pressionar Alt e escrever o colchete. Agora vamos melhorar nossa animação com um efeito interessante que usamos na lição anterior, chamado echo Vamos ao painel de efeitos e predefinições. Digite echo na barra de pesquisa. Arraste esse efeito para a esfera. Aqui escrevemos -0,001. Aqui escrevemos 30 e aqui mudamos para o máximo. Agora, quando a esfera estiver se movendo em alta velocidade, veremos um efeito de trilha interessante. Esse efeito pode ser um pouco pesado no seu computador, portanto, tome cuidado para não usá-lo demais com muitas duplicatas Agora vamos colorir a esfera em azul, exatamente como estava no começo. Selecionaremos a camada, preencheremos e experimentaremos a cor azul usando o conta-gotas Em seguida, pressionaremos enter. Excelente. Vamos ampliar novamente e agora vamos duplicar nossa esfera mais duas vezes. Mas antes disso, vamos organizar a tela de visualização para um melhor fluxo de trabalho. E agora, selecionaremos a camada. Em seguida, pressionaremos Control D. Finalmente, vamos colorir a nova esfera em amarelo. Depois disso, vamos duplicá-lo novamente e pintá-lo em vermelho. Agora vamos criar um deslocamento entre todas as esferas. Vamos mover essas duas camadas para cá. Para ser mais preciso, podemos contar quantos quadros movemos exatamente, usando um atalho Vamos manter pressionada a tecla control e pressionar a seta para a direita em nosso teclado. Ok, então movemos dez quadros exatamente. Agora vamos selecionar somente a camada da esfera vermelha. Agora, mova-o em dez quadros usando as teclas de controle e seta no teclado. Agora vamos mover a camada para cá. Vamos ver como fica. Parece ótimo. Agora eu quero te ensinar algo importante. Digamos que decidimos reduzir a espessura do traçado do círculo grande para dez. Agora, as esferas menores são muito grandes em comparação com o novo traço Se reduzirmos essas camadas por meio do parâmetro de escala, porque esse parâmetro já tem quadros-chave, criaremos quadros-chave desnecessários e arruinaremos a animação Vamos ver como fazer isso corretamente. A maneira correta de fazer isso é abrir o conteúdo da camada e alcançar as transformações da própria elipse Podemos fazer isso rapidamente para todas as camadas juntas selecionando todas elas, digitando escala na barra de pesquisa, pressionando enter e reduzindo as esferas por meio da transformação da elipse e não por meio da elipse e não por meio da Veja, não há quadros-chave no parâmetro de escala. Vamos escrever 50 aqui. Escreveremos isso também na segunda e terceira esferas. Agora podemos fechar a barra de pesquisa e aí reduzimos as esferas sem afetar a sem afetar Tudo bem, vamos seguir em frente. Agora vamos aumentar a espessura do traçado do círculo grande. Talvez até 20. É muito grande. Vamos escrever 15. 15 é excelente. Agora vejo que o deslocamento que criei é muito grande. Então, vamos aproximar as camadas assim. Isso é melhor. Parece bom. A propósito, se você não gostar do efeito, pode desativá-lo aqui. Vamos ver como fica. Ok, eu gosto da aparência com o efeito. É isso mesmo. Animamos as esferas e agora vamos animar o traçado do círculo grande Mas antes disso, eu recomendo fazer uma pausa de dez minutos. Levante-se de 28. Finalizando para criar a animação do carregador: Então, primeiro, vamos rotular essa camada com qualquer cor para que possamos distingui-la das outras camadas. Agora, para animar nosso traçado, abriremos a camada, abriremos também o conteúdo, selecionaremos a elipse e adicionaremos um efeito chamado Vamos posicionar a tela para que possamos ver o círculo. Agora, quando abrimos o efeito, vemos um parâmetro chamado end, que vamos animar. Vamos ao início da animação e definamos o valor do parâmetro n como zero. No segundo número um, vamos mudá-lo para 100. Vamos ver como fica. Excelente. Agora, como você pode ver, os cantos do nosso traçado estão retos. Eu não acho que isso parece muito bom. Vamos ver como podemos arredondá-los. Para fazer isso, abriremos parâmetros do traçado e alteraremos o limite da linha para arredondado. Vamos alterá-lo aqui para redondo também. Agora parece um pouco melhor. Ok. Vamos fechar o traçado e melhorar a animação que criamos com *** Selecione os quadros-chave e pressione F nove. Agora, vamos manter pressionada a tecla Alt e clicar duas vezes em um dos quadros-chave para acessar a velocidade do quadro-chave Vamos alterá-lo aqui para 85 em 85 e clicar em OK. Vamos ver como fica. Ok, vamos fechá-lo e continuar criando a animação do ícone V. A animação do ícone V deve começar quando as pequenas esferas terminarem sua última rotação Vamos ficar no ponto em que a esfera azul termina sua animação Vamos chegar mais perto. Certifique-se de que não estamos selecionando nenhuma camada e escolha a ferramenta caneta. A partir desse ponto, criaremos a forma da forma V. Podemos mover esses pontos mais tarde. Enquanto isso, vamos desativar o preenchimento dessa forma e escolher que o traçado fique em azul Em seguida, alteraremos a espessura para 15 e arredondaremos os cantos dessa forma, como fizemos antes. Para isso, abriremos os parâmetros do traçado e alteraremos o limite da linha para redondo, para que a conexão também seja redonda. Vamos alterá-lo aqui para redondo também. Agora está arredondado aqui também. Vamos fechar a camada. Agora, pressione enter e altere o nome para V one. Essa camada deve começar daqui, então não precisamos de toda essa parte aqui no início. Vamos cortá-lo na posição do indicador de tempo pressionando Alt e colchete esquerdo E para animar essa forma, usaremos o efeito de caminhos de corte novamente, como Então, vamos abrir o conteúdo, selecionar a forma, adicionar e escolher caminhos de corte Novamente, criaremos quadros-chave para o parâmetro nd. Podemos ajustar o painel de composição para um melhor fluxo de trabalho. Neste momento, vamos criar quadros-chave com valor zero. E agora vamos avançar 1 segundo. Se estamos agora no quinto e no 19º quadros, vamos passar para o sexto e o 19º quadros. Vamos criar quadros-chave com um valor de 100. Agora, vamos criar os quadros-chave, desta vez, alteraremos a velocidade por meio do editor gráfico dessa forma O que acabamos de fazer agora é sincronizar a animação do ícone v com a animação do final da esfera. Ou seja, quando a esfera azul encolhe, a primeira forma de v começa a aparecer Agora, vamos nos concentrar nessa parte da forma. Não queremos que essa parte fique aqui. Essa parte precisa estar dentro da esfera. Vamos ver como fazer isso. Antes de tudo, vamos voltar à ferramenta de seleção. E agora vamos também ajustar o parâmetro inicial. Queremos que a animação da forma seja como está agora até agora. Então, vamos criar um quadro-chave aqui com o valor atual. E quando a forma completar sua animação, queremos que essa parte se mova um pouco para dentro. Vamos escrever 20. Vamos também converter esses quadros-chave Easy Ease e ver como ficam Acho que essa animação deveria começar mais cedo. Isso parece melhor. E agora também podemos alterar a velocidade dessa animação por meio do editor gráfico, como fizemos antes Vamos verificar como fica. Tudo bem Vamos seguir em frente. Ok. Então, agora, se quisermos mudar um pouco a forma, podemos pegar a ferramenta caneta, selecionar um dos pontos e movê-lo para onde quisermos. Vamos mudar isso para algo parecido. Agora, vamos duplicar essa camada mais duas vezes. Mas antes disso, vamos cortar essa camada até o ponto em que a animação termine. A animação termina aqui. Vamos pressionar alt e o suporte direito para cortá-lo. Agora feche todas as camadas. Volte para a ferramenta de seleção e duplique a forma Agora vamos mudar a cor da nova forma de V para amarelo. Mais uma vez, vamos duplicar essa camada e mudar a cor para vermelho E agora, eu quero que o V azul esteja em cima de todos, então vamos mover a camada do V amarelo abaixo dele, e vamos colocar o V vermelho abaixo do amarelo V. Em seguida, vamos criar um deslocamento para essas camadas dessa forma Vamos afastá-lo um pouco mais . Vamos ver isso de novo. Acho que toda essa animação está rodando muito devagar. Então, vamos selecionar todas essas camadas. Pressione você. Selecione todos os quadros-chave. E agora, mantenha pressionada a tecla Alt e arraste os últimos quadros-chave dessas camadas aqui. Agora parece melhor. Se você quiser manter essas camadas por um pouco mais de tempo, você pode estendê-las assim. Vamos ver isso de novo. Ok, agora vamos terminar essa animação fechando esse círculo. Faremos isso usando o efeito Trim Paths. Vamos ajustar a tela de visualização e fechar essas camadas. Agora, selecione o círculo e ajuste o painel de composição desta forma. Agora, vamos abrir a camada e para aqueles que não conseguem ver o efeito de caminhos de corte Você pode abrir todos os parâmetros aqui até ver o efeito. Desta vez, vamos animar o parâmetro inicial. Vamos decidir que o fechamento começará no ponto em que todas as formas em V desaparecerem , ou seja, em 6 segundos e 50 quadros. Neste momento, criaremos quadros-chave com valor zero. Agora vamos ajustar um pouco a área de trabalho. Agora vamos avançar exatamente 1 segundo. Se estamos agora com 6 segundos e 50 quadros, vamos chegar a 7 segundos e 50 quadros e criaremos quadros-chave com um valor de 100. Agora vamos converter esses quadros-chave em asys. Desta vez alteraremos a velocidade por meio do editor gráfico de forma que a animação comece lentamente e, no final, aumente Agora, para fazer com que a animação que criamos seja reproduzida em um loop perfeito, vamos até o momento em que ainda podemos ver uma pequena parte do traçado do círculo grande. Este é um bom momento, porque, como você pode ver, vemos um pequeno pedaço do traço. E agora vamos encurtar a área de trabalho até esse momento pressionando. Ok. Agora vamos voltar ao começo. Pressione você e mova esses dois quadros-chave um pouco para trás para que a animação comece onde já podemos ver essa pequena parte O que acontecerá agora é que, quando a animação terminar, ela começará sem problemas do mesmo ponto em que terminou Agora, quero mostrar como seria se não tivéssemos feito isso e terminássemos a animação quando o traço desaparecesse completamente da tela. Também no começo, se não movêssemos um pouco os quadros-chave Vou trazer a animação volta ao que era no começo. Você não precisa fazer isso comigo. Teria sido assim. Preste atenção na animação quando o vídeo terminar. Há um corte pequeno e desagradável na animação. Vamos ver isso de novo. É por isso que terminamos e começamos a animação quando vemos essa pequena peça. Tudo bem, vou fazer com que volte ao normal agora. E com isso, terminamos de preparar a animação do carregador Vamos pressionar control para salvar o projeto e seguir em frente para ver como podemos apresentar essa animação em nosso portfólio como um P. 29. Compartilhe-o em seu portfolio como um profissional: Na primeira etapa, vamos criar a forma do iPhone. Para fazer isso, usaremos a ferramenta Retângulo. Agora, vamos nos certificar de que não estamos selecionando nenhuma camada e alterando a cor de preenchimento para branco. Em seguida, vamos colorir o traçado em cinza claro da nossa paleta Uma coisa importante a saber antes criar o iPhone é que, se quisermos criar uma forma e dimensões específicas, no nosso caso, 1.920 pixels de altura e 1080 pixels de largura, para criar as formas simetricamente e depois alterar as Vou te mostrar o que quero dizer. Então, vamos criar um quadrado simétrico pressionando a tecla shift, independentemente do tamanho Agora, vamos abrir os parâmetros da forma que criamos aqui. Abriremos o caminho e inseriremos dimensões precisas no parâmetro chamado tamanho. Vamos abrir a fechadura das dimensões. E agora aqui em largura, escreveremos 1080 e em altura escreveremos 1920 Agora, vamos bloquear as dimensões novamente e reduzi-las por meio de um dos valores. Isso é o suficiente. A partir daqui, podemos arredondar os cantos. 60 parece perfeito para mim. Agora, vamos aumentar o traço para 30. Depois disso, vamos pressionar Enter e alterar o nome da camada para iPhone. Vamos movê-lo para baixo de todas as camadas. Agora centralize essa camada na composição usando a ferramenta alinhada Vamos ver se combina bem com nossa animação. Caso desejemos aumentar a altura do nosso iPhone, podemos voltar ao parâmetro de tamanho desse caminho de formas, desbloqueá-lo e alterar sua altura a partir daqui. Agora vamos bloqueá-lo novamente, fechar a camada e seguir em frente. A próxima coisa que faremos é agrupar todas essas camadas em uma pré-composição Então, vamos selecionar todas as camadas. Pressione Control, Shift C, chame essa tela pré-configurada do iPhone e OK. Agora vamos voltar para a ferramenta de seleção. E como você pode ver, temos muito espaço vazio aqui. Vamos reduzir o tamanho dessa pré-composição. Para isso, entraremos na pré-competição. Podemos desligar o plano de fundo , pressionar Control K e reduzir a largura dessa composição. 540 parece bom para mim. E agora, como essa seção inteira na linha do tempo é desnecessária, podemos cortá-la Para isso, clique com o botão direito do mouse na área de trabalho e escolha aparar composição na área de trabalho. Vamos voltar à composição principal e seguir em frente. A próxima coisa que faremos é alterar o tamanho dessa composição em que estamos atualmente. Para isso, pressione Control K, altere sua largura para 1920 pixels e pressione Enter. É importante observar que não alteramos o tamanho da pré-composição do iPhone Essa pré-composição tem o tamanho que definimos anteriormente. Alteramos as configurações da composição chamada animação do downloader Tudo bem, vamos seguir em frente. Agora vamos ampliar essa pré-composição selecionada e processada. Vamos escalá-lo até 200. Vamos colocá-lo aqui. E agora, se eu chegar mais perto, observe que a qualidade dos objetos dentro dessa pré-composição diminuiu Pergunta, o que devemos fazer para maximizar a qualidade? Para isso, precisamos ativar a função de colapso, que pode ser encontrada aqui. Vamos clicar aqui e imediatamente podemos ver a diferença. Ok, vamos continuar. Acho que esse tamanho é muito grande, então vamos reduzi-lo para 150 ou talvez 130. Agora vamos pressionar a tecla do apóstrofo para ver a grade. Isso facilitará muito o design da cena. Agora vamos criar três esferas aqui. Podemos criá-lo usando a ferramenta de elipse. Pressione e segure aqui, solte o botão para clicar e selecionar a ferramenta de elipse. Agora vamos garantir que não selecionemos nenhuma camada. Porque se selecionarmos uma camada e tentarmos criar uma esfera, acabaremos com uma máscara, e não é isso que queremos. Vamos pressionar Control Z para desfazer a ação. Agora, vamos garantir que não selecionemos essa camada e criemos uma esfera por aqui. Vamos desligar o traço. Escolha a cor de preenchimento e o azul. Em seguida, vamos selecioná-lo em andamento e alterar o valor para 50 ou 30. Isso parece melhor Agora vamos entrar no conteúdo dessa camada, selecionar a elipse e duplicá-la Mas antes, vamos ampliar um pouco e ajustar a tela de visualização para que possamos ver que a esfera está melhor. Agora selecione a elipse e pressione Control D. Em seguida, vamos abrir a transformação da nova elipse e movê-la usando Finalmente, vamos mudar a cor da esfera para amarelo. Antes de duplicá-la novamente, precisamos primeiro selecionar o Caminho da Elipse, depois selecionar a Elipse e pressionar Finalmente, vamos mover a nova elipse aqui e mudar a cor para vermelho Agora, vamos mudar o nome para três esferas. Em seguida, vamos usar a ferramenta de texto. Defina a visualização para caber e gravar a tela de carregamento de um aplicativo. Vamos pressionar Control a para selecionar todo o texto, escolha a fonte que mais gostamos. Altere o tamanho e ajuste um pouco a ponta. Agora, vamos pressionar Control Enter para sair da linha de texto. Vamos colorir o texto com nossa cor clara da paleta e colocar essa camada abaixo de todas as outras camadas Finalmente, vamos voltar para a ferramenta de seleção e mover o texto até aqui. Vamos alinhar as esferas aqui. Podemos centralizá-los usando uma linha. Agora, vamos duplicar a camada de texto. Vamos movê-lo para cima e aqui você pode alterar o texto para o seu nome. Reduzirá o tamanho da fonte, mudará o peso para algo mais leve. Agora, vamos clicar aqui. Escolheremos a ferramenta de seleção e moveremos esse texto aqui. Neste momento, não precisamos mais da paleta de cores. Então, vamos exibi-lo no painel de camadas e excluí-lo daqui. Agora podemos esconder a grade. Então, vamos pressionar a tecla do apóstrofo. Agora, vamos criar um sólido que servirá como nosso plano de fundo. Para isso. Vamos pressionar Control Y para tornar a cor de fundo azul, mas um pouco mais escura Finalmente, vamos colocar a camada sólida abaixo de todas as outras camadas. Agora vamos melhorar a aparência da nossa cena usando um efeito chamado drop-shadow Vamos aplicar esse efeito à pré-composição do iPhone. Agora, experimente a cor de fundo e torne-a mais escura. Em seguida, vamos aumentar a opacidade até 100. Distância, mudará para zero e aumentará a suavidade, digamos até 300 Acho que a cor é muito escura. Vamos iluminar um pouco. Com isso. Nós terminamos o design dessa cena. Antes de renderizá-la, vamos revisar toda a animação do início ao fim para verificar se há erros Percebi o erro de ortografia. Então, deixe-me corrigir isso rapidamente. Vamos ver isso de novo. E agora vamos aproveitar essa oportunidade e praticar mais uma vez para ajustar a espessura do traçado do grande círculo. Então, vamos selecionar a Ferramenta de Seleção e entrar na pré-composição do iPhone Agora vamos ampliar um pouco, selecionar a camada desejada e aumentar a espessura para 25. E agora, também precisamos aumentar o tamanho das esferas Lembre-se de que precisamos ampliá-las por meio das transformações da forma e não das transformações da camada Para fazer isso rapidamente em todas as camadas, vamos selecionar todas as esferas, camadas e escala de texto na barra de pesquisa E, claro, não vamos escalá-lo por meio da escala de camadas, mas por meio da escala de formas. Mude para 85. Vamos fechar a barra de pesquisa. Agora, como ampliamos as esferas, precisamos ajustar o tamanho das formas em V adequadamente Então, selecione essa camada e aumente o traçado para 25. Por fim, vamos também alterar o tamanho do traçado dessas duas camadas e ver como fica . Parece ótimo. Então, agora podemos fechar essa pré-composição partir daqui e renderizar a animação que Então, vamos pressionar Control M para acessar o painel de renderização, escolheremos renderizá-lo no formato h point to 64 de alta qualidade, que é mp4 de alta qualidade e escolheremos renderizá-lo em nossa pasta de amostras Vamos apenas mudar o nome para animação do portfólio e clicar em Renderizar. Vamos esperar alguns instantes. Ok, agora vamos ver o que temos. Parecendo bem. Agora você pode compartilhar a animação criada nas redes sociais e publicá-la no site do seu portfólio. Apresentar uma animação de carregador como essa é muito mais impressionante do que usá-la como uma imagem estática E se você gostou do curso, eu realmente agradeceria se você o lesse , com base na sua experiência. Você também pode escrever uma resenha para que eu saiba se você aprendeu algo interessante no curso ou não. Ok, vamos voltar ao nosso projeto e organizá-lo. Antes de fechá-la, vamos criar uma pasta chamada assets. Em seguida, vamos garantir que não selecionemos nada e criemos outra pasta chamada pre-comps Agora, dentro da pasta Assets, arrastaremos nossa paleta de cores e a pasta de sólidos. E para as pré-composições, arrastaremos a pré-composição do iPhone. Por fim, vamos rotular nossa composição principal em azul. E agora você pode clicar aqui para deixar o arranjo ainda mais organizado. Agora vamos pressionar Control S para salvar o projeto. E agora você pode fechá-lo 30. Seção 4: tarefa de projeto: Tudo bem. E agora vamos praticar o que aprendemos. Por favor, crie esta animação. Você pode usar cores diferentes das minhas, mas tente manter a animação igual. Essa tarefa tem como objetivo ajudá-lo a lembrar e entender o que você aprendeu. Não se preocupe. A tarefa não ocupará muito do seu tempo. Ele foi projetado para ser feito em apenas 2 horas. Se você tiver algum problema ou dúvida, sinta-se à vontade para pedir ajuda a mim ou a seus colegas em nosso grupo comunitário fechado M 31. Encerramento: E com isso, terminamos o curso. Você pode se orgulhar de si mesmo porque deu o primeiro passo no mundo do design de movimento e aprendeu muitas coisas novas que você já pode usar em seu próximo projeto. Você pode compartilhar seu vídeo em nosso grupo comunitário privado e, claro, pode me fazer qualquer pergunta lá. Prometo responder a qualquer pergunta que você possa ter. Espero que você goste deste curso e posso esperar para ver você no próximo.