Como criar slides animados para seus vídeos

1. Boas-vindas ao curso: Pessoal, meu nome é Adi Purdila, e se vocês estão fazendo vídeos e querem que eles pareçam mais profissionais, essa aula é para Vou mostrar como criar slides animados como este, que você pode usar diretamente em seus vídeos. Vamos construir isso do zero no Lodi Lab, que é uma ferramenta de animação baseada em navegador muito fácil de usar Começaremos aprendendo como a ferramenta funciona e, em seguida, criaremos um slide de introdução de aula totalmente animado com animações de texto, formas de fundo em movimento e tempo adequado em todos os elementos Depois que o slide estiver pronto, também mostrarei como exportá-lo e colocá-lo em um editor de vídeo real para que você possa ver exatamente como ele se encaixaria no seu fluxo de trabalho. Acabamos de nos encontrar, meu nome é Adi. Sou designer de UIUX e educador de design. Eu crio cursos e tutoriais em vídeo desde 2010 e, honestamente, há muito tempo eu queria adicionar mais animação aos meus próprios vídeos, mas as ferramentas sempre pareciam muito complexas Quando eu encontrei a Lottielab, isso mudou, e é exatamente por isso que eu queria fazer Agora, aqui estão alguns motivos pelos quais essa aula pode ser para você. Primeiro, você não precisa de nenhuma experiência em animação. Vou explicar tudo passo a passo e, se você nunca tocou uma ferramenta de animação antes, tudo bem. Começamos do zero. Segundo, o que você aprende aqui vai além da criação de slides. Depois de entender como cronogramas de animação funcionam e como pensar em movimento, você pode aplicar isso a qualquer projeto de animação, não apenas aos slides de vídeo E terceiro, ao final desta aula, você terá um slide animado realmente finalizado que poderá realmente usar em seus vídeos imediatamente. Esta aula é para criadores de conteúdo, educadores e qualquer pessoa que faça vídeos Nenhuma experiência em animação é necessária. No entanto, eu recomendaria ter algum conhecimento básico do Figma pois o usaremos para trazer o design para o Lottielab Tudo bem, estou animado com isso. Espero que você também esteja, então vamos falar sobre isso. Na próxima lição, darei mais detalhes sobre o projeto da turma. 2. O projeto do curso: Nesta lição, quero falar sobre o projeto da classe e o arquivo inicial que criei. O projeto da classe é simples. Você precisa criar seu próprio slide animado usando o Lottielab Não precisa corresponder ao que construímos em sala de aula, então fique à vontade para alterar as cores, textos, formas, o que quiser. Faça com que seja seu. E, claro, é perfeitamente normal criar a mesma coisa que eu. A escolha é sua. Agora, para ajudar você a começar, preparei um arquivo Figma com todos os elementos de design que usaremos na aula, e você pode encontrar o link para download na seção de projetos e recursos arquivo inclui todas as formas, as camadas de texto e o layout geral com o qual trabalharemos. Tudo já está organizado, então você pode se concentrar na parte da animação em vez de criar o design do zero. Depois de terminar sua animação, adoraria que você a publicasse na seção de projetos. Você pode fazer upload de uma captura de tela, uma gravação de tela ou até mesmo um link Publicar seu projeto não é obrigatório, mas eu realmente acho que vale a pena fazer isso Isso ajuda você a acompanhar seu próprio progresso. Isso lhe dá algo para relembrar e também ajuda seus colegas a ver abordagens diferentes e a se inspirar. Então, quando você terminar, por favor, compartilhe. Tudo bem, vamos entrar na aula. 3. Primeiros passos com o Lottielab: Nesta lição, vamos começar com o Lottielab. Mostrarei onde se inscrever, orientarei você pela interface e concluiremos criando uma animação simples para ver como tudo funciona. Mas antes de entrarmos em tudo isso, deixe-me responder a uma pergunta que acho que muitos de vocês farão. Por que eu deveria usar o Lottielab em vez de algo como o Adobe After Effects, que é o padrão da indústria para Bem, o motivo é simples. O Lottielab é baseado em navegador. É muito mais fácil de aprender e foi criado exatamente para esse tipo de animação. E o After Effects é muito capaz, mas também é muito complicado. É mais caro e precisa muita capacidade de computação para funcionar sem problemas. Agora, deixe-me começar dando algumas alternativas ao Lottielab Jitter é um deles, e isso é realmente o que eu usei antes E também há o Rive que faz design de movimento muito, muito bem Rive, até onde eu sei, é um pouco mais complexo porque você pode criar um monte de coisas com ele, como jogos, interfaces muito legais e todos os tipos de recursos animados Bem, o Jitter é mais simples e é uma maneira muito fácil de criar design de movimento para a web A razão pela qual eu não uso mais o Jitter é porque ficou muito caro Eles tinham serviços ou preços muito acessíveis em algum momento, mas mudaram sua estrutura de preços recentemente. Então isso me levou a procurar em outro lugar. E acabei indo para o Lottielab. Agora, o Lottielab pode ser usado para criar muitas coisas. Não são apenas slides de vídeo, certo? Lottielab é ótimo para todos os tipos de animações leves, como, O Lottielab é ótimo para todos os tipos de animações leves, como, você sabe, microinterações de interface de usuário, animações de logotipo, telas de integração de aplicativos e até banners de marketing, animadas em mídias sociais, etc Você pode criar muitas coisas com o Lottielab. Então, deixe-me fazer um rápido tour pelo aplicativo. Primeiro de tudo, você pode acessar ladilab.com e criar uma conta Você se inscreveria ou faria login e poderia se inscrever com sua conta do Google ou com um e-mail Vou usar minha conta do Google para isso. Depois de fazer login, você será levado ao seu painel, onde verá seus arquivos recentes Você também terá acesso a determinados modelos. E aqui está uma amostra rápida do tipo de animação que você pode criar com Lottielab. As animações aqui não são muito suaves porque eu também estou gravando esse vídeo, essa tela, então minha CPU está Mas sim, você pode criar todos os tipos de animações. Esses são muito legais. Você pode voltar para casa e organizar seu trabalho em projetos ou simplesmente criar arquivos autônomos Então, vamos clicar em Novo arquivo no canto superior direito aqui e criar um novo arquivo de animação. É aqui que criaremos todas as nossas animações. E há quatro seções principais sobre as quais precisamos falar. Temos esse painel à esquerda, que oferece acesso a várias ferramentas, camadas, várias formas e ícones. Podemos adicionar a ferramenta de texto e também a capacidade de adicionar imagens. Então, no meio, temos a tela onde adicionamos pranchetas As pranchetas são como páginas em seu projeto, e cada animação está contida em uma prancheta No lado direito, temos um painel de propriedades e também é o local onde podemos exportar arquivos. E então, na parte inferior, abrangendo toda a largura, está nossa linha do tempo de animação, e mostrarei como isso funciona daqui a pouco A qualquer momento, você pode controlar o tamanho da prancheta alterando sua largura e altura a partir dessas caixas E você também pode alterar a duração, a duração final da animação alterando esse valor. Também aqui, podemos alterar o plano de fundo da nossa prancheta. Vamos usar o branco por enquanto. Agora, vamos criar uma animação bem simples para que você entenda como a ferramenta funciona. Vamos animar um elemento de texto, certo? E como nesta aula, estamos fazendo um slide animado, esse é o caso de uso mais comum dessa ferramenta. Então, vou pressionar T para abrir a ferramenta de texto, clicar e digitar meu texto. Começando com o Lottielab, vou posicioná-lo bem no centro da Agora, com o texto selecionado, o painel de propriedades me permite alterar a família da fonte, o peso, o tamanho, a altura da linha, o espaçamento entre letras, o alinhamento Assim, posso personalizar texto e outros elementos com muita facilidade. E acima, temos um botão que diz adicionar animação. Quando clicamos nele, temos acesso a determinadas predefinições. E quando eu passo o mouse sobre uma determinada predefinição, posso ver a animação em tempo real na minha Aqui está um desvanecimento, aqui está a altura do show. Aqui está um slide e alguns outros. Também temos transformações de camadas, certo? São animações ou predefinições que podemos aplicar a qualquer tipo de camada, não apenas E temos alguns outros aqui. Posso manter o cursor do mouse sobre eles para visualizar. Pessoalmente, vou escolher desfocar e deslizar. Para esta demonstração. Então, vou clicar nele e tenho algumas opções adicionais. Eu posso escolher a direção em que o texto vem. Então, se eu clicar aqui, as letras começarão a ser animadas no canto superior esquerdo Mas eu vou ficar com o padrão. Posso alterar a duração da animação e posso alterar a atenuação. Vamos continuar com calma, porque acho que funciona um pouco melhor. E se eu rolar para baixo, posso optar por aplicar essa animação com base em caracteres, então animar cada personagem, ou eu posso animar a palavra, ou posso animar a linha se eu tiver um Vamos selecionar a palavra. Além disso, vou escolher a suavização aqui para suavizar em vez de linear. Ok, legal. Agora, depois de aplicar uma animação a um elemento, a linha do tempo da animação é alterada Agora temos uma entrada para o elemento de texto que usamos e, em seguida, a animação que aplicamos a ele. E se clicarmos nesse elemento aqui, sim, podemos alterar as propriedades da animação, assim como mostrei anteriormente. Agora, se eu selecionar minha prancheta, posso alterar a duração de toda a animação que acontece dentro dessa prancheta Então, para esta demonstração, vamos definir isso para 4 segundos. Agora, se diminuirmos o zoom e observarmos a linha do tempo da animação, podemos ver que o cursor vai de 0 a 4 segundos, que é exatamente a duração da animação que definimos anteriormente E eu posso facilmente pegar o cursor e movê-lo para onde eu quiser. E também posso clicar nessa área para mover o cursor. E se eu quiser reproduzir a animação, basta pressionar a barra de espaço e ela será reproduzida em loop. Assim. Agora, até agora, animamos esse texto, certo? Mas e se precisarmos animá-lo? Isso significa que fizemos o texto aparecer. Agora queremos fazer com que desapareça após um certo período de tempo. Podemos fazer isso selecionando o elemento e adicionando outra animação. Agora, essa animação será adicionada onde quer que o cursor esteja posicionado atualmente Está bem? Então , se eu posicioná-lo logo no início e selecionar o elemento e adicionar uma animação, e digamos que eu queira adicionar a mesma animação, sim, isso adicionará o segundo slide de desfoque ao mesmo elemento, começando novamente na posição zero Mas agora eu tenho duas animações que estão competindo entre si no mesmo elemento Então, se eu clicar em play, posso ver a animação inicial, mas não a animação final, por assim dizer. Então, vamos fazer algumas coisas aqui. Primeiro, vamos selecionar a segunda animação que adicionamos. E no painel Propriedades, vamos selecionar e podemos ver uma prévia aqui. A flexibilização, eu quero que seja suave. E eu também quero animar por palavra. Além disso, eu gostaria que essa animação acontecesse mais tarde. Então, o que eu posso fazer é simplesmente clicar e arrastar na linha do tempo em uma posição diferente. Está bem? Então, vamos supor que essa primeira animação durará até 1,5 segundo, e eu possa redimensioná-la facilmente assim Depois, posso esperar um segundo e fazer com que a segunda animação comece com aproximadamente 2,5 e continue até a marca de quatro segundos, que é a duração total da minha animação. Então, agora, se eu apertar play, o texto entra e sai. Muito, muito fácil. Então, estamos basicamente adicionando duas animações ao mesmo elemento Um deles anima o texto em. Em outras palavras, faz com que pareça de 0 a 1 0,5 segundos. Em seguida, esperamos cerca de um segundo e, em seguida, a segunda animação começa, o que faz com que o texto desapareça aproximadamente no mesmo período de tempo, 1,5 segundo. E se você quiser ser mais preciso com esses horários, basta selecionar o elemento pai aqui e definir a duração para 1,5 e, em seguida, defini-la até o final, e também definir isso para 1,5 E agora esses dois são exatamente iguais. Legal. Então, nossa animação agora está completa. Vamos exportá-lo, e eu quero analisar isso rapidamente. Para isso, você iria para o canto superior direito, clicaria em Exportar, e isso lhe dará uma prévia da animação e permitirá que você escolha um tipo de arquivo. Esses são os tipos de arquivo que você pode escolher. Para esta lição , como estamos fazendo um slide animado para um vídeo, vamos escolher o formato do vídeo. E então podemos escolher o tamanho do vídeo, certo, a resolução. Quantas vezes quisemos fazer um loop. Nós realmente não nos importamos com isso, e então podemos escolher a taxa de quadros aqui de 30 ou 60 FPS E depois o plano de fundo, usamos o plano de fundo da prancheta ou o tornamos transparente E então você clica em Exportar. Isso o levará para outra tela, onde você poderá ver uma prévia com suas configurações e, em seguida, selecionar Baixar. E uma vez baixado, como você pode ver, ele foi exportado como um MP 4 e você pode ver o resultado aqui Agora, apenas uma menção rápida, se você estiver usando a versão gratuita do Lottielab, você descobrirá que algumas das opções aqui estarão inacessíveis Eu tenho a versão pro, então posso exportar em qualquer resolução desta lista. E se você estiver curioso, a versão pro custa $12 por mês se você pagar anualmente e $18 por mês se você Mas, essencialmente, você desbloqueia tudo. Você pode ter quantos arquivos quiser. Você pode exportar sem marca d'água e pode exportar com a melhor qualidade de vídeo possível E você também tem algumas vantagens adicionais. Tudo bem, então essa foi apenas uma visão geral rápida da ferramenta e de como ela funciona. Então, a seguir, vamos começar a trabalhar em um slide animado muito mais complexo, certo, algo que você realmente usaria em um de seus projetos de vídeo. Então, nos vemos na próxima lição. 4. Vamos animar: prepare o trabalho: Nesta lição, começaremos a criar o slide animado que mostrei no início da aula. Vamos configurar seu arquivo. Acertaremos o tamanho e as cores e traremos todos os elementos do slide da Figma Então, vamos entrar nisso. Este é o arquivo Figma que você pode baixar gratuitamente seguindo o link na seção de projetos É um design muito simples que pode ser usado como um slide de introdução de aula para, digamos, uma aula do Skillshare ou um curso do YouTube , seja o que for Esse texto pode ser o título da aula. Este é o número da lição, e este é o título da lição. Além disso, também temos alguns elementos decorativos que eu também gostaria de animar dentro do Lottielab Então, a primeira coisa que precisamos fazer é trazer esse arquivo para o Lottielab Agora, podemos recriar cada elemento individualmente, ou podemos usar um plug-in que simplesmente copiará tudo e podemos colá-lo no Lottielab Mas antes de tudo, precisamos combinar o plano de fundo e o tamanho do slide. Está bem? Então, como você pode ver, eu tenho um slide de quatro K aqui, 38 40 por 21 60 porque eu quero exportar isso em quatro K. Além disso, já que estou aqui, vou copiar essa cor de preenchimento E eu vou voltar para o Lottielab. Aqui, eu tenho um novo arquivo, e deixe-me torná-lo um pouco maior. Mude um para que o Zoom caiba. E para a prancheta, vou definir seu tamanho para o mesmo tamanho de quatro caixas Então 38 40 por 21 60. Vamos definir a duração. Por enquanto, vamos configurá-lo para 10 segundos, embora sempre possamos alterar isso mais tarde e definiremos o tamanho do plano de fundo para a cor que copiamos anteriormente, FDF três Então, vamos pressionar Shift 1, para que possamos ver a prancheta mais uma vez, e eu voltarei para Figma e pressionarei Control ou Command K se você estiver em um MAC para abrir o menu rápido E vou procurar o Laboratório Lodi. Animação de Figma to Lady. E deixe-me ampliar para que você possa ver melhor. Isso é um plugin. Você pode clicar nele e, em seguida, o plug-in solicitará que você selecione os designs para copiar ou exportar. Então, vou clicar em um dos elementos dentro do Figma e pressionar Command A. Isso selecionará tudo Você também pode ver isso no painel de camadas aqui. Agora, o plug-in me mostra todas as camadas selecionadas. Eu posso simplesmente clicar em copiar e depois voltar ao Lottielab, selecionar minha prancheta e pressionar Control ou Command V. Isso vai colar Observe que essa ação também trouxe todos os nomes de agrupamentos e camadas da Figma Agora, ele não os colou exatamente na posição correta, então precisamos mexer um pouco no posicionamento Primeiro, vamos selecionar esses três elementos arrastando uma caixa por eles. E vou clicar com o botão direito do mouse e selecionar a seleção do grupo. Depois, com esses selecionados, vou para o canto superior direito e vou alinhá-los horizontal e verticalmente, apenas para que eu possa posicioná-los exatamente no meio da E então eu posso clicar com o botão direito do mouse nesse elemento mais uma vez no grupo para remover esse grupo. Em seguida, vamos mover manualmente esses elementos para o lugar, e eu vou selecionar ou vou começar com esses círculos aqui. E pelo que eu posso dizer, deveria ser algo assim, talvez, e isso se sobreporá aqui E eles estão, na verdade, usando um modo de mesclagem diferente. Então, quando eles se cruzam, eles mostram uma cor diferente Também posso fazer isso no Lottielab acessando o painel de propriedades e Esse é o modo de mistura que eu escolhi no Figma. E como você pode ver agora, quando esses elementos se sobrepõem, sim , a interseção basicamente terá uma O que mais? Esse elemento aqui. Sim, podemos movê-lo um pouco para cima, algo assim. O triângulo aqui, podemos movê-lo para essa posição. E então o triângulo maior aqui e o padrão quadriculado, vamos movê-los para provavelmente algo assim Novamente, não precisa ser absolutamente perfeito em pixels , porque sempre podemos mudar esse posicionamento. Tudo bem, agora que todos os elementos estão prontos, é hora de começar a animar, e faremos isso na próxima lição, onde abordaremos esses elementos decorativos . Te vejo lá. 5. Vamos animar: criar animações de formas: Nesta lição, começaremos a animar. Mas antes de fazermos qualquer coisa, eu quero que você pense como um diretor de cinema. Veja bem, um bom diretor conhece toda a história antes do início das filmagens É a mesma coisa aqui. Antes de animar qualquer coisa, pense em como cada elemento deve se mover e em que ordem Isso torna tudo muito mais fácil. Então, deixe-me mostrar como eu faria essa animação. Então, aqui está o plano. Eu gostaria de animar os dois círculos primeiro, talvez, tipo, uma animação de crescimento ou um slide in E então eu animava esse padrão quadriculado e o E então eu animaria esses pontos e esse triângulo, certo Então, essa será a sequência de introdução dos eventos. Só depois disso, eu animaria o texto real. Então esse é o plano. Vamos ver no que vai dar. Vamos começar com o círculo verde, selecioná-lo e, em seguida, adicionar animação e selecionar crescer. Vamos fazer com que cresça. A opacidade inicial a manterá em zero porque esse é o valor inicial, certo E a escala inicial é 0,5, o que faz com que a animação fique assim. Certo? Portanto, ele escala da metade do tamanho até o tamanho total. Mas eu quero que esse fator inicial seja um pouco menor. Então, vamos mudar a escala inicial para 0,8. Então, eu quero que ele anime de 80% de seu tamanho a 100% de seu tamanho Eu gostaria que essa animação durasse 1,2 segundo e vou mudar a atenuação para suave Agora, nossa animação é mais ou menos assim. Vamos fazer a mesma coisa com o outro círculo. Então selecione-o, clique, cresça, cresça na escala inicial, mude para 0,8. E, a propósito, você pode manter pressionada a tecla Shift e usar as teclas de seta para cima e para baixo. Você pode alterar essa escala. Duração, altere para 1,2, atenuação, mais uma vez, será suave Além disso, eu gostaria de mover essa animação do segundo círculo no início. Então, esses dois elementos são animados ao mesmo tempo desta forma. Em seguida, vamos selecionar o contêiner de linhas horizontais e o contêiner de linhas verticais e, na verdade, criar um grupo com eles. Então, no painel Camadas, podemos clicar com o botão direito do mouse na seleção de grupos. Estou fazendo isso porque quero aplicar essa animação aos dois elementos ao mesmo tempo. E, na verdade, vou renomear isso clicando duas vezes em apenas linhas Ah. Agora, para isso, vou usar uma animação diferente. Vou escolher um fade. Então, desapareça mais uma vez, 1,2 segundos. E mais uma vez, vou mover o indicador de reprodução para o início Então, esses elementos são animados ao mesmo tempo. A seguir, vamos animar esse grande triângulo. Para isso, vou escolher uma animação de slide. Eu quero que isso venha de baixo, certo? Então deslize. Eu vou escolher a direção aqui. Então, do fundo. E isso é o que parece. O slide B determina a distância que ele percorre, certo? Portanto, atualmente está definido em 46 86, o que é um número muito grande, e a animação é mais ou menos assim . Deixe-me realmente diminuir o zoom. Certo? Eu simplesmente viajo demais. Então, em vez disso, vamos selecionar a animação em si e alterar seu valor para 200, certo? Então, eu só quero uma animação muito sutil. Eu queria subir um pouquinho e ter aquela suavização suave para interromper a animação Em termos de duração, 1,2 segundos, e vou mudar isso para suavizar. E mais uma vez, vamos mover essa animação para o início. Então, todos esses elementos agora estão sendo animados ao mesmo tempo, e isso é o que temos até agora Ok, então isso parece muito bom. Em seguida, temos dois outros elementos necessários para animar o contêiner pontilhado e Vamos fazer algo diferente. Vamos fazer com que eles sejam animados após os outros elementos do plano de fundo Então, no nosso caso, a animação começaria aqui, e vamos fazer com que esse elemento deslize da esquerda para a direita, e vamos fazer com que o triângulo talvez gire da direita para a esquerda Então, quando analisamos o panorama geral, esses dois elementos basicamente farão isso. Não sei se você viu isso. Eles vão basicamente deslizar de lados opostos. Então, com o cursor colocado na posição correta, vamos selecionar os pontos, vamos adicionar um slide E vamos definir as propriedades em. A direção está correta, deslizando da esquerda para a direita e deslizando para frente, vou usar o mesmo valor de 200 que usei aqui no triângulo porque quero que essa animação seja consistente Vou ter a mesma duração de 1,2 segundo e a mesma suavização suave Agora, ao mesmo tempo em que essa animação começa, vamos também trazer o triângulo, certo? Para isso, vamos usar também um slide. Deslize para dentro, mas a direção deve ser da direita para a esquerda. Mesmo valor de 200, 1,2 de duração, mesma atenuação da suavidade Tudo bem. Então, agora vamos voltar e ver como é a animação. Nada mal. Então, estamos animando esses elementos iniciais primeiro. E então, quando a animação estiver concluída, começamos a animar os pontos e o pequeno E isso é o que temos até agora. Legal. A próxima etapa é animar os elementos do texto, e isso será abordado na próxima lição 6. Vamos animar: crie animações de texto: Nesta lição, estamos animando os elementos do texto. Essas são as partes mais importantes do slide, por isso queremos garantir que elas tenham a aparência e toque corretos. Vamos fazer isso. Foi aqui que paramos. E eu quero começar minha animação de texto fazendo com que esse elemento central apareça primeiro, ok? Então, vamos selecioná-lo. E vamos usar o mesmo efeito de desfoque e slide que mostrei anteriormente, porque acho que isso funcionaria muito bem Vamos definir a direção para a parte inferior aqui. Deixe-me realmente ampliar. Deslize para ver, vou usar o mesmo valor de 200 pixels. A duração será de 1,2, e eu vou usar a mesma atenuação da suavidade Além disso, a animação se aplicará a cada personagem. Então é isso que temos até agora. Então, isso é legal. Mas quando exatamente acionamos essa animação? É depois desse término? Tipo, essa animação funcionaria? Acho que se fizermos assim, teremos que esperar muito tempo até que o texto real apareça. Então, vamos fazer com que o texto inicial, o 03, seja animado ao mesmo tempo que os pontos no pequeno E para isso, posso simplesmente selecionar o elemento de texto daqui e movê-lo para que corresponda aos elementos que eu quero. Então, ao fazer isso, o texto começará a ser animado ao mesmo tempo que os pontos no pequeno Eu gosto disso. Agora, e o resto do texto? Bem, eu gostaria que isso começasse a animar depois que o grande número terminasse sua E, novamente, vou aproveitar a posição desses elementos de texto porque o texto menor está posicionado na parte superior e o texto maior está posicionado na parte inferior, eu gostaria que eles deslizassem para dentro O texto superior deslizará pela parte superior e o texto inferior deslizará pela parte inferior. Está bem? E vamos fazer com que essa animação aconteça ao mesmo tempo. Então, temos esse tipo de slide em vigor simultaneamente. Selecione o elemento de texto superior e eu vou selecionar um slide de camada. Vou selecionar a opção superior aqui, deslize em 200, duração 1,2, atenuação suave Então, atualmente se parece com isso. Ok, vamos posicionar nosso indicador de reprodução. Nesta marca, aqui, escolheremos o segundo texto e também aplicaremos um slide de camada a ele. Desta vez, ele virá de baixo, deslizará em 200, 1,2 de duração e a mesma suavização da suavidade Então, agora a animação é mais ou menos assim. E deixe-me realmente tornar isso um pouco maior. É isso mesmo. Então essa é a sequência de eventos até agora. Nos primeiros 1,2 segundos, animamos o círculo, o triângulo, as linhas No próximo trecho, animamos o texto central os pontos e o pequeno E, finalmente, animamos os outros dois elementos de texto, um vindo de baixo, de cima, e o outro vindo de baixo E até agora, essa animação dura cerca de 3,7 segundos, e você decide por quanto tempo deseja criar um desses slides animados Pessoalmente, prefiro torná-los um pouco mais longos para poder cortá-los posteriormente na edição, certo? Então, para este exemplo, vamos fazer essa sequência inteira cerca de 10 segundos de duração ou, na verdade, com cerca de 8 segundos de duração. Então, vou selecionar a prancheta e vou alterar sua duração para 8 segundos desse jeito Ok. Agora, o que exatamente estamos fazendo pelo resto de quatro segundos e mais ou menos Bem, é aqui que podemos adicionar algumas animações mais lentas, quase como uma animação residual Podemos manter os elementos de fundo se movendo em um ritmo mais lento apenas para manter sensação de movimento E faremos isso na próxima lição. 7. Vamos animar: crie animações residuais: Nesta lição, vamos adicionar algumas animações mais lentas às formas do plano de fundo para manter as coisas em movimento até o final Em seguida, exportarei o slide finalizado e mostrarei como usá-lo na resolução Vinci, incluindo como fazer a transição dele para um vídeo real Vamos embora. Agora, vamos começar com esse círculo. E eu vou parar o indicador de reprodução aqui mesmo em 1,2 quando esse círculo terminar sua animação Agora, para criar uma animação mais longa, vamos usar algo chamado quadros-chave personalizados E ao selecionar o elemento, você pode ativar essa opção no painel direito. Agora, com os elementos selecionados, posso passar o mouse sobre a linha do tempo e perceber que tenho sinais de adição E quando eu clico neste sinal de mais, deixe-me realmente ampliar aqui. Eu posso escolher o tipo de quadro-chave que eu quero. Para esse círculo, eu quero mudar sua posição, certo? Eu queria ir daqui até aqui. Então, posição vertical. Então, vou escolher a posição. Agora, isso cria um elemento Rumbus aqui, que é a indicação visual de um quadro-chave Em seguida, vou mover meu indicador de reprodução até o final, na marca de oito segundos, e vou criar outro quadro-chave Mas desta vez, a posição e eu podemos alterá-la nesta caixa aqui, quero que seja 200 pixels a menos, então posso dizer -200 E quando eu fizer isso, observe o círculo, o círculo vai se mover para cima. Agora, se eu reproduzir a animação desde o início, é isso que temos. Observe como o círculo se move lentamente até a posição que eu lhe dei. É isso que uma animação de quadro-chave faz. Ele anima um elemento entre o quadro-chave um e o quadro-chave No meu caso, o quadro-chave um foi a posição em que o círculo pousou, por assim dizer, depois de terminar sua animação inicial E o quadro-chave dois estava na mesma posição, mas 200 pixels a mais no eixo Y. Agora, já que movemos o círculo para cima, vamos criar um efeito oposto e mover o outro círculo para baixo. Então, com isso selecionado, vou mover meu indicador de reprodução aqui mais uma vez e criar um quadro-chave para Então, eu estou começando nesta posição, mas eu queria terminar em uma posição Y que é 200 pixels mais baixa. Então eu vou dizer mais 200. Então, agora a animação é mais ou menos assim. Veja, agora os dois círculos estão se movendo lentamente no eixo vertical. E esse é exatamente o efeito que eu quero. Agora, os outros dois elementos que eu quero animar em segundo plano são o triângulo grande e o triângulo menor Para o triângulo grande, quero fazê-lo deslizar para baixo, então vou definir meu indicador de reprodução aqui em 1:20, selecionar o triângulo e, em seguida, clicar em mais aqui e também selecionar a mais aqui e também E então, mais uma vez, vou mover meu indicador de reprodução aqui Certifique-se de seguir a mesma linha para minha animação de posição. Clique e, em seguida, adicionarei 200 pixels à posição. Então, agora o triângulo se move lentamente para baixo. E para o pequeno triângulo, vamos ver, o pequeno triângulo termina a animação aqui. Então, vou posicionar meu indicador de reprodução em 2,4, ou posso colocá-lo em 2,5 apenas para ficar alinhado com os outros, e posso selecionar o pequeno triângulo. Clique em mais. E desta vez, vamos animar a rotação. Vamos mover o cursor até o final mais uma vez, adicionar outro quadro-chave e, desta vez, o valor da rotação será 180. E então, se jogarmos desde o início, vai ficar mais ou menos assim. E é isso. É assim que você pode criar um slide animado no Lottielab Agora, vamos exportar isso e, em seguida, mostrarei como usá-lo em um software de edição de vídeo real. Vamos clicar no botão Exportar. Selecione o vídeo. Este é um slide de quatro K, e eu quero usá-lo em um vídeo de quatro K, então vou selecionar quatro K. Vou selecionar 60 FPS E se você não sabe o que significa FPS , essa é a taxa de quadros Essencialmente, quanto maior a taxa de quadros, mais suave é a animação fundo, vou manter o normal e, em seguida, vou clicar em Exportar. Então, isso levará alguns segundos enquanto o vídeo será renderizado. E é recomendável que você mantenha essa guia e se concentre para que ela seja renderizada mais rapidamente. Ok, está feito. Podemos ver uma prévia dela aqui, e ela continua em loop automático. Então, vamos baixá-lo. E vamos assistir. Este é um arquivo MP 4, e você pode realmente vê-lo. É um arquivo de quatro MP 4,3 megabytes. Então, vamos abrir isso. E agora está sendo reproduzido dentro de um player de vídeo. Deixe-me realmente fazer essa tela inteira e dar uma olhada. Animação suave muito boa, que será reproduzida por 7 segundos ou 8 segundos da duração total. Tudo bem. Vamos sair dessa. E vamos entrar na resolução da Vinci e mostrar como usá-la como um slide de introdução ao vídeo Ok, então estamos dentro do Venture Resolve, onde eu carrego um MP quatro. Opa, essa é uma bela miniatura de, você sabe, uma filmagem real ao vivo que eu criei para esta aula que eu criei para esta E então temos o slide animado de quatro K. Agora, vou clicar com o botão direito do mouse e criar uma nova linha do tempo Vou clicar em Criar e, em seguida, vou trazer o slide e, em seguida, vou trazer meu vídeo real. Então, vou silenciar essa faixa de áudio porque realmente não nos importamos com isso Só estou realmente interessado em saber como será o resultado final. Então, deixe-me, na verdade, ampliar um pouco aqui. E deixe-me voltar ao início, e eu vou mostrar os efeitos. Vou adicionar uma transição de vídeo aqui, mergulhar para dissolver a cor e adicioná-la logo no início E então talvez eu reduza esse slide para cerca de, sei lá, 6 segundos, algo assim Tudo o que se encaixa no meu projeto atual. Deixe-me deletar essa lacuna, e isso também adiciona um efeito de dissolução de desfoque, e o resultado será algo assim Está um pouco lento porque eu também estou gravando enquanto estou fazendo isso E esse vídeo que está sendo reproduzido é de quatro k 60, então é bastante intenso na CPU, mas é o que parece, essencialmente. Então, passamos do slide de introdução animado para uma parte da cabeça falante como esta E é assim que você pode criar um slide animado para seus vídeos no Lottielab Nos vemos na próxima lição para a conclusão e as próximas etapas. 8. Conclusão e próximos passos: E isso é um embrulho. Você chegou ao final da aula, e eu só quero dizer parabéns. Você passou de um arquivo em branco para um slide totalmente animado que pode ser usado em seus vídeos. Isso é muito legal. Nesta aula, você configurou o Lottielab, aprendeu como a ferramenta funciona, criou todas as animações de formas, animou os elementos de texto e exportou um slide pronto Acho que esse é um conjunto sólido de habilidades que agora você pode aplicar a qualquer projeto de animação. Agora, aqui estão algumas coisas que eu encorajaria você a fazer a seguir. Primeiro, pegue o slide que construímos e torne-o seu. Você tem acesso gratuito ao arquivo Figma, então altere as cores, troque as fontes e atualize o texto com as suas O modelo que forneci é apenas um ponto de partida. O objetivo é que você acabe com algo que se adapte ao seu estilo. E se meu modelo não funcionar para você, vá em frente e crie o seu próprio do zero. Segundo, se quiser, vá em frente e compartilhe suas animações na seção de projetos de classe Não precisa ser perfeito. Você pode enviar uma captura de tela, uma gravação de tela ou até mesmo o link do Lottielab para Acho que compartilhar seu progresso ajuda você e também ajuda outros alunos a ver o que é possível. Eu também adoraria ver o que você criou. E se você gosta dessa aula , significaria muito para mim se você pudesse deixar uma avaliação rápida. Pode ser apenas uma frase ou duas sobre sua experiência. Essas avaliações ajudam outros alunos a encontrar a turma e também me ajudam a entender o que está funcionando e o que eu preciso melhorar. Portanto, se isso foi útil para você, considere deixar um comentário. Eu li e aprecio muito cada um deles. Agora, no Skillshare, eu também ensino sobre Figma, framer Então, se você estiver interessado nesses tópicos, acesse meu perfil e confira minhas outras aulas. Há algo disponível para cada nível, se você quiser melhorar no Figma, aprender mais sobre design ou explorar outras ferramentas Também administro um canal no YouTube onde publico sobre Figma, Framer e web design em geral, mas geralmente posto vídeos mais curtos Então, se você estiver interessado, você pode encontrar o link no meu perfil. Tudo bem, isso é tudo para mim. Muito obrigado por fazer este curso. Agora faça algumas animações e use-as em seus vídeos, e nos vemos no próximo Tchau por enquanto.