Cómo crear diapositivas animadas para tus videos

1. ¡Hola!: Todos, mi nombre es Adi Purdila, y si estás haciendo videos y quieres que se vean más profesionales, esta clase es para Te voy a mostrar cómo crear diapositivas animadas como esta, que puedes usar directamente en tus videos. Construiremos esto desde cero en Lodi Lab, que es una herramienta de animación basada en navegador muy fácil de usar Comenzaremos aprendiendo cómo funciona la herramienta y luego construiremos una diapositiva de introducción de lección completamente animada con animaciones de texto, moviendo formas de fondo y tiempo adecuado en todos los elementos Una vez terminada la diapositiva, también te mostraré cómo exportarla y soltarla en un editor de video real para que veas exactamente cómo encajaría en tu flujo de trabajo. Nos estamos reuniendo, mi nombre es Adi. Soy diseñadora de UIUX y educadora de diseño. He estado creando videos tutoriales y cursos desde 2010, y honestamente, durante mucho tiempo, quería agregar más animación a mis propios videos, pero las herramientas siempre se sintieron demasiado complejas. Cuando encontré a Lottielab, eso cambió, y es exactamente por eso que quería hacer Ahora bien, aquí hay algunas razones por las que esta clase podría ser para ti. Primero, no necesitas ninguna experiencia de animación. Te guiaré a través de todo paso a paso, y si nunca antes has tocado una herramienta de animación, está completamente bien. Partimos de cero. Segundo, lo que aprendes aquí va más allá de crear diapositivas. Una vez que entiendas cómo funcionan las líneas de tiempo de animación y cómo pensar en el movimiento, puedes aplicarlo a cualquier proyecto de animación, no solo a las diapositivas de video Y tercero, al final de esta clase, tendrás una diapositiva animada realmente terminada que podrás usar en tus videos de inmediato. Esta clase es para creadores de contenido, educadores y cualquier persona que haga videos. No se necesita experiencia en animación. Sin embargo, recomendaría tener algunos conocimientos básicos de Figma porque lo usaremos para llevar el diseño a Lottielab Bien, estoy emocionada por esto. Espero que tú también, así que entremos en ello. En la siguiente lección, te daré algunos detalles más sobre el proyecto de la clase. 2. El proyecto de clase: En esta lección, quiero hablar sobre el proyecto de clase y el archivo de inicio que he reunido. El proyecto de clase es sencillo. Necesitas crear tu propia diapositiva animada usando Lottielab No tiene que coincidir con lo que construimos en clase, así que siéntete libre de cambiar los colores, los textos, las formas, lo que quieras. Hazlo tuyo. Y claro, está perfectamente bien crear lo mismo que yo. Es tu elección. Ahora, para ayudarte a empezar, he preparado un archivo Figma con todos los elementos de diseño que usaremos en la clase, y puedes encontrar el enlace de descarga en la sección de proyectos y recursos El archivo incluye todas las formas, las capas de texto y el diseño general con el que trabajaremos. Todo ya está organizado, por lo que puedes enfocarte en la parte de animación en lugar de construir el diseño desde cero. Una vez que hayas terminado con tu animación, me encantaría que la publicaras en la sección de proyectos. Puedes subir una captura de pantalla, una grabación de pantalla o incluso un enlace. Publicar tu proyecto no es obligatorio, pero realmente creo que merece la pena hacerlo. Te ayuda a rastrear tu propio progreso. Te da algo a lo que mirar atrás, y también ayuda a tus compañeros a ver diferentes enfoques e inspirarse. Entonces, cuando hayas terminado, por favor compártelo. Bien, entremos a la clase. 3. Primeros pasos con Lottielab: En esta lección, estamos empezando con Lottielab. Te mostraré dónde registrarte, te guiaré por la interfaz, y terminaremos construyendo una animación simple solo para ver cómo funciona todo. Pero antes de meternos en todo eso, déjame responder una pregunta que creo que muchos de ustedes estarán haciendo. ¿Por qué debería usar Lottielab sobre algo como Adobe After Effects, que es el estándar de la industria para el diseño Bueno, la razón es sencilla. Lottielab está basado en navegador. Es mucho más fácil de aprender, y está construido para exactamente este tipo de animación. Y After Effects es muy capaz, pero también es muy complicado. Es más caro y necesita mucha potencia informática para funcionar sin problemas. Ahora, déjame comenzar por darte algunas alternativas a Lottielab Jitter es uno de ellos, y esto es en realidad lo que usé antes de Lottielab Y luego también está Rive que hace el diseño de movimiento muy, muy bien Rive, que yo sepa, es un poco más complejo porque puedes crear, como, un montón de cosas con él como juegos, interfaces realmente geniales y todo tipo de activos animados Bueno, Jitter es más simple, y es una manera muy fácil crear diseño de movimiento para la web La razón por la que ya no uso Jitter es porque se puso muy caro Tenían servicios o precios muy asequibles en algún momento, pero recientemente cambiaron su estructura de precios. Entonces eso me impulsó a buscar en otra parte. Y terminé yendo por Lottielab. Ahora, Lottielab se puede utilizar para crear muchas cosas. No son solo diapositivas de video, ¿verdad? Lottielab es ideal para todo tipo de animaciones ligeras, cosas como, ya sabes, micro interacciones de interfaz de usuario, animaciones de logotipos, pantallas de incorporación de aplicaciones, incluso banners de marketing, animadas, publicaciones en redes sociales, Puedes crear muchas cosas con Lottielab. Entonces déjame darte un rápido recorrido por la aplicación. En primer lugar, puedes ir a ladilab.com, y ahí puedes crear una cuenta Irías a registrarte o iniciar sesión, y puedes registrarte con tu cuenta de Google o con un correo electrónico. Voy a usar mi cuenta de Google para eso. Una vez que hayas iniciado sesión, te llevarán a tu panel de control donde verás tus archivos recientes. También tendrás acceso a ciertas plantillas. Y aquí tienes una rápida muestra del tipo de animaciones que puedes crear con Lottielab las animaciones aquí no son muy suaves porque también estoy grabando este video, esta pantalla, así que mi CPU está un poco Pero sí, puedes crear todo tipo de animaciones. Estos son bastante chulos. Puedes volver a casa y organizar tu trabajo en proyectos o simplemente puedes crear archivos independientes. Así que hagamos clic en Nuevo archivo en la esquina superior derecha aquí y creemos un nuevo archivo de animación. Aquí es donde estaremos creando todas nuestras animaciones. Y hay cuatro secciones principales de las que debemos hablar. Tenemos este panel a la izquierda, que ofrece acceso a diversas herramientas, las capas, diversas formas e iconos podemos agregar la herramienta de texto y también la posibilidad de agregar imágenes. Después en el medio, tenemos el lienzo donde agregamos mesas Las mesas de trabajo son como páginas en tu proyecto, y cada animación está contenida dentro de una mesa de En el lado derecho, tenemos un panel de propiedades, y también es el lugar donde podemos exportar archivos. Y luego en la parte inferior, abarcando todo el ancho está nuestra línea de tiempo de animación, y te mostraré cómo funciona esto en solo un poquito En cualquier punto, se puede controlar el tamaño de la mesa cambiando su ancho y su altura a partir de estas cajas Y también se puede cambiar la duración, la duración final de la animación cambiando este valor. También aquí, podemos cambiar el fondo de nuestra mesa de trabajo. Sólo vamos con el blanco por ahora. Ahora, vamos a crear una animación muy simple para que entiendas cómo funciona la herramienta. Vamos a animar un elemento de texto, ¿verdad? Y porque en esta clase, estamos haciendo una diapositiva animada, ese es el caso de uso más común para esta herramienta. Entonces voy a presionar T para que aparezca la herramienta de texto, haga clic, y luego voy a escribir mi texto. Empezando con Lottielab, y solo voy a posicionar esto en el mismo centro de mi mesa de trabajo Ahora, con el texto seleccionado, el panel de propiedades me permite cambiar la familia de fuentes, peso, tamaño, altura de línea, espaciado entre letras, alineación, color. Así puedo personalizar texto y otros elementos muy fácilmente. Y arriba, tenemos un botón que dice agregar animación. Cuando hacemos clic en eso, tenemos acceso a ciertos presets. Y cuando pongo el cursor sobre un determinado preset, puedo ver la animación en tiempo real en mi mesa Aquí hay un desvanecimiento, aquí está la altura del espectáculo. Aquí hay una diapositiva, y algunas otras. También tenemos transformaciones de capa, ¿verdad? Estas son animaciones o presets que podemos aplicar a cualquier tipo de capa, no solo texto Y tenemos algunos otros aquí. Puedo mantener el cursor del ratón sobre ellos para previsualizar. Personalmente, elegiré desenfoque y deslizamiento. Para esta demo. Entonces voy a hacer clic en eso, y tengo algunas opciones adicionales. Puedo elegir la dirección en la que entra el texto. Entonces, si hago clic aquí, las letras comenzarán a animarse desde la esquina superior izquierda Pero sólo me voy a quedar con el valor por defecto. Puedo cambiar la duración de la animación y puedo cambiar la flexibilización Vamos con suave porque creo que eso funciona un poco mejor. Y si me desplazo hacia abajo, puedo seleccionar aplicar esta animación sobre una base de carácter, así animar cada carácter, o puedo animar la palabra, o puedo animar la línea si tengo un texto multilínea Seleccionemos palabra. Y también, voy a elegir el alisado aquí para suavizar en lugar de lineal. Bien, genial. Ahora, una vez que aplicas una animación a un elemento, se cambia la línea de tiempo de la animación. Ahora tenemos una entrada para el elemento de texto que usamos, y luego la animación que le aplicamos. Y si hacemos click en este elemento aquí, sí, podemos cambiar las propiedades de la animación tal como te mostré anteriormente. Ahora, si selecciono mi mesa de trabajo, puedo cambiar la duración de toda la animación que ocurre dentro de esa mesa de trabajo Entonces, para esta demostración, pongamos eso a 4 segundos. Ahora si alejamos el zoom y miramos la línea de tiempo de la animación, podemos ver que el cursor va 0-4 segundos, que es exactamente la duración de la animación que establecemos anteriormente Y puedo agarrar fácilmente el cursor y moverlo a donde quiera. Y también puedo dar click en esta área para mover el cursor. Y si quiero reproducir la animación, solo presiono la barra espaciadora, y va a reproducirse en un bucle. Así. Ahora, hasta ahora, animamos este texto en, ¿verdad? Pero, ¿y si necesitamos animarlo? Entonces eso significa que hicimos aparecer el texto. Ahora queremos que desaparezca después de cierto periodo de tiempo. Podemos hacerlo seleccionando el elemento y agregando otra animación. Ahora, esa animación se agregará a donde esté ubicado actualmente el cursor. ¿Bien? Entonces si lo coloco desde el principio y selecciono el elemento, y agrego una animación, y digamos que quiero agregar la misma animación, sí, eso va a agregar la segunda diapositiva borrosa al mismo elemento, comenzando de nuevo en la posición cero Pero ahora tengo dos animaciones que están compitiendo entre sí en un mismo elemento. Entonces, si presiono play, puedo ver la animación inicial, pero no la animación final, por así decirlo. Entonces hagamos un par de cosas aquí. En primer lugar, seleccionemos la segunda animación que agregamos. Y en el panel Propiedades, vamos a seleccionar hacia fuera, y podemos ver una vista previa aquí. La flexibilización, quiero que esto sea suave. Y también quiero animar por palabra. Y también, me gustaría que esta animación sucediera en un momento posterior. Entonces lo que puedo hacer es simplemente hacer clic y arrastrar en la línea de tiempo en una posición diferente. ¿Bien? Entonces, supongamos que esta primera animación irá hasta 1.5 segundos, y puedo fácilmente redimensionarla así Entonces puedo esperar un segundo, y puedo hacer que la segunda animación comience en aproximadamente 2.5 y se ejecute hasta la marca de cuatro segundos, que es la duración total de mi animación. Entonces ahora si presiono play, el texto entra y el texto se apaga. Muy, muy fácil. Así que esencialmente estamos agregando dos animaciones al mismo elemento. Uno de ellos anima el texto en. Es decir, hace que aparezca 0-1 0.5 segundos. Entonces esperamos aproximadamente un segundo, y luego comienza la segunda animación, lo que hace que el texto desaparezca aproximadamente en el mismo periodo de tiempo, 1.5 segundos. Y si quieres ser más preciso con estos tiempos, simplemente puedes seleccionar el elemento padre aquí y puedes establecer la duración en 1.5, y luego puedes configurarlo hasta el final justo ahí mismo, y puedes establecer esto en 1.5 también Y ahora estos dos son exactamente iguales. Fresco. Entonces, nuestra animación ya está completa. Vamos a exportarlo, y quiero repasar rápidamente esto. Para eso, irías a la esquina superior derecha, presionarías Exportar, y esto te dará una vista previa de tu animación y te permitirá elegir un tipo de archivo. Estos son los tipos de archivos que puedes elegir. Para esta lección, debido a que estamos haciendo una diapositiva animada para un video, vamos a elegir el formato de video. Y luego podemos elegir el tamaño del video, bien, la resolución. Cuántas veces queríamos hacer un bucle. Realmente no nos importa esto, y luego podemos elegir la velocidad de fotogramas de aquí 30 o 60 FPS. Y luego fondo, ¿ usamos el fondo de la mesa de trabajo, o lo hacemos transparente Y luego le pegas a Exportar. Esto te va a llevar a otra pantalla, donde podrás ver una vista previa con tu configuración, y luego seleccionarías Descargar. Y una vez que se haya descargado, como se puede ver se exporta como un MP cuatro y se puede ver el resultado aquí mismo. Ahora, solo una breve mención, si estás usando la versión gratuita de Lottielab, encontrarás algunas de las opciones aquí que serán inaccesibles Tengo la versión pro, así que puedo exportar a cualquier resolución de esta lista. Y si tienes curiosidad, la versión pro es de 12 dólares al mes si pagas anualmente y son 18 dólares al mes si pagas Pero esencialmente, desbloqueas todo. Puedes tener tantos archivos como quieras. Puedes exportar sin marca de agua, y puedes exportar con la mayor calidad de video posible Y también tienes algunos beneficios adicionales. Bien, así que esto fue solo una descripción rápida de la herramienta y cómo funciona. Entonces, a continuación, comencemos a trabajar en una diapositiva animada mucho más compleja, bien, algo que realmente usarías en uno de tus proyectos de video. Entonces te veré en la siguiente lección. 4. Animemos: trabajo de preparación: En esta lección, estamos empezando a construir la diapositiva animada que te mostré al inicio de la clase. Lo configuraremos en su expediente. Obtendremos el tamaño y los colores correctos, y traeremos todos los elementos deslizantes de Figma. Así que vamos a meternos en ello. Este es el archivo Figma que puedes descargar de forma gratuita siguiendo el enlace en la sección de proyectos Es un diseño muy simple que se puede utilizar como diapositiva de introducción a la lección para digamos una clase Skillshare o un curso de YouTube, sea lo que sea Este texto puede ser el título de la clase. Este es el número de la lección, y este es el título de la lección. Aparte de estos, también tenemos algunos elementos decorativos que también me gustaría animar dentro de Lottielab Entonces, lo primero que tenemos que hacer es traer este archivo a Lottielab Ahora, podemos recrear cada elemento individualmente, o bien podemos usar un plug in que simplemente copiará todo y lo podremos pegar en Lottielab Pero lo primero es lo primero, tenemos que coincidir con el fondo y el tamaño de la diapositiva. ¿Bien? Entonces como pueden ver, tengo una diapositiva de cuatro K aquí, 38 40 por 21 60 porque quiero exportar esto a las cuatro K. Además, ya que estoy aquí, voy a copiar este color de relleno. Y voy a saltar de nuevo a Lottielab. Aquí, tengo un nuevo archivo, y permítanme hacer esto un poco más grande. Cambia uno para que el Zoom se ajuste. Y para la mesa de trabajo, voy a establecer su tamaño en el mismo tamaño de cuatro cajas Entonces 38 40 por 21 60. Vamos a establecer la duración. Por ahora, vamos a configurarlo a 10 segundos, aunque siempre podemos cambiar eso más adelante y vamos a establecer el tamaño de fondo al color que copiamos anteriormente, FDF tres E nueve Entonces presionemos Mayús uno, para que podamos ver la mesa de trabajo una vez más, y volveré a Figma, y presionaré Control o Comando K si estás en un MAC para que aparezca el menú rápido Y voy a buscar a Lodi Lab. Animación de figma a dama. Y déjame simplemente acercar para que lo veas mejor. Este es un plugin. Puedes hacer click en él, y luego el plugin te va a indicar que selecciones diseños para copiar o exportar. Entonces voy a dar click en uno de los elementos dentro de Figma, y voy a presionar Comando A. Eso va a seleccionar todo También puedes verlo en el panel de capas aquí. Ahora, el plug in me muestra todas las capas seleccionadas. Simplemente puedo hacer clic en copiar, y luego puedo volver a Lottielab, seleccionar mi mesa de trabajo y presionar Control o Comando V. Eso va a pegar Observe que esta acción también trajo todos los nombres de agrupación y capa de Figma. Ahora bien, no los pegó exactamente en la posición correcta, así que necesitamos juguetear un poco con el posicionamiento En primer lugar, seleccionemos estos tres elementos arrastrando una caja a través de ellos. Y voy a hacer click derecho y seleccionar selección de grupo. Después con estos seleccionados, voy a ir a la esquina superior derecha y voy a alinear horizontal y verticalmente, solo para poder colocarlos exactamente en el centro de mi página. Y luego puedo hacer clic derecho sobre este elemento una vez más en grupo para eliminar ese grupo. A continuación, movamos manualmente estos elementos a su lugar, y voy a seleccionar o voy a comenzar con estos círculos aquí. Y por lo que puedo decir, el debería ser algo así, tal vez, y estos se superpondrán aquí. Y estos en realidad están usando un modo de mezcla diferente. Entonces, cuando se cruzan, muestran un color diferente También puedo hacer eso en Lottielab yendo en el panel de propiedades y seleccionando Ese es el modo blend que elegí en Figma. Y como puedes ver ahora, cuando estos elementos se superpongan, sí, habrá la intersección básicamente será coloreada de manera diferente ¿Qué más? Este elemento aquí. Sí, podemos moverlo un poco hacia arriba, algo así. El triángulo aquí, podemos moverlo a aproximadamente esta posición. Y luego el triángulo más grande aquí y el patrón a cuadros, los moveremos a probablemente algo así Nuevamente, no tiene que ser absolutamente pixel perfect porque siempre podemos cambiar este posicionamiento. Bien, así que ahora que todos los elementos están adentro, es el momento de comenzar a animar, y lo haremos en la siguiente lección donde abordaremos estos elementos decorativos . Te veré ahí. 5. Animemos: crea animaciones de formas: En esta lección, comenzamos a animar. Pero antes de que hagamos algo, quiero que pienses como un director de cine. Verás, un buen director conoce toda la historia antes de que comience la filmación. Aquí es lo mismo. Antes de animar nada, piensa en cómo debe moverse cada elemento y en qué orden Esto hace que todo sea mucho más fácil. Entonces déjame mostrarte cómo haría esta animación. Entonces aquí está el plan. Me gustaría animar primero los dos círculos, tal vez, como, una animación de crecimiento o una diapositiva en Y entonces animaría este patrón a cuadros y el triángulo Y entonces yo animaría estos puntos y este triángulo, ¿verdad? Entonces esta será la secuencia de introducción de eventos. Sólo después de eso, animaría el texto real. Entonces este es el plan. Veamos cómo va. Comencemos con el círculo verde, selecciónelo y luego agreguemos animación, y seleccionaremos crecer. Vamos a hacer que crezca. La opacidad inicial la mantendrá en cero porque ese es el valor inicial, ¿verdad? Y la escala inicial es 0.5, lo que hace que la animación se vea así. ¿Correcto? Por lo que escala de la mitad de su tamaño a su tamaño completo. Pero quiero que este factor inicial sea un poco más pequeño. Entonces cambiemos la escala inicial a 0.8. Así que quiero que anime desde el 80% de su tamaño hasta el 100% de su tamaño Me gustaría que esta animación fuera 1.2 segundos, y voy a cambiar la flexibilización a suave Entonces ahora, nuestra animación se ve algo así. Hagamos lo mismo por el otro círculo. Así que selecciónala, golpea, crece, crece en escala inicial, cámbiala a 0.8. Y por cierto, puedes mantener presionado Mayús y usando las teclas de flecha arriba y abajo. Se puede cambiar esa escala. Duración, cambiarlo a 1.2, flexibilizando, una vez más, irá sin problemas Y también, me gustaría mover esta animación de segundo círculo al inicio. Entonces estos dos elementos animan al mismo tiempo así. A continuación, seleccionemos el contenedor de líneas horizontales y el contenedor de líneas verticales, y creemos realmente un grupo con esos. Entonces en el panel Capas, podemos hacer clic derecho en la selección de grupo. Estoy haciendo esto porque quiero aplicar esta animación a ambos elementos al mismo tiempo. Y en realidad voy a renombrar esto haciendo doble clic en solo líneas. Oh. Ahora, para esto, voy a usar una animación diferente. Voy a elegir un fade. Así que se desvanecen una vez más, 1.2 segundos. Y una vez más, voy a mover el cabezal de reproducción hasta el comienzo mismo Por lo que estos elementos se están animando al mismo tiempo. A continuación, animemos este gran triángulo. Para ello, voy a elegir una animación de diapositivas. Quiero que esto entre desde abajo, ¿verdad? Así que deslice. Voy a elegir la dirección aquí. Entonces desde abajo. Y así es como se ve. La diapositiva B determina la distancia que recorre, ¿verdad? Por lo que actualmente se establece en 46 86, que es un número muy grande, y la animación se ve algo así. Déjame realmente alejar el zoom. ¿Correcto? Yo sólo viajo demasiado. Entonces, en cambio, seleccionemos la animación en sí y cambiemos su valor a 200, ¿verdad? Así que solo quiero una animación muy sutil. Quería subir un poquito y tener esa suave flexibilización para detener la animación En cuanto a duración, 1.2 segundos, y voy a cambiar esto para suavizar. Y una vez más, vamos a mover esta animación al comienzo mismo. Entonces todos estos elementos se están animando ahora al mismo tiempo, y esto es lo que tenemos hasta ahora Bien, entonces eso se ve bastante bien. A continuación, tenemos otros dos elementos que necesitamos para animar el contenedor punteado y este triángulo Hagamos algo diferente. Hagamos que se animen después de los otros elementos de fondo Entonces en nuestro caso, la animación comenzaría aquí mismo, y hagamos que este elemento se deslice de izquierda a derecha, y hagamos que el triángulo como tal vez rote de derecha a izquierda. Entonces, cuando miramos el panorama general, estos dos elementos básicamente harán esto. No sé si viste eso. Básicamente van a deslizarse por lados opuestos. Entonces con nuestro cursor puesto en la posición correcta, seleccionemos los puntos, agreguemos una diapositiva. Y vamos a establecer las propiedades en. La dirección es correcta, deslizándose de izquierda a derecha, y deslizarse por, voy a usar el mismo valor de 200 que usé aquí en el triángulo porque quiero que esta animación sea consistente. Voy a tener la misma duración de 1.2 segundos y la misma flexibilización suave Ahora, al mismo tiempo que inicia esta animación, vamos a traer también el triángulo, ¿verdad? Para esto, usemos también una diapositiva. Deslízate hacia adentro, pero la dirección debe ser de derecha a izquierda. Mismo valor de 200, 1.2 duración, misma flexibilización de suave Todo bien. Entonces ahora volvamos y veamos cómo se ve la animación. No está mal. Entonces estamos animando estos elementos iniciales primero. Y luego una vez que se completa esa animación, comenzamos a animar los puntos y el pequeño triángulo Y esto es lo que tenemos hasta el momento. Fresco. El siguiente paso es animar los elementos de texto, y eso viene en la siguiente lección 6. Animemos: crea las animaciones de texto: En esta lección, estamos animando los elementos de texto. Estas son las partes más importantes de la diapositiva, así que queremos asegurarnos de que se vean y se sientan bien. Vamos a hacerlo. Aquí es donde lo dejamos. Y quiero comenzar mi animación de texto haciendo que primero aparezca este elemento central, ¿de acuerdo? Así que vamos a seleccionarlo. Y usemos el mismo efecto de desenfoque y diapositiva que te mostré anteriormente porque creo que esto funcionaría bien. Vamos a establecer la dirección al fondo aquí. Permítanme acercar de hecho. Deslice por, voy a usar el mismo valor de 200 píxeles. La duración va a ser 1.2, y voy a usar la misma flexibilización de suave Además, la animación se aplicará a cada personaje. Entonces esto es lo que tenemos hasta el momento. Así que eso es genial. Pero, ¿cuándo exactamente activamos esta animación? ¿Es después de este acabado? Al igual que, ¿funcionaría esta animación? Creo que si lo hacemos así, tenemos que esperar mucho tiempo hasta que aparezca el texto real. Entonces vamos a tener el texto inicial, el 03, animar al mismo tiempo que los puntos en el pequeño triángulo Y para eso, simplemente puedo seleccionar el elemento de texto desde aquí y puedo moverlo para que coincida con los elementos que quiero. Entonces, al hacer esto, el texto comenzará animarse al mismo tiempo que los puntos en el pequeño triángulo Eso me gusta. Ahora bien, ¿qué pasa con el resto del texto? Bueno, me gustaría que esto comenzara a animarse después de que el gran número termine su animación Y nuevamente, voy a aprovechar la posición de esos elementos de texto porque el texto más pequeño se posiciona en la parte superior y el texto más grande se coloca en la parte inferior, me gustaría que estos se deslicen. El texto superior se deslizará desde la parte superior y el texto inferior se deslizará desde abajo. ¿Bien? Y hagámoslo así esta animación sucede al mismo tiempo. Entonces tenemos este tipo de diapositiva en efecto simultáneamente. Seleccione el elemento de texto superior, y voy a seleccionar una diapositiva de capa. Va a seleccionar la opción superior aquí, deslizar por 200, duración 1.2 flexibilizando suave Entonces eso actualmente se ve así. Bien, coloquemos nuestro cabezal de reproducción. En esta marca aquí mismo, y elegiremos el segundo texto, y también le aplicaremos una diapositiva de capa. Esta vez, va a entrar desde abajo, deslizarse por 200, 1.2 de duración, y la misma flexibilización de suave Entonces ahora la animación se ve algo así. Y permítanme hacer esto un poco más grande. Eso es. Entonces esta es la secuencia de eventos hasta el momento. En los primeros 1.2 segundos, animamos el círculo, el triángulo, las líneas En el siguiente tramo, animamos el texto central y los puntos y el pequeño triángulo Y finalmente, animamos los otros dos elementos de texto, uno que viene desde abajo, desde arriba, y el otro que viene desde abajo Y hasta ahora, esta animación se sitúa alrededor de 3.7 segundos, y realmente depende de ti cuánto tiempo quieres hacer una de estas diapositivas animadas. Personalmente, prefiero hacerlas un poco más largas para poder recortarlas más tarde en la edición, ¿verdad? Entonces, para este ejemplo, hagamos toda esta secuencia unos 10 segundos de duración o en realidad de unos 8 segundos de duración. Entonces voy a seleccionar la mesa de trabajo y voy a cambiar su duración a 8 segundos así como así Bien. Ahora bien, ¿qué estamos haciendo exactamente por lo que resta de cuatro y algo segundos? Bueno, aquí es donde podemos agregar algo de animación más lenta, casi como animación residual. Podemos mantener los elementos de fondo moviéndose a un ritmo más lento solo para mantener esa sensación de movimiento. Y eso lo haremos en la siguiente lección. 7. Animemos: crea las animaciones residuales: En esta lección, estamos agregando algunas animaciones más lentas a las formas de fondo para mantener las cosas en movimiento hasta el final. Después exportaré la diapositiva terminada y te mostraré cómo usarla en la resolución Vinci, incluyendo cómo hacer la transición de ella a metraje de video real. Vamos. Ahora, comencemos con este círculo. Y voy a detener el cabezal de reproducción aquí mismo en 1.2 cuando este círculo termine su animación Ahora, para crear una animación más larga, vamos a usar algo llamado fotogramas clave personalizados Y cuando seleccionas el elemento, puedes habilitar esta opción en el panel derecho. Ahora, con los elementos seleccionados, puedo flotar sobre la línea de tiempo y notar que tengo signos más Y cuando haga clic en este signo más, y permítanme acercar aquí. Puedo elegir qué tipo de fotograma clave quiero. Para este círculo, quiero cambiar su posición, ¿no? Yo quería ir de aquí a aquí. Posición tan vertical. Entonces voy a elegir posición. Ahora, esto crea un elemento Rumbus aquí mismo, y esa es la indicación visual de un fotograma clave Entonces voy a mover mi cabeza de reproducción hasta el final en la marca de ocho segundos, y voy a crear otro fotograma clave aquí Pero esta vez, la posición y yo puedo cambiar de esta caja de aquí, quiero que sea 200 pixeles menos, así puedo decir -200 Y cuando lo haga, vigile el círculo, el círculo va a moverse hacia arriba. Entonces ahora, si toco la animación desde el principio, esto es lo que tenemos. Observe cómo el círculo se mueve lentamente hacia arriba hasta la posición que le di. Eso es lo que hace una animación de fotogramas clave. Se anima un elemento entre el fotograma clave uno y el fotograma clave dos En mi caso, el fotograma clave uno era la posición en que el círculo aterrizó, por así decirlo, después de que terminó su animación inicial Y el fotograma clave dos estaba en la misma posición, pero 200 píxeles más alto en el eje Y. Ahora, como movimos el círculo hacia arriba, vamos a crear un efecto contrario y mover el otro círculo hacia abajo. Entonces con eso seleccionado, voy a mover mi cabeza de reproducción aquí una vez más y crear un fotograma clave para Entonces estoy empezando en esta posición, pero quería terminar en una posición en una posición Y que es 200 píxeles más baja. Entonces voy a decir más 200. Entonces ahora la animación se ve algo así. Ya ves, ahora los dos círculos, se mueven lentamente sobre el eje vertical. Y ese es exactamente el efecto que quiero. Ahora bien, los otros dos elementos que quiero animar en el fondo son el triángulo grande y el triángulo más pequeño Para el triángulo grande, quiero que se deslice hacia abajo, así que voy a poner mi cabeza de reproducción aquí a la 1:20, seleccionar el triángulo, y luego voy a hacer clic más aquí mismo y también Y luego una vez más, voy a mover mi cabeza de reproducción aquí Asegúrate de seguir la misma fila para mi animación de posición. Haga clic, y después voy a agregar 200 píxeles a la posición. Entonces ahora el triángulo se mueve lentamente hacia abajo. Y para el triángulo pequeño, veamos, el pequeño triángulo termina aquí la animación. Entonces voy a posicionar mi cabeza de reproducción en 2.4, o puedo colocarlo en 2.5 solo para estar en línea con los demás, y puedo seleccionar el triángulo pequeño. Haga clic en más. Y esta vez, animemos la rotación. Vamos a mover el cursor hasta el final una vez más, agregar otro fotograma clave, y esta vez, el valor de rotación va a ser 180. Y entonces si jugamos desde el principio, va a verse algo así. Y eso es todo. Así es como puedes crear una diapositiva animada en Lottielab Ahora, sigamos adelante y exportemos esto, y luego te mostraré cómo usarlo en un software de edición de video real. Vamos a hacer clic en el botón Exportar. Seleccionar video. Esta es una diapositiva de cuatro K, y quiero usarla en un video de cuatro K, así que voy a seleccionar cuatro K. Voy a seleccionar 60 FPS. Y si no sabes lo que significa el FPS , esa es la velocidad de fotogramas. Esencialmente, cuanto mayor sea la velocidad de fotogramas, más suave será la animación. Antecedentes, me voy a mantener en la normalidad, y después voy a dar clic en Exportar. Entonces esto va a tomar unos segundos mientras el video se renderizará. Y es recomendable que mantengas esta pestaña y te concentres para que se renderice más rápido. Bien, ya está hecho. Podemos ver una vista previa de la misma aquí, y simplemente sigue en bucle automático. Entonces vamos a descargarla. Y vamos a verlo. Este es un archivo MP four, y en realidad se puede ver. Es un archivo MP cuatro que es 4.3 megabytes. Entonces abramos eso. Y ahora se está reproduciendo dentro de un reproductor de video. Déjame realmente hacer esta pantalla completa y comprobarlo. Muy agradable animación suave, y esta reproducirá durante 7 segundos u 8 segundos la duración total. Todo bien. Vamos a salir de esto. Y vamos a saltar a la resolución Vinci y mostrarte cómo usarlo como una diapositiva de introducción al video Bien, entonces estamos dentro de la resolución Venture, donde cargué un MP cuatro. Vaya, esa es una bonita miniatura ahí mismo de, ya sabes, un metraje real en vivo que creé para esta lección Y luego tenemos la diapositiva animada de cuatro K. Ahora, voy a hacer click derecho, crear una nueva línea de tiempo. Voy a darle a Crear, y luego voy a traer la diapositiva, y luego voy a traer mi video real. Así que sólo voy a silenciar esta pista de audio porque en realidad no nos importa eso. Sólo estoy realmente interesado en cómo será el resultado final. Así que déjame en realidad solo acercar un poco aquí. Y déjame desplazarme hacia el principio, y voy a sacar a colación los efectos. Voy a agregar una transición de video aquí, sumergir para disolver el color, y voy a agregar esto desde el principio. Y entonces tal vez voy a recortar esta diapositiva a aproximadamente no sé, tal vez 6 segundos, algo como esto. Lo que se ajuste a mi proyecto actual. Déjame borrar esa brecha, y también es agregar un efecto de disolución de desenfoque, y el resultado va a ser algo así. Es un poco rezagado porque también estoy grabando como estoy haciendo esto Y este video que se está reproduciendo es de cuatro k 60, por lo que es bastante intensivo en la CPU, pero así es como se ve, esencialmente. Así que pasamos de la diapositiva de introducción animada a una porción de cabeza parlante así como esta Y así es como puedes crear una diapositiva animada para tus videos en Lottielab Te veré en la siguiente lección para la conclusión y los próximos pasos. 8. Conclusión y pasos siguientes: Y eso es una envoltura. Llegaste hasta el final de la clase, y solo quiero decir bien hecho. Pasaste de un archivo en blanco a una diapositiva completamente animada que realmente puedes usar en tus videos. Eso es bastante genial. En esta clase, configuraste Lottielab, aprendiste cómo funciona la herramienta, construías todas las animaciones de formas, animaste los elementos de texto y exportaste una diapositiva lista para usar terminada Creo que es un sólido conjunto de habilidades que ahora puedes aplicar a cualquier proyecto de animación. Ahora bien, aquí hay algunas cosas que te animaría a que hagas a continuación. Primero, toma el tobogán que construimos y hazlo tuyo. Tienes acceso gratuito al archivo Figma, así que cambia los colores, intercambia las fuentes y actualiza el texto con el tuyo propio La plantilla que proporcioné es solo un punto de partida. El objetivo es que termines con algo que se ajuste a tu estilo. Y si mi plantilla no te funciona, adelante y crea la tuya desde cero. Segundo, si quieres, sigue adelante y comparte tus animaciones en la sección de proyectos de clase. No tiene que ser perfecto. Puedes enviar una captura de pantalla, una grabación de pantalla o incluso el enlace de Lottielab a Creo que compartir tu progreso te ayuda, y también ayuda a otros estudiantes a ver lo que es posible. También me encantaría ver lo que creaste. Y si disfrutas de esta clase, significaría mucho para mí si pudieras dejar una reseña rápida. Puede ser solo una oración o dos sobre tu experiencia. Estas reseñas ayudan a otros estudiantes a encontrar la clase, y también me ayudan a entender qué funciona y qué necesito mejorar. Entonces, si esto te fue útil, por favor considera dejar una reseña. Leo, y aprecio mucho a cada uno de ellos. Ahora, en Skillshare, también enseño sobre Figma, framer y diseño web Entonces, si te interesan esos temas, dirígete a mi perfil y echa un vistazo a mis otras clases. Hay algo ahí para cada nivel, ya sea que quieras mejorar en Figma, aprender más sobre el diseño o explorar otras herramientas También dirijo un canal de YouTube donde publico sobre Figma, framer y diseño web en general, pero suelo publicar videos más cortos Entonces si te interesa, puedes encontrar el enlace en mi perfil. Bien, eso es todo para mí. Muchas gracias por tomar esta clase. Ahora ve a hacer algunas animaciones y utilízalas en tus videos, y te veré en el siguiente. Adiós por ahora.