Live Encore: gifs de gráficos de movimiento divertidos y fáciles

1. Introducción: Hola. Mi nombre es Hongshu, y soy diseñador de movimiento con sede en Toronto, Canadá. Llevo más de seis años animando en Adobe After Effects. Actualmente, estoy trabajando en una agencia de publicidad para clientes como Adidas, PayPal, Walmart, y muchos más. Estoy emocionado de estar aquí hoy para organizar una sesión en vivo. Hoy vamos a estar trabajando juntos en una animación muy sencilla y divertida. Se trata de ocho segundos de largo. Te voy a enseñar a trabajar dentro del Adobe After Effects, el flujo de trabajo entre Adobe Illustrator y After Effects, algunos consejos y trucos, y también algunos atajos de teclado. Esta clase fue grabada en vivo así que llegué a interactuar con los estudiantes mientras trabajaba en este proyecto. Sin más preámbulos, vamos a saltar a la derecha en ella. 2. Cómo preparar tu archivo de Illustrator: Mi nombre es Tiffany. Trabajo en el equipo comunitario de Skillshare. Soy el afortunado anfitrión de la clase en vivo de hoy con el mejor maestro Hung Shu Quo. Estamos súper emocionados de tener a Hung Shu con nosotros hoy. Nos va a caminar a través de unos gráficos en movimiento fáciles y divertidos. Sin más preámbulos, comencemos. Hung Shu, estamos súper emocionados de tenerte aquí hoy. ¿ Por favor contarnos un poco sobre quién eres y qué haces? Hola a todos. Bienvenida. Mi nombre es Hung Shu. Soy Motion Designer con sede en Toronto, Canadá. Llevo más de seis años animando en Adobe After Effects. Actualmente trabaja en una agencia de publicidad para clientes como adidas, PayPal. Muy emocionado de estar aquí hoy para mostrarte cómo hacer un divertido motion graphics. Me uní a Skillshare hace un par de años cuando empecé como estudiante, y me gusta mucho la comunidad. Aprendí muchas cosas en Skillshare también. Empecé a enseñar en Skillshare el año pasado, y es realmente una gran comunidad creativa que la gente sea muy alentadora, así que es genial. Nos encantaría escuchar un poco más sobre lo que estás planeando compartir con nosotros hoy? En primer lugar, solo te voy a mostrar cómo preparar este archivo de Illustrator antes que puedas traerlo a After Effects para la animación. Si tienes el archivo listo, vamos a abrirlo en Adobe Illustrator. Esto es lo que tengo aquí. Como puedes ver aquí, tengo todas estas capas separadas. La mayoría de los casos, cuando tienes una ilustración como esta, vas a tener algunos de estos elementos separados cuando lo estés haciendo, lo cual es genial. Pero lo que pasa es que cuando llevemos este archivo a After Effects, no se va a separar. Todas estas capas se van a combinar en una ilustración plana que realmente no se puede hacer nada al respecto. Lo que tenemos que hacer primero es ir a esta esquina derecha aquí, dar click en esta Capa. Si no tienes Capa, puedes ir encima de esta barra de menús aquí, ve a Ventana. Entonces aquí abajo, en realidad se puede ver el panel Capa. Da click en eso, y luego tenemos el panel Capa abierto en el lado derecho, y puedes ver que todo está en una sola capa. Si haces click en esta flecha aquí, flecha desplegable, puedes ver todos estos diferentes elementos dentro de esta capa. Solo hay una cosa simple que tenemos que hacer es simplemente hacer clic en esta Capa 2, y luego ir a este menú desplegable del lado derecho, este botón aquí, hacer clic en él, y luego ir a Liberar a Capas Secuencia. Una vez que haga click en eso, se pueden ver todos estos elementos. Puedo tocar el icono de los ojos frente a la capa para hacerla invisible y visible en el tablero de arte. Todas estas capas no están separadas. A continuación, lo que tenemos que hacer es simplemente seleccionar todos ellos. El que está dentro de la Capa 2, selecciona todas ellas, y luego arrástrala fuera de la Capa 2. Después de que los llevemos todos afuera, Capa 2 va a estar vacía para que podamos eliminarla. En este caso, tenemos todas nuestras capas separadas unas de otras, y así es como podemos traerla After Effects para animar capas individuales. 3. Cómo organizar el proyecto en After Effects: A continuación, lo que podemos hacer es que podamos traer este archivo a After Effects, organizarlo y empezar a animar. Si tienes abierto tu After Effects, vayamos a Adobe After Effects. Podemos crear un nuevo proyecto. Si tienes este panel aquí, basta con hacer click en Nueva Composición. Entonces podemos cambiar el nombre de esta composición a Main Comp. Hagamos el ancho hasta 1920 por 1080. Velocidad de fotogramas podemos mantenerla en 25 fotogramas por segundo, y luego la duración, solo podemos dejarla a los 15 segundos, lo cual es bueno. Golpeó en “Está bien”. Ahora tenemos este panel aquí, todos estos. Estoy tratando de ir a las ventanas en la parte superior. ¿ Pueden ver el menú Ventana en mi pantalla en la parte superior? Sí. Ahí está. Sí, porque también tengo mis controles de Zoom en la parte superior [SUPERPING]. Sí. Es confuso. [ Risas] Sí, está fastidiando con mi clic. Si vas a Windows y luego puedes elegir Workspace, solo tienes que configurarlo en Estándar. Vas a ver los mismos diseños en el After Effects que lo que tengo en este momento. Si aún no lo ves, puedes restablecer Estándar a Diseño Guardado, se va a restablecer al diseño estándar predeterminado. Esto es lo que tenemos cuando abrimos por primera vez Adobe After Effects. En primer lugar, tenemos que traer el archivo de Illustrator. Vamos al panel superior izquierdo aquí el cual dice, proyectar, y luego manera fácil es simplemente hacer doble clic en este panel, cualquier espacio vacío, doble clic. Va a hacer estallar la ventana del Finder y luego vamos a navegar hasta nuestro archivo aquí. ¿Sabes qué? [ Risas] Olvidé una cosa, olvidé guardar el expediente. [ Risas] Antes de hacer algo, asegúrate de guardar este archivo, lo contrario no tendrá todas las capas separadas. Solo asegúrate de guardar esto para que tenga todas las capas aquí, y luego volvamos a After Effects. Haga doble clic en este panel de proyecto aquí. Vamos a navegar hasta el archivo de Illustrator que tenemos. Antes de hacer clic en algo, asegúrate de importarlo como una Composición - Retener Tamaños de Capa en lugar de metraje porque si lo haces como metraje, también va a aplanar todo en una sola capa que no puedes animar, por lo que debes elegir esta Composición - Retener Tamaños de Capa. Entonces asegúrate de no hacer click en estos dos, porque algunas personas, sin darse cuenta tienen esta secuencia de Illustrator abierta. Si tienes esto comprobado, va a ser muy difícil arreglarlo más adelante, así que tienes que volver a importarlo. Esto es muy importante. Después golpeó en “Open”. Ahora en el panel de proyecto tenemos dos cosas extra aquí, una es una carpeta que contiene todas las capas de nuestro archivo Illustrator, y la otra es una composición. Si hago doble clic en esta composición, realidad se puede ver que tengo esta obra de arte importada a After Effects. Todas estas capas están separadas. Eso es muy bueno. Ahora solo te estoy mostrando cómo organizar los archivos antes de empezar a animar. En primer lugar, vamos a crear una carpeta en el panel del proyecto y llamémosla Assets. Bueno. Entonces vamos a necesitar otra carpeta que se llama precomp. Para aquellos de ustedes que son nuevos en Adobe After Effects, los precomps son como carpetas en Adobe After Effects. Te puede ayudar a organizar las cosas y luego puede agrupar capas juntas. Eso es lo que llamamos un precomp en After Effects. Ahora para que este panel de proyecto organice, solo puedo soltar esta carpeta en los Activos y luego esto se considera un precomp porque se puede ver el ícono aquí. Este es un ícono de precomp. Podemos ponerlo en los precomps. Ahora tenemos tres cosas. Estas son las tres cosas que necesitamos. Vamos a tener la comp principal, que es el espacio de trabajo. Esta es la única comp que vamos a estar animando. Tenemos una carpeta que tiene todos los activos, y luego tenemos una carpeta precomp que vamos a necesitar más adelante. Para empezar, podemos copiar todas nuestras capas de Adobe Illustrator, solo Comando A en el teclado y Comando C, copiar, y volver a la comp principal, pegarla en nuestra comp principal. Esta va a ser la comp en la que vamos a estar animando. Ahora podemos cerrar éste. A continuación, solo quiero organizar estas capas y renombrarlas para que sea fácil y claro. este momento se puede ver aquí el nombre del archivo que dice CC.ai, que no es lo que queremos. Si hago clic en este nombre fuente aquí, este pequeño icono o nombre aquí, puede cambiar entre el nombre fuente al nombre de la capa. El nombre fuente lleva el nombre del archivo fuente, que es bastante largo, eso no es lo que queremos. Hacemos click en esto, va a mostrar nuestro nombre de capa, que es la capa 3-12. Eso no es muy útil también. Lo que tenemos que hacer es solo ver cuáles son y renombrarlos. Éste debe ser el fondo. Sólo estoy tratando de averiguar cuál es cuál. En primer lugar, quiero obtener la capa de fondo. Ahora puedes ver la capa 7, la capa 10 y la capa 12. Si altero el ícono del ojo, estas tres capas son el fondo. Tenemos que agrupar estas tres capas en un precomp. El atajo a eso es Comando Shift C. También puedes ver en mi pantalla aquí. Vamos a llamarlo Antecedentes. Haga clic en “Ok”. Ahora tenemos un precomp que dice antecedentes, y se puede ver en el panel de proyecto tenemos un precomp extra, por lo que necesitamos soltar esto todo el camino hacia abajo en la carpeta precomp para que sea organizada y limpio. Este es un fondo y luego vamos a tener aquí el círculo de los dos. Ese es nuestro círculo. Vamos a precomponerlo de nuevo, Comando Shift C, llámalo Círculo. Ahora tenemos un círculo aquí. Podemos dejar caer éste en el precomp. Ahora tenemos tres precomps dentro de la carpeta precomp. Este es este edificio aquí, y luego tenemos este edificio, tenemos este edificio. Las tres capas en el medio son los tres edificios de fondo. Quiero hacer click en este icono de color aquí en el frente y cambiarlo a color amarillo para que sea más fácil de reconocer. Vamos a cambiar el nombre de éste a tal vez Escena 3, llamemos a esta Escena 1. El último que quiero que sea el segundo, por lo que esta va a ser la Escena 2. Uno, 2, 3, tres escenas. Entonces los dos últimos van a ser el tren que tenemos. Entonces éste va a ser los arbustos. Así es como organizamos capas y organizamos el panel de proyecto dentro Adobe After Effects para que todo quede claro y organizado antes de empezar a animar. 4. Cómo empezar la animación: El siguiente apartado va a ser todo acerca de la animación. En primer lugar, quiero animar las tres escenas, las escenas de fondo primero. Cómo hacemos eso, solo entramos en esta primera escena aquí y podemos golpear en la P en el teclado. Hay una propiedad de posición. La idea principal es que vamos a tener estas tres escenas yendo del lado derecho al lado izquierdo. Van a venir de derecha a izquierda, uno por uno. De derecha a izquierda, algo así. Necesito agregar un fotograma clave. A cero segundos, quiero que esta primera escena esté empezando desde por aquí. Agreguemos aquí un fotograma clave. Entonces yendo adelante tal vez a la marca de tres segundos, como se puede ver en la línea de tiempo aquí, vamos a arrastrar esta propiedad de posición todo el camino hacia la izquierda para que se esté moviendo. Si le pegarías en Spacebar para previsualizar la animación aquí, esto es lo que tenemos ahora. Entonces si apago estos dos para ser claros, sólo podemos ver éste ahora. Vamos a aplicar esta sencilla animación a las tres escenas para que tengan una animación similar, pero luego podemos escalonar más adelante para que se suban una a una para que no choquen entre sí. Este de aquí vamos a tener este movimiento de derecha a izquierda. Entonces vamos a tener aquí la escena 2. Golpeó a P en la propiedad de posición. Podemos agregar un fotograma clave aquí. Desde el tercer segundo hasta el probablemente el seis segundo, podemos tener esta escena aquí moviéndose a la izquierda. Entonces vamos a encender la Escena 3. P en el teclado para la posición y luego vamos a agregar un fotograma clave aquí. Cuando empezó por primera vez, quería empezar desde algún lugar por aquí y luego ir hacia adelante a los ocho segundos. Para el último, no quiero que se mueva todo el camino a la izquierda porque, en el último segundo, todavía quiero algún fondo en mi círculo en lugar de si lo muevo todo el camino cuando termine la animación, no va a haber nada dentro. Eso no es lo que queremos. Queremos que esto se quede dentro cuando termine la animación, así que voy a ponerla aquí en el centro. Esta va a ser nuestra animación por ahora. Esa es nuestra animación de escena de fondo. Después de tener este en su lugar, lo que podemos hacer es que podamos animar el tren. El tren va a ser también la posición cambios de propiedad, lo cual es muy sencillo. Vamos a golpear P en el teclado. Al inicio de la animación aquí, para ésta, quiero probar algo diferente. Quiero hacer clic derecho en la propiedad de posición y luego golpear en dimensiones separadas. De esta manera puedes cambiar manualmente la posición x e y individualmente en lugar de todas al mismo tiempo. Ya que el tren sólo se mueve horizontalmente, sólo avanzando en la exposición, por lo que sólo vamos a cambiar la exposición en el tren. A cero segundos, queremos que el tren empiece desde la izquierda en algún lugar por aquí. Entonces digamos que la animación va a durar ocho segundos. En el último segundo, quiero que el tren se mueva por aquí. Presta atención a mi cronología aquí. Si toco N en el teclado, puedes ver cambios en este rango de vista previa. A esto se le llama el rango de vista previa. Si mi indicador de línea de tiempo está a los ocho segundos, si golpeo N, lo va a cortar desde aquí. Sólo estoy previsualizando todo entre cero segundo a ocho segundos. Echemos un vistazo a nuestra animación por ahora. El problema en este momento es que el tren se está moviendo demasiado lento. Quiero que el tren ya esté dentro del círculo, tal vez alrededor de 1.5 segundos por lo que necesito acelerar el tren un poco más por aquí. Entonces sólo va a ir lentamente hacia adelante. Vamos a prever esto y ver la diferencia. El tren se mueve un poco más rápido en el frente de cero segundo a 1.5 segundos y luego se mueve lentamente en el medio para que veamos toda la acción por aquí y luego alrededor de ocho segundos, se va a parar ahí. 5. Cómo crear el efecto de paralaje: Lo siguiente que queremos hacer es que queremos animar a los arbustos. Queremos crear este efecto de paralaje. Queremos que el edificio de atrás se mueva lentamente, lo que ya lo hacen. Se están moviendo bastante lentamente por la parte trasera. Entonces queremos que estos arbustos se muevan bastante rápido, bastante rápido para crear este efecto de paralaje y que te hagan sentir que el tren se está moviendo rápido. Si bien como se puede ver, nuestro tren se mueve bastante lentamente sin ningún contexto pero si sumamos el arbusto en, va a crear una ilusión que el tren se está moviendo rápido. Lo que tenemos que hacer es que necesitamos acercar, mando. Puedes ver el atajo en mi pantalla aquí. Tenemos que acercar y luego tenemos que ir a nuestras capas de arbusto. Estas son nuestras capas de arbusto. Apagemos el ícono del ojo en el tren. Sólo escóndelo por ahora así que sólo nos estamos centrando en estos. Esta parte va a ser un poco difícil de entender pero soportar conmigo. Vamos a lograrlo. En primer lugar, necesitamos encender nuestro gobernante, Comando R. Se puede ver que aquí hay una regla en mi pantalla. Si arrastro de esta parte aquí, va a arrastrar una regla. Sólo quiero tener un gobernante en la punta de este arbusto aquí. En la punta de aquí, se puede ver que casi está tocando este primer árbol de aquí. Entonces lo que quiero hacer es duplicar dos arbustos. Voy al Comando D, duplique uno y luego Comando D de nuevo, duplique otro. Entonces tengo tres capas. El primer arbusto va a ser el centro que tenemos y luego vamos a arrastrar uno a la izquierda. Entonces el tercero, vamos a arrastrar uno a la derecha. Vamos a extender la longitud de estos arbustos para que cuando lo estamos moviendo de derecha a izquierda, podamos moverlo bastante rápido. Ves esta parte, tiene un problema aquí. Estos árboles aquí, quiero poner el arbusto 2 bajo el arbusto 1, que es el central para cubrir esos tramos como intersecantes. Lo siguiente que queremos hacer es solo recordar esta línea aquí. Esta línea está tocando el primer árbol de la izquierda. Lo siguiente que queremos hacer, queremos dar padre a los árboles izquierdo y derecho al centro uno. Tenemos que ir al arbusto 3, y luego arrastrar este botón de látigo pick. Esto es la crianza de los hijos. Si no estás familiarizado con la crianza de los hijos, lo que hace es que después de que yo padre estos dos arbustos al medio, cuando muevo el medio, digamos si golpeo en “P” en la propiedad de posición y luego arrastrar, los dos se va a mover con el medio. Algo como esto. Sólo necesito animar el medio y no necesito animar los tres al mismo tiempo. Va a hacer que el flujo de trabajo sea más rápido. Ahora, lo que necesito hacer es agregar un marco clave en la posición. Lo siento, creo que la posición cambió, un segundo. Por aquí, se puede ver mi arbusto 1. Esta línea está tocando aquí este árbol, lo cual es bueno. Entonces lo que tenemos que hacer es que necesitamos agregar una propiedad de posición en el arbusto en el centro aquí. Arrástralo todo el camino hacia la derecha para que el arbusto vaya a empezar a animar desde aquí y luego tal vez en dos segundos, se va a mover todo el camino hacia la izquierda. Ahora necesito acercar. Lo que estoy tratando de hacer aquí, estoy tratando de crear un bucle aquí. Si apago este arbusto 1, solo necesito ver que mi último arbusto, el arbusto 3, este árbol está tocando esta línea. Por eso puedo crear un bucle sin fisuras para que cuando estoy haciendo bucle en esta animación, no notes ninguna diferencia. Sólo va a moverse continuamente de derecha a izquierda. Éste, todo lo que necesito hacer me acaba de compensar adjuntar porque vamos a tener este árbol al principio. Necesitamos que este árbol toque esta línea aquí y luego al final, este árbol está casi tocando la línea para que podamos crear un bucle. 6. Cómo crear una animación en bucle: Todo lo que tenemos que hacer es que necesitamos duplicar estas tres capas. Pero antes de que hagamos eso, quiero crear un pre-comp, Comando Shift C. Ahora quiero cortar esta capa aquí. Lo siguiente que quiero simplemente Comando D. Si previsupo esto, se puede ver que en realidad está haciendo un bucle dentro del círculo ahí. Pero es difícil de decir, porque todavía no tengo una máscara puesta. Lo siguiente que necesito hacer es crear una máscara para solo mostrar el área del círculo central en lugar de todo el asunto. Sólo necesito duplicar este bucle aquí. Entonces lo que tengo que hacer es que necesito crear otra composición que componga todas estas cuatro animaciones, un grupo más grande para albergar todas estas cuatro capas. Mando Turno C, Bush. Ahora tenemos esta capa. A continuación, solo necesito arrastrar una máscara. Ve arriba aquí, ve a la herramienta Elipse. Simplemente dibuja una máscara en esta capa y puedes mantener pulsado Mayús para asegurarte de que sea un círculo perfecto y luego mantén presionado la Barra espaciadora para mover la máscara. Estoy manteniendo pulsado Mayús y también Barra Espaciadora para mover la máscara, para asegurarme de que se alinee perfectamente con el círculo. Estoy tratando de alinear esto con círculo aquí. Eso es bueno. Ahora si miramos aquí esta animación, podemos ver el arbusto moviéndose. Eso es bueno. Entonces tenemos el fondo, pero aún no hemos creado una máscara para el fondo, por lo que ya estás viendo todo afuera. Lo siguiente, lo que queremos hacer, queremos hacer lo mismo. Apenas precomponer las tres escenas. Comando Shift C. Vamos a llamarlo Escenas, y ahora solo podemos dibujar una máscara. Asegúrate de tener seleccionada la capa de escena, y luego simplemente dibuja una máscara. Sostén pulsado Mayús para asegurarte de que sea un círculo perfecto, y luego puedes mantener presionado la barra espaciadora para mover la máscara alrededor que puedas alinear todo perfectamente. Eso es bueno. Entonces alejemos el zoom y echemos un vistazo. Otra cosa es que sólo podemos encender nuestras capas de tren ahora. Se puede ver el tren. 7. Cómo agregar un efecto track matte: Para el tren, quiero introducir otra idea. Hicimos la máscara para los arbustos y las escenas para que solo estés viendo esta sección media. Pero para el tren, quiero sumar lo que llamamos mattes de pista. Cómo hacemos eso es ir a capa, vamos a nuevo, y luego creamos una capa sólida. Golpeó en Okay. Entonces aún tenemos que dibujar un círculo sobre esta capa sólida. Asegúrate de golpear en Mayús y luego usar barra espaciadora para moverme. Eso es bueno. Lo siguiente es que quiero este círculo, vamos a renombrar esto por un track mattes. Quiero que este círculo sea una pista mate para el tren. Lo único que tenemos que hacer es asegurarnos de que esta pista mate esté encima de la capa que querías seleccionar y luego ir en el tren y dar click aquí, hay una función de track matte. Asegúrate de configurarlo a Alpha mate. Se puede ver que esta capa se apaga automáticamente. Si no ves la pista mate aquí, puedes hacer click en este segundo icono en la esquina izquierda de aquí, y va a mostrar esta columna que puedes seleccionar. Lo que sucede es que cada vez que este círculo superior sea visible, la capa debajo de él va a ser visible. Como podemos ver, tenemos el círculo en el centro. Siempre que entre el tren, el círculo se va a hacer visible. Cuando el tren esté fuera del círculo, va a ser invisible. Así funciona una pista mate. Cuando el tren entre al círculo encima de él, va a ser visible así, pero todo fuera del círculo, no se puede ver. Ahora, lo que quiero hacer es que quiero cambiar esto porque no quiero que el tren se corte de la cabeza aquí. Solo quiero hacer click en estos puntos de anclaje en la máscara de las mattes de pista, y luego arrastrar esto un poco más para que cuando el tren viaja fuera del círculo, todavía se esté apareciendo. Arrástralo aún más. Si lo muevo por dentro, se puede ver. Si está fuera del círculo, no se puede ver. Vamos a asegurarnos de que está alrededor de esta zona aquí. Arrástralo todo el camino afuera. El tren es siempre visible. Todavía puedo ver un poco la cabeza del tren aquí. Necesito asegurarme de que la exposición se mueva un poco más a la izquierda. Vamos a prever esta animación aquí. 8. Agregar otros elementos: En primer lugar, quiero agregar un pop-up al principio, una transición diciendo para revelar esta animación. No quiero que esto permanezca en la proyección todo el tiempo. La forma en que hacemos eso es, vamos a ir a la parte superior aquí y hacer clic en esta Herramienta Elipse y simplemente hacer doble clic en la Herramienta Elipse. Aquí está creando una forma ovalada. En este momento solo tengo un trazo aquí no tengo relleno, así que necesito crear un color de relleno. Asegúrate de hacer clic en esto y luego selecciona el color amarillo. Ya tengo este color amarillo aquí. Puede utilizar la Herramienta Cuentagotas para seleccionar cualquier color que desee. Vamos a cancelar. Simplemente haga clic en “Ok” Tengo este color de relleno y luego puedo apagar el Trazo solo manteniendo pulsada la opción en mi teclado. Hago clic con el botón izquierdo un par de veces, se va a apagar. Ahora vamos a esta forma ovalada. Da click en este menú desplegable, clic en este Elipse Path y puedes ver que hay un tamaño. Vamos a desvincular el tamaño de la proporción para que podamos cambiar esta forma ovalada en un círculo. Vamos a cambiarlo a 1080 por 1080 y así es como obtenemos un círculo perfecto. Quiero hacer este círculo un poco más pequeño, algo así. Lo siguiente que queremos hacer es que queremos añadir otra máscara encima de este círculo. Quiero hacer click en esta Herramienta Elipse y luego asegurarme de hacer clic en esta Herramienta Máscara aquí. Si no haces clic en esta máscara en la parte superior, va a dibujar otra forma dentro de esta capa. Eso no es lo que queremos, queremos dibujar una máscara dentro de esta capa así que pincha sobre la Máscara. Otra cosa es cuando estás dibujando una máscara, puedes comenzar desde el centro perfecto y luego cuando la dibujas asegúrate de presionar Mayús en el teclado y luego presionar Comando en el teclado. Si golpeas en Command en el teclado, va a dibujar el círculo desde el centro. Ves eso, cuando presiono Command en el teclado está dibujando la máscara desde el centro. Ahora solo necesito bajar a la máscara y animar una de las propiedades que es la Expansión de Máscara. Si muevo alrededor de esta Expansión de Máscara, se puede ver que mi máscara está creciendo dentro y fuera. Quiero golpear este reloj aquí para agregar un fotograma clave y luego arrastrar este fotograma clave hacia adelante un poco y asegurarme de que la máscara no exista al principio. Arrástralo todo el camino a la negativa 369. Mientras desaparezca debería estar bien. Entonces si altero la línea de tiempo, el círculo sólo va a subir así. A continuación, solo quiero agregar Easy Ease. Seleccione los dos fotogramas clave, haga clic con el botón derecho y luego Keyframe Assistant, Easy Ease, solo agregando la flexibilización. Después ve al editor de gráficos aquí, puede hacer click en este gráfico de higos para ver. Solo asegúrate de manipular un poco este gráfico para que tenga más energía. El círculo va a salir así. Eso es bueno. A continuación, queremos duplicar esta máscara, Comando D, duplicar esta máscara y luego cambiar este modo de máscara para restar. Este es un truco que siempre hacemos. Cambiamos la máscara para restar y luego desfasar los fotogramas clave. Se puede ver el efecto que vamos a conseguir. Máscara duplicada cambiarla para restar y luego desfasar los fotogramas clave. Ese es el efecto que vamos a obtener después de las dos máscaras que agregamos en el círculo. También podemos manipular el momento como nos guste. Pero ahora mismo siento que el círculo no está en el centro, así que podemos simplemente mover toda esta capa para asegurarnos de que esté justo en el centro. Eso funciona. Ahora todo lo que necesito hacer es retrasar la animación de todas las capas debajo de ella. Simplemente selecciona todas estas animaciones que hicimos antes excepto el fondo y luego arrastra las capas un par de fotogramas por delante para que no sean visibles en la pantalla al principio. Tal vez arrastrarlo todo el camino aquí. Quiero que el círculo salga primero y luego revele la animación. Mira eso. Eso es bueno. Entonces lo siguiente que queremos hacer es que queremos sumar algunas rutas de discurso igual que si el tren se está moviendo rápido. La forma en que hacemos eso es que necesitamos ir arriba aquí para seleccionar esta Herramienta Pluma y luego acercar. Dibujemos dos puntos. Dibuja una línea como esta y luego ve arriba aquí, asegúrate de que tengamos el Relleno desactivado, mantén en la opción en el teclado. Da click en el “Relleno” tres veces y luego ve al Trazo, asegúrate de que esté en color blanco. Ahora tenemos aquí esta línea blanca pero aún necesito hacer la línea más gruesa, algo así para cambiar el trazo de la línea a nueve puntos y luego cambiar la Gorra de Butt por una Tapa Redonda. Ahora tenemos una línea aquí. A continuación lo que tenemos que hacer es que necesitamos agregar un camino de recorte. Ir a esta línea que acabamos de dibujar, esta capa, y luego aquí está el botón Agregar. Puedes hacer click en eso, podemos añadir un efecto Recorte Path. Agregó aquí un efecto Recorte Path. Si altero el porcentaje de fin y inicio aquí, se puede ver que la línea está realmente dibujando encendido y apagado. aquí este segundo, necesitamos tal vez apenas alrededor de medio segundo, haga clic en el reloj aquí para poner dos fotogramas clave y cambiar el valor final a cero también, por lo que 00, ambos comenzando en cero y luego ir adelante 10 fotogramas. Comando Mayús flecha derecha, por lo que así es como avanzas 10 fotogramas y cambias todo el valor a 100 por ciento. A continuación, podemos seleccionar todas ellas, Keyframe Assistant, haga clic derecho y luego Easy Ease. Acude al Editor de Graph, lo mismo que hicimos antes. Simplemente arrastra estas curvas para asegurarte de que tenga más energía. A continuación lo que tenemos que hacer es simplemente desplazar el fotograma clave. Después de que hicimos eso, este es el efecto que vamos a conseguir. Se ven las líneas casi como un sendero de velocidad. este momento se está moviendo demasiado rápido, así que necesito arrastrar los dos fotogramas clave al final tal vez un poco más lejos para que tenga más tiempo. Necesito compensar estas dos claves de aún más. Justo como te guste, pero creo que en este momento funciona bastante bien así. Eso es genial y ahora solo tenemos que sumar más. La forma más fácil es duplicar esta capa, Comando D. Entonces solo asegúrate de que estás de vuelta en la Herramienta Seleccionar, lo contrario vas a seguir dibujando con tu Herramienta Pluma. Vuelve a esta Herramienta Seleccionar y luego puedes cambiar la posición de la misma y tal vez ponerla aquí abajo. Pero no queremos que se enciendan al mismo tiempo, así que podemos compensar un poco el marco. Se puede golpear en U en el teclado para mostrar el fotograma clave y luego podemos arrastrar éste un poco hacia adelante para que estén sucediendo en un segundo diferente. Eso es bueno. Entonces podemos duplicar otro, arrastrarlo todo el camino arriba. Pero entonces por aquí quiero que esto sea más corto en lugar de tanto largo. Necesito volver a la Herramienta Pluma y luego hacer clic en este extremo de la línea y tirar de ella un poco hacia atrás para que esta línea sea más corta. Si nos adelantamos, esto es lo que vamos a conseguir. Tenemos dos líneas largas y luego una líneas cortas. Algo así. Ahora, puesto que ya tenemos tres en su lugar para hacer las cosas más rápido, podemos duplicar tres juntos Comando D y luego arrastrarlas todas hacia adelante para que se repitan. Pero lo que quieras hacer, puedes cambiarlo a diferentes lugares, cambiar la longitud de la misma ya que tu animación ya está ahí. No es necesario cambiar nada más solo la posición y la longitud de la línea de velocidad. Vamos a alejar y echar un vistazo a nuestra animación. 9. Cómo agregar una capa de reflejo: Lo último que queremos hacer es, queremos agregar un Efecto Sheen o puedes llamarlo una reflexión sobre el tren. Como si el tren estuviera reflejando luces del sol o algo así. La forma de hacerlo es en primer lugar, necesito ir a mi capa, y luego crear un nuevo sólido. Vamos a crear una capa sólida, y luego quiero ir a la herramienta Pluma. Quiero dibujar algunas formas aquí. Simplemente dibuja alguna forma que parezca un reflejo. Tal vez uno más grueso, y luego uno más delgado. Este va a estar aquí. Esta va a ser nuestra reflexión. Entonces vamos a peep en la posición del teclado correctamente. Haga clic con el botón derecho en “Separar Dimensiones”, así que cuando el tren se mueva por aquí, quiero que esto se mueva desde el lado derecho hacia la izquierda. Sólo voy a pasar por el tren. Eso es bueno. Entonces quiero duplicar otro, y modificarlo ligeramente, para que cuando el tren se mueva estos dos vaya a pasar por el tren, algo así. Esta va a ser nuestra reflexión. Vamos sólo pre-comp. Cambio de comando C. A esto se le llama efecto brillo. Lo siguiente que queremos hacer, al igual que la pista mate de la que hablamos antes, quiero usar el tren como la pista mate para que cada vez que el tren sea visible, este reflejo vaya a ser visible. Necesito duplicar esta capa de tren, Comando D, y luego ponerla todo el camino encima de esta capa de brillo, y luego establecer el mate de la pista en la capa de brillo a mate alfa. Ahora, se puede ver cada vez que este tren es visible, el brillo es visible. Lo siguiente que queremos hacer, acabo de poner estas dos capas encima de nuestra capa de tren. Tratemos de configurarlo el modo de fusión diferente. Vamos a ponerlo en luz suave. Si lo configuramos en modo de mezcla de luz suave en la capa de brillo, esto es lo que tienes, y aún puedes ver un color un poco amarillento. Eso depende de su elección. También puedes cambiarlo a blanco si quieres. Ese es el efecto que vamos a conseguir. Vamos a prever la animación. Es muy sutil, pero es efectivo. Va a ayudar con la narración, y hacerlo más realista. En este momento, todavía se puede ver el efecto de brillo fuera del círculo. Otra cosa que tenemos que hacer, podríamos necesitar pre componer esta otra vez, el tren y el brillo, Comando Shift C. Pre componer a los efectos de brillo, y luego cambiar este modo de mezcla de capas a luz suave. Dibujemos otra máscara encima de este efecto de brillo para asegurarnos de que solo aparezca dentro del círculo. Si escondemos el gobernante, esa es nuestra animación final. Todavía se puede ver la línea de velocidad y la reflexión sobre el tren, y luego tenemos el fondo moviéndose, y tenemos los arbustos moviéndose. Después de tener lista esta animación, podemos exportarla a un GIF, y compartirla en Internet. La forma en que hacemos eso es, vamos al menú de composición de arriba aquí, y luego vamos a agregarlo a la cola de Adobe Media Encoder. Para exportar un GIF, necesitamos tener este Adobe Media Encoder, otro software. Normalmente, cuando exportamos a formato mp4 o formato GIF, siempre usamos esto porque es bastante rápido, y cuando se está renderizando, todavía puedes seguir trabajando otras cosas en After Effects. No tienes que parar tu trabajo. Es renderizado completamente fuera de After Effects en un software diferente de Adobe, que está funcionando bastante bien. No sé por qué se está verificando. Vamos. Sólo un último paso para exportar el GIF, y me está fallando. Las cosas siempre parecen ir no como suelen ir cuando la gente está mirando. Sí. Bueno, esto ha sido increíble. Mientras esperamos a que se exporte y golpee ese paso final tal vez pueda pasar a lo largo de una pregunta o dos? Sí, seguro. Genial. En realidad hay un montón de preguntas realmente impresionantes entrando justo alrededor de la vida de un diseñador y animador de motion graphic, cómo empezar, etc. Preguntándose si podría compartir un poco sobre cómo te iniciaste en la industria, has notado algún patrón y qué habilidades son más demandadas o que la gente está buscando, cualquier sugerencia sobre cómo construir un portafolio o un carrete demo apenas sobre ese proceso de iniciación? Sí, definitivamente. Cuando estaba en la universidad, mi especialidad es el diseño gráfico pero también teníamos motion graphics pero solo estamos aprendiendo lo básico, los fundamentos de la animación y también algunos de los efectos después. Después de graduarme, trabajé como diseñadora gráfica durante un par de años. Al mismo tiempo también estaba aprendiendo online porque realmente me gustan gráficos en movimiento y estaba haciendo un montón de tutoriales en línea, fui a Skillshare a aprender, hay tutoriales de YouTube en todas partes y también hay como otro sitio que puede enseñarte a hacer motion graphics. Mientras hacía mi día como trabajo de diseño gráfico, como después del trabajo siempre vuelvo a casa y luego inicié mi propio proyecto como hacer cosas aquí y allá así es como armé mi portafolio. Acabo de imitar lo que otras personas están haciendo en su tutorial porque como lo bueno es para el carrete demo no tienes que mostrar la pieza completa la mayor parte del tiempo, solo muestras un par de segundos eso es impresionante y luego con toda la información en línea realmente puedes crear algo que sea impresionante por un par de segundos y luego pasar al siguiente proyecto y luego tener un montón de piezas impresionantes armadas tal vez como un carrete demo minuto. Entonces así es como inicié mi carrete demo y solo sigo aprendiendo cursos en línea. Después de como tres años haciendo mi trabajo diurno haciendo diseño gráfico, siento que tengo confianza con mis habilidades de after effects así que acabo dejar mi trabajo y salir y buscar una moción trabajos gráficos, algo que es mareal como diseñador gráfico de movimiento. Por suerte para mí había esta agencia de publicidad, les encantó mi trabajo, ni siquiera dijeron nada porque para nosotros diseñadores o artistas como a veces licenciatura o universidad no importa, dondequiera que se gradúe no importa mientras tengas buen trabajo y luego seas amable con la gente. La mayoría de las empresas cuando están contratando se preocupan por el proceso de pensamiento de tu trabajo y también lo bueno que estás haciendo, ¿qué tan bueno es tu oficio? Mi sugerencia a quien acaba de empezar es supongo que sólo seguir practicando porque estas cosas, a veces son cosas simples como esta animación probablemente pueda si no estoy enseñando Puedo hacerlo tal vez en como 20 minutos pero luego se necesita tiempo practicar para poder hacerlo durante 20 minutos, necesitan años de práctica y a veces se aprende una técnica y luego se siente lo conoces pero entonces la próxima vez cuando realmente lo estás necesitando y necesitas hacerlo te olvidaste. Me parece que lo más gratificante es como no solo ver tutoriales o clases sino en realidad hacerlo y luego tal vez poner en mi propio estilo, personalízalo como lo que estén enseñando, tal vez tengan un storyboard, lo personalices, haces otro conjunto de animación que es tuyo y puedes ponerlo en tu carrete demo. Eso es lo que más me beneficia, ¿me perdí alguno de los puntos que dijiste antes? Eso fue genial tan grande. Muchas gracias. Fue realmente interesante escuchar cómo empezaste como estudiante tú mismo en Skillshare y cómo hiciste que sucediera. Ten ese último paso ir. ¿ Tenemos que intentarlo de nuevo? Sí, lo intentaba porque creo que se cerró sobre sí mismo así que ya volví a hacer clic en él, tratar de abrirlo. Dedos cruzados. Sí, sólo agreguémoslo a la cola de nuevo. ¿ Cuánto tiempo suele tardar este paso? Normalmente solo toma segundos pero parece que me cuesta mucho abrir el software en sí porque si lo tienes abierto, debería tardar ningún segundo en renderlo. ¿ Hay alguna otra pregunta que te gustaría que respondiera? Seguro. Entonces uno de nuestros alumnos quiere saber, ¿planeas lanzar más clases sobre videos explicativos como cómo agregar música o efectos de sonido para explicar videos? Sí, estoy planeando en otro video explicador en este momento y debería salir como en un mes o dos esperemos porque tengo un par de proyectos, como diferentes clases pasando en al mismo tiempo así que sí, definitivamente. Para efectos especiales son dos áreas. Uno es efectos especiales, el otro es motion graphics. Se cruzan entre sí seguro pero para mí, no me considero un tipo de efectos especiales. Se necesita un conjunto de habilidades completamente diferente para aprender efectos especiales, es realmente difícil, me parece realmente difícil. Pero si te gusta probablemente puedas encontrar otro profesor que esté enseñando efectos especiales en Internet, yo mismo no es muy bueno para ser honesto. Sobre todo solo enfoco mis clases en motion graphics y sobre todo para que los principiantes comiencen así que así es como me sentí cuando empecé es difícil encontrar clases que te enseñen cómo para hacer proyectos reales y cómo enseñarte sistemáticamente a hacer el proyecto del mundo real. Eso es beneficioso para mí cuando empecé a encontrar incluso una sola clase en Skillshare para poder trabajar en proyectos del mundo real. 10. Reflexiones finales: Solo asegúrate de compartir tu proyecto en la Galería de Proyectos a continuación, para que puedas obtener retroalimentación y animarte unos a otros.