Micro animación en Adobe After Effects: motion graphics para aplicaciones y sitios web

1. Introducción: Hola, me alegro de que hayas elegido aprender diseño de movimiento conmigo. En este curso, vamos a aprender todo sobre trabajar con formas básicas en después del effix Y la gran noticia es que no sólo vamos a aprender a crearlos y animarlos, sino que también vamos a aprender a aplicarlos en los proyectos del mundo real que puedas ofrecer a tus clientes En la primera lección, crearemos una animación básica de formas y aprenderemos a exportarla a un lote o archivo JSON, que es perfecto para sitios web y aplicaciones. En la segunda lección, crearemos una animación compleja que se convertirá en una firma de correo electrónico profesional. En la tercera lección, convertiremos las capas en capas tridimensionales y aprenderemos a crear un ángulo de cámara isométrico Además, aprenderemos cómo podemos integrar la animación en videos más largos, como podcast, videojuegos y más. En la lección final, crearemos una animación de cargador súper genial y aprenderemos a mostrarla en nuestro enfoque similar a la de nuestro portafolio. En cada lección, aprenderemos a explorar nuestra animación para compartirla en las redes sociales, que puedas compartirla en tus canales de redes sociales y en el sitio web de tu portafolio. Pero espera, hay más. Para darte la mejor experiencia de aprendizaje, recibirás una notificación clara sobre cuándo trabajar conmigo y cuándo simplemente escuchar sin tocar la computadora. También obtienes una pregunta de clase media para ayudarte a memorizar mejor las lecciones, e incluso te digo cuándo tomar un descanso de diez minutos al igual que en un aula real Encima de todo, creé un curso gratuito para principiantes, en el que aprendes todos los fundamentos importantes y comprendes lo que es trabajar después del afijo Entonces si durante este curso, te encuentras con un tema que te interesa y quieres aprender más al respecto, eres más que bienvenido a ver el curso gratuito que mencioné. Puedes encontrar el enlace en la descripción de este video. Ah, y no te preocupes. No tendrás que escuchar mi acento funky y exótico a lo largo de las clases Este curso es expresado por una voz profesional encendida. Bien, no con una ficha, comencemos con la primera lección. 2. Sección 1: Animación de Lottie y JSON: Hola a todos. En esta lección, crearemos una animación genial usando formas básicas y aprenderemos a exportarla a archivos Jason o Lodi que son perfectos para sitios web y aplicaciones Esta lección se divide en siete partes. En la primera parte, entenderemos qué son los archivos Lodi y Jason y por qué es importante saber cómo crearlos. Crearemos una carpeta principal para el curso e instalaremos las fuentes que usaremos en esta lección. Ingresaremos after effects, crearemos nuestra primera composición y ajustaremos configuración del software para un mejor flujo de trabajo. Entonces aprenderemos sobre los parámetros básicos de una capa en after effects. En la segunda parte, diseñaremos la escena desde cero y después de los efectos, y aprenderemos métodos para un trabajo más organizado. En la tercera parte, aprenderemos qué son los fotogramas clave y comenzaremos a animar la escena, y aprenderemos a cronometrar y sincronizar la animación que creamos En la cuarta parte, aprenderemos a crear una animación en bucle. En la quinta parte, mejoraremos la animación que creamos y aprenderemos sobre el editor de grafos. En la sexta parte, instalaremos un script gratuito y aprenderemos a usarlo. Identificaremos cualquier problema que pueda surgir. Entonces resolveremos esos problemas y exportaremos un archivo de video terminado que se puede usar en sitios web y aplicaciones. Por último, en la parte final, aprenderemos a renderizar la animación que hicimos en un archivo MP four de alta calidad para compartir en redes sociales. Después de eso, al final de la lección, obtendrás una pequeña tarea para que hagas. La tarea está destinada a ayudarte a recordar y entender lo que has aprendido. No te preocupes. La tarea no va a tomar demasiado de tu tiempo. Está diseñado para ser factible en solo 2 horas. Si tienes algún problema o duda, no dudes en pedirme ayuda a mí o a tus compañeros de clase en nuestro grupo comunitario cerrado Todo bien. Basta con la plática. Empecemos. 3. ¡Comencemos!: Entonces, ¿qué son los archivos Lodi y JSN de todos modos? Lodi y JSN son animaciones ligeras que se pueden usar en sitios web, aplicaciones móviles y otras plataformas digitales Saber cómo crear y renderizar animaciones en archivos de Lottie y Jason puede ayudar a diseñadores y desarrolladores a crear animaciones atractivas y de alta calidad que mejoren sus plataformas, experiencia de usuario y el rendimiento Todo bien. Basta con la plática. Empecemos. Como diseñador de movimiento profesional. Te puedo decir que trabajar con carpetas organizadas es muy importante. Cuando estás trabajando en un proyecto de gráficos en movimiento, hay muchos activos diferentes que necesitas hacer un seguimiento, como imágenes, metraje de video , archivos de audio, etc. Organizar estos archivos en carpetas te permite encontrar rápidamente lo que buscas y mantiene tu proyecto súper eficiente. Además, una estructura de archivos organizada se vuelve aún más importante si trabajas con un equipo. Todos en el equipo necesitan poder encontrar rápidamente los activos que necesitan. Tener un proyecto organizado puede ayudar a garantizar que todos estén en la misma página. Veamos qué carpetas necesitamos crear. Pero antes de eso, recuerda descargar la carpeta para esta lección. Para aquellos que aún necesitan instalar el software after effects, pueden ver cómo hacerlo en el curso gratuito que mencioné anteriormente. Puedes encontrar el enlace al curso en la descripción a continuación o en el archivo PDF que se encuentra en la carpeta que descargaste de mí. Bien. Ahora busquemos una carpeta en la computadora donde crearemos la carpeta principal para el curso. Encuentra una carpeta que más te convenga. Ahora vamos a crear la carpeta principal para el curso. Llamémoslo DM micro animación. Ahora dentro de esta carpeta, necesitamos abrir tres carpetas más. El primero es A. Aquí guardaremos todos los archivos de after effects. El segundo son los activos. Aquí, guardaremos todos los activos gráficos utilizados en el proyecto. El tercero son renders o muestras. En esta carpeta, guardaremos todas las renderizaciones y pruebas del proyecto Ahora vamos a abrir la carpeta assets y transferir a esta carpeta los assets que necesitamos para esta lección. Abre la carpeta que descargaste de mí. Derecha. Y copia todos los activos a la carpeta de activos que acabas de crear. Ya puedes cerrar la carpeta si quieres. Ahora, instalemos la fuente que usaremos en esta lección. mostraré cómo instalar fuentes para usuarios de Windows y Mac. El nombre de esta fuente es Montserrat, y lo usaremos únicamente con fines educativos Abra la carpeta e ingrese la carpeta llamada estática. Para usuarios de Windows, seleccione todos los archivos, haga clic derecho y elija Instalar para todos los usuarios o Instalar. Ya instalé esta fuente, así que no la volveré a instalar. Usuarios de Mac con buscador seleccionado, haga clic en. Vamos. Ahora, haga clic en. Vaya a Carpeta y escriba esta línea. Luego presiona Enter. Esto te llevará a la carpeta de fuentes instalada en tu sistema. Ahora, arrastra todas las fuentes de la carpeta del curso a la FonceFolder, o puedes copiar la fuente y pegarla ahí Entonces después de instalar la fuente, podemos cerrar la carpeta. Voy a mover esta carpeta a un lado muy rápido, y ahora vamos a almorzar después de los efectos juntos. Podemos salir por esta ventana. Maximizaré la ventana, y primero, hagamos clic en default para que todos veamos la misma disposición del panel. Y ahora, como con cualquier software de edición, necesitamos abrir un nuevo archivo. Para hacer esto en after effects, debemos crear una primera composición. Vamos a hacer clic en nueva composición y ahora definir los ajustes de nuestra primera composición. Lo llamaremos animación para el teniente Aquí estableceremos el tamaño de nuestra composición Esta vez, trabajaremos en un formato cuadrado de 1080 píxeles de ancho y diez 80 píxeles de alto. Aquí elegiremos el número de fotogramas en los que consistirá nuestra animación. Anotaremos 60, lo que significa crear 1 segundo de animación. Pasaremos 60 cuadros. ¿Por qué? ¿Exactamente 60? Porque esta animación está diseñada para sitios web y aplicaciones. Aquellos que no saben lo que significa la velocidad de fotogramas es bienvenido a ver el curso gratuito que mencioné anteriormente. En este curso, explico en profundidad sobre este tema. Puedes encontrar el enlace al curso en la descripción de este video o en el archivo PDF ubicado en la carpeta principal del curso que me descargaste. Todo bien. Sigamos adelante. Aquí, elegiremos la duración de nuestra primera composición. 10 segundos es suficiente para nosotros esta vez. Por último, escojamos el color de fondo de la composición. Es importante tener en cuenta que podemos cambiar fácilmente todos estos ajustes en cualquier etapa la animación más adelante. Ahora vamos a hacer clic. Ahora antes de continuar, me gustaría hacer algunas notas importantes para quienes ven la pantalla de esta manera. No te preocupes. Verlo esa manera porque su llave de bloqueo de mayúsculas está encendida. Apaga la tecla de bloqueo de mayúsculas para que puedas ver la pantalla normalmente. Ahora, cuando trabajamos en un proyecto y después de los efectos, es importante cambiar el idioma de nuestra computadora al inglés. De esa manera, los atajos de teclado usaremos en el curso funcionarán correctamente. A continuación, si ves la pantalla de vista previa de manera diferente a la mía, puedes dar click aquí. Si ves los números aquí de manera diferente que yo, puedes pasar el cursor aquí con el cursor Después, mantenga pulsada la tecla de control y haga clic en los números aquí. Bien. Y si ves la pantalla más pequeña o más grande que la mía, solo ven aquí y selecciona ajuste. Por último, establece la calidad de vista previa aquí al completo. Después de crear nuestra primera composición, lo primero que tenemos que hacer es guardar el proyecto y darle un nombre. Porque actualmente, como puedes ver, archivo After Effects no tiene nombre en este momento. El nombre que dimos fue el nombre de nuestra primera composición. La composición en la que estamos ahora. Vamos a archivar y dar clic en Guardar. Ahora encontremos la carpeta que creamos para la lección. Ingresaremos a la carpeta A y nombraremos el archivo after effects en el que estamos trabajando. Puedes llamarlo con el mismo nombre que nuestra composición principal o cualquier otro nombre que te guste. Después de eso, haz clic en Guardar, y nuestro proyecto ahora tiene un nombre. Después del primer ahorro del proyecto. Además de darle el nombre al proyecto. También activamos la función de guardado automático. Esto es muy importante de hacer porque ahora after effects automáticamente guardará nuestro proyecto cada pocos minutos. Ahora, vamos a editar las preferencias y establecer los mejores ajustes para un mejor flujo de trabajo. Usuarios de Mac, pueden ir a preferencias de esta manera. Da clic en General y ahora selecciona la configuración exactamente como lo hice yo. Puedes detener la lección y continuarla una vez que hayas seleccionado todo. Mientras tanto, continuaré a la siguiente columna. Y aquí está el auto save. Aquí decidimos con qué frecuencia after effects guardará el proyecto automáticamente. Elegí cada 5 minutos. Por último, vayamos al guión y a las expresiones y seleccionemos todo lo que seleccioné. Y ahora podemos dar click y comenzar la lección. Tenga en cuenta que no es necesario cambiar estos ajustes cada vez antes de comenzar un nuevo proyecto. Bien. Entonces lo primero que haremos es importar la paleta de colores al proyecto. Para importar activos al proyecto, haremos doble clic en el área gris en el panel del proyecto. Ahora necesitamos encontrar la carpeta que creamos para la lección e ingresar a la carpeta assets. Ahora, seleccione la paleta de colores. Asegúrese de que la secuencia PNG no esté seleccionada y haga clic en Importar. Ahora, para ver la paleta de colores en nuestra composición, debemos arrastrarla al panel de composición que se encuentra aquí. Para ello, arrastraremos la paleta a la composición así. Aquí, vemos la paleta en la pantalla de vista previa. Podemos reducir esta capa manualmente agarrando el borde desde aquí y manteniendo la tecla Mayús para reducir la capa simétricamente Ahora suelte el clic del mouse y luego suelte la tecla Mayús. Además, podemos reducir la capa desde el panel de composición a través de la propia capa. Si hacemos clic en la flecha pequeña de la capa, podemos ver las propiedades básicas de transformación de la capa. Si abrimos estas propiedades, podemos ver los parámetros básicos para cada capa en after effects. Aquí veremos el parámetro scale. Podemos cambiar el valor de este parámetro manualmente, o podemos dar click en el valor e introducir un número que queramos. Anota 30 y haz clic en Entrar. Cerremos los parámetros desde aquí. Ahora podemos mover esta capa por aquí a un lado, y para que no nos moleste después. Vamos a cerrarlo desde aquí. De esa manera, no podremos tocarlo ni moverlo durante el trabajo. Ahora, para que no veamos esta capa en el panel de composición. Podemos hacerlo desaparecer usando la función tímida que se encuentra aquí. Vamos a hacer clic en este icono. Para aquellos que no vean el icono, pueden dar click aquí y ver la misma disposición de funciones que yo. Seleccionemos esta capa como una capa invisible, y para realizar la función, también haremos clic en el ícono tímido aquí. Y ahora no vemos esta capa aquí. No nos molesta y no podemos moverlo. Bien, ahora comencemos a diseñar nuestra escena. Para ello convenientemente, podemos abrir una cuadrícula adaptada a nuestra composición. Ahora, ajustemos la pantalla de vista previa para que se ajuste al tamaño de nuestro panel. Vamos a ir aquí y seleccionar ajuste. Asegúrate de que la calidad de tu vista previa también esté completa. Si no ves el color de fondo que elegiste al principio, haz clic aquí para verlo. Si queremos cambiar este color de fondo, podemos hacerlo a través de los ajustes de composición. Para llegar a la configuración de composición en la que nos encontramos ahora, necesitamos dar clic en Control K. Vuelvo a notar que todos los atajos funcionarán cuando el idioma del teclado esté configurado en inglés. Hagamos clic en Control K. Aquí, vemos los ajustes de composición que creamos anteriormente. Para ver los cambios que estamos realizando, da clic en vista previa. Ahora puedes cambiar el color de fondo a cualquier otro color. Todo bien. Demos clic en Cancelar y comencemos a crear nuestra escena. 4. Diseña la escena desde cero: Así que vamos a crear nuestra primera forma. Para ello, seleccione la herramienta Pluma, luego haga clic en relleno y D la seleccione. Ahora hagamos clic en trazo y escojamos un color claro de nuestra paleta usando el cuentagotas Haz clic en Bien y vamos a crear la forma desde el centro. Coloque el cursor aquí y cree el primer punto. Ahora, mantenga presionada la tecla Mayús y haga clic aquí para crear una línea recta. Podemos elegir el grosor de la línea aquí. Vamos a hacer clic en el número, escribir 40 y presionar enter. Ahora, volvamos a la herramienta de selección usando el atajo v. Seleccionemos la capa y usando la rueda de desplazamiento del mouse. Vamos a acercar la pantalla de vista previa. Para aquellos que no tienen una rueda de desplazamiento en su mouse, pueden acercar y alejar usando estas teclas. Entonces, después de acercarnos para ver nuestra forma de cerca, podemos ver que el final de esta línea es recto Aprendamos a redondearlo. Para ello, abramos las propiedades de esta capa, contenido abierto, forma abierta y trazo abierto. Podemos agrandar el panel así, y aquí en trazo, podemos redondear los bordes y las conexiones. Ahora podemos cerrar todo, minimizar el panel y aprender a mover la pantalla de vista previa mientras estamos en Zoom. Para mover la pantalla, necesitamos mantener presionada la barra espaciadora y luego moverla así. O podemos mover la pantalla haciendo clic en el clic central del mouse. Ahora, quiero hablar un tema importante llamado punto de anclaje. Por favor, no toques nada y solo escúchame. Abriré el parámetro de rotación y cambiaré el valor. Presta atención a cómo se mueve la capa. No gira desde el centro de la forma. Es porque el punto de anclaje se encuentra aquí. Como puedes ver, aquí hay un pequeño icono. Vamos a moverlo al centro juntos ahora. Para ello, seleccionemos la herramienta de punto de anclaje y arrastremos el punto de anclaje de esta capa a otra ubicación. Si movemos el punto de anclaje mientras mantenemos presionada la tecla de control, el punto de anclaje se moverá simétricamente De esta manera, podemos centrarlo fácilmente en el centro de la capa. Después de colocar el punto de anclaje, presionemos para volver a la herramienta de selección e ir a una línea. Para quien no lo encuentre, puede abrirlo a través de una ventana. Hagamos clic aquí para centrar nuestra forma al centro de la composición. Ahora podemos configurar la vista previa para que encaje y cancele la cuadrícula. No obstante, esta vez, no lo cancelemos desde aquí. Vamos a cancelarlo usando el atajo. Presiona la tecla apóstrofo. Vamos a presionarlo un par de veces para practicar. Usaremos esta grilla a menudo. Ahora vamos a crear esta esfera. Para ello, pulsaremos y mantendremos presionada la herramienta rectángulo. Ahora suértelo y seleccione la herramienta elipse. Ahora, no lo hagas conmigo porque quiero mostrarte algo interesante. Veamos qué pasa si trato de crear esta esfera aquí. Tenga en cuenta que la esfera se crea en una capa existente. Presionaré el control Z para deshacer la acción. Ahora hagámoslo juntos. Si queremos crear esta esfera en una nueva capa, necesitamos asegurarnos de que no estamos seleccionando ninguna capa, y luego podemos elegir el color para la esfera. Vamos a elegir el color azul. Y esta vez vamos a cancelar el trazo. Ahora, cuando creamos esta esfera , estará en una nueva capa. Vamos a crear la esfera aquí mientras mantenemos presionada la tecla Mayús para hacerla simétrica. Ahora vamos a soltar el clic del ratón y luego soltar la tecla Mayús. A continuación, alineemos la esfera con el centro, usando una línea y moverla hacia abajo. No vamos a poder agarrarlo porque todavía estamos en la herramienta elipse Para mover esta esfera, volvamos a cambiar a la herramienta de selección presionando. Ahora, vamos a seleccionar la capa y agarrar la esfera y moverla hacia abajo mientras mantenemos presionada la tecla shift para un movimiento simétrico. Bien. Y ahora vamos a nombrar nuestras capas. Para ello, necesitamos seleccionar la capa y presionar enter. Podemos cambiar el nombre a trazo uno. Presiona enter para completar la acción. Hagamos lo mismo por la esfera. Llamaremos a esta esfera de capa uno. A continuación, vamos a crear la escala de texto. Para ello, necesitamos seleccionar la herramienta de texto y elegir la fuente Manst que instalamos anteriormente Click quiere abrir la línea de texto y luego escribir scale. Presione shift para poner en mayúscula la primera letra y continúe escribiendo el resto de la palabra sin mantener presionada la tecla shift Haga doble clic en el texto para seleccionarlo. Cambia el tamaño a 30 y presiona enter. Seleccione el estilo de fuente para poner en negrilla la barra de herramientas o usando los botones de flecha Por último, escojamos el color del texto desde aquí. Ahora, digamos que queremos mover el texto. Para salir de la línea de texto, necesitamos presionar control enter. Ahora hemos salido de la línea de texto, y puedo presionar V para volver a la herramienta de selección Ahora ve al párrafo y asegúrate de que el texto quede alineado y centrado. Vamos a acercarnos un poco y centrar el punto de anclaje de la capa de texto hacia el centro. Esta vez, no usaremos la herramienta Punto de anclaje. Lo haremos con un atajo súper útil Control Alt home. Usuarios de Mac, presten atención a cómo hacer esto en su teclado. Utilicemos el atajo juntos. Y a, el punto de anclaje salta al centro, y ahora podemos centrar el texto y bajarlo mientras presionamos la tecla Mayús. Ahora, vamos a traer de vuelta la cuadrícula presionando la tecla del apóstrofo Ahora vamos a seleccionar todas las capas y mover todo hacia arriba usando las teclas de flecha del teclado. Para movimientos más grandes, presionaremos las flechas mientras mantenemos presionada la tecla Mayús. Coloquemos la capa aquí, y para asignarlos todos al mismo grupo, podemos dar click en el cuadrado aquí y etiquetar todas estas capas en azul. Ahora vamos a duplicar todas estas capas. Para ello, seleccionaremos todas las capas y presionaremos el control de atajo D. A continuación, seleccionaremos y las moveremos hacia abajo para que queden posicionadas una al lado de la otra. Para diferenciarlos de las tres primeras capas, etiquetémoslos en amarillo. Y ahora, mientras se seleccionan todas las capas, vamos a moverlas hacia la izquierda. Mantendremos el turno y los moveremos con la tecla de flecha izquierda en el teclado. Bien, una vez más, volvamos a duplicar las tres primeras capas. Esta vez, colocaremos las capas hacia arriba. Vamos a etiquetarlos en rojo. Mientras todo está seleccionado, movamos todas las capas hacia la derecha mientras mantenemos presionada la tecla Mayús. Todo bien. Ahora cambiemos las palabras que tenemos aquí. Podemos dejar esta capa de texto sin cambios y reemplazar su nombre en el panel de capas. Presiona Enter y elimina el número dos. Ahora vamos a hacer doble clic sobre esta palabra y cambiarla a rotación. No olvide presionar Control Enter para salir de la línea de texto. Por último, cambiaremos este texto a stretch. Presione Control Enter y luego V para volver a esta herramienta de selección. Ahora, quiero que movamos las capas para estar un poco más alejadas unas de otras. Esta vez, usaremos una cuadrícula llamada cuadrícula proporcional. Apagaré esta grilla por ahora y te mostraré cómo abrirla usando un atajo. El atajo a esta cuadrícula es Alt y la clave del apóstrofo. Ahora vamos a mover estas capas por aquí. Y esas capas de allá. Ahora podemos cancelar la grilla, así que vamos a presionar hacia fuera y de nuevo la tecla del apóstrofo A continuación, configuremos la pantalla de vista previa para que se ajuste y cambie los colores de las esferas. Este es en amarillo. Pero esta esfera será roja. Ahora, vamos a crear la letra A, que se supone que está aquí arriba. Para ello, seleccionaremos la herramienta de texto, clic una vez aquí y luego presionaremos Mayús A para poner la letra en mayúscula Seleccionaremos la letra haciendo doble clic y cambiaremos el tamaño de fuente a 300. Esta vez, elegiremos el estilo de fuente negra. Ahora, vamos a dar clic aquí. Para salir de la línea de texto, presionaremos Control Enter y V para volver a la herramienta de selección. Ahora centremos el punto de anclaje de esta capa usando el atajo que aprendimos. Pregunta, ¿cuál es el atajo para centrar el punto de anclaje Para ello, presiona Control Alt home. Ahora, iremos a una línea y centraremos la capa en la composición. Vamos a traer de vuelta nuestra grilla presionando la clave del apóstrofo y continuemos diseñando la escena En mi opinión, podemos agrandar un poco esta capa. Esta vez, no la ampliaremos a través del tamaño de fuente, sino que ampliaremos la propia capa a través del parámetro scale. Seleccionemos la capa y presionemos para abrir el parámetro de escala. Cambiemos el tamaño a 130. Ahora, levantemos un poco esta capa. Es demasiado grande. Cambiemos el tamaño a 120 y volvamos a subir el texto. Ahora, presionaré para abrir el parámetro de rotación y rotar la capa para verificar que no toque las otras formas de la escena. Genial. Bien. Y ahora, voy a llevar la rotación a cero. Ahora podemos cerrar los parámetros y coloquemos la capa por encima de todas las demás y cambiemos su color a ninguno. De esta manera, la capa será gris. Todo bien. Hemos terminado de diseñar la escena, y ahora estamos pasando al escenario de animación. Pero antes de eso, recomiendo encarecidamente tomar un descanso de diez minutos. levántate de tu silla, haz algunos estiramientos ligeros, haz un poco de té o café, y vuelve a refrescarte para la siguiente parte. 5. ¡Tu primera animación!: Entonces en esta etapa, no necesitamos la paleta de colores, así que podemos dar click aquí para ver todas las capas ocultas y simplemente apagar la capa desde aquí. También podemos desbloquear y eliminar completamente la capa usando la tecla de retroceso o eliminar La capa se elimina del panel de capas, pero no se elimina del propio proyecto. Así que no te preocupes. volver a usar la paleta si es necesario. Muy bien, así que por ahora, lo eliminaré, y también podemos cerrar la cuadrícula presionando la tecla apóstrofe, y ahora ya estamos listos para iniciar la animación Lo primero que vamos a animar son las esferas. Para que se muevan, necesitamos crear marcos clave. Los fotogramas clave son un concepto fundamental en animación y motion graphics. En los efectos posteriores, los fotogramas clave se utilizan para definir los puntos inicial y final de una animación o transición Son puntos en el tiempo que marcan la posición, el tamaño, rotación, la opacidad y otras propiedades de un elemento o capa Los fotogramas clave también se utilizan para controlar la velocidad y el tiempo de una animación. Al ajustar la distancia entre fotogramas clave, puede controlar la velocidad de una animación. Cubro este tema en profundidad en el curso gratuito que mencioné al inicio de este curso. Si alguno de ustedes quiere aprender más al respecto, son más que bienvenidos a verlo. Puedes encontrar el enlace al curso gratuito en la descripción a continuación o en el archivo PDF. Eso está en la carpeta principal del curso que me descargaste . Todo bien. Para comenzar, seleccionemos todas las esferas mientras mantenemos presionada la tecla Mayús para que podamos seleccionar varias capas a la vez. A continuación, asegúrese de que el indicador de tiempo esté al comienzo de la línea de tiempo. Y finalmente, presione P para abrir el parámetro position porque este es el parámetro para que crearemos fotogramas clave. Ahora, diremos después de los efectos para mantener las esferas en su posición actual en este momento. Por lo tanto, haremos clic en el cronómetro y crearemos el primer fotograma clave A continuación, moveremos el indicador de tiempo al segundo número uno y moveremos las esferas a la posición deseada mientras mantenemos presionada la tecla Mayús para asegurar un movimiento de eje recto. Esta acción creará automáticamente un nuevo marco clave. Ahora, para previsualizar nuestro trabajo, movamos el indicador de tiempo al inicio de la línea de tiempo y presionemos la barra espaciadora. Buen trabajo. Has creado tu primera animación. Coloquemos el indicador de tiempo al principio. Ahora, quiero cronometrar la animación de esta esfera manera diferente para que no todos se muevan juntos. Quiero que la primera esfera que se mueva sea amarilla, luego azul, y sólo entonces roja. Necesitamos crear una acción superpuesta o un desplazamiento. Para lograrlo, necesitamos mover nuestros fotogramas clave en la línea de tiempo. Dejaremos la esfera amarilla donde está ahora ya que será la primera esfera en moverse. Ahora, moveremos la capa de la esfera azul para comenzar sólo después de que la esfera amarilla haya alcanzado su segundo punto. Pero como muevo toda la capa, hay una parte vacía en la animación, y no puedo ver la esfera azul. Para evitar que esto suceda, solo moveremos los fotogramas clave y no toda la capa. Para ello, seleccionemos todos los fotogramas clave, o podemos hacer clic en el parámetro aquí. Ahora podemos mover estos fotogramas clave aquí mientras mantenemos presionada la tecla Mayús De esta manera, los marcos clave se pegarán al final de los marcos clave de esferas amarillas. Ahora hagamos lo mismo con los fotogramas clave de la esfera roja. Los seleccionaremos todos y los trasladaremos al momento en que la esfera azul ya haya llegado a su último punto. Si volvemos a ver la animación, veremos que las esferas ahora se mueven una tras otra como queríamos. El siguiente paso en nuestra animación es hacer coincidir la animación de la letra e con la animación a escala que creamos. Hacer esto para escala y rotación es muy simple, pero crear la animación de texto extensible puede ser un poco más desafiante. Como pueden ver, si estiro esta capa de esta manera, no voy a poder crear el efecto que quiero. Veamos cómo crear esto correctamente. Como puedes ver en el ejemplo en la pantalla, un ilustrador, usando la función crear contornos, podemos convertir cualquier capa de texto en una forma con un trazado. Después de eso, podemos movernos y cambiar ese camino. Todo bien. Y ahora, para poder hacer esto en after effects, necesitamos hacer clic derecho sobre la capa de texto, ir a crear, y elegir Crear formas a partir del texto. Ahora tenemos una nueva capa en la que el texto se ha convertido en una capa de forma simple con un trazado. Podemos eliminar esta capa de texto. Ahora, cambiemos el color de la capa a ninguno. Ahora tenemos un camino del que podemos cambiar la forma. Veamos cómo hacerlo. Antes de comenzar, vamos a acercarnos y posicionemos la pantalla de una manera que nos resulte cómoda para trabajar en esta parte. Vamos a abrir la cuadrícula y seleccionar la herramienta pluma. Por el momento, podemos ver pequeños puntos, y si seleccionamos uno de ellos, podemos moverlo a donde queramos. Presionaré control Z. también puedo elegir múltiples puntos Mantendré pulsada la tecla At, y ahora puedo seleccionar varios puntos. Bien. También puedo mover los cuatro de estos puntos. Mantendré pulsada la tecla Alt, y ahora también puedo seleccionar todos estos puntos. Ahora veamos qué pasa si quiero mover todo el lado derecho hacia el lado. Pulsaré Alt y seleccionaré todos los puntos en esta sección y luego moveré los puntos aquí. Tenga en cuenta que la letra se estira incorrectamente. Ocurre porque aquí no hay suficientes puntos. Vamos a crear estos puntos juntos. Para hacerlo con precisión, utilizaremos guías. Vamos a acercarnos un poco más. Podemos ampliar este panel así. Ahora para crear las guías. Tenemos que sacar a relucir las reglas usando el control nuestro atajo Ahora, para crear una guía, simplemente haz clic aquí y arrastra el ratón hacia abajo. Y ahora necesitamos bloquearlos a través de la vista y luego elegir guías de bloqueo. Y aquí, las guías están bloqueadas, y podemos crear los puntos. Posicionémonos en la parte superior del camino de las capas. Cuando veamos que el icono del mouse cambia a un plus, sabremos que al hacer clic en la ruta se creará un punto. Así que vamos a crear algunos puntos aquí. Podemos seleccionar y eliminar puntos usando retroceso o eliminar Podemos acercar un poco más y alinear los puntos. Después de eso, para ocultar la guía, podemos usar un útil control de acceso directo en la tecla de punto y coma Al presionar de nuevo el atajo de teclado , se devolverán las guías. Por último, presionemos control para ocultar a los gobernantes. Todo bien. Entonces ahora vamos a estirar el texto. Primero, voy a explicar cómo funciona, y luego vamos a animar el camino juntos Me mudaré aquí un poco para poder seleccionar el punto. Ahora estoy manteniendo pulsada la tecla Alt y seleccionando todos los puntos de este lado . A excepción de ésta. A continuación, muevo el camino hacia los lados mientras mantengo presionada la tecla Mayús Fresco. Presionaré el control Z para deshacer la acción, y animemos este camino juntos Entonces lo primero que tenemos que hacer es encontrar su parámetro en la propia capa. Como pueden ver, aquí hay dos caminos, uno para esta parte de la letra, y otro para esta parte de la carta. Tenemos que animar ambos pads. En lugar de abrir manualmente todos estos parámetros, simplemente podemos seleccionar la capa y el camino estrecho en la barra de búsqueda. Luego presionaremos enter y veremos ambos caminos abiertos convenientemente. Ahora vamos a cronometrar la animación de las letras caminos a la animación de la esfera roja. Volvamos a configurar la vista previa para que encaje y veamos dónde comienza la animación de la esfera roja. Para ello, seleccionaremos la capa de la esfera roja y presionaremos la tecla U para ver sus fotogramas clave. Ahora, vemos que la animación de la esfera roja parte del segundo número dos. Movamos el indicador de tiempo a este fotograma clave mientras mantenemos presionada la tecla Mayús Ahora vamos a seleccionar la capa de la letra A, y el camino estrecho en la barra de búsqueda. Presiona Enter, y ahora diremos after effects que a partir del segundo, El camino estará en la forma en la que se encuentra actualmente. Porque no hay fotogramas clave adicionales antes de estos fotogramas clave. La carta estará en esta forma a lo largo de este tiempo. Ahora movamos el indicador de tiempo al segundo número tres, en el mismo momento en que la esfera roja termina su animación y cambiemos la forma de la letra a la forma que queremos que sea. Mantendremos pulsada la tecla Alt. Selecciona todos los puntos de este lado. Asegúrate de que no estamos seleccionando este punto. Y ahora vamos a arrastrar el camino aquí manteniendo pulsada la tecla Mayús. Después de eso, ahora mantendremos presionada la tecla alt y seleccionaremos todos los puntos de este lado. Movamos aquí estos puntos. También podemos cambiar la posición de estos puntos hacia arriba. Seleccionemos este punto, mantengamos presionada la tecla Mayús, y también seleccionemos este punto. Ahora vamos a mover ambos puntos que seleccionamos antes hacia arriba. Ahora vamos a seleccionar sólo este punto. Mantenga presionada la tecla alt, seleccione solo este punto y muévalo mientras presiona Mayús. Por último, vamos a seleccionar este punto y moverlo aquí mientras mantenemos el turno. Ahora bien, estos dos fotogramas clave dicen después de los efectos que en este momento, el diseño del camino de la letra se verá así En este fotograma clave, el diseño de la letra se ve así Todo bien. Sigamos adelante. Cerremos las capas. Establezca la vista previa para que se ajuste y cierre la cuadrícula. Y ahora podemos cambiar a la herramienta de selección y ver toda la animación que hemos creado hasta ahora. Se ve bien. El siguiente paso en nuestra animación es sincronizar las animaciones de escala y rotación Empecemos por cronometrar la animación de rotación. Primero, debemos seleccionar la capa de la esfera azul y presionar para ver sus fotogramas clave Como podemos ver en la animación final, la letra debe estar al revés desde el inicio de la animación. La letra gira a medida que la esfera azul se eleva hacia arriba. Por lo tanto, necesitamos llegar al punto donde la esfera azul ya está arriba, luego presionar R para ver el parámetro de rotación y establecer la rotación de la letra en este momento. Luego haremos clic en el cronómetro sin cambiar el valor de este parámetro Y en este punto en el tiempo, cuando la esfera azul está en la parte inferior, la rotación será, digamos -180, Durante este tiempo, la letra estará boca abajo, y después de este fotograma clave, la letra comenzará a girar hasta que alcance el valor que establecemos para ella en este momento Ahora, ambas animaciones se sincronizan en los mismos puntos de tiempo. Veamos cómo se ve. Se ve genial. Ahora, animemos la animación a escala Ya sabemos que el tamaño de la letra debe ser de este tamaño a cuando la esfera amarilla suba, y también sabemos que la esfera amarilla tarda 1 segundo en completar su animación. Por lo tanto, estableceremos el parámetro de escala de esta capa al valor actual. Ahora retrocedemos en el tiempo, que es cuando la animación comienza en segundo cero y establecemos un valor diferente para el parámetro scale, como 50 o 60. A continuación, cerraremos la capa, expandiremos el panel y mostraremos todos los parámetros de todas las capas. Para ello, necesitamos asegurarnos de que no seleccionamos ninguna capa y luego presionarlo. Ahora pasemos a la siguiente parte y aprendamos cómo hacer que toda esta animación reproduzca sin problemas en un bucle perfecto. 6. ¿Qué es una animación bucle?: Así que para hacer que toda esta animación se reproduzca a la perfección en un bucle perfecto. Primero, necesitamos entender qué es una animación en bucle. Una animación en bucle es un tipo de animación donde el principio y el final de la animación se mezclan a la perfección, creando un bucle infinito. En otras palabras, la animación se reproduce continuamente sin ningún punto inicial o final discernible Hay varias formas de crear un bucle para esta animación. Lo haremos de la manera más sencilla, que es crear una animación inversa para todo lo que aquí sucede. Veamos cómo hacer esto. Para hacerlo más fácil, ocultemos las capas sin fotogramas clave para que no interrumpan nuestro flujo de trabajo en el panel de capas. Al igual que ocultamos la paleta de colores antes, así podemos seleccionar esta capa ya que no tiene ningún fotograma clave. Si no ves el ícono tímido, haz clic aquí. Bien, haremos click aquí y seleccionaremos esta capa dos. Este uno dos. Como no hay fotogramas clave aquí, seleccionemos también esta capa Aquí tampoco hay fotogramas clave. Seleccionemos esta capa dos. Aquí no hay ninguno. Seleccionemos esta capa también. Fresco. Y ahora necesitamos dar click aquí para activar la función shy. Genial, así que ahora solo vemos las capas relevantes, y podemos pasar a crear el bucle. Bien. Entonces, lo primero que tenemos que hacer es crear la animación de estiramiento inverso. Es decir, necesitamos crear una animación de retorno para la esfera roja y también para el camino de la letra A. Entonces, antes que nada, decidamos en qué momento queremos devolver la esfera roja. Queremos que regrese después de que llegue a la cima en el tercer segundo. Entonces en el cuarto segundo, queremos que vuelva. Así que simplemente podemos copiar este fotograma clave y pegarlo en la posición del indicador de tiempo Así que vamos a seleccionarlo y presionar el control C y luego controlar V. Veamos cómo se ve. Entonces la esfera sube e inmediatamente vuelve a bajar. Ahora, vamos a crear la animación inversa para la esfera azul. Quiero llevar la esfera azul hacia abajo solo después de que la esfera roja termine la animación. Por lo tanto, iré al segundo número cinco, copiaré el primer fotograma clave de la esfera azul y lo pegaré aquí. Veamos qué tengo. Tenga en cuenta que después de que la esfera azul llegue a la cima, ya empieza a bajar, que no es lo que yo quería. Necesitaba quedarme levantada todo este tiempo y sólo empezar a regresar a partir del cuarto segundo. Lo que tenemos que hacer es crear una pausa. Aprendamos a hacerlo. La pausa solo se creará si no hay cambio en el valor del fotograma clave. Por lo tanto, necesitamos copiar su último fotograma clave y pegarlo en el cuarto segundo Estos dos fotogramas clave son completamente idénticos, lo que significa que tienen el mismo valor De esta manera, sabemos que no habrá ningún cambio en la animación a lo largo de este tiempo. El cambio solo comenzará justo después de estos fotogramas clave porque hay fotogramas clave con diferentes valores Ahora, vamos a crear la animación inversa para la esfera amarilla. Primero, necesitamos encontrar el momento en el que queremos que la esfera empiece a regresar. segundo número cinco es genial porque la esfera azul completa su animación en este punto. También necesitamos crear una pausa, lo que significa que la esfera amarilla estará en la misma posición que ahora. Podemos copiar este fotograma clave y pegarlo aquí. Durante este tiempo, no habrá ningún cambio en su animación. A continuación, en el segundo número seis, regresaremos la esfera amarilla a su posición inicial. Copiemos este fotograma clave. Y péguela aquí. En consecuencia, la esfera amarilla volverá a su punto de partida. En ambos casos, copiamos el último fotograma clave y lo pegamos aquí, y luego copiamos el primer fotograma clave y lo pegamos En otras palabras, tomamos estos dos fotogramas clave y los invertimos. Veamos cómo podemos aplicar este conocimiento para crear la animación inversa de la letra A. Necesitamos cronometrar la animación inversa de letra A con la animación inversa de todas las esferas. En primer lugar, vamos a hacer coincidir la animación inversa del texto extensible con la esfera roja. En este caso, es muy sencillo. Simplemente copiamos los primeros fotogramas clave cuando la letra no está estirada y los pegamos en este momento en el que la esfera roja vuelve a bajar. Vamos a copiar estos fotogramas clave usando Control C y pegarlos con el control V. Ahora la letra se estira y vuelve a su forma original. Y ahora, a medida que la esfera azul comienza a regresar, necesitamos rotar la letra nuevo a como estaba al principio. Es decir, de un valor de -180 a cero. Pero ahora necesitamos hacer la animación inversa. Por lo tanto, podemos copiar ambos fotogramas clave con Control C y pegarlos aquí con el control V. Y ahora, cuando se seleccionan ambos fotogramas clave, haga clic derecho sobre uno de Vaya al asistente de fotogramas clave y seleccione fotogramas clave inversos. Ahora hemos invertido la animación de los últimos fotogramas clave. A continuación, a partir de este punto, medida que regresa la esfera amarilla, necesitamos invertir la escala de la letra. Nuevamente, seleccionaremos ambos fotogramas clave del parámetro scale y los pegaremos a la posición del indicador de tiempo, ya que aquí es donde comienza a regresar la esfera amarilla. Ahora invertiremos estos fotogramas clave usando fotogramas clave inversos. Veamos cómo se ve todo junto. Bien, ahora quiero enseñarte otro atajo útil. En lugar de colocar manualmente el indicador de tiempo al comienzo de la línea de tiempo, simplemente podemos presionar la tecla home. Usuarios de Mac, presten atención a las teclas que necesitan presionar. Genial, y ahora aprendamos cómo podemos mejorar nuestra animación. Pero antes de eso, recomiendo encarecidamente tomar un descanso de diez minutos. Levante de su silla, haga algunos estiramientos ligeros, haga un poco de té o café, y vuelva a refrescarse para la siguiente parte. 7. Mejora la animación: Ahora, mejoraremos la animación convirtiendo los de fotogramas clave lineales a fotogramas clave fáciles de Ease Easyse es una característica en secuelas que ayuda a crear una animación más suave y natural Funciona desacelerando gradualmente y acelerando la animación entre dos fotogramas clave, haciendo que el movimiento sea más orgánico y menos Cubro este tema en profundidad en el curso gratuito que mencioné al inicio de este curso. Si alguno de ustedes quiere aprender más al respecto, son más que bienvenidos a verlo. Puedes encontrar el enlace al curso gratuito en la descripción a continuación o en el archivo PDF. Eso está en la carpeta principal del curso que me descargaste. Entonces, para convertir los fotogramas clave a ESEs, necesitamos seleccionar todos los fotogramas clave Haga clic derecho sobre uno de ellos. Vaya a Asistente de fotogramas clave y elija Ess. O podemos usar el atajo F nueve. Hagamos esto y veamos qué tenemos. Como puede ver, el icono de los fotogramas clave ha cambiado. Presionemos la barra espaciadora y veamos cómo se ve. En tanto, hay una diferencia muy pequeña con respecto a la animación que teníamos antes. Intentemos mejorar aún más la animación cambiando la velocidad de la animación a lo largo del tiempo. Esto lo haremos con la ayuda del editor de grafos. Veamos cómo hacerlo. Selecciona solo los fotogramas clave de esta capa para que podamos ver la diferencia con respecto a las otras capas Ahora, vamos a dar clic en el editor de grafos. Después haga clic derecho para asegurar que estamos en el gráfico de velocidad. Asegúrese de que este icono esté seleccionado. Si ves la gráfica ligeramente diferente a la mía, haz clic aquí, y verás todos los fotogramas clave. Alejemos un poco. Ahora, volvamos a seleccionar los fotogramas clave y arrastremos este identificador aquí mientras mantenemos presionada la tecla Mayús. Preste atención a los porcentajes de influencia. Debería estar alrededor del 88%. Arrastremos también el otro lado hasta que llegue a cerca del 88%. Ahora, observe el tiempo de la animación de la esfera amarilla en comparación con los otros objetos de la escena. La duración de la animación no cambió, pero sí cambió la velocidad del objeto al inicio y al final del movimiento. Esto hace que la esfera amarilla se mueva de una manera mucho más interesante que las otras esferas. Apliquemos este movimiento a todos los objetos de la escena. Como vimos antes, cuando movimos los mangos, en realidad cambiamos la influencia de los fotogramas clave, que rondaba el 88% en ambos lados. Aprendamos a cambiar la influencia con mayor precisión sin tener que ir cada vez al editor de grafos. En primer lugar, volvamos estos fotogramas clave a flexiones regulares presionando F nueve Ahora, la influencia de los fotogramas clave ha vuelto a su estado original. A continuación, volvamos a seleccionarlos, y en lugar de ingresar al editor de grafos, simplemente mantenga pulsada la tecla Alt y haga doble clic en uno de los fotogramas clave. Esto abrirá el panel de velocidad de fotograma clave donde podemos ingresar el porcentaje de influencia Empecemos fijándolo en 85% al principio y 85% al final. Haga clic en Bien. Y si revisamos la gráfica, veremos que la influencia ahora es igual en todos los fotogramas clave Ahora cambiemos la influencia para todos los fotogramas clave. No lo hagas conmigo porque quiero explicar algo importante primero Es importante señalar que solo podemos cambiar la influencia para un tipo de parámetro. Es decir, no podemos seleccionar todos los fotogramas clave, ingresar la velocidad de fotogramas clave y cambiarlos todos al 85% a la vez. Tenga en cuenta que aunque los seleccioné todos y los cambié, si comprobamos la influencia de estos fotogramas clave, veremos que en realidad no ha cambiado No podemos seleccionar dos parámetros diferentes. Necesitamos seleccionar el parámetro de escala o el parámetro de rotación. En el curso gratuito, aprendemos a cambiar la influencia de todos los parámetros a la vez usando un script libre. Para aquellos que quieran comprobar esto, son bienvenidos a ver el curso. Mientras tanto, practiquemos haciéndolo manualmente. Seleccionemos todos los fotogramas clave del parámetro position. Ahora, mantenga presionada la tecla Alt y haga doble clic en uno de los fotogramas clave. Entonces cambiemos la influencia a 85% sobre 85%, haga clic y repita el mismo proceso con el parámetro de rotación. Seleccionaremos esos fotogramas clave, mantendremos presionada la tecla Alt y doble clic en uno de los fotogramas clave Cambiaremos la influencia a 85% sobre 85% y click. Hagamos lo mismo para el parámetro scale. Necesitamos seleccionar los fotogramas clave del parámetro scale, mantener presionada la tecla Alt y hacer doble clic en uno de los fotogramas clave. Cambiaremos la influencia a 85% sobre 85% y click. También necesitamos hacer lo mismo para la ruta de la letra a. así que vamos a seleccionar todos los fotogramas clave del parámetro path. Mantenga pulsada la tecla Alt y haga doble clic en uno de los fotogramas clave. Cambiaremos la influencia a 85% sobre 85% y daremos clic en Bien. Por último, veamos cómo se ve todo junto. Se ve genial para detener la vista previa, necesitamos presionar la tecla de espacio. Entonces para volver al inicio de la línea de tiempo, necesitamos presionar la tecla home. Ahora, asegúrate de que no estamos seleccionando ninguna capa, luego presiona para cerrar todas las capas. A continuación, necesitamos restaurar todas las capas ocultas, deshabilitar Shi para todas ellas y continuemos con la lección para aprender a renderizar la animación que creamos como un archivo lot. 8. Convierte la animación a LOTIE y archivos JSON: Entonces, para poder exportar nuestra animación en un archivo que sea adecuado para aplicaciones y sitios web, necesitamos instalar el enchufe gratuito de Lotti Antes de hacerlo, guardemos el proyecto presionando los controles. Después de eso, cierre el proyecto y proceda a instalar el enchufe. Primero, tenemos que ir al sitio web oficial de Lotti. Puedes encontrar el enlace en la descripción de las lecciones o en el documento PDF ubicado en la carpeta principal del curso que descargaste de mí. O puedes buscar archivos Lotti en Google y visitar el primer sitio web Ahora regístrate en el sitio web. Una vez que esté registrado, vaya a diseñar y seleccione Crear con After Effects. Ahora, aprenderemos dos formas diferentes de instalar el enchufe. El primer método es usar Adobe Creative Cloud, mientras que el segundo método es adecuado para aquellos que no tienen una cuenta de Adobe Creative Cloud. Importante tener en cuenta que ambos métodos son idénticos tanto para los usuarios de Mac como para los de Windows. Comenzaré con el primer método desde mi PC, y después mostraré el segundo método usando mi Macbook. Comencemos con el primer método y hagamos clic aquí. Debes asegurarte de haber iniciado sesión en tu cuenta. Ahora haz clic en Administrar e instalar el plug in usando la aplicación Creative Cloud. Puedes abrir la app desde aquí o buscarla en tu computadora. Si no tienes esta aplicación, puedes acceder a Creative Cloud a través del navegador de Internet y descargar la versión de escritorio. Como ya tengo la app, no volveré a descargarla. Después de descargar e instalar la aplicación, inicie sesión en su cuenta, vaya a stock y mercado, luego futuro en. Ahora escribe en la barra de búsqueda e instala la versión para efectos posteriores. Haga clic y espere unos momentos. Ahora pasemos al segundo método. Este proceso es idéntico tanto para usuarios de Mac como de Windows. Lo primero que tenemos que hacer es hacer clic aquí y descargar el archivo ZXP Si intentamos abrir este archivo, no lo lograremos. Para instalar este archivo, necesitamos usar el Administrador de extensiones. Podemos encontrar el enlace para descargar la extensión en la guía de instalación de archivos Li. Ahora, si nos desplazamos hacia abajo, veremos un enlace al sitio web de Anastas Extension Manager Vamos a hacer clic en el enlace. Descarga la versión que más nos convenga. Ya que estoy haciendo esto usando mi Macbook, descargaré esta versión. Ahora, vamos a extraer este archivo y eliminar el archivo zip o win. A continuación, abramos la extensión. Si estás usando una Mac, puedes marcar mover la carpeta de dos aplicaciones. Aquí, puede seleccionar verificar automáticamente. Ahora deberías ver los nombres de los programas de Adobe instalados en tu computadora. Escojamos después de los efectos. Y ahora para instalar el plug in, solo necesitamos arrastrar el archivo ZXP a la extensión Haga clic y espere unos momentos. Después haga clic de nuevo. El plug in ya está instalado con éxito, y podemos verlo en after effects. Se puede cerrar la extensión y otras ventanas y volver a nuestro proyecto. Después de instalar el plug in, volvamos a la carpeta que creamos para la carpeta y a la carpeta AE y abramos nuestro proyecto. Ya puedes cerrar este panel. A continuación, vamos a abrir el enchufe. Vaya a la ventana, luego a las extensiones, y elija Lottie files Da click en él y se abrirá el panel de Lottie. Ahora, vamos a registrarnos a través del navegador. Después de eso, puedes cerrar el navegador y volver a nuestro proyecto. Aquí, podemos ver el nombre de la composición en la que estamos trabajando. Y ahora, da clic en el botón verde y espera a que el Lotti esté listo Y aquí podemos ver que nuestra animación está lista. Por cierto, podemos agarrar este panel desde aquí y adjuntarlo aquí para mayor comodidad. Ahora vemos que tenemos una nota de error. Si hacemos clic en él, veremos los errores que tenemos. Debido a estos errores, la animación no funcionará en los dispositivos que se muestran aquí. Empecemos arreglando el error del archivo lottie para la web. Podemos volver aquí a la composición y hacer algunos cambios. Lo primero que haremos es eliminar las capas de texto en vivo. Para ello, podemos convertir estas capas de texto en formas con trazado como hicimos para la letra A. Seleccionaremos la capa que queremos cambiar. Haga clic derecho, vaya a crear y elija Crear formas a partir del texto. Ahora podemos eliminar esta capa de texto y cambiar el color a rojo para saber que esta capa pertenece a este grupo. Hagamos lo mismo para las siguientes dos capas de texto. Ahora podemos eliminar este texto capa dos. No hay necesidad de cambiar el color aquí porque ya es azul. Hagámoslo una vez más para esta capa. Haga clic con el botón derecho, cree y elija Crear formas a partir del texto. Ahora eliminaremos la capa de texto y cambiaremos el color a amarillo. Ahora, tenemos que deshacernos de los caminos de fusión. Después de convertir la capa de texto en una capa conformada, se crea un parámetro llamado merge paths, que necesitamos eliminar para que funcione el archivo lottie Podemos encontrar rutas de fusión debajo de los contenidos. Selecciónelo y presione retroceso o eliminar. Ahora, en lugar de abrir cada capa manualmente, simplemente podemos seleccionar las capas relevantes. Y ahora, escriba merge en la barra de búsqueda y vea todas las rutas de fusión existentes en el proyecto. Borrémoslos todos. Y ahora podemos volver a hacer clic en la flecha verde. Como puede ver, el mensaje de error desapareció. Ahora, abordemos otro tema que tenemos. Tenga en cuenta que cuando termina la animación, vemos que toda la escena se queda quieta. Es decir, tenemos muchos marcos innecesarios donde no vemos ningún cambio. Para solucionar esto, necesitamos acortar la duración de nuestra composición Volvamos a la composición y veamos dónde termina exactamente nuestra animación. Para saber exactamente dónde termina, necesitamos encontrar el último fotograma clave en esta escena Para ello, necesitamos ver todos los fotogramas clave en el proyecto. Pregunta, qué tecla debemos presionar para ver todos los fotogramas clave de todas las capas. Entonces, para lograrlo, asegurémonos de que no estamos seleccionando ninguna capa y presionemos la tecla U. Si ampliamos el panel, veremos dónde se encuentran los últimos fotogramas clave. Aquí está en los seis segundos. Tenemos que acortar el área de trabajo a los seis segundos. Podemos hacerlo manualmente arrastrando el área de trabajo o usando la tecla n, lo que acortará el área de trabajo a la ubicación del indicador de tiempo Y si pulsamos de nuevo el botón crear, veremos que la animación ahora se reproduce en un bucle perfecto. Bien. Ahora aprendamos a renderizar esta animación en un archivo Lotti o JSON También aprenderemos cómo podemos previsualizar la animación que creamos en un navegador web o en un dispositivo móvil. Para renderizar la animación, haga clic aquí y elija en qué formato renderizarla. Pero antes de eso, veamos cómo se ve en el navegador web y en un dispositivo móvil. Para ello, hagamos clic en Subir. Ahora vemos el nombre de nuestra composición. Aquí, elegimos en qué carpeta guardarlo en la cuenta de Lotti en la que nos registramos Vamos a hacer clic en subir. Espera unos segundos. Ahora volvamos al sitio web de Lotti. Si ya te has registrado, puedes dar click aquí, ir a mi dashboard, y ver la animación que acabamos de crear. Vamos a abrirlo y ver cómo se ve. Desde aquí, puedes ver cómo aparece en un teléfono o tableta simplemente abriendo la cámara y escaneando este código QR. A partir de ahí, podemos renderizar la animación en un archivo JS ligero. También podemos descargarla desde aquí como un archivo lottie que pesa aún menos y guardarlo en tu computadora Sin embargo, cerremos esto porque renderizaremos la animación a través de los efectos posteriores. Otra consideración importante antes de renderizar es cómo aparecerá tu animación en diferentes colores de fondo. Al sujetarlo, puede realizar los ajustes que mejor se adapten a sus Al presionar este botón, podemos ver la animación en modo de pantalla completa. En mi opinión, se ve fantástico. Bien, presiona el botón de escape, y volvamos a los efectos posteriores y continuemos renderizando la animación. Vamos a hacer clic aquí y renderizarlo como archivo JSON. Guardaremos el archivo en la carpeta de muestras que creamos anteriormente. Asegúrate de que el nombre sea bueno. Es el mismo nombre que la composición. Estoy bien con eso, así que voy a hacer clic en Guardar. Ahora abramos nuestra carpeta de muestras y revisemos el render. El archivo está ahí, y pesa sólo 32 kilobytes. Ahora vamos a guardarlo como un archivo de lote. Ya estamos dentro de la carpeta de muestras. Esta vez, la extensión es L, lo cual es genial. Vamos a hacer clic en Guardar. Volvamos a nuestra carpeta, la refresquemos, y podemos ver que el archivo Lotti pesa 5 kilobytes Estos son los archivos que puedes enviar a tu cliente o a un programador o a quien esté trabajando en tu sitio web o aplicación. Ahora, volvamos al proyecto y continuemos con la lección. En cuanto al plug in, o bien podemos arrastrarlo aquí para que no nos moleste. Libéralo del panel, o ciérrelo de esta manera. Ahora preparemos nuestra animación para compartirla en las redes sociales y en tu portafolio. 9. ¡Crea la animación para compartir en tu cartera!: Entonces, para poder compartir la animación que creamos en redes sociales y en nuestro portafolio. Tenemos que renderizarlo en un archivo MP four. Entonces ahora aprendamos a renderizar esta animación con un fondo como un archivo MP four de alta calidad. Como pueden ver, el fondo que tenemos aquí no es un trasfondo real. Se hace sólo para la pantalla de vista previa. Para crear un fondo real, necesitamos crear un nuevo sólido haciendo clic derecho sobre esta área gris. Iremos a nuevo y seleccionaremos sólido. O podemos usar el atajo Control Y. Así que vamos a presionar control y y crear una nueva capa sólida. Ahora, vamos a elegir el color del sólido. Antes de presionar bien, asegurémonos que el sólido será del mismo tamaño que la composición. Podemos hacer clic aquí para que suceda, y ahora presionemos bien. Aquí está el sólido. Vamos a arrastrarlo por debajo de todas las capas. Antes de renderizar, nos aseguramos de que el área de trabajo termine a tiempo para evitar renderizar piezas innecesarias. Y ahora para renderizar el video, navegamos hasta la composición y elegimos agregar dos render Q. Ahora estamos en el panel de render after effects donde podemos ver qué composición estamos renderizando. Aquí, seleccionamos el formato de archivo que queremos renderizar el video dos. Vamos a elegir H 0.2 64, que es MP cuatro archivo. En las opciones de formato, elegimos VBR y nos aseguramos de que se seleccione la codificación por hardware Aquí elegimos la calidad del MP four. Ponlo a 40. Esto renderizará un tamaño de archivo un poco más grande, pero con mejor calidad de video. Ahora haga clic y elija dónde guardar el renderizado. Seleccionemos la carpeta de muestras que creamos y usemos el mismo nombre que la composición para el archivo. Finalmente, hacemos clic en Guardar y luego el botón de renderizado para comenzar el proceso de renderizado. Ahora, esperemos un par de segundos. Y ahora para ver el render, podemos o bien encontrar la carpeta manualmente o dar click en el enlace aquí en el modo de salida. Esto nos llevará directamente a la carpeta donde se renderiza el video. Abramos el video y veamos cómo se ve. Se ve genial. Ahora puedes compartir la animación que creaste en redes sociales y mostrarla en el sitio web de tu portafolio. Y si disfrutaste el curso, realmente te agradecería que califiques este curso de acuerdo a tu experiencia. Además, no olvides dejar comentarios, así sé si aprendes algo interesante en el curso o no. Bien, volvamos a nuestro proyecto. Volvamos a la composición, y antes de salir del proyecto, vamos a guardarlo. Presiona los controles. Y ahora puedes cerrar el proyecto y unirte a mí a la siguiente lección donde aprenderemos a crear una animación genial y usarla como firma de correo electrónico. Estoy muy orgullosa de ti. Hoy aprendiste mucho. Puedes compartir tu animación en nuestro grupo comunitario privado. Y claro, puedes hacerme preguntas ahí. Prometo responder a cualquier duda que tengas. Espero que lo hayas disfrutado, y antes de saltar a la siguiente lección, recomiendo encarecidamente que te tomes un descanso de diez minutos. Levante de su silla, haga algunos estiramientos ligeros, tome una taza de café y recargue su cerebro para la siguiente lección. Bien. 10. Sección 1: tarea de proyecto: Todo bien. Y ahora a practicar lo que aprendimos. Por favor, cree esta animación. Puedes usar colores diferentes a los míos, pero trata de mantener la animación igual. Esta tarea está destinada a ayudarte a recordar y entender lo que has aprendido. No te preocupes. La tarea no va a tomar demasiado de tu tiempo. Está diseñado para ser factible en solo 2 horas. Si tienes algún problema o duda, no dudes en pedirme ayuda a mí o a tus compañeros de clase en nuestro grupo comunitario cerrado M 11. Sección 2: firma con Gmail animado: Hola a todos, y gracias por volver a acompañarme. En esta lección, crearemos una animación súper genial que se convertirá en una firma de correo electrónico profesional. Esta vez, nuestra animación estará compuesta por tres partes animadas separadas. Aprenderemos el flujo de trabajo correcto al trabajar en proyectos un poco más complicados. Esta lección se divide en seis partes en las que aprenderemos. En la primera parte. Diseñaremos la primera parte animada de la animación y aprenderemos a crear una plataforma básica para controlar la forma que hemos creado fácilmente. En la segunda parte. Aprenderemos a agrupar todas las capas en un solo grupo, y aprenderemos sobre el concepto de precomponer Después seguiremos animando la escena en la tercera parte Diseñaremos y animaremos la segunda parte animada de la animación Usaremos y aprenderemos un efecto genial. Después crearemos la tercera parte animada y sincronizaremos entre todas las partes. En la cuarta parte. Prepararemos la animación que creamos para renderizar y aprenderemos a crear un archivo de regalo usando Photoshop. En la quinta parte. Aprenderemos a diseñar la firma de Gmail usando Google Docs. Aprenderemos a transferir la firma que creamos a la cuenta de Gmail. Luego identificaremos cualquier problema potencial que podamos encontrar y resolveremos los problemas y exportaremos un archivo de regalo adecuado. En la sexta parte. Prepararemos la animación que creamos para compartirla en redes sociales y renderizaremos la animación que hicimos en un archivo MP four de alta calidad. Por último, organizaremos el proyecto antes de cerrarlo. Después de eso, al final de la lección, obtendrás una pequeña tarea para que hagas. La tarea está destinada a ayudarte a recordar y entender lo que has aprendido. No te preocupes. La tarea no va a tomar demasiado de tu tiempo. Está diseñado para ser factible en solo 2 horas. Si tienes algún problema o duda, no dudes en pedirme ayuda a mí o a tus compañeros de clase en nuestro grupo comunitario cerrado Todo bien. Basta con la plática. Empecemos. 12. Empecemos a diseñar la escena: Entonces primero, abramos el software After effects. Podemos salir de esta ventana, ampliar la ventana del software, y ver los mismos diseños de panel. Vamos a hacer clic en default. Ahora, vamos a hacer clic en nueva composición y crear nuestra primera composición. Lo llamaremos animación para Gmail. Trabajaremos en un formato cuadrado de diez 80 por diez 80 píxeles a una velocidad de fotogramas de 30 fotogramas por segundo. La duración de la composición será de 10 segundos. Podemos dejar el color de fondo en blanco y hacer clic. Genial, ahora que hemos creado nuestra primera composición, necesitamos guardar el proyecto y darle un nombre. Vamos a la carpeta que creamos para la lección. Entraremos en la carpeta A y nombraremos el archivo after effects en el que estamos trabajando ahora mismo. Podemos darle el mismo nombre que nuestra composición principal. Ahora, hagamos clic en guardar. Ahora, vamos a importar la paleta de colores al proyecto. Para ello, haremos doble clic en el área gris en el panel del proyecto. Ahora encontraremos la carpeta que creamos para la lección e ingresaremos a la carpeta assets. Seleccionaremos la paleta de colores y daremos clic en importar. Después de eso, arrastremos la paleta a la composición, presionemos y establecemos el tamaño de la capa en 30. Lo colocaremos aquí, para que no nos moleste. Podemos bloquear la capa y ocultarla del panel de capas. Para los que no vean el ícono tímido, pueden dar click aquí. Seleccionemos la capa como capa oculta y la ocultemos haciendo clic en el icono aquí. Ahí, esta capa está oculta del panel de capas, pero aún podemos verla en la pantalla. Bien, ahora comencemos a crear nuestra escena. Lo primero que haremos es seleccionar la herramienta rectángulo. Apagaremos el relleno. Seleccionaremos el trazo y el color oscuro de nuestra paleta. Y ahora crearemos el rectángulo mientras mantenemos el turno para crear una forma simétrica. El punto de anclaje de la forma se coloca automáticamente en el centro porque seleccionamos esta función en las preferencias. Para aquellos cuyo punto de anclaje no está en el centro de la forma, puede seleccionar la herramienta de punto de anclaje y arrastrar el punto de anclaje al centro de la forma mientras mantiene presionado el control. No olvides volver a la herramienta de selección. Ahora saquemos la grilla presionando la tecla apóstrofe para ver el centro de la composición Ahora alineemos la capa al centro de la composición usando la herramienta de alineación. Haga clic aquí y aquí. Ahora, dejemos libres las esquinas de esta forma para que podamos mover cada una por separado. Para ello, necesitamos convertir el camino de esta forma en un camino más bezier Vamos a abrir el contenido de la capa. Abre el rectángulo hasta que veamos el camino del rectángulo. Haga clic derecho sobre él y elija convertir ruta Tobi. Ahora, si seleccionamos la herramienta pluma y seleccionamos una de las esquinas, podremos moverla por separado así. Ahora, necesitamos usar un script gratuito de Aftereffects. Eso nos ayudará a mover los puntos de una manera más conveniente. Pero antes de usar el script, necesitamos abrir la ruta y seleccionarla. Ahora podemos volver a la herramienta de selección. Ahora podemos ir a la ventana, desplazarnos hacia abajo y elegir abrir el script llamado create nulls from paths Mientras se selecciona la ruta, tenemos que hacer clic en los puntos seguir rutas. Ahora ya sea podemos cerrar el panel o moverlo aquí. También podemos cerrar la ventana desde aquí. Ahora tenemos cuatro nulos, que son cuatro capas vacías que nos permiten controlar las esquinas de nuestra forma Ahora vamos a crear las pequeñas esferas que se supone que están en las esquinas de la forma. Asegurémonos de no seleccionar ninguna capa. Haga clic y mantenga presionada la herramienta de rectángulo y seleccione la herramienta de elipse Cambiemos el color a azul y apaguemos el trazo. Bien. Crearemos la esfera mientras mantenemos presionada la tecla Mayús para que sea simétrica. Bien. Ahora cambiemos el nombre de la capa. Lo seleccionaremos y presionaremos enter. Llamémoslo esfera uno. Presiona enter para finalizar la acción. Porque cambiamos el nombre. Ahora podemos ver los nombres secundarios de nuestras capas. Para volver a ver los nombres normalmente. Vamos a hacer clic aquí. Ahora, coloquemos la primera esfera junto al primer nulo. Porque pronto controlaremos y animaremos las esquinas de la forma desde las esferas y no desde los nulos Seleccionemos el nulo para ver dónde se encuentra. Ahora vamos a trasladar la esfera a esta zona. Volvamos a las herramientas de selección que podamos mover las capas en la composición, y movamos la esfera aquí. Nuestro objetivo es ubicar el punto de anclaje de la esfera para que se ubique exactamente en la esquina de la forma. Para ello, podemos usar la función de ajuste. Demos clic aquí y activemos las dos funciones ubicadas al lado de ella. Ahora cuando movemos la esfera desde su centro, ésta se moverá de manera chasqueante Soltaremos el ratón cuando veamos que la esfera se ha colocado donde la queremos. Ahora vamos a duplicar esta esfera usando el control de atajo D. Vamos a moverla un poco hacia abajo y colocarla junto a este nulo. Cambiemos también la posición de la capa en el panel de capas para mayor comodidad. Ahora vamos a agarrarlo desde su centro y moverlo hacia la esquina de la forma. Duplicemos nuevamente la forma usando el control D. Muévela a la ubicación de este nulo y coloque la esfera junto a ella en el panel de capas. Ahora vamos a moverlo a la esquina de la forma. Repitamos esta acción por última vez. Control D para duplicar. Mueve la esfera a la esquina de la forma y colócala junto a este nulo en el panel de capas. Ahora podemos cancelar el chasquido y continuar. Como ustedes saben, movemos el camino de nuestra forma usando los nulos Ahora quiero mover el camino usando las esferas y no los nulos Podemos conectar el nulo y la esfera usando la función parent y link. La crianza y la vinculación son herramientas poderosas y efectos posteriores que permiten controlar el movimiento de una capa o propiedad en función del movimiento de otra. La crianza de los hijos es una relación entre dos capas en las que una capa, el niño se une y sigue el movimiento de otra capa, la padre. Cuando se padre una capa a otra capa, cualquier movimiento o transformación aplicada a la capa padre también se aplica a la capa secundaria. Esto es útil para crear animaciones complejas, como personajes o vehículos, donde el movimiento de una parte afecta el movimiento de otra. La vinculación, por otra parte, es una relación más flexible que permite controlar una propiedad o parámetro de una capa en base a otra. Cubro este tema en profundidad en el curso gratuito que mencioné al inicio de este curso. Si alguno de ustedes quiere aprender más al respecto, son más que bienvenidos a verlo. Puedes encontrar el enlace al curso gratuito en la descripción a continuación o en el archivo PDF. Eso está en la carpeta principal del curso que me descargaste. Entonces todo lo que tenemos que hacer ahora es simplemente arrastrar el látigo pick de la capa nula a la capa de esfera Ahora se puede ver que cuando movemos la esfera, ésta mueve el camino. Hagamos lo mismo con el resto de los nulos. Conectaremos el nulo tres a la esfera tres. Mira que funcione. Entonces haz lo mismo con nulo dos y esfera dos, nulo uno y esfera uno. Ahora ya no necesitamos ver estos nulos, por lo que podemos seleccionarlos todos haciendo clic en su etiqueta, eligiendo seleccionar grupo de etiquetas y ocultarlos todos del panel de capas Ahora, etiquetemos la capa de forma con cualquier color para diferenciarla de las capas de esfera. Entonces, después de que creamos nuestra escena y controlamos el camino de la forma a través de las esferas, estamos listos para seguir adelante y comenzar a animar la escena. Bien. 13. Aprende a agrupar capas ( ): Todo bien. Entonces primero, seleccionemos todas las esferas. Seleccionaremos la primera esfera, luego mantendremos presionada la tecla Mayús y seleccionaremos la última esfera. En esta etapa, sé que las esferas mi animación necesitan colocarse donde están ahora mismo. Digamos que sucederá en el segundo número uno. Ahora presionaremos P para abrir el parámetro position y crear un fotograma clave. Y ahora en el segundo cero, que está al inicio de la animación, quiero que aparezcan desde el centro. Podemos colocarlos en el centro usando la herramienta de alineación. Solo asegúrate de que la alineación esté de acuerdo con la composición, y luego haz clic aquí y aquí. Se crearon automáticamente nuevos marcos clave con la nueva ubicación de las esferas. Entonces lo que va a pasar ahora es que en el segundo número cero, las esferas estarán aquí y en segundo número uno las esferas llegarán hasta aquí. Ahora, en el segundo número dos, quiero que las esferas vuelvan al centro. Podemos hacerlo usando de nuevo la herramienta align. Genial, y ahora vamos a mejorar la animación. Pregunta, ¿cómo podemos hacer que nuestra animación sea más interesante? Para ello, seleccionemos todos los fotogramas clave y conviértelos a una facilidad fácil presionando la tecla F nine Todo lo que queda por hacer ahora es crear un offset para la animación de las esferas para que no todas se muevan juntas al mismo tiempo. Decidamos que las cuatro esferas irán primero, así seleccionaremos todas las demás esferas. Ahora nos moveremos con el indicador de tiempo cuatro fotogramas hacia adelante y moveremos los fotogramas clave aquí También podemos seleccionar los fotogramas clave que queremos mover en el tiempo y moverlos usando un atajo genial. Mantendremos la tecla alt y moveremos los fotogramas clave hacia un lado usando las flechas del teclado Hagámoslo con estos fotogramas clave, también. Mantenga presionada la tecla alt y mueva los fotogramas clave cuatro fotogramas hacia adelante con la flecha derecha Bien, veamos qué tenemos. Luce dulce. Vamos a cambiar el grosor del trazo muy rápido. Seleccionaremos la capa y cambiaremos el grosor del trazo a diez o incluso 12. Sí, 12 se ve mejor. Entonces, después de terminar la primera parte animada y antes de ir más lejos, agrupemos todas las capas relacionadas con la animación de la primera parte animada en un solo grupo. En los efectos posteriores, llamamos a esto precomponer. precomosing es una técnica utilizada para agrupar capas y tratarlas como una Es una herramienta muy útil en after effects que puede simplificar tu línea de tiempo y ayudarte a organizar tu proyecto. Luego puede tratar esta capa precompuesta como cualquier otra capa en su composición y aplicarle efectos, transformaciones y otros ajustes Cubro este tema en profundidad en el curso gratuito que mencioné al inicio de este curso. Si alguno de ustedes quiere aprender más al respecto, puede encontrar el enlace al curso gratuito en la descripción a continuación o en el archivo PDF. Eso está en la carpeta principal del curso que me descargaste. Bien, entonces veamos cómo se hace. Primero, ocultemos todos los fotogramas clave. Asegúrate de que no seleccionamos ninguna capa y te presionamos. Ahora, vamos a mostrar los nulos que golpeamos antes porque tienen un papel esencial en esta parte animada Seleccionemos todas las capas, excluyendo la paleta de colores ya que no forma parte de esta parte animada. Bien, ahora vamos a seleccionar las capas relevantes. Haga clic derecho sobre uno de ellos y elija precomponer o use el atajo Control Shift C. Por ahora, hagamos clic en precomponer Lo llamaremos animación subrayado uno. Ahora, asegurémonos de que ambos estén seleccionados y presionemos bien. También podemos ver la precomp que hicimos en el panel del proyecto. Nada ha cambiado en la animación, y si hacemos doble clic en la precomp, podemos ingresarla. Apaguemos el fondo y la cuadrícula. Podemos volver a usar la función shy para ocultar los nulos y continuar la lección Ahora, volvamos a nuestra composición principal. Como puedes ver, el tamaño de esta precomp es el mismo que el de la composición principal En realidad no necesito que esta precomp sea de este tamaño porque hay mucho espacio vacío aquí hay mucho espacio vacío. Voy a apagar la red. Como no necesito todo este espacio, necesito disminuir el tamaño de la precomp Para ello necesitamos entrar en la precomp y cambiar su configuración Para llegar a los ajustes de composición, presionaremos el control K. Ahora, asegurémonos de que la vista previa esté seleccionada y disminuya el tamaño. Lo cambiaremos a 800 píxeles por 800 píxeles. Asegurémonos de que no lo hice demasiado pequeño. Y cuando volvamos a la composición principal, veremos que ahora disminuimos el tamaño de la pre comp y esto hará que nuestro trabajo sea más conveniente. La precomp que creamos automáticamente se convierte en una capa regular después de los efectos Como cualquier capa y después de los efectos, la capa precomp tiene los parámetros básicos En este caso, animaremos el parámetro scale para que nuestra animación sea más interesante Para ver el parámetro de escala, seleccionemos la capa y presionemos. Podemos ocultar la paleta de colores para que no se interponga en nuestro camino. Ahora decidamos que al inicio de nuestra animación, el tamaño de la precomp será cero Entonces crearé un fotograma clave con este valor. Encuadro 15, esta capa crecerá al 100%. Ahora vamos a seleccionar los fotogramas clave y convertirlos en ECes usando F nine. Veamos cómo se ve. Bien. Ahora vamos a disminuir el tamaño de esta capa cuando termine la animación dentro de esta pre comp. Vamos a llegar al segundo número dos. Como aprendimos en la lección anterior, podemos copiar estos fotogramas clave usando Control C y pegarlos en lugar del indicador de tiempo usando Control V. Ahora volteémoslos con un clic derecho sobre uno de ellos, vaya al Asistente de fotogramas clave y seleccione fotogramas clave inversos de tiempo Comprobemos que el tiempo de la animación de reducción coincida con la animación. Creo que debería empezar a disminuir un poco antes por aquí. Entonces vamos a mover los fotogramas clave aquí. Bien, ahora vamos a comprobarlo otra vez. Todo bien. Sigamos adelante. Como puedes ver, la animación de esta capa ya está terminada aquí. Es decir, a partir del segundo, no vemos nada, pero la duración de esta precomp es muy larga Realmente no necesitamos toda esta longitud. Aprendamos a acortar la precomp. Iremos al final de la animación y arrastraremos la capa por su esquina así o podremos acortar la precomp de verdad Para ello, tenemos que entrar en la precomp. Ahora necesitamos encontrar el punto en el tiempo en el que termine la animación. Ahí es donde está nuestro último fotograma clave. Para eso, nos aseguraremos de que no seleccionemos ninguna capa y te presionaremos. Aquí está el último fotograma clave. Colocaremos el indicador de tiempo aquí y llevaremos el área de trabajo en lugar del indicador de tiempo manualmente. O usando el atajo que hemos aprendido. Prensa. Ahora para deshacernos de toda la longitud innecesaria, necesitamos hacer clic derecho en la parte gris del área de trabajo y seleccionar recortar comp tio área de trabajo. Y aquí, el largo se hizo más corto. Y si volvemos a la composición principal, veremos que la longitud de este prec es más corta Veamos cómo se ve. Lo único que queda por hacer es mover estos fotogramas clave hasta el final de la precomp Ahora, quiero crear la misma animación, pero con pequeños cambios en el color de las esferas y el grosor del trazo conformado. Podemos duplicar la animación y hacer todo lo que planeamos. Veamos qué pasa si duplico esta precomp a través del panel de capas Ahora entraré en la precomp y cambiaré el color de una de las esferas Cuando vuelva a la composición principal, veré que el color ha cambiado en ambos precomps, que no es lo que yo quería Yo solo quería cambiar el color en esta precomp y no en la otra Bien. Presionaré el control Z para deshacer mis acciones, y veamos cómo hacerlo correctamente. Lo que hay que hacer no es duplicar la precomp de este panel, sino a través del panel del proyecto Por si tenemos muchos precomps en el proyecto y queremos encontrar uno específico Podemos hacer clic derecho sobre la precomp que queremos encontrar, ir a revelar y seleccionar revelar fuente de capa y proyecto Ahora pulsaremos Control D para duplicar esta precomp. La precomp no se encuentra actualmente en nuestra composición principal porque aún no la hemos arrastrado allí Podemos hacer eso después de hacer los cambios que planeamos. Por ahora, entremos a esta precomp desde aquí. Ahora vamos a seleccionar nuestra paleta de colores a través del panel del proyecto para ver los colores. Seleccionemos todas las esferas y cambiemos sus colores usando el cuentagotas Vamos a probar el color rojo de nuestra paleta. Después de eso, podemos cambiar el color de nuestro trazo conformado a amarillo. También establecemos el ancho del trazo en ocho. Podemos restaurar el fondo para ver cómo se ve. Ahora vamos a disminuir el tamaño de las esferas en esta precomp Cerraré todas las capas y mostraré el parámetro de escala solo para esta capa. Mira qué pasa cuando cambiamos el tamaño de esta capa. Debido a que está vinculado al nulo y el nulo está vinculado al camino, esto arruina el diseño de la forma. Veamos cómo hacer esto correctamente. Vamos a abrir la capa. Dentro de las capas de forma. Hay dos lugares donde podemos controlar el tamaño de la forma. Podemos controlar el tamaño de la forma usando las propiedades básicas de transformación de la propia capa. No obstante, encontramos que esta vez no funcionó para nosotros. Afortunadamente, en las capas de forma, también hay propiedades básicas de transformación para la forma dentro de la capa, que se llama elipse uno De esta manera, nuestra forma se encogerá adecuadamente. Así que vamos a reducir todas las esferas a través las formas transformadas y no las capas transforman. Vamos a encogerlo a tal vez 50. O 80. Creo que 60 sería la mejor opción. Hagamos lo mismo para el resto de las esferas. Para no abrir manualmente la transformación para cada esfera, simplemente podemos seleccionar las capas que queremos reducir y escribir scale en la barra de búsqueda, luego presionar enter. Ahora, vemos que cada capa tiene dos tipos de escala, las formas se transforman y las capas se transforman. En nuestro caso, usaremos la escala conformada. Escribamos 60 aquí. Ahora, podemos eliminar la palabra de la barra de búsqueda y continuar. Ahora volvamos a nuestra composición principal y arrastremos aquí la nueva precomp Apaguemos esta precomp para ver la nueva. Como puedes ver, esta precomp no tiene la animación a escala que existe en la primera Podemos seleccionar el parámetro desde aquí. De esta manera, seleccionaremos todos sus fotogramas clave. Ahora vamos a darle a Control C para copiarlos. Entonces podemos pegarlos en el nuevo pre. Presionemos control V. Ahora, presionemos S para ver el parámetro de escala y los fotogramas clave que acabamos de pegar. Tenga en cuenta que los fotogramas clave se pegaron en el mismo lugar donde estaba el indicador de tiempo Movamos los fotogramas clave al inicio de la precomp. Por último, volvamos a encender la primera precomp. Todo bien. Sigamos adelante. Ahora, crearemos un desplazamiento entre estos dos precomps. Seleccionemos esta capa y la movemos hacia adelante en el tiempo. Veamos qué tenemos. Se ve genial. Simplemente coloquemos esta capa debajo de la primera. Ahora, para crear una animación más interesante. Vamos a crear una animación de rotación para la primera precomp. Para ello, vaya al inicio de la animación y pulse R para abrir el parámetro de rotación. Ahora, vamos a crear un fotograma clave con el valor actual, que es la rotación de cero grados. Al final de esta precomp, fijemos la capa para que gire una rotación completa Veamos cómo se ve. Ahora, seleccionaremos los fotogramas clave y los convertiremos en EASES Se ve mejor ahora Hagamos algo parecido a la segunda precomp. Iremos al inicio de esta precomp, presionaremos R, crearemos el primer fotograma clave, y esta vez, configuraremos la capa para que rote 180 grados Seleccionemos los fotogramas clave y los convertiremos a asys también Todo bien. Veamos cómo se ve todo junto. Volvamos a verlo. Se ve bien. Ahora, cerremos las capas y cambiemos ligeramente el tiempo entre las dos animaciones. Bien. Se ve bien. Y estamos listos para pasar a la siguiente parte. 14. Sigue diseñando y anima la segunda parte: Entonces ahora, vamos a crear la animación de las cinco esferas giratorias. Para ello, ingresa la primera pre comp y copia una de las esferas y pegarla en la composición principal. También copiemos la esfera de la segunda precomp. Ahora apaguemos los precomps para que no nos moleste Ahora, eliminemos la animación en estas esferas. Seleccione ambas capas, presione, seleccione los fotogramas clave y use el retroceso o la tecla de eliminación para eliminarlos de las capas A continuación, centremos estas dos esferas en la composición usando la herramienta alinear. Asegúrese de que la composición esté seleccionada. Entonces haremos clic aquí y aquí. Ahora, diseñemos toda la escena. Vamos a acercar un poco usando la rueda del ratón. Para los que no tienen rueda del ratón, puedes acercar desde aquí o presionar estas teclas. Bien, movamos esta esfera aquí mientras mantenemos presionada la tecla Mayús. Duplicemos la esfera azul y la movemos aquí. También vamos a duplicar la esfera roja y moverla aquí. Ahora, seleccionemos ambas esferas rojas con shift y etiquetemos estas capas y rosa para que podamos distinguir fácilmente entre las esferas. Ahora veamos cómo podemos comprobar si las distancias entre las esferas son iguales. Para ello, abriremos la cuadrícula proporcional presionando hacia fuera y la tecla apóstrofe Ahora tenemos que ir a editar y luego preferencias y seleccionar cuadrículas y guías Aquí, podemos cambiar el número de líneas en la cuadrícula proporcional. Pongámoslo a ocho en el eje vertical y presionemos. Ahora podemos ajustar las posiciones de las esferas según la nueva cuadrícula. Presione la sal y la tecla apóstrofo nuevamente para cerrar la cuadrícula Ahora estamos listos para animar las esferas. Así que alejemos un poco. Selecciona todas las esferas. Y ahora ir al segundo número uno. Presione P para ver el parámetro de posición y crear el primer fotograma clave. Ahora ve al segundo cero, centra todas las esferas usando la herramienta alinear. Asegúrese de que estamos seleccionando composición y haga clic aquí y aquí. Después de eso, pasa al segundo segundo y vuelve a centrar los fotogramas clave con una línea. Ahora, cortemos estas capas a la posición del indicador de tiempo porque es cuando termina la animación de estas capas. Para ello, usaremos el atajo Alt y el corchete derecho. Ahora, cambiemos los fotogramas clave para facilitar y ajustar su animación con el editor de gráficos Seleccione estos fotogramas clave y arrastre los controladores aquí. Veamos cómo se ve. Se ve bien. Ahora, coloquemos las esferas rojas debajo de las azules, cerremos las capas y sigamos adelante. Y ahora, quiero agregar una animación de rotación a todas las esferas a medida que se abren a los lados. Para ello, podemos usar un objeto nulo. En after effects, un objeto nulo es un tipo de capa que no se renderizará ni aparece en pantalla, sino que se puede utilizar como punto de referencia para otras capas de la composición. Es una capa invisible que se puede utilizar para controlar la posición, rotación, escala y otras propiedades de otras capas en la composición. Una de las principales ventajas de usar un objeto nulo es que permite controlar múltiples capas a la vez, en lugar de tener que ajustar cada capa individualmente. Por ejemplo, puede padre de varias capas a un objeto nulo y luego controlar las capas con el nulo. Estoy hablando de este tema a fondo en el curso gratuito que mencioné al inicio del curso. Para aquellos que quieran entender este tema en profundidad, no dude en ver el curso gratuito. Puedes encontrar el enlace al curso en la descripción a continuación o en el archivo PDF en la carpeta principal que descargaste de mí. Entonces hagámoslo. Haremos clic derecho aquí, vamos a nuevo y seleccionaremos objeto nulo. El nulo está centrado en la composición, y es genial. Ahora podemos seleccionar todas las esferas y vincularlas al nulo. Cortemos el nulo a la longitud de las capas de las esferas. Para ello, usaremos el atajo, Alt y el corchete derecho. Ahora lleguemos al inicio de la animación, presione R para sacar el parámetro de rotación del nulo y crear el primer fotograma clave. Pasemos al segundo número dos, y vamos a establecer que en el segundo, el nulo hará una rotación. Lo que acabamos de hacer fue agregar una animación adicional a todas las esferas con la ayuda del nulo. Por lo tanto, todas las esferas giran mientras se abren hacia los lados. Ahora hagamos que estos fotogramas clave sean fáciles cambiemos el comportamiento de animación de la rotación a algo como La rotación de nulos comenzará lentamente, y hacia el segundo fotograma clave , aumentará de velocidad. Veamos qué Gusta. Ahora, para que las esferas no sólo aparezcan al azar. Agreguemos una animación de escala al nulo. Seleccionaremos el nulo, presionaremos, pondremos su tamaño a cero al inicio de la animación. Ahora ve al segundo y ponlo 100 y vuelve a cero en el segundo número dos. Cambiaremos los fotogramas clave a *** y ajustaremos su comportamiento usando el editor de gráficos Volvamos a verlo. Se ve genial. Ahora vamos a mejorar nuestra animación con un efecto genial llamado echo. Vamos al panel de efectos y presets. Escribe eco en la barra de búsqueda y ahora arrastra el efecto a la esfera. A continuación, en tiempo de eco, establecerlo en -0.001 30 por el número de ecos, y aquí, cambiarlo al máximo Cuando esta esfera se mueva rápidamente, veremos un efecto de rastro genial. Ahora copiemos y peguemos el efecto en las otras esferas. Tenga cuidado de no usar en exceso este efecto ya que puede ralentizar su computadora. Bien. Es un buen momento para salvar el proyecto presionando menos control. Como puedes ver, debido a que usamos el efecto, saltamos al panel de efectos para volver al panel del proyecto. Podemos dar click aquí o usar las flechas y seleccionar panel de proyecto. Ahora, para mantener una composición organizada, agrupemos todas las capas que hemos creado ahora en una sola. Para ello, seleccionemos todas las nuevas capas y presionemos Control Shift C. Ahora, nombraremos a estas esferas giratorias pre comp. Asegúrese de que ambas opciones estén seleccionadas y haga clic en. También podemos encontrar esta pre comp en el panel del proyecto. Todo bien. Vamos a seguir adelante. Si echamos un vistazo más de cerca, podemos ver que esta pre comp es grande en relación a la animación que contiene. Ingresemos a la pre comp en sí y apaguemos el fondo. Y ahora vamos a encargarnos de ello. Presione Control K para acceder a los ajustes de composición. Ahora vamos a reducir el tamaño a 500 por 500. Haga clic y regrese a la composición principal. Ahora, vamos a crear la esfera gris. Para esto, asegurémonos de no seleccionar ninguna capa y elegir la herramienta elipse Seleccione el color de relleno para que sea negro y desactive el trazo. Ahora, saquemos la grilla presionando la tecla apóstrofe para ver el centro de la composición Ahora, vamos a crear la esfera manteniendo pulsada la tecla Mayús. Vamos a centrarlo. Ahora, cambiemos a la herramienta de selección. Por último, cambiemos el nombre de la capa. Selecciónala, presiona enter y llámela esfera grande. Después volveremos a presionar enter. Ahora, vamos a sacar a colación el parámetro de escala de esta capa presionando S. Podemos apagar esta capa. En el segundo cero, el tamaño de la esfera será cero. En la segunda, la esfera alcanzará el 100%. En los dos segundos, volverá a cero. Convertiremos los fotogramas clave a *** y ajustémoslos en el editor de gráficos así Veamos cómo se ve. Creo que es muy lento. Veamos cómo podemos acelerar esta animación. Digamos que queremos que la duración de la animación de esfera sea de 1 segundo en lugar de 2 segundos. En lugar de mover manualmente los fotogramas clave uno por uno, simplemente podemos seleccionar los fotogramas clave, mantener presionada la tecla alt, agarrar el último fotograma clave y moverlo a otra posición De esa manera, todos los fotogramas clave se mueven juntos, manteniendo una distancia igual y precisa entre ellos. Coloquemos el último fotograma clave en la posición del indicador de tiempo mientras también mantengamos presionada la tecla Mayús De esa manera, los fotogramas clave se ajustarán a la posición del indicador de tiempo. Ahora esta animación dura 1 segundo en lugar de 2 segundos. Ahora vamos a cortar esta capa aquí porque este es el momento en que termina la animación y ya no podemos ver la esfera. Usaremos el alt de corte corto y el soporte derecho. Ahora, vamos a crear la ondulación amarilla. Para ello. Primero, dupliquemos esta capa usando el control D. Luego presionemos S y cambiemos el valor de este fotograma clave a 200 Ahora, habilitaremos el trazo en esta capa y lo colorearemos de amarillo. Por último, apagaremos el relleno. Así es como se ve por ahora. Creo que el trazo es demasiado grueso. Vamos a reducirlo a cinco. Ahora vamos a mover esta capa un poco hacia adelante en el tiempo para crear un buen desplazamiento. Veamos cómo se ve. Ahora se ve mejor. Por último, coloquemos esta capa debajo de la gran esfera. Volvamos a verlo. Se ve bien. Bien, ahora y renombrar esta capa a trazo grande y etiquetarla de color amarillo. Podemos etiquetar esta capa en gris. Ahora vamos a tiempo y sincronicemos entre todas las partes de la animación. La animación de las esferas giratorias es la primera animación que abre el video, así que lo dejaremos aquí al inicio de la línea de tiempo. Cuando termine esta animación, comenzará la animación de la gran esfera. Arrastremos estas dos capas aquí. Activémoslos y veamos dónde es mejor colocarlos. Creo que aquí es un buen momento. Veamos cómo se ve. Es mejor a partir de aquí. Bien, ahora se ve mejor. Y después de eso, comencemos las animaciones de la forma. Movamos esta pre comp aquí y veamos cómo se ve. Es mejor a partir de aquí. Creo que se ve genial. Por último, vamos a crear el cuadrado que se supone que debe estar detrás de toda la escena. Ahora ya podemos cancelar la grilla. Apaguemos el fondo y asegurémonos de que no haya ninguna capa seleccionada. Luego iremos a la herramienta elipse, presionaremos y mantendremos presionada , y seleccionaremos la herramienta rectángulo Activaremos el relleno y elegiremos el color blanco. Entonces apagaremos el trazo. Ahora vamos a crear el cuadrado en aproximadamente este tamaño mientras mantenemos presionada la tecla Mayús. Ahora, centrémoslo en la composición usando una línea. A continuación, colocaremos esta capa debajo de todas las demás capas. Veo que la plaza resultó un poco demasiado grande, así que presionemos S y bájala. Escribamos 85. Ahora vamos a redondear las esquinas. Para ello, cerraremos la capa y la abriremos nuevamente para ver todas las propiedades. Podemos cerrar las transformaciones. Ahora abriremos el contenido, abriremos el rectángulo uno, abriremos la ruta del rectángulo, y aquí encontraremos el parámetro para redondear las esquinas. Vamos a establecerlo en 130. Bien, ahora veamos cómo se ve todo junto. Se ve genial. Y ahora estamos listos para renderizar la escena. Pero antes de eso, recomiendo encarecidamente tomar un descanso de diez minutos. Levante de su silla, haga algunos estiramientos ligeros, haga un poco de té o café, y vuelva a refrescarse para la siguiente parte. 15. Aprende a crear un GIF: En esta lección, renderizaremos la escena y usaremos photoshop para convertirla en un archivo de regalo. Para aquellos que necesiten instalar el software photoshop. Se puede ver cómo hacerlo en el curso gratuito que mencioné anteriormente. Puedes encontrar el enlace al curso en la descripción a continuación o en el archivo PDF que se encuentra en la carpeta que descargaste de mí. Preparemos nuestra escena para renderizar. Lo primero que podemos hacer es eliminar la paleta de colores de la composición ya que ya no la necesitamos. Seleccionemos la herramienta de selección y clic aquí para ver las capas ocultas. Ahora, desbloquea esta capa y borra esta usando la tecla de retroceso Lo siguiente que tenemos que hacer es ajustar el área de trabajo hasta el final de la animación para que no renderizemos partes innecesarias. La animación termina aquí. Así que llevemos aquí el área de trabajo usando el atajo que aprendemos presionando la tecla final. Veamos que todo está jugando a la perfección. Como puedes ver, tenemos una animación de lazo perfecta, es decir, el video termina y comienza sin problemas Lo siguiente que debemos cuidar a la hora de preparar una animación para la firma del correo G es ajustar el tamaño de nuestra composición principal. Si dejamos el tamaño como está ahora, podemos encontrarnos con un problema en el siguiente paso. Los bordes del video interferirán con la colocación correcta de la animación en la firma. Por lo tanto, ingresemos a los ajustes de composición y ajustemos su tamaño. Pregunta, cuál es el atajo para acceder a los ajustes de composición. Para ello, presionaremos control K y cambiaremos el tamaño de esta composición. Vamos a establecerlo en 900 píxeles por 900 píxeles. Ahora haz clic y asegúrate de que no la hemos reducido demasiado, lo que significa que toda la animación permanece dentro de los bordes de la composición. Lo último que debemos encargarnos antes de renderizar es hacer clic en la función de colapso que se encuentra aquí. Para quienes no vean este icono, pueden dar click aquí. Déjame explicarte lo que hace. Acercaré el zoom para que podamos echarle un vistazo más de cerca. Mira qué pasa cuando activo la función en esta preparación. La calidad de los objetos mejorará. Miren de cerca esta esfera. Así que vamos a activarlo en esta pre comp y también en la precomp de esferas giratorias Todo parece estar bien, y estamos listos para renderizar. Para ello, iremos a composición y pulsaremos en agregar PARA renderizar Q. Y ahora estamos en el panel de renderizado. Aquí, vemos la composición que estamos renderizando. Para convertir esta animación en una firma de correo G, primero necesitamos crear un regalo a partir de esta animación. Entonces primero, necesitamos renderizar nuestra animación como un archivo MOV con un fondo transparente. Veamos cómo hacerlo. Hagamos click aquí y en formato, elegiremos tiempo rápido. Ahora, vamos a ir a las opciones de formato, y en video Codec, elegiremos animación. Haremos clic. En los canales, seleccionaremos GB Alpha. De esta manera, después de que Effect sepa que queremos renderizar el video con un fondo transparente, haremos clic. Hagamos clic aquí y decidamos dónde renderizar el video. Por supuesto, elegiremos nuestra carpeta de muestras. Vamos a asegurarnos de que el nombre es bueno. Haga clic en guardar, y finalmente haga clic en Render. Ahora espera unos momentos. Tan pronto como se complete el renderizado, abramos el software photoshop porque así es como convertiremos el video renderizado en un regalo. Vayamos al archivo, pulsemos en Abrir, y busquemos la animación que acabamos de renderizar. Se encuentra, por supuesto, en nuestra carpeta de muestras. Seleccionemos la animación y hagamos clic en Abrir. Esperaremos unos segundos. Entonces aquí está nuestra animación. Ahora vayamos a archivo, luego puerto, y luego guardemos para web. Esperaremos unos segundos. Bien, entonces aquí tenemos que cambiar algunas cosas. Primero, elegiremos regalo aquí. Nos aseguraremos de que la casilla de verificación de transparencia esté marcada. En colores, se puede seleccionar el máximo. Esto significa que el regalo será de máxima calidad, pero el tamaño del archivo será un poco más grande. Si no desea que el archivo sea demasiado grande, seleccione 32. Seleccionaré 256. Aquí no elegiremos ninguna. Y debido a que no necesitamos este video en este tamaño, podemos dar click aquí por 50% para hacer el regalo la mitad de su tamaño. Ahora, esperemos hasta que se complete el render. Aquí podemos ver cuánto pesará el expediente final. Ahora, seleccionemos para siempre y hagamos clic en Guardar. Vamos a elegir dónde guardar el regalo. Vamos a guardarlo en nuestra carpeta de muestras. El nombre parece apropiado. Vamos a hacer clic en guardar y esperar unos segundos. Ahora abramos nuestra carpeta de muestras. Simplemente ampliaré mi vista aquí para verla como íconos, y ahí está listo el regalo. Se ve bien. Bien, volvamos a nuestro proyecto. No la cierres por ahora porque pronto volveremos a ella. Ahora, aprendamos a crear una firma GML profesional, usando la animación que creamos 16. Crea una firma de Gmail: Entonces, lo primero que deben hacer es acceder a Google Docs. Ahora, iniciemos sesión con nuestra cuenta de Gmail. Si este documento no se abre automáticamente para usted y ve el navegador de esta manera, haga clic en el signo más grande y cree un nuevo documento. Bien, ya puedes cerrar esto. Ahora, llamemos a este documento Gail firma y presionemos Enter Para nuestra comodidad, vayamos al archivo y luego a la configuración de la página. Aquí elegiremos que el documento no tenga bordes y colorearemos la página con este color Presiona ok y preparemos la firma. Para ello, iremos a insertar y crear una tabla con tres columnas. Ahora, nos aseguraremos de que nuestra línea de texto esté dentro de esta parte de la tabla. Vamos a ir a Insertar de nuevo y luego imagen y elegir subir desde computadora. Ahora, encontremos nuestro regalo. Lo seleccionaremos y haremos clic en abrir, y aquí el regalo está jugando a la perfección. Ahora, seleccionemos la imagen y vayamos a las opciones de imagen. Entonces podemos reducir el tamaño a cinco o incluso tres. Podemos cerrar la imagen por ahora. A continuación, fortalezcamos esta sección y agreguemos el texto que queramos. Si estamos escribiendo una dirección de sitio web, necesitamos presionar Enter después de terminar de escribir para hacer clic en la línea de texto. Después seleccionemos todo el texto y cambiemos la fuente a Montserrat Para quienes no vean esta fuente en su lista, pueden ir a más fuentes, buscar esta fuente y seleccionarla. O puedes buscarlo en Google Fonts. Vaya al sitio web, seleccione Fuentes, busque la fuente. Da click en él y descarga todos los estilos a tu computadora o haz clic en el icono más del estilo de fuente que quieras. Ahora, volvamos a nuestra firma y cambiemos la fuente Mont Surat Entonces podemos cambiar el título a negro. A continuación, vamos a reducir esta sección y seleccionarla para aumentar el grosor del trazo a tres. Después de eso, para eliminar las otras líneas de la tabla, podemos ir a opciones de tabla, escribir cero en alineación. Y seleccione cero en color y borde de mesa. La línea gruesa desaparecerá, pero eso no es un problema. Podemos seleccionarlo y devolver su grosor a tres. Por último, hagamos clic aquí y bajemos un poco el texto. Si queremos agrandar el regalo, podemos seleccionarlo, ir a opciones de imagen y cambiar el tamaño a cinco. Una vez que confirmemos que todo se ve bien, podemos proceder a convertirlo en una firma en G mail. Para ello, iniciemos sesión en nuestra cuenta de correo G. Abra la configuración, haga clic en ver todos los ajustes y desplácese hacia abajo hasta las firmas. Ahora da clic en Crear Nuevo y darle un nombre. A continuación, necesitamos copiar la firma que creamos en Google Docs. Seleccionemos todo manualmente o utilicemos el atajo Control A. Ahora, presione Control C para copiarlo. Volvamos a la configuración de GML y pulsemos Control V para pegarlo. Si tiene firmas adicionales, debe seleccionar la nueva firma que creó. Ahora desplácese hacia abajo y haga clic en Cambios seguros. Por último, vamos a crear un nuevo mensaje y ver cómo se ve la firma. En mi opinión, no se ve bien. La animación es demasiado grande en relación con el texto. Vamos a arreglarlo. Para ello, volvamos a la configuración y editemos la firma. Para reducir la escala de la animación, tenemos que volver atrás y editarla en Google Docs. Ahora selecciona el regalo, abre las opciones de imagen, disminuye a tres, mueve el texto hacia arriba eliminando estas líneas, y creo que deberíamos escalarlo a dos. Vamos a acercar la línea. Ahora selecciona todo usando Control A. Se puede cerrar. Después presione Control C para copiarlo. Volvamos a la configuración de Gmail, seleccionemos todo usando el Control A y elimínelo. Ahora borra todas las líneas vacías hasta que lleguemos al inicio. Ahora presiona Control V para pegarlo. Desplázate hacia abajo y haz clic en Cambios seguros. Vamos a crear un nuevo mensaje y a ver cómo se ve. Como puede ver, la firma no está alineada a la izquierda. Para solucionar esto, tenemos que volver a la configuración. Seleccionaremos nuestra firma usando el Control A y elegiremos la alineación izquierda. Hagamos esto de nuevo y ahora la firma está alineada a la izquierda. Nos desplazaremos hacia abajo y haremos clic en Cambios seguros. Vamos a crear un nuevo mensaje y a ver cómo se ve. Se ve genial. Pero ahora digamos que el cliente ha decidido cambiar algo en la animación de la firma. Nos pidieron que cambiáramos el color del cuadrado en el fondo para que no se fusione con el color blanco de Gmail. Veamos cómo lidiamos con esto. Lo primero que tenemos que hacer es volver a nuestro proyecto y después de los efectos. Ahora, seleccionemos el cuadrado y también seleccionemos la paleta en el panel del proyecto para que podamos muestrear los colores. Entonces cambiemos el color de relleno a un color gris claro de nuestra paleta. Por último, volvamos a renderizar la animación. Vamos a la composición y pulsemos en agregar a Adobe render Q. Vamos a renderizar todo con la misma configuración que antes. Vamos a guardarlo en la ubicación de la animación que tenemos. Ahora selecciona el video aquí y haz clic en Guardar. Después de los efectos, nos preguntaremos si queremos reemplazar el render antiguo por el nuevo, y diremos que sí. Después haga clic en Render y después de los efectos, nos preguntaremos si estamos seguros, y lo confirmaremos. Sin embargo, los efectos posteriores no pueden renderizar la animación aunque hagamos clic. Esto sucede porque el archivo que queremos renderizar sigue abierto en photoshop. Por lo que haremos clic y cerraremos este archivo sin guardarlo. Entonces intentaremos renderizarlo de nuevo. Esta vez, usemos el atajo Control M. Seleccionaremos todos los ajustes como antes. Y ahora va a funcionar. Volvamos a Photoshop, abramos nuestro nuevo video y volvamos a exportarlo como regalo. Bien. Esta vez, vamos a renderizarlo con 64 colores. Lo reduciremos como antes al 50%. Da click aquí para activar la acción, esperar unos segundos y guardar este regalo en el lugar del anterior. Lo seleccionaremos, damos clic en Guardar y Reemplazar. Ahora, volvamos a Google Docs. Seleccionaremos el regalo antiguo, clic en Reemplazar imagen y elegiremos subir desde la computadora. Seleccionaremos nuestro nuevo regalo y haremos clic en Abrir. Por último, cambiemos el color de la página a blanco para que el nuevo color se fusione bien. Ahora, seleccionemos todo con Control A y presionemos Control C para copiarlo. Ahora vuelve a la configuración del correo G. Después selecciona todo aquí con Control A y bórrelo. Ahora, borre todas las líneas vacías hasta que lleguemos al principio. Ahora vamos a presionar Control V. A continuación, seleccione la firma all con Control A y alinee el texto a la izquierda dos veces. Finalmente, nos desplazaremos hacia abajo y haremos clic en Cambios seguros. Ahora vamos a crear un nuevo mensaje y comprobar cómo se ve. Y aquí está nuestra firma finalmente lista. Y así se ve en el correo G en modo oscuro. Ahora, volvamos al proyecto y continuemos con la lección. También puedes cerrar photoshop. No hay necesidad de guardar este archivo. Volvamos a nuestro proyecto, organizarlo y renderizarlo para compartirlo en las redes sociales o en el sitio web de su portafolio. 17. ¡Crea la animación para compartir en tu cartera!: Así que ahora, vamos a renderizar esta animación con un bonito fondo como un archivo MP four de alta calidad, para que podamos compartirlo en redes sociales. Para crear un fondo, crearemos un nuevo sólido haciendo clic derecho sobre esta área gris. Iremos a nuevo y seleccionaremos sólido. Escojamos el blanco como color del sólido. Vamos a arrastrarlo debajo de todas las capas. Y si quieres cambiar el color de tu sólido a un color diferente de nuestra paleta de colores, necesitas presionar control shift. Esto traerá a colación los ajustes sólidos donde puede muestrear un color diferente y hacer clic. Me gusta más el color anterior, así que presionaré el control Z para deshacer la acción. Y ahora para renderizar el video, iremos a composición, seleccionaremos Agregar dos render Q. Esta vez, elegiremos el preset MP four de alta calidad que está aquí. Haremos clic aquí y elegiremos guardar el archivo en la carpeta de muestras que creamos. Para el nombre, podemos eliminar el número uno, hacer clic en Guardar y renderizar. Para ver el renderizado, haga clic en el enlace ubicado en el modo de salida. Abre el video para ver cómo se ve. Se ve bien, pero recordé que renderizamos el video en un tamaño de composición que era adecuado para un regalo. Volvamos a nuestro proyecto y volvamos a renderizarlo con un tamaño adecuado para redes sociales. Si desea eliminar los últimos renders, selecciónelos y presione retroceso Bien. Ahora, cierra todo hasta llegar a la composición principal. Entonces como puedes ver el tamaño de la composición es demasiado pequeño. Presionemos el control K para acceder a los ajustes de composición y aumentar el tamaño a diez 80 píxeles por diez 80 píxeles. Ahora, como hemos aumentado el tamaño de la composición, necesitamos aumentar el sólido en consecuencia. Así es como podemos hacerlo rápidamente. Seleccione el sólido, haga clic derecho, vaya a transformar y seleccione PiTOCM También puedes ver el atajo para esta acción. Haga clic en él, y el sólido ahora tendrá el mismo tamaño que la composición. Ahora vamos a renderizarlo nuevamente presionando Control M. Seleccione un formato MP four de alta calidad. Elija guardar el archivo en la última ubicación de renderizado. Haga clic en Guardar reemplazar Render y. Consulta el video ahora mismo. Se ve genial. Ahora puedes mostrar la animación que creaste en esta lección en redes sociales y compartirla en el sitio web de tu portafolio. Y si disfrutas del curso, agradecería muchísimo que calificaras de acuerdo a tu experiencia. Además, no olvides dejar una reseña, que pueda saber si aprendes algo interesante en el curso o no. Bien, volvamos a nuestro proyecto y aprendamos a organizar el panel del proyecto usando carpetas. Una carpeta como la que se creó automáticamente cuando creamos el sólido. Vamos a asegurarnos de que no seleccionamos nada, clic en el icono de la carpeta, y ahora cambiemos el nombre a precomps Aquí es donde guardaremos todos los precomps que creamos para este proyecto, excepto la composición principal Vamos a etiquetarlo en azul y poner todos los demás precomps en la carpeta que creamos Ahora guardaremos la paleta de colores en otra carpeta llamada assets. Así que asegurémonos de no seleccionar nada. Crearemos una nueva carpeta, cambiaremos el nombre a assets y arrastraremos la paleta de colores y la carpeta sólida a esta carpeta. Ese es el final de la lección. Guardemos el proyecto antes de cerrarlo. Puedes compartir tu animación en nuestro grupo comunitario privado. También puedes hacerme cualquier duda ahí. Prometo responder a cualquier duda que pueda tener. Espero que lo hayan disfrutado. Te veré en la siguiente lección. Pero antes de eso, recomiendo encarecidamente tomar un descanso de diez minutos. levántate de tu silla, haz algunos estiramientos ligeros, haz un poco de té o café, y vuelve a refrescarte para la siguiente parte. 18. Sección 2: tarea de proyecto: Todo bien. Y ahora a practicar lo que aprendimos. Por favor, cree esta animación. Puedes usar colores diferentes a los míos, pero trata de mantener la animación igual. Esta tarea está destinada a ayudarte a recordar y entender lo que has aprendido. No te preocupes. La tarea no va a tomar demasiado de tu tiempo. Está diseñado para ser factible en solo 2 horas. Si tienes algún problema o duda, no dudes en pedirme ayuda a mí o a tus compañeros de clase en nuestro grupo comunitario cerrado 19. Sección 3: animación en 3D para videos largos: Hola a todos. En esta lección, crearemos una animación muy genial convirtiendo las capas en tres capas D y creando un ángulo de cámara isométrico También aprenderemos a integrar nuestra animación en videos largos para canales de YouTube o podcasts largos. Esta lección se divide en cuatro partes. En la primera parte. Diseñaremos el marco en la segunda parte. Crearemos una cámara y aprenderemos a crear un ángulo isométrico Entonces convertiremos las capas en tres capas D. La tercera parte. Animaremos nuestra escena y la renderizaremos en un archivo MOV de alta calidad con un fondo transparente en la cuarta parte Aprenderemos a hacer que la animación se reproduzca sin cesar. Entonces organizaremos el proyecto antes de cerrarlo. Por último, renderizaremos la animación como un archivo MP four de alta calidad para compartirlo en redes sociales. Después de eso, al final de la lección, obtendrás una pequeña tarea para que hagas. La tarea está destinada a ayudarte a recordar y entender lo que has aprendido. No te preocupes. La tarea no va a tomar demasiado de tu tiempo. Está diseñado para ser factible en solo 2 horas. Si tienes algún problema o duda, no dudes en pedirme ayuda a mí o a tus compañeros de clase en nuestro grupo comunitario cerrado Todo bien. Basta con la plática. Empecemos. 20. Empecemos a diseñar la escena: Primero, abramos el software after effects. Como es habitual, podemos salir por esta ventana. Vamos a hacer clic en default para que todos podamos ver los mismos arreglos de panel. Y ahora vamos a hacer clic en nueva composición, y ahora definimos los ajustes para nuestra primera composición. Lo llamaremos animación para un canal. Nuevamente, trabajaremos en un formato cuadrado de diez 80 por diez 80 píxeles, y a 30 fotogramas por segundo. La duración de la composición será de 10 segundos. Por último, escojamos el color de fondo de la composición. Escogeremos un color gris y haremos clic. Te recuerdo que si ves este error rojo, necesitas presionar la tecla de bloqueo de mayúsculas para apagarlo. Bien, ahora hacemos clic aquí para ver el fondo de la pantalla de vista previa y maximizar la ventana del software. Ya podemos guardar el proyecto. Encontremos la carpeta que abrimos para la lección. Entra en la carpeta AE y nombra la animación del proyecto para un canal. Ahora vamos a importar nuestra paleta de colores al proyecto. Haga doble clic en el área gris en el panel del proyecto. Encuentra la carpeta que creamos para la lección y entra en la carpeta de activos. Seleccionaremos la paleta de colores y daremos clic en Importar. Arrastremos la paleta a la composición, ahora presionemos y reduzcamos el tamaño de esta capa a 30. Colóquelo aquí y bloqueemos la capa y la ocultemos del panel de capas. Para aquellos que no vean el ícono de sh, pueden dar click aquí. Seleccionemos la capa como capa oculta y la ocultemos haciendo clic en el icono que se encuentra aquí. Ahora, diseñemos el primer objeto de la escena, que es el panel de la ventana azul. Lo crearemos usando la herramienta rectángulo. Lo colorearemos en el color azul de la paleta. Vamos a apagar el trazo y crear un rectángulo. Ahora centrémoslo usando la herramienta de alineación. Para quienes no vean este panel, lo pueden encontrar debajo de la ventana. Bien, así que hagamos clic una vez aquí y aquí. Ahora, vamos a redondear las esquinas del rectángulo. Para ello abriremos el rectángulo, también abriremos el camino del rectángulo, y aquí en redondez, lo cambiaremos a 40 Ahora puedes cerrar todas las propiedades de la capa. Ahora vamos a presionar enter para cambiar el nombre a la forma principal. Presione enter nuevamente para finalizar la acción. Ahora, volvamos a la herramienta de selección usando el atajo V. Ahora vamos a crear la parte superior de esta ventana. La forma más rápida de hacerlo es duplicando esta forma usando Control D. Cambiemos el nombre de la nueva capa a forma ascendente. Ahora, cambia el color a gris oscuro de nuestra paleta. Entonces necesitamos cortar toda la parte inferior de esta forma. Si arrastramos esta forma desde aquí, no va a funcionar. Para hacer esto de la manera correcta, necesitamos convertir esta forma en un camino más bezier Abrimos todas las propiedades de esta forma hasta llegar al camino mismo. Haga clic derecho sobre él y seleccione convertir ruta Tobi. Ahora tenemos puntos que podemos mover y modificar. Voy a entrar para que podamos acercarnos . Todo bien. Sigamos adelante. Borremos este punto usando las teclas de retroceso o borrar Elimine esta también. Ahora, deshagámonos de los bordes curvos. Para ello, podemos mantener presionadas las teclas alt y control y dar click en este punto una vez. Hagamos lo mismo para este punto también. Ahora, seleccionemos ambos puntos usando mayúsculas y moverlos hacia arriba mientras mantenemos presionada la tecla Mayús. Se ve bien. Después de terminar con el diseño de la parte superior, centremos el punto de anclaje de esta forma hacia su centro. Como puede ver, no se encuentra en el centro de la forma. En lugar de usar la herramienta de punto de anclaje, podemos usar el atajo que aprendimos, Control Alt home. Y ahora el punto de anclaje de esta forma está centrado en su centro. Ahora, vamos a crear los tres puntos que se encuentran aquí. Para hacer esto, asegurémonos de que no estamos seleccionando ninguna capa y hagamos clic y mantengamos presionada la herramienta rectángulo y seleccionemos la herramienta elipse Colorearemos la primera esfera en azul. Ahora vamos a acercar un poco y crear la esfera aquí mientras mantenemos presionada la tecla Mayús. Para crear otra esfera, podríamos duplicar la propia capa y moverla. Pero esta vez, quiero enseñarte otro método para que todas las esferas estén en la misma capa. Para ello, podemos duplicar la forma dentro de la capa. Seleccionemos la elipse aquí y presionemos Control D. Ahora, vamos a abrir las propiedades de la nueva elipse y moverla por el parámetro de posición así Ahora cierra esto y abre el relleno y cambia el color a amarillo. Ya podemos cerrar esto. Ahora, volvamos a duplicar esta esfera. Para ello, necesitamos seleccionar el trazado de elipse. Ahora podemos cerrarlo, seleccionar la elipse aquí y presionar Control D. Vamos a mover la nueva esfera aquí Por último, cambiemos su color a rojo desde la paleta. Ahora cambiemos el nombre de esta capa a esferas. Centremos también el punto de anclaje de esta capa presionando control Alt home. Hemos creado una capa con tres esferas en su interior. Ahora bien, si queremos reducir las esferas, presionaremos a S. De esta manera, escalaremos todas a la vez. Vamos a escalar la capa a 80. Ahora, vamos a crear la capa de texto que se supone que debe estar aquí. Para ello, tomaremos la herramienta de texto y escribiremos diseño. Ahora, seleccionemos todo el texto y hagamos clic aquí para que todas las letras estén en mayúsculas. Cambiaré el estilo de fuente a claro y el color a blanco. Por alguna razón, la fuente no cambió. Si esto te sucede a ti también, solo busca el nombre de la fuente aquí y cambia el estilo de fuente desde aquí. Ahora, hagamos clic aquí y pulsemos Control enter para salir de la línea de texto. Ahora presionemos V para cambiar a la herramienta de selección. A continuación, cambiemos el tamaño de fuente a 100. Todo bien. En segundo lugar, voy a cambiar el estilo de fuente a thin. Ahora, centremos el punto de anclaje en el centro de la capa. Y posiciona esta capa en el centro de esta forma. Para ello, activemos el chasquido desde aquí. Arrastraremos la capa desde el punto de anclaje e intentaremos encontrar la posición correcta. Aquí, esto se ve bien. Ya podemos apagar el chasquido. Vamos a configurar la pantalla de vista previa para que encaje, Ampliar un poco esta ventana y continuar. Ahora, quiero cambiar la forma del panel que creamos. No vamos a poder hacerlo de esa manera. Tirarlo por sus esquinas no funcionará porque arruinará las esquinas redondeadas. Pregunta, ¿qué necesitamos hacer para que esta forma sea editable Para hacer esto correctamente, necesitamos convertir el camino de esta forma un camino bezier como lo hicimos antes para la forma superior Ahora, podemos seleccionar uno de los puntos, luego seleccionar los puntos inferiores y cambiar la forma de la ventana a como te guste. De esta manera, las esquinas redondeadas no se verán afectadas. Lo dejaré como estaba. Lo que es importante recordar en este proceso es que después de cambiar el camino a un camino más bezier, no podremos cambiar y controlar las esquinas redondeadas Como puede ver, el parámetro de redondez ya no existe aquí Solo tenlo en cuenta. Bien, entonces después de que estemos contentos con nuestro diseño, seleccionemos todas las capas y probemos en una sola preparación. Usaremos el atajo que aprendemos Control Shift C. Ahora, vamos a nombrar este panel de ventana precomp subrayado uno Asegúrese de que ambos estén seleccionados y presione. Como puede ver, el tamaño de la precomp es demasiado grande. Tenemos mucho espacio vacío. Vamos a recortar esta precomp. Para ello, entremos al pre comp. Aquí podemos apagar el fondo. Ahora vamos a abrir los ajustes de composición usando el atajo de teclado Control K. Comprobemos la vista previa para que podamos ver lo que estamos haciendo. Ahora vamos a reducir el tamaño de esta composición. Cambiaremos el ancho a 800 y el alto a 400. Escribiremos 400 y presionaremos enter. Eso es un poco demasiado. Volvamos a los ajustes de composición y cambiémoslo a 600. Creo que tal vez 500 es mejor. Sí, 500 es genial. Presionemos k o entremos. Ahora cuando volvamos a la composición principal, podemos ver que los bordes de esta pre comp se han reducido, y estamos listos para pasar a la siguiente etapa donde crearemos el ángulo simétrico 21. Capas 3D y cámara: Para crear el ángulo isométrico, utilizaremos la cámara de After effects . Veamos cómo hacerlo. Primero, vamos a crear una nueva cámara haciendo clic derecho aquí, yendo a nueva y seleccionando cámara. Si quieres conocer más sobre la cámara y después de los efectos, puedes ver el curso gratuito que mencioné al inicio de este curso. Puedes encontrar el enlace al curso gratuito en la descripción continuación o en el archivo PDF en la carpeta principal que descargaste de mí. Todo bien. Sigamos adelante. En tipo, elegiremos una cámara de dos nodos, y aquí elegiremos 50 milímetros. Después haremos clic. Ahora vamos a abrir las opciones de cámara desde aquí. En Zoom, escribiremos 10,000. Ahora, abriremos la transformación, y en posición, la cambiaremos a -10,000 Y ahora vamos a cerrar la capa. A continuación, crearemos un nuevo nulo. Vincularemos la cámara al nulo. Podemos habilitar colapso para la capa nula y desactivar la capa porque realmente no necesitamos verla. Solo usaremos las propiedades de transformación de esta capa. Pero antes de eso, es muy importante convertir esta capa en una capa de tres D para que pueda funcionar con la cámara. Ahora cambiaremos de orientación a 45 aquí. 35 aquí. Y 30 aquí. Cerremos todo. Ahora, todo lo que queda por hacer es convertir nuestra capa pre comp en una capa de tres D para que la cámara pueda ver e interactuar con ella. Ahí está. Hemos creado una cámara con un ángulo isométrico. Ahora vamos a crear dos precomps adicionales de los paneles de la ventana Pero como aprendimos, para duplicar la precomp de una manera que podamos hacer cambios sin afectar al pre original, necesitamos duplicar el prec a través del panel del proyecto Busquemos esta precomp en el panel de proyectos haciendo clic derecho y seleccionando revelar y luego revelar fuente de capa y proyecto Ahora vamos a presionar control D. Vamos a entrar en el nuevo pre comp y cambiar el texto dos adentro. Ahora vamos a duplicar de nuevo esta pre comp y cambiar el texto en el nuevo prec a motion Ahora, volvamos a la composición principal y arrastremos los dos nuevos precomps a nuestra escena Debido a que estas dos capas no son tres capas D, la cámara no las ve. Vamos a hacer clic aquí y convertir estas capas en tres capas D. Por último, volvamos a la herramienta de selección. Ahora bien, si muevo esta capa aquí, y esa de ahí, veremos todas las capas desde el ángulo isométrico Bien, presionemos Control Z y ahora vamos a eimate viendo. 22. Anima la escena y hazla con ella: Primero, animemos esta capa hacia arriba y la inferior hacia abajo. Dejaremos el panel de la ventana central en su lugar sin moverlo. Seleccionemos este y mientras mantenemos el control, también seleccionaremos ese. Ahora presionemos P para que suba el parámetro de posición. En este punto en el tiempo, estableceremos que estas capas se ubicarán aquí. Un segundo número uno, seleccionaremos sólo esta capa. Abre la rejilla y arrástrala aquí. Ahora vamos a seleccionar la capa inferior y arrástrala aquí. En el segundo número dos, quiero que ambas capas vuelvan a sus posiciones originales. Así que simplemente copiemos este fotograma clave y péguelo aquí. Lo mismo con esta capa. Veamos cómo se ve. Ahora quiero que estas ventanas roten a medida que se mueven. Esta vez, también moveremos el panel de la ventana en el medio. Seleccionemos todas estas capas con shift y presionemos R para abrir el parámetro de rotación. Porque estas capas son capas tridimensionales. Tenemos diferentes ejes de rotación. Podemos rotar las capas sobre el eje x. Se ve así en el eje y. Se ve así, en el eje z, se ve así. Entonces en este punto en el tiempo, al inicio de la animación en el segundo número cero, todas las capas deben estar en este valor en el eje z. Entonces en el siguiente segundo, cuando ya estén abiertas, rotaremos todas las capas 90 grados. Ahora, en el segundo número dos, volverán a cero, igual que al principio. Ahora, vamos a seleccionar todas las capas y presionarte para ver todos los fotogramas clave que hemos creado hasta ahora. Ahora vamos a mejorar nuestra animación usando *** y el editor de grafos. Primero, hagamos clic aquí para aislar esta capa para que solo podamos verla. Ahora seleccionemos todos los fotogramas clave y presionemos F nine para convertirlos a ***. Volvamos a verlo. Ahora cambiemos la forma en que esta animación se mueve a lo largo tiempo. Veamos a qué me refiero. Primero, seleccione los fotogramas clave para el parámetro position y vaya al editor de grafos. Ahora vamos a seleccionar los fotogramas clave del medio y arrastrar los manejadores así. Ahora la capa comenzará a elevarse rápidamente, hará una pequeña pausa cuando esté en el aire y luego volverá rápidamente a su posición original. Después de eso, seleccionemos los fotogramas clave del parámetro de rotación y realicemos la acción inversa. Haremos que la capa comience a girar lentamente y regrese lentamente también. En caso de que no veas la gráfica como yo, haz clic derecho y asegúrate de que estás en la gráfica de velocidad. Bien. Salgamos del editor de grafos y veamos cómo se ve. A mí me encanta. Ahora, hagamos lo mismo para la capa inferior. Selecciona esta pre comp y presiona para ver sus fotogramas clave. Después seleccionaremos todos los fotogramas clave y los convertiremos a ECes. Ahora necesitamos ajustar los fotogramas clave para la posición así Y la rotación para comportarse así. Veamos cómo se ve. Ahora, vamos a seleccionar la capa intermedia, presionarte para ver sus fotogramas clave y mostrar todas las capas para verlas todas. Ahora seleccionaremos todos los fotogramas clave de esta capa. Cámbialos a Ess usando F nueve y ajusta los mangos en el editor de gráficos así. Veamos cómo se ve todo junto. Se ve excelente. Ahora, vamos a crear un bonito desplazamiento para todas las capas para crear una animación más interesante. Pero esta vez, no moveremos los fotogramas clave de esa manera porque entonces las animaciones de capa terminarán en diferentes momentos. En nuestro caso, esta vez, quiero que todos los paneles de las ventanas vuelvan a sus posiciones originales al mismo tiempo. Por lo tanto, en nuestro caso, basta con mover aquí solo los fotogramas clave del parámetro de rotación de esta capa, y los fotogramas clave de esta capa aquí. Vamos a verlo. Bien, creo que tenemos que mover esto un poco aquí. También podemos mover un poco este fotograma clave. Ahora, vamos a crear una superposición de sombras en estas ventanas. Para ello, podemos usar un efecto llamado niveles. Arrastremos este efecto a la capa intermedia y cambiemos el valor blanco de salida a 200. A lo mejor 209. Ahora vamos a copiar el efecto y pegarlo en la capa inferior y cambiar el valor blanco de salida aquí también. Nuestro objetivo aquí es crear una ilusión de sombra. 170 se ve bien. Todo bien. Apaguemos la grilla. También podemos cerrar las capas, y veamos cómo se ve todo junto. Ahora veamos dónde termina esta animación. Para ello, necesitamos ver dónde está el último fotograma clave en esta escena Asegurémonos de que no haya ninguna capa seleccionada y presionemos para ver todos los fotogramas clave de todas las capas La animación en esta escena termina en el segundo número dos. Quedémonos aquí con el indicador de tiempo y presionemos para acortar el área de trabajo a la posición del indicador de tiempo Ahora veamos nuestra animación algunas veces. Bien. Creo que la animación se mueve muy rápido. Veamos cómo podemos ralentizar todos los fotogramas clave y hacer que la animación se reproduzca durante 3 segundos en lugar de 2 segundos. Para ello, vamos a mover el área de trabajo aquí por ahora. Ahora coloquemos el indicador de tiempo en el segundo número tres. Ahora, seleccionaremos todos nuestros fotogramas clave. Mantenga presionada la tecla ult y arrastre uno de los últimos fotogramas clave hacia un lado Para que los fotogramas clave se ajusten a la posición del indicador de tiempo, necesitamos presionar shift Ahora presionemos, nuevamente, para acortar el área de trabajo a la nueva posición del indicador de tiempo Veamos cómo se ve ahora. Creo que es mucho mejor. Ahora estamos listos para renderizar la animación que creamos. Pero antes de eso, vamos a presionarte para cerrar todos los fotogramas clave Vamos a mostrar las capas ocultas y eliminar la capa de la paleta de colores Después apague el fondo de la pantalla anterior. Ahora pulsemos Control M. En el módulo de salida, elegimos tiempo rápido. Aquí en opciones de formato, elegimos animación. Vamos a hacer clic y en canales. Pregunta, qué necesitamos elegir aquí para exportar el video sin fondo. Necesitamos seleccionar GB más Alpha. Hagamos clic y elegimos renderizarlo en nuestra carpeta de muestras. Ya renderizamos un archivo en formato MOV, así podemos ver este video aquí. Asegurémonos de que el nombre sea bueno, haga clic en guardar y renderizar. Puede hacer clic aquí para ver el renderizado. Y ahora aprendamos cómo podemos integrar la animación que renderizamos en un video largo. Así que volvamos a nuestra composición principal. Trae de vuelta el panel del proyecto. Ya podemos cerrar todos los precomps abiertos desde aquí. También cerremos el panel de efectos, y estamos listos para seguir adelante. 23. Haz que Play Endlesley para videos largos: Entonces para ver cómo podemos integrar esto en un video largo. Vamos a crear una nueva composición usando el atajo Control. Lo llamaremos video para un canal. Establezcamos las dimensiones en 1920 por diez 80 píxeles, dejemos la velocidad de fotogramas en 30 y cambiemos la duración a 5 minutos. Ahora cambiemos el fondo a negro y presionemos. Ahora, digamos que actualmente estamos trabajando en un proyecto completamente nuevo. Entonces, salgamos de esta composición e importemos el video largo del CT ubicado en nuestra carpeta de activos aquí. Arrastremos el video a nuestra composición, y aquí vemos el video completo. Ahora, recortemos el área de trabajo hasta el final del video, recortaremos toda la parte innecesaria haciendo clic derecho en el área de trabajo y luego seleccionando Trim Comp al área de trabajo. Ahora, imaginemos que este es un video que queremos subir a uno de nuestros canales de redes sociales, y queremos agregarle, digamos, una animación de logotipo. Usemos la animación que creamos para aprender cómo podemos hacer que la animación se reproduzca sin problemas hasta el final del video. Entonces, antes que nada, importemos nuestro render. Podemos encontrarlo en la carpeta de muestras, seleccionarlo y hacer clic en Importar. Ahora, vamos a arrastrar el render a la composición por encima de la capa de video, ahí vemos que el video es efectivamente sin fondo, lo cual es excelente. Sin embargo, debido a que la duración de la animación es de solo 3 segundos, dejamos de ver esta capa en este punto. Necesito que esta animación se reproduzca hasta el final de mi video. Acerquemos un poco nuestra línea de tiempo y veamos cómo hacer esto. Dado que nuestra animación se reproduce en un bucle perfecto, es decir, termina y comienza exactamente en el mismo punto, podemos usar un truco genial para que se reproduzca sin cesar Para ello, necesitamos colocar el indicador de tiempo aquí mientras se mantiene presionada la tecla Mayús. Podemos apagar la capa de video por ahora. Ahora, hagamos clic derecho, vayamos al tiempo y elijamos habilitar la reprogramación de tiempo. Ahora tenemos que asegurarnos de que el indicador de tiempo es un fotograma antes de los fotogramas clave que vemos. Si estás parado sobre los fotogramas clave, mueve un fotograma hacia atrás así Y ahora vamos a crear otro fotograma clave en este momento dando click aquí Ahora necesitamos eliminar este fotograma clave. Y ahora vamos a crear una expresión para estos fotogramas clave. Expression es una pieza de código que puedes usar para automatizar y controlar diversas propiedades de tu animación. Es una poderosa herramienta que le permite crear animaciones complejas sin tener que fotogramas clave manualmente cada elemento Para crear una nueva expresión, necesitamos mantener presionada la tecla Alt y hacer clic en el cronómetro del parámetro de remapeado de tiempo Esto abrirá el código de línea de expresión. No te preocupes. No necesitamos escribir nada. Usaremos una expresión incorporada . Para ello, hagamos clic en la flecha pequeña aquí. Ir a la propiedad y elegir esta expresión. Para terminar la acción, hagamos clic aquí en el costado. Podemos dar un paso atrás, y ahora vamos a extender esta capa hasta el final de la composición. Ahora bien, todo lo que suceda entre estos fotogramas clave, que es básicamente toda nuestra animación se repetirá hasta el final de la composición, y ahí la tienes, nuestra animación se reproduce sin cesar Ahora podemos volver al video, y ahora presionemos S y escalemos la capa. Vamos a moverlo aquí a un lado. Podemos encogerlo un poco más. Presionemos la tecla del apóstrofo para ver la cuadrícula. Esto hará que sea mucho más fácil para nosotros saber dónde colocar la animación. Y aquí de este lado, puedes agregar la dirección de tu sitio web. Puedes colocarlo aquí. Cerremos la grilla. Entonces, básicamente, hemos creado una animación que puede ser el logotipo de tu canal, que puede reproducirse hasta el final de tu video. Bien. Ahora, volvamos a crear el bucle infinito. Pero esta vez usaremos la composición de esta animación en lugar del archivo renderizado. Apaguemos nuestro archivo render e insertemos nuestra composición principal llamada animación para un canal. Pero antes de eso, entrémoslo y recortemos el área de trabajo hasta el final de la animación porque no necesitamos el resto de la línea de tiempo. De lo contrario, la expresión no funcionará. Así que haz clic derecho y elige Trim Comp al área de trabajo. Ahora, volvamos a la composición del video y arrastremos la animación aquí, tal como hicimos con el archivo renderizado. Necesitamos colocar el indicador de tiempo aquí mientras mantenemos presionada la tecla Mayús. Ahora, vamos a hacer clic, ir a tiempo y elegir habilitar reprogramación de tiempo. Tenemos que asegurarnos de que el indicador de tiempo es un fotograma antes de los fotogramas clave que vemos. Ahora, crearemos un fotograma clave adicional en este momento haciendo clic aquí Ahora podemos eliminar el último fotograma clave y manteniendo pulsada la tecla Alt, clic en el cronómetro del parámetro de remapeado de tiempo Ahora, vamos a hacer clic en la flecha pequeña aquí, ir a la propiedad, y elegir esta expresión. Para terminar la acción, hagamos clic aquí en el costado. Podemos alejar, y ahora vamos a extender esta capa hasta el final de la composición. Ahora, tal vez se esté preguntando, ¿por qué no hicimos esto desde el principio ¿Por qué tuvimos que renderizarlo como un archivo MOV sin fondo y no usar la composición en sí La razón es que si usamos la composición original, ralentizará tu computadora y tu flujo de trabajo de edición. Especialmente cuando estás trabajando en videos largos, como grabaciones de pantalla de juegos de computadora o podcasts. Por lo tanto, no recomiendo usar composiciones directamente. Es mejor renderizar tu animación y usar los archivos MOV en tus proyectos de edición de video. Bien, entonces colocaré esta composición aquí. Y antes de terminar, organicemos el panel del proyecto. Primero, asegurémonos no seleccionar nada y crear una nueva carpeta llamada assets donde colocaremos la carpeta de sólidos, la paleta de colores, el video y el render de nuestra animación. A continuación, volvamos a asegurarnos de que no seleccionamos nada y creamos otra carpeta llamada prep. Pondremos en él todos los precomps que creamos en el proyecto, excepción de la composición principal, que nosotros en azul Ahora podemos cerrar esta composición desde aquí. Ahora, vamos a renderizar esta animación como un archivo MP four de alta calidad que podemos compartir en redes sociales. Pero antes de eso, vamos a crear un fondo. Para ver la paleta, abriremos la carpeta assets y seleccionaremos la paleta para que podamos verla desde aquí. Ahora, vamos a crear el sólido y colorearlo en este color. Haremos clic en Bien, moveremos esta capa por debajo de todas las capas, y ahora vamos a presionar control M. Podemos ver aquí el render anterior. Ya podemos cerrarla. Este es el nuevo render. Escojamos H 0.2 64 40 MBPS, y ahora elegiremos renderizarlo en la carpeta samples. Eliminaremos el número uno del nombre y haremos clic en Guardar y renderizar. Veamos qué tenemos. Se ve excelente. Ahora puedes compartir la animación que creaste en redes sociales y publicarla en el sitio web de tu portafolio. Si disfrutaste el curso, agradecería muchísimo que pudieras calificar este curso de acuerdo a tu experiencia. Además no olvides dejar una reseña para que sepa si aprendes algo interesante en el curso o no. Bien, presionemos escape para salir del video. Volveremos al proyecto, saldremos de aquí y lo cerraremos. Antes de cerrar el proyecto, no olvidemos guardarlo. Vamos a presionar el control, y ese es el final de la lección. Espero que lo hayan disfrutado. Te invitamos a compartir tu video en nuestro grupo comunitario privado, y por supuesto, puedes hacerme preguntas ahí. Te prometo que responderé a cualquier duda que tengas. Nos reuniremos en la siguiente y última lección de este curso, en la que crearemos una emocionante animación de cargador y veremos cómo podemos presentarla en nuestra página web de portafolio como una prosa Pero antes de eso, recomiendo encarecidamente tomar un descanso de diez minutos. Levante de su silla, haga algunos estiramientos ligeros, haga un poco de té o café, y vuelva a refrescarse para la siguiente parte. 24. Sección 3: tarea de proyecto: Todo bien. Y ahora a practicar lo que aprendimos. Por favor, cree esta animación. Puedes usar colores diferentes a los míos, pero trata de mantener la animación igual. Esta tarea está destinada a ayudarte a recordar y entender lo que has aprendido. No te preocupes. La tarea no va a tomar demasiado de tu tiempo. Está diseñado para ser factible en solo 2 horas. Si tienes algún problema o duda, no dudes en pedirme ayuda a mí o a tus compañeros de clase en nuestro grupo comunitario cerrado 25. Sección 4: Animación para cargadores para tu cartera: S S Hola a todos. En esta lección, crearemos una animación de cargador súper genial y aprenderemos a presentarla en nuestro sitio web de portafolio. Esta lección se divide en cuatro partes. En la primera parte. Diseñaremos la escena y comenzaremos a animarla. En la segunda parte. Aprenderemos métodos avanzados para mejorar la animación. En la tercera parte. Crearemos el final de la animación del cargador. Después en la cuarta parte. Prepararemos la animación para compartirla en nuestro portafolio. Por último, lo renderizaremos en formato MP four de alta calidad y organizaremos el proyecto antes de cerrarlo. Después de eso, al final de la lección, obtendrás una pequeña tarea para que hagas. La tarea está destinada a ayudarte a recordar y entender lo que has aprendido. No te preocupes. La tarea no va a tomar demasiado de tu tiempo. Está diseñado para ser factible en solo 2 horas. Si tienes algún problema o duda, no dudes en pedirme ayuda a mí o a tus compañeros de clase en nuestro grupo comunitario cerrado Todo bien. Basta con la plática. Empecemos. 26. Empecemos a diseñar la escena: Bien. Vamos a abrir el software after effects. Como es habitual, podemos salir por esta ventana. Ampliaré la ventana del software. Ahora vamos a hacer clic en default para que todos podamos ver los mismos diseños de panel. Y ahora vamos a crear nuestra primera composición. Lo llamaremos animación de desdescarga. Trabajaremos en un formato cuadrado de diez 80 por diez 80 píxeles. Esta vez, trabajaremos a 60 cuadros por segundo. La duración de la composición será de 10 segundos. Por último, seleccionaremos un color de fondo gris y daremos clic aquí. Ahora, vamos a traer de vuelta el panel del proyecto. Si no lo ves desde aquí, entonces simplemente haz clic en las flechas y zapatos Project. Ahora, vamos a guardar el proyecto. Encontremos la carpeta que abrimos para la lección. Entra en la carpeta A y nombra la animación del proyecto para la cartera. No tenemos ningún problema con que el nombre del archivo sea diferente del nombre de la primera composición que creamos. Ahora vamos a importar nuestra paleta de colores al proyecto. Haga doble clic en el área gris en el panel del proyecto. Ahora podemos encontrar la carpeta que creamos para la lección y entrar en la carpeta assets. Seleccionemos la paleta de colores y hagamos clic en Importar. Vamos a arrastrar la capa a la composición, Presionar y ajustar el tamaño de esta capa a 30. Lo colocaremos aquí y para evitar que se interponga en el camino. Podemos bloquear la capa y ocultarla del panel. Para aquellos que no vean el ícono de la función tímida, pueden hacer clic aquí. Marquemos la capa como una capa oculta y la ocultemos haciendo clic en el icono que se encuentra aquí. Ahora, comencemos a crear el círculo grande sobre el que se moverán las esferas más pequeñas. Para ello, mantendremos presionada la herramienta rectángulo, luego seleccionaremos la herramienta elipse Apaguemos el relleno. Y colorea el trazo negro de nuestra paleta. Por ahora, cambiaremos el peso del trazo a diez. Por supuesto, podemos cambiar esto más tarde. Bien, vamos a crear el círculo mientras mantenemos presionada la tecla Mayús aproximadamente a este tamaño. Ahora centremos el círculo al centro composición usando el atajo de control home. Ahora aumentemos el peso del trazo. Lo cambiaremos a 30. Ahora podemos volver a la herramienta de selección, así que presionemos V y cambiemos el nombre de esta capa a trazo. Podemos cerrar la capa y bloquearla porque no la tocaremos pronto. Ahora vamos a crear la primera esfera pequeña. Seleccionemos la herramienta elipse, y esta vez activaremos el relleno Lo colorearemos de azul y apagaremos el trazo. Ahora acerquemos un poco al círculo grande e intentemos crear la esfera pequeña con el mismo tamaño que el peso del trazo del círculo grande. Algo así. Presionemos V para volver a la herramienta de selección y cambiemos el nombre de la capa a esfera uno. Si este círculo no sale en el tamaño correcto, puedes presionarlo para escalarlo. No voy a cambiar el tamaño, así que presionaré el control Z. Volvamos la pantalla para que quepa Ahora, animemos la esfera. Se moverá a la forma de círculos grandes así. Bien, vamos a acercarnos. Presiona la barra espaciadora, manténla y arrastra la pantalla hacia abajo para ver la parte superior de la pantalla. Presiona la tecla apóstrofo para abrir la cuadrícula. Ahora coloquemos aquí la esfera y utilicemos la herramienta align para centrarla en la composición. M acércate un poco más y mueve el círculo aquí. Y ahora para hacer que la esfera se mueva, crearemos fotogramas clave para el parámetro position. Seleccionemos la capa y presionemos P. Al inicio de la animación, sabemos que la esfera necesita estar en la posición en la que se encuentra actualmente. Vamos a crear el primer fotograma clave en el segundo cero. Una segunda, vamos a mover la esfera aquí. Para colocarlo exactamente en el centro de la composición, usaremos una línea, y ahora en el segundo segundo, moveremos la esfera aquí. Nuevamente, usaremos la línea para centrarla en la composición. Ahora vamos a acercarnos un poco y movamos la esfera ligeramente hacia la izquierda. Bien, sigamos adelante. Entonces ahora en el segundo tres, movamos la esfera aquí. Y con la línea, la posicionaremos exactamente en el centro de la composición. Podemos bajar un poco la esfera. Y ahora en el segundo cuarto, queremos que la esfera vuelva a su posición original. Para ello, podemos copiar los primeros fotogramas clave y pegarlos aquí. Veamos cómo se ve. Obviamente, no se ve muy bien porque el camino que creamos para la animación de esfera es recto y no redondeado. Veamos cómo podemos redondear el camino de esta animación. Primero, vayamos al punto de la tiempo donde la esfera no está en ninguno de los fotogramas clave, para que podamos ver todos los puntos del camino Ahora para redondear las esquinas, necesitamos usar una herramienta llamada herramienta convertir vértice Vamos a presionar mucho sobre la herramienta pluma, y aquí está. Podemos elegir la herramienta desde aquí o usar un atajo. Hagámoslo usando el atajo. Digamos que no elegimos la herramienta Pluma y estamos usando la herramienta de selección. Todo lo que tenemos que hacer es seleccionar uno de los puntos. Mantenga presionadas las teclas de control y Ault, y luego haga clic en el punto una vez. Y ahora este punto se ha redondeado. Con los mangos que tenemos ahora, controlaremos la curva de la esquina. Volveremos a hacer esto en un momento. Bien, así que por ahora, seleccionemos también este punto. Mantenga presionadas las teclas de control y Ault y haga clic en este punto una vez. Ahora, arrastremos este mango hacia la derecha mientras mantenemos presionada la tecla Mayús para mover el mango en línea recta. Hagámoslo de este lado también. Hagámoslo aquí también. Podemos presionar alt y la tecla apóstrofe a relucir la cuadrícula proporcional De esa manera, podemos ver que movemos los mangos con relativa precisión. Y además de eso, siempre podemos comprobar cómo se ve mientras estamos en movimiento. Veo que en ciertas partes la esfera se desvía de su trayectoria Para ello, continuaremos y arreglaremos su camino. Mientras tanto, apaguemos esta grilla. Presionemos alt y la tecla apóstrofe. Ahora, vamos a acercarnos un poco y veamos cómo podemos arreglarlo. Bien, entonces en este punto, esta esfera ya empieza a desviarse de su camino Así que vamos a agarrar esta manija y ajustarla. Si no podemos ajustar el trazado correctamente con un manejador, también podemos hacer que este punto redondeado y navegar por la curva con sus manejadores. Seleccionémoslo, mantengamos Control y Alt y hagamos clic en este punto una vez. Ahora tenemos un asa adicional que podemos controlar. Hagamos lo mismo de este lado. Vamos a seleccionarlo, mantener control y alt y hacer clic en este punto una vez. Pero como pueden ver, no conseguimos un asa como antes. Eso es porque hay dos puntos uno encima del otro. Mientras tanto, podemos mover este punto aquí. Hagámoslo un punto regular y no redondeado. Mantengamos control alt y hagamos clic en él una vez. Ahora vamos a seleccionar este punto y hacerlo redondeado. Y vamos a ajustarlo junto con este punto. Y lo más importante, cuando terminemos, necesitamos devolver este punto exactamente a su posición original. De esta manera, evitamos saltos en el bucle de animación que crearemos pronto. Bien, vamos a configurar la pantalla para que encaje. Quedémonos aquí con el indicador de tiempo y acortemos el área de trabajo aquí usando la tecla n Ahora veamos la animación reproduciendo en bucle. Veo que aquí hay un pequeño problema. Podemos acercar y reorganizar los mangos. Ahora se ve genial, y podemos seguir adelante. Ahora quiero encoger un poco esta esfera. Vamos a acercarnos un poco más. Selecciona la capa, presiona y vamos a encogerla a 85. De esta manera, esta esfera siempre aparecerá dentro de la trayectoria de los círculos. Bien. Entonces, después de haber arreglado el camino de la pequeña esfera, vamos a mejorar su animación. Podemos esta capa, establecer la pantalla de vista previa para que encaje, y pasar a la siguiente parte. 27. Métodos de animación avanzados: Entonces, para mejorar la animación que creamos, primero suavizaremos los fotogramas clave convirtiéndolos en fotogramas clave EZ Es. Vamos a seleccionar la capa, presionarte para ver todos los fotogramas clave, seleccionarlos y presionar F nueve Veamos cómo se ve. Bien, ahora la animación no se ve tan genial. Veamos cómo podemos mejorar esto. Vamos a acercarnos. Moveremos la pantalla por aquí y aprenderemos a hacerlo. Lo primero, sé que en este fotograma clave, esta esfera necesita moverse muy rápidamente hacia arriba Para ello, entremos en el editor de grafos. Asegúrate de que estamos en el gráfico de velocidad. Y ahora vamos a arrastrar esta manija por aquí y esta de aquí. Esto provocó que la esfera se moviera muy rápidamente al inicio de este fotograma clave Ahora quiero que esta esfera descienda rápidamente cuando llegue a este fotograma clave Seleccionemos este fotograma clave, arrastremos este controlador por aquí, y este manejador de este fotograma clave por Veamos cómo se ve. Se ve genial. Cambiemos el color de la esfera a blanco por ahora, que podamos verla mejor. Ahora vamos a seleccionar de nuevo el parámetro de posición desde aquí, para que podamos ver los fotogramas clave y continuar Ahora quiero que esta esfera no se detenga en este punto. Para ello, seleccionemos este fotograma clave, lo presionemos dos veces y seleccionemos continuo Haga clic en Bien y mueva este fotograma clave hacia arriba. Veamos cómo se ve. Lo planteé demasiado. Vamos a acercarnos. Y ahora vamos a bajarlo un poco. Ahora se ve genial. Después de eso, en este punto, la esfera necesita continuar su movimiento rápidamente. Veamos cómo podemos hacer eso. Salgamos del editor gráfico. Podemos convertir este fotograma clave en un fotograma clave continuo para lograrlo Acercaré el fotograma clave para que podamos ver lo que estamos haciendo Como puede ver, el fotograma clave es actualmente una facilidad y fotograma clave Si mantenemos presionada la tecla de control y hacemos clic en el fotograma clave una vez, volverá a un fotograma clave normal Pero si volvemos a hacer clic en él mientras mantenemos presionado el control, cambiará a un fotograma clave continuo Entonces veamos cómo se ve. Entonces, cuando la esfera llega a este punto, no se detiene, continúa su movimiento. Ahora, tampoco quiero que haya una parada en esta parte. Entonces o convertiremos este fotograma clave en un fotograma clave continuo o lo devolveremos a un fotograma clave regular Mantendremos presionado el control y haremos clic en este fotograma clave una vez. Veamos cómo se ve. Una vez más. Se ve bien. Pero ahora intentemos hacer de este fotograma clave un fotograma clave regular y el otro, un fotograma clave continuo Creo que así será mejor. Dejémoslo así y sigamos adelante. Convertiremos los últimos fotogramas clave en un continuo. Mantendremos pulsado el control y haremos clic a la vez. Veamos cómo se ve. Bien, creo que devolveremos este fotograma clave a continuo y este a la normalidad Te muestro intencionalmente este proceso porque cuando animamos algo, siempre cambiamos los fotogramas clave hasta que encontremos algo que más nos guste Este es un flujo de trabajo normal y efectos posteriores. Bien, una vez que hayamos terminado con los fotogramas clave, cronometremos la animación y los movamos en la línea de tiempo hasta que alcancemos la velocidad de animación con la que estamos satisfechos Entonces, antes que nada, ahora mismo, esta animación tiene una duración de 4 segundos. Eso es demasiado largo, lo que hace que toda la animación se vea lenta. Vamos a acortar toda esta animación. Para ello, seleccionemos todos los fotogramas clave que tenemos. Nos quedaremos en el segundo número dos con el indicador de tiempo, mantendremos presionada la tecla alt y arrastraremos el último fotograma clave mientras mantenemos presionada la tecla Mayús Veamos cómo se ve. Ahora, quiero que todo el movimiento que ocurre en la parte inferior del círculo se acelere. Para ello, seleccionemos los tres últimos fotogramas clave. Ahora, mantenga presionada la tecla Alt y arrastre el último fotograma clave. Digamos que encuadre 30. Veamos cómo se ve. Creo que es genial. Ahora, hagamos que esta esfera vuelva a repetir la misma animación. Quiero que esta esfera no se detenga cuando llegue a este punto. Quiero que siga moviéndose hacia arriba. Para ello, podemos seleccionar este fotograma clave y todos los fotogramas clave que vienen después Los copiaremos presionando Control C, y los pegaremos aquí por ahora en los dos segundos. Veamos cómo se ve. Se ve bien. Ahora, para un mejor movimiento, convertiremos este fotograma clave en un fotograma clave continuo Pregunta, ¿cómo podemos convertir un fotograma clave en un fotograma clave continuo? Para ello, mantendremos presionada la tecla de control y haremos clic en este fotograma clave una vez, y luego otra vez. Veamos qué sale. También noto que aquí va a haber un pequeño problema porque los fotogramas clave aquí son de otro tipo Hagámoslo continuo también. Y el último continuo. Veamos qué sale. Ahora hagamos que la esfera haga en otro salto. Primero, extendamos el área de trabajo. Y como hicimos antes, cuando copiamos toda la animación de este fotograma clave. Ahora podemos copiar estos fotogramas clave de aquí porque es cuando la esfera comienza a subir, se queda en el aire y luego desciende rápidamente Ahora, vayamos al marco 30 y peguémoslos aquí. De alguna manera estos fotogramas clave se convirtieron en facilidad fácil. No es un problema. Vamos a convertirlos en fotogramas clave continuos Ahora veamos cómo se ve todo junto. En mi opinión, la animación es lenta. Vamos a acortarlo un poco. Para ello, seleccione todos los fotogramas clave. Digamos que queremos que toda la animación dure hasta el segundo número cuatro. Mantenga presionada la tecla lp y arrastre el último fotograma clave mientras mantiene presionada la tecla Mayús Tenga en cuenta que a medida que movemos este fotograma clave, se volvió fácil facilidad. Por ahora, no nos molesta. Nosotros nos encargaremos de ello más adelante si es necesario. Por ahora, solo estamos comprobando la velocidad de toda la animación. Se ve genial. Ahora quiero la animación que ocurre en la parte inferior sea rápida y suave. Lo que podemos hacer es acercar estos fotogramas clave entre sí así Hagamos esto en todas las partes donde está la esfera en la parte inferior de la animación. Veamos cómo se ve. En mi opinión, podemos acelerar esto aún más. Vamos a acercarnos aún más esos fotogramas clave el uno al otro. Volvamos a verlo. Bien, ahora se ve mucho mejor. Hagamos que esta esfera haga otra rotación. Para ello, pasemos a segundo y 30 cuadros. Copiaremos todos los fotogramas clave de esta esfera y los pegaremos a la posición del indicador de tiempo. Cambiemos estos fotogramas clave a fotogramas clave continuos. Después de que terminemos con esta animación, hagamos que la esfera entre en el marco de alguna manera porque no puede pararse aquí y luego saltar. No se ve bien. Por ejemplo, a partir de este momento, podemos crear una animación a escala para la esfera. Presionemos S y creamos aquí los primeros fotogramas clave. Ahora, vamos a presionarte para ver todos los fotogramas clave en esta capa Ahora, retrocedamos un poco en el tiempo, por ejemplo, hasta aquí y hagamos que el tamaño de la esfera sea cero. Convertiremos estos fotogramas clave a Ayeas y veremos cómo se ve Creo que se ve bien. Ahora que estamos empezando a ver la esfera a partir de este momento, realmente no necesitamos toda la parte inicial. Pero para guardar la animación y evitar daños, no eliminaremos los fotogramas clave. Sólo acortaremos la capa. Podemos acortar manualmente la capa o usar el lt de corte corto y el corchete izquierdo Y ahora lo que podemos hacer es crear una animación de la desaparición de la esfera. Para ello, podemos copiar los fotogramas clave del parámetro scale que creamos previamente. Después de eso, pegarlos al final de la animación e invertir su orden haciendo clic derecho sobre uno de ellos, accediendo al asistente de fotogramas clave y seleccionando fotogramas clave inversos de tiempo Porque en este punto, ya no vemos la esfera, podemos cortar la capa. Quedémonos aquí con el indicador de tiempo y presionemos Alt y escribamos corchetes. Ahora vamos a mejorar nuestra animación con un efecto cool que usamos en la lección anterior, llamado echo. Vamos al panel de efectos y presets. Escriba echo en la barra de búsqueda. Arrastre este efecto a la esfera. Aquí escribimos -0.001. Aquí escribimos 30, y aquí lo cambiamos al máximo. Ahora, cuando la esfera se mueva a alta velocidad, veremos un efecto de rastro fresco. Este efecto puede ser un poco pesado en tu computadora, así que ten cuidado de no abusar de él con demasiados duplicados Ahora vamos a colorear la esfera en azul, tal como estaba al principio. Seleccionaremos la capa, iremos a rellenar y probaremos el color azul usando el cuentagotas Después presionaremos enter. Excelente. Volvamos a acercarnos y ahora dupliquemos nuestra esfera dos veces más. Pero antes de eso, organicemos la pantalla de vista previa para un mejor flujo de trabajo. Y ahora, seleccionaremos la capa. A continuación, presionaremos Control D. Finalmente, colorearemos la nueva esfera en amarillo. Después de eso, volveremos a duplicarlo y colorearlo en rojo. Ahora vamos a crear un offset entre todas las esferas. Vamos a mover esas dos capas por aquí. Para ser precisos, podemos contar cuántos fotogramas movimos exactamente, usando un atajo. Mantendremos presionada la tecla de control y presionaremos la flecha derecha en nuestro teclado. Bien, entonces movemos diez fotogramas exactamente. Ahora vamos a seleccionar sólo la capa de la esfera roja. Ahora, muévala diez fotogramas usando las teclas de control y flecha en el teclado. Ahora vamos a mover la capa por aquí. Veamos cómo se ve. Se ve genial. Ahora quiero enseñarte algo importante. Digamos que decidimos reducir a diez el grosor del trazo del círculo grande. Ahora las esferas más pequeñas son demasiado grandes en comparación con el nuevo trazo. Si reducimos estas capas a través del parámetro scale, debido a que este parámetro ya tiene fotogramas clave, crearemos fotogramas clave innecesarios y arruinaremos la animación. Veamos cómo hacerlo correctamente. La forma correcta de hacerlo es abrir el contenido de la capa y llegar a las transformaciones de la propia elipse Podemos hacer esto rápidamente para todas las capas juntas seleccionándolas todas, escribiendo escala en la barra de búsqueda, presionando enter y reduciendo las esferas a través de la transformación de la elipse y no a través de la escala de capa Verá, no hay fotogramas clave en el parámetro de escala. Aquí escribiremos 50. Esto lo escribiremos también en la segunda y tercera esferas. Ahora podemos cerrar la barra de búsqueda, y ahí hemos reducido las esferas sin afectar la animación Bien, sigamos adelante. Ahora aumentemos el grosor del trazo del círculo grande. Tal vez a 20. Es demasiado grande. Escribamos 15. 15 es excelente. Ahora veo que el offset que creé es demasiado grande. Entonces acerquemos las capas así. Eso es mejor. Se ve bien. Por cierto, si no te gusta el efecto, puedes apagarlo desde aquí. Veamos cómo se ve. Bien, me gusta cómo se ve con el efecto. Eso es. Hemos animado las esferas, y ahora procedamos a animar el trazo del círculo grande Pero antes de eso, recomiendo encarecidamente tomar un descanso de diez minutos. Levantarse de 28. Acabar para crear la animación de Loader: Entonces primero, etiquetemos esta capa con cualquier color para poder distinguirla de las otras capas. Ahora para animar nuestro trazo, abriremos la capa, abriremos el contenido también, seleccionaremos la elipse y agregaremos un efecto llamado recortar Posicionemos la pantalla para que podamos ver el círculo. Ahora, cuando abrimos el efecto, vemos un parámetro llamado end, que vamos a animar. Pasemos al inicio de la animación y pongamos el valor del parámetro n a cero. En el segundo número uno, lo cambiaremos a 100. Veamos cómo se ve. Excelente. Ahora, como puede ver, las esquinas de nuestro trazo son rectas. No creo que se vea muy bien. Veamos cómo podemos redondearlos. Para ello, abriremos los parámetros de trazo y cambiaremos el límite de línea a redondear. Cambiémoslo aquí a redondo también. Ahora se ve un poco mejor. Bien. Cerremos el trazo y mejoremos la animación que creamos con ***. Seleccione los fotogramas clave y presione F nueve. Ahora, mantengamos presionada la tecla Alt y hagamos doble clic en uno de los fotogramas clave para acceder a la velocidad del fotograma clave Lo cambiaremos aquí a 85 sobre 85 y daremos clic en Bien. Veamos cómo se ve. Bien, cerrémoslo y sigamos creando la animación del icono V. Se supone que la animación del ícono V comienza cuando las pequeñas esferas terminan su última rotación. Parémonos en el punto donde la esfera azul termina su animación. Vamos a acercarnos. Asegúrate de que no estamos seleccionando ninguna capa y elige la herramienta pluma. A partir de este punto, crearemos la forma de la forma de V. Podemos mover estos puntos más adelante. Mientras tanto, apaguemos el relleno para esta forma, y escojamos que el trazo sea en azul. A continuación, cambiaremos el grosor a 15, y redondearemos las esquinas de esta forma como hicimos antes. Para esto, abriremos los parámetros de trazo y cambiaremos el límite de línea a redondo, y para que la conexión también sea redonda. Cambiémoslo aquí a redondo también. Ahora también está redondeado aquí. Vamos a cerrar la capa. Ahora, presiona enter y cambia el nombre a V uno. Esta capa se supone que debe comenzar desde aquí, así que no necesitamos toda esta parte aquí al principio. Vamos a cortarlo a la posición del indicador de tiempo presionando Alt y corchete izquierdo. Y para animar esta forma, volveremos a utilizar el efecto de trazados de recorte como antes Entonces vamos a abrir el contenido, seleccionar la forma, ir a agregar y elegir recortar trazados. Nuevamente, crearemos fotogramas clave para el parámetro nd. Podemos ajustar el panel de composición para un mejor flujo de trabajo. En este punto en el tiempo, vamos a crear fotogramas clave con un valor de cero. Y ahora vamos a avanzar 1 segundo. Si ahora estamos en los fotogramas quinto y 19, pasemos a los fotogramas sexto y 19. Vamos a crear fotogramas clave con un valor de 100. Ahora, hagamos los fotogramas clave como esta vez, cambiaremos la velocidad a través del editor de grafos de tal manera. Lo que acabamos de hacer ahora es tiempo de la animación del icono v a la animación del final de la esfera. Es decir, cuando la esfera azul se encoge, comienza a aparecer la primera forma de v Ahora, centrémonos en esta parte de la forma. No queremos que esta parte se quede aquí. Esta parte necesita estar dentro de la esfera. Veamos cómo hacerlo. En primer lugar, volvamos a la herramienta de selección. Y ahora vamos a ajustar también el parámetro de inicio. Queremos que la animación de la forma sea como se ve ahora hasta este punto. Así que vamos a crear un fotograma clave aquí con el valor actual. Y cuando la forma complete su animación, queremos que esta parte se mueva un poco dentro. Escribamos 20. También convertiremos estos fotogramas clave a Easy Ease y veamos cómo se ve Creo que esta animación debería comenzar antes. Eso se ve mejor. Y ahora también podemos cambiar la velocidad de esta animación a través del editor de grafos como lo hicimos antes. Vamos a comprobar cómo se ve. Todo bien. Sigamos adelante. Bien. Entonces ahora si queremos cambiar un poco la forma, podemos tomar la herramienta pluma, seleccionar uno de los puntos, y moverlo a donde queramos. Vamos a pasar esto a, algo así. Ahora, vamos a duplicar esta capa dos veces más. Pero antes de eso, cortemos esta capa hasta el punto en que termine la animación. La animación termina aquí. Presionemos alt y el soporte derecho para cortarlo. Ahora cierra todas las capas. Vuelve a la herramienta de selección y duplica la forma. Ahora cambiemos el color de la nueva forma de V a amarillo. Una vez más, dupliquemos esta capa y cambiemos el color a rojo. Y ahora, quiero que la v azul esté encima de todos, así que movamos la capa de la V amarilla debajo de ella, y colocaremos la V roja debajo de la V. A continuación, vamos a crear un desplazamiento para estas capas de esta manera. Vamos a alejarlo un poco más. Volvamos a verlo. Creo que toda esta animación se está ejecutando muy lentamente. Así que vamos a seleccionar todas estas capas. Presionarte. Seleccione todos los fotogramas clave. Y ahora, mantén presionada la tecla Alt y arrastra aquí los últimos fotogramas clave de estas capas. Ahora se ve mejor. Si quieres conservar estas capas un poco más, puedes extenderlas así. Volvamos a verlo. Bien, ahora terminemos esta animación cerrando este círculo. Lo haremos usando el efecto de trazados de recorte. Ajustemos la pantalla de vista previa y cerremos estas capas. Ahora, selecciona el círculo y ajusta el panel de composición así. Ahora, vamos a abrir la capa y para aquellos que no pueden ver el efecto de trazados de recorte. Puedes abrir todos los parámetros aquí hasta que veas el efecto. En esta ocasión animaremos el parámetro start. Decidamos que el cierre comenzará en el punto donde desaparezcan todas las formas en V, que es a los 6 segundos y 50 fotogramas. En este momento, crearemos fotogramas clave con un valor de cero. Ahora ajustemos un poco el área de trabajo. Ahora vamos a movernos 1 segundo exactamente hacia adelante. Si ahora estamos en 6 segundos y 50 fotogramas, vamos a llegar a 7 segundos y 50 fotogramas, y crearemos fotogramas clave con un valor de 100. Ahora vamos a convertir estos fotogramas clave a asys Y esta vez cambiará la velocidad a través del editor de grafos de manera que la animación comenzará lentamente y hacia el final, aumentará en Ahora, para que la animación que creamos juegue en un loop perfecto, vayamos al punto en el tiempo donde todavía podamos ver una pequeña parte del trazo del círculo grande. Este es un buen punto en el tiempo, porque como se puede ver, vemos un pedacito del trazo. Y ahora acortemos el área de trabajo a este punto en el tiempo presionando. Bien. Ahora volvamos al principio. Presiona y mueve esos dos fotogramas clave hacia atrás un poco para que la animación comience donde ya podamos ver esta pequeña parte Lo que va a pasar ahora es que cuando termine la animación, comenzará sin problemas desde el mismo punto en que terminó. Ahora, quiero mostrarte cómo se habría visto si no hiciéramos esto y terminar la animación cuando el trazo desapareció por completo de la pantalla. También al principio, si no movimos un poco los fotogramas clave Voy a traer la animación nuevo a como era al principio. No hace falta que lo hagas conmigo. Se habría visto así. Presta atención a la animación cuando termine el video. Hay un corte pequeño y desagradable en la animación. Volvamos a verlo. Por eso terminamos e iniciamos la animación cuando vemos esta pequeña pieza. Bien, ahora lo volveré a la normalidad. Y con esto, hemos terminado de preparar la animación del cargador. Presionemos control para guardar el proyecto y pasar a ver cómo podemos presentar esta animación en nuestro portafolio como una P. 29. Compártelo en tu cartera como un profesional: En el primer paso, vamos a crear la forma del iPhone. Para ello, utilizaremos la herramienta Rectángulo. Ahora, asegurémonos de que no estamos seleccionando ninguna capa y cambiemos el color de relleno a blanco. A continuación, colorearemos el trazo en gris claro desde nuestra paleta. Una cosa importante a saber antes crear el iPhone es que si queremos crear una forma y dimensiones específicas, en nuestro caso, 1,920 píxeles de alto que 1080 píxeles de ancho, para crear las formas simétricamente y luego cambiar las dimensiones de Te voy a mostrar a lo que me refiero. Así que vamos a crear un cuadrado simétrico en forma presionando la tecla Mayús independientemente del tamaño. Ahora, vamos a abrir los parámetros de la forma que creamos aquí. Abriremos el camino e ingresaremos dimensiones precisas en el parámetro llamado size. Abramos la cerradura de las dimensiones. Y ahora aquí en ancho, escribiremos 1080 y en altura escribiremos 1920. Ahora, volvamos a bloquear las dimensiones y reducirlas a través de uno de los valores. Eso es suficiente. A partir de aquí, podemos redondear las esquinas. 60 me parece perfecto. Ahora, aumentemos el trazo a 30. Después de eso, presionemos Enter y cambiemos el nombre de la capa a iPhone. Vamos a moverlo por debajo de todas las capas. Ahora centró esta capa a la composición usando la herramienta alineada. Veamos si encaja bien con nuestra animación. En caso de que queramos aumentar la altura de nuestro iPhone, podemos volver al parámetro de tamaño de esta ruta de formas, desbloquearemos y cambiaremos su altura desde aquí. Ahora volvamos a bloquearlo y cerrar la capa y seguir adelante. Lo siguiente que haremos es agrupar todas estas capas en una pre-comp Así que vamos a seleccionar todas las capas. Presiona Control, Shift C, llama a esta pantalla de iPhone pre-comp y presiona Bien. Ahora volvamos a la herramienta de selección. Y como pueden ver, aquí tenemos mucho espacio vacío. Redujamos el tamaño de esta precomp. Para ello, entraremos en la pre-comp. Podemos apagar el fondo, luego presionar Control K y reducir el ancho de esta composición. 540 me queda bien. Y ahora, como toda esta sección en la línea de tiempo es innecesaria, podemos cortarla. Para ello haga clic con el botón derecho en el área de trabajo y elija recortar comp al área de trabajo. Volvamos a la composición principal y sigamos adelante. Lo siguiente que haremos es cambiar el tamaño de esta composición en la que nos encontramos actualmente. Para esto presione Control K, cambie su ancho a 1920 píxeles y presione Enter. Es importante tener en cuenta que no cambiamos el tamaño de la pre-comp del iPhone Esta pre-comp es el tamaño que la configuramos antes. Cambiamos la configuración de la composición llamada animación de descargador. Bien, sigamos adelante. Ahora vamos a agrandar esta pre-comp seleccionada y proceso. Vamos a escalarlo hasta 200. Vamos a colocarlo aquí. Y ahora, si me acerco, Tenga en cuenta que la calidad de los objetos dentro de esta precomp ha disminuido Pregunta, ¿qué debemos hacer para maximizar la calidad? Para ello, necesitamos activar la función colapso, que se puede encontrar aquí. Hagamos click aquí e inmediatamente podremos ver la diferencia. Bien, continuemos. Creo que este tamaño es demasiado grande, así que vamos a reducirlo a 150 o tal vez 130. Ahora presionemos la tecla del apóstrofo para ver la cuadrícula. Esto nos facilitará mucho el diseño de la escena. Ahora vamos a crear tres esferas aquí. Podemos crearlo usando la herramienta elipse. Mantengamos pulsado aquí, soltamos para hacer clic y seleccionar la herramienta de elipse Ahora asegurémonos de no seleccionar ninguna capa. Porque si seleccionamos una capa e intentamos crear una esfera acabaremos con una máscara, y eso no es lo que queremos. Presionemos Control Z para deshacer la acción. Ahora, asegurémonos de no seleccionar esa capa y crear una esfera por aquí. Apaguemos el trazo. Elige el color de relleno y el azul. A continuación, seleccionémoslo en proceso, luego cambiemos el valor a 50 o 30. Eso se ve mejor Ahora vamos a entrar en el contenido de esta capa, seleccionar la Elipse y duplicarla Pero antes, vamos a acercar un poco y ajustar la pantalla de vista previa para que podamos ver que la esfera es mejor. Ahora selecciona la Elipse y presiona Control D. A continuación, vamos a abrir la transformación de la nueva elipse y moverla usando el parámetro de posición Por último, cambiemos el color de la esfera a amarillo. Antes de duplicarlo de nuevo, debemos seleccionar primero la Trayectoria de Elipse, luego seleccionar la Elipse y presionar Control para duplicarla Por último, movamos la nueva elipse aquí y cambiemos el color a rojo Ahora, cambiemos el nombre a tres esferas. A continuación, tomemos la herramienta de texto. Configura la vista previa para que se ajuste y escriba la pantalla de carga de una aplicación. Presionemos Controlar a para seleccionar todo el texto, elige tu fuente que nos guste. Cambia el tamaño y ajusta un poco el líder. Ahora, presionemos Control Enter para salir de la línea de texto. Coloreemos el texto con nuestro color claro de la paleta y coloquemos esta capa debajo de todas las demás capas. Por último, volvamos a la herramienta de selección y movemos el texto aquí abajo. Alineemos las esferas aquí. Podemos centrarlos usando una línea. Ahora, vamos a duplicar la capa de texto. Lo moveremos hacia arriba y aquí puedes cambiar el texto a tu nombre. Reducirá el tamaño de la fuente, cambiará el peso a algo más ligero. Ahora, vamos a dar clic aquí. Escogeremos la herramienta de selección y moveremos este texto aquí. En este punto, ya no necesitamos la paleta de colores. Así que vamos a mostrarlo en el panel de capas y eliminarlo de aquí. Ahora podemos ocultar la grilla. Entonces, presionemos la clave del apóstrofo. Ahora, vamos a crear un sólido que nos sirva como trasfondo. Para ello. Presionemos Control Y hará que el color de fondo sea azul pero ligeramente más oscuro. Finalmente, coloquemos la capa sólida debajo de todas las demás capas. Ahora vamos a mejorar el aspecto de nuestra escena usando un efecto llamado drop-shadow Aplicaremos este efecto a la precomp del iPhone. Ahora muestrea el color de fondo y hazlo más oscuro. A continuación, aumentemos la opacidad hasta 100. Distancia, la cambiará a cero y aumentará la suavidad, digamos hasta 300. Creo que el color es demasiado oscuro. Vamos a alegrarlo un poco. Con esto. Terminamos el diseño de esta escena. Antes de renderizarlo, revisemos toda la animación de principio a fin para verificar si hay errores. Noté el error ortográfico. Así que déjame arreglarlo rápidamente. Volvamos a verlo. Y ahora aprovechemos esta oportunidad y practiquemos una vez más para ajustar el grosor del trazo del círculo grande. Entonces, seleccionemos la Herramienta de Selección y entremos en la precomp de iPhones Ahora vamos a acercar un poco, seleccionar la capa deseada y aumentar el grosor a 25. Y ahora, también necesitamos aumentar el tamaño de las esferas. Recuerda, necesitamos agrandarlos a través las transformaciones de la forma y no las transformaciones de la capa. Para hacer esto rápidamente en todas las capas, seleccionemos todas las esferas, capas y escriba scale en la barra de búsqueda. Y por supuesto, no lo vamos a escalar a través de la escala de capas, sino a través de la escala de formas. Cámbialo a 85. Cerremos la barra de búsqueda. Ahora porque ampliamos las esferas, necesitamos ajustar el tamaño de las formas en V en consecuencia. Entonces selecciona esa capa y aumenta el trazo a 25. Por último, cambiemos también el tamaño del trazo para estas dos capas y veamos cómo se ve. Se ve genial. Así que ahora podemos cerrar esta pre-comp desde aquí y renderizar la animación que hicimos Entonces, presionemos Control M para acceder al panel de renderizado, elegiremos renderizarlo en formato h point a 64 de alta calidad, que es mp4 de alta calidad y elegiremos renderizarlo en nuestra carpeta de muestras. Simplemente cambiemos el nombre a animación para portafolio y hagamos clic en Render. Esperemos unos momentos. Bien, ahora veamos qué tenemos. Se ve bien. Ahora puedes compartir la animación que creaste en redes sociales y publicarla en el sitio web de tu portafolio. Presentar una animación de cargador como esta es mucho más impresionante que usarla como imagen estática. Y si disfrutaste el curso, realmente te agradecería que lo leyeras, basado en tu experiencia. También puedes escribir una reseña para que sepa si aprendes algo interesante en el curso o no. Bien, volvamos a nuestro proyecto y organicémoslo. Antes de cerrarlo, vamos a crear una carpeta llamada assets. A continuación, asegurémonos de no seleccionar nada y crear otra carpeta llamada pre-comps Ahora dentro de la carpeta Activos, arrastraremos nuestra paleta de colores y la carpeta de sólidos. Y en pre-comps, arrastraremos la pre-comp del iPhone. Por último, etiquetemos nuestra composición principal en azul. Y ahora puedes dar click aquí para hacer el arreglo aún más organizado. Ahora presionemos Control S para guardar el proyecto. Y ahora puedes cerrarlo 30. Sección 4: tarea de proyecto: Todo bien. Y ahora a practicar lo que aprendimos. Por favor, cree esta animación. Puedes usar colores diferentes a los míos, pero trata de mantener la animación igual. Esta tarea está destinada a ayudarte a recordar y entender lo que has aprendido. No te preocupes. La tarea no va a tomar demasiado de tu tiempo. Está diseñado para ser factible en solo 2 horas. Si tienes algún problema o duda, no dudes en pedirme ayuda a mí o a tus compañeros de clase en nuestro grupo comunitario cerrado M 31. Cierre: Y con esto, hemos terminado el curso. Puedes estar orgulloso de ti mismo porque has dado el primer paso en el mundo del motion design y has aprendido muchas cosas nuevas que ya puedes usar en tu próximo proyecto. Puedes compartir tu video en nuestro grupo comunitario privado, y por supuesto, puedes hacerme cualquier duda ahí. Prometo responder a cualquier duda que pueda tener. Espero que disfrutes de este curso, y puedo esperar a verte en el siguiente.