Bases de la animación de personajes: combina Adobe After Effects, Animate y Photoshop

1. Introducción: La pelota que rebota es una de las primeras animaciones que un principiante debe aprender, y también puede funcionar como punto de partida de animación de manera más compleja Hola, mi nombre es Gui Jorge, y soy diseñador de movimiento y animador brasileño, y trabajo aquí en MediaERD en el Reino Unido He estado trabajando como diseñador de movimiento desde hace al menos cinco años. Como generalista, siempre he usado diferentes softwares y técnicas para apoyar mis proyectos, pero trabajar con cuadro por cuadro me da cero límites en lo que puedo hacer, y por eso me encanta tanto En esta clase vamos a crear la animación de balón rebote perfecta en Adobe After Effects y usarla como base para crear una animación de personajes, cuadro por cuadro, usamos Adobe Animate y Adobe Photoshop En Adobe After Effects, aprenderás a usar el Editor de gráficos, que es la herramienta más importante para controlar tu animación y crear una bola de rebote perfecta Después de eso, quiero mostrarte mi enfoque para crear el diseño de los personajes que animaremos, y puedes crear el tuyo propio usando el mismo método Cuando tengamos la forma básica del personaje rebotando, iremos a Adobe Animate para crear el ciclo de ejecución cuadro por cuadro Haremos la limpieza usando Adobe Photoshop para darle a tu animación un ciclo final de dibujo a mano Así que también aprenderás a trabajar con animación usando Adobe Photoshop. Al final, volveremos a After Effects para hacer la composición final y exportar nuestro proyecto final. Esta clase es perfecta para principiantes o incluso diseñadores de movimiento más experimentados que desean comenzar a agregar cuadro por cuadro a sus tuberías, especialmente para animar personajes Comprenderás el proceso que utiliza muchos softwares diferentes para crear una animación muy genial Estoy súper emocionada de ver lo que ustedes van a crear, así que vamos. 2. El proyecto final: Bienvenidos a mi primera clase en Skillshare. El proyecto final de esta clase es interesante porque cubriremos muchas habilidades y técnicas que un buen animador debería tener Empezando por la pelota que rebota, ese es el ejercicio perfecto para entender los dos fundamentos principales de la animación, el tiempo y Por supuesto, como lo estamos haciendo en Adobe After Effects, es una muy buena oportunidad para entender cómo funciona el editor de grafos. Si no sabes lo que es el editor de grafos, no te preocupes, nosotros lo cubriremos. Las bolas que rebotan también están muy presentes en la animación de personajes, aunque no te des cuenta al principio En realidad, cuando caminamos o corremos, por ejemplo algunas partes de nuestro cuerpo, por ejemplo nuestras caderas, sí se mueven de manera similar a una pelota que rebota Por eso lo estamos utilizando como base para animar al personaje Aquí está el plan. Primero, aprenderemos qué hace que una pelota rebote convincente Después diseñaremos un personaje y animaremos sus formas básicas rebotando Usando Adobe Animate, haremos el ciclo de carrera fotograma usando la bola que rebota Adobe Photoshop, se utilizará para hacer la limpieza, que es el proceso de finalizar los fotogramas de nuestra animación Para ello, entonces necesitas tres softwares, Adobe After Effects, Adobe Animate y Adobe Photoshop También es importante tener tabletas, especialmente cuando estamos haciendo la parte fotograma a fotograma de Eso es, chicos. Hay tanto que cubrir, así que comencemos. 3. La física de una bola de rebotes: Bienvenidos a esta clase chicos, y comencemos a hablar de algunas teorías de nuestro muy buen amigo, Isaac Newton. Es importante entender la física. Entonces cuando vemos algo mal en nuestra animación, podemos adivinar por qué. Compruébalo. Esta es una pelota básica que rebota Ahora vamos a ver cada fotograma de esta animación. Cuando la pelota está cayendo, la gravedad la está tirando hacia abajo. Eso hace que la velocidad aumente cuando está cayendo. A medida que la pelota es cada vez más rápida, la distancia entre las bolas a lo largo de los marcos es cada vez mayor. Por supuesto cuando la pelota va hacia arriba, ocurre lo contrario. Los marcos se están acercando cada vez más el uno al otro. Eso sucede porque la aceleración también conocida como gravedad está tirando de la pelota de la manera opuesta a su movimiento. La pelota que rebota es muy importante en animación porque nos ayuda a entender muy bien los dos conceptos más fundamentales en la animación que son el tiempo y el espacio Básicamente, el tiempo se trata cuánto tiempo tarda la pelota en rebotar. En este caso, la pelota tarda un segundo en ir desde el rebote superior y llegar a su posición original. espaciado es aproximadamente la distancia entre cada dibujo de un fotograma al siguiente. No importa la técnica que utilices, este es siempre el papel de un animador, gestionar el tiempo y espaciado para crear el movimiento que necesita Hay algunos detalles que puedes agregar para que tu pelota rebote sea más convincente, y nos da la oportunidad de hablar un importante principio de animación, squash y estiramiento Squash y stretch son estas deformaciones de la pelota que hacen que el movimiento sea mucho más fresco Cuando la pelota gana velocidad, se estira. Cuando la pelota toca el suelo, aplaste. Sin embargo, es muy importante mantener la misma masa. Es agradable notar que el momento más estiramientos es justo antes de que la pelota toque el suelo, y cuando lo hace va directo a la pose más aplastada Este cambio muy rápido de forma es lo que le da impacto y peso a esta animación. Ahora que entiendes cómo debería ser una pelota que rebota, estamos listos para animarla. Lo haremos usando Adobe After Effects. 4. Introducción de Adobe After Effects: El Adobe After Effects puede parecer un poco aterrador cuando lo abres por primera vez, pero todo se vuelve más fácil cuando entiendes lo básico. Bienvenido a After Effects. Esto es lo que ves cuando lo abres. Sólo para asegurarme de que el diseño que veo es el mismo que tú haces. Vayamos a Windows, Workspace y comprobemos si estás en modo predeterminado. Para asegurarte de que incluso puedes hacer clic en Restablecer configuración predeterminada a la disposición guardada. Verás la misma pantalla que estoy viendo ahora. Lo primero que se suele hacer es crear una composición. La composición es tu Canvas, donde se llevará a cabo la animación. Se puede crear una nueva composición de tres formas diferentes. click aquí en este botón grande, este es más uno aquí adentro o yendo a nueva composición. ¿Estás pinchando en la nueva composición? Aquí puedes renombrar tu composición. Escribiré composición Clase 4. Aquí puedo elegir el tamaño de la composición. Tienes algunos presets aquí, pero 1920 por 1080, es que el tamaño full HD, que utilizo para la mayoría de mis animaciones La velocidad de fotogramas es muy importante. Esta es la cantidad de fotogramas por segundo que va a tener la animación. Las velocidades de fotogramas más comunes en la animación son 24. Aquí tienes la duración de la composición. Crearemos una composición de cinco segundos. El color de fondo podría permanecer ya que es gris. Ahora vamos a golpear Bien, ahora te voy a mostrar cómo navegar en tu composición. Puede acercar y alejar, rodar la rueda del mouse o presionar Comando o Control y Más o Menos. Mi forma favorita de navegar es mantener la barra espaciadora, hacer clic y arrastrar. De esta manera podrás mover tu tablero de arte. Déjame mostrarte ahora algunas de las principales herramientas. El primero, el atajo V, es la herramienta de selección para seleccionar y mover el objeto. La mano y la lupa son formas alternativas de mover y acercar y alejar, pero siempre prefiero el atajo que usé antes Ahora, veamos cómo podemos dibujar y crear formas. Si hago clic y mantengo pulsado los botones que tienen este pequeño triángulo en la parte inferior revelará más opciones. Esas son las formas que podría dibujar rectángulo, bordes redondeados a los rectángulos, elipses, polígonos Seleccionemos puntos suspensivos, haga clic y arrastre para dibujar. Si mantienes Shift, dibujas un círculo perfecto. Si selecciona Mayús y comando, crea el círculo perfecto desde el centro. Si sólo selecciona comando se crea a partir de este centro, pero sin bloquear las proporciones. Vamos a crear un círculo perfecto entonces. Ahora con la Herramienta Selección, puedo seleccionar y mover la posición. Aquí puedo cambiar el color de relleno y aquí el color del trazo. Este es el ancho de mi trazo en puntos. Hacer clic y arrastrar es una buena manera hacer que aumente o disminuya Cambiemos mi color de relleno y el color del trazo también. Al hacer clic en la palabra relleno puedo eliminar cualquier relleno o crear un degradado. Lo mismo funciona para el trazo. Vámonos como es por ahora. Deberías haber notado que desde que dibujo cualquier forma en mi Canvas, aquí se crea una nueva capa. El cero es mi línea de tiempo. Puedo seleccionar mi forma dando click aquí, presionando la tecla Enter, puedo cambiarle el nombre. Escribamos círculo 01, haga clic afuera. Ahora mi círculo tiene un nombre propio. También puedo cambiar el color de mi capa, pinchando aquí, esto es muy importante para organizar mi proyecto, sobre todo cuando teníamos muchas capas. Aquí está mi pestaña de proyectos, cada activo que uso es importante para After Effects estará aquí, videos, audios, imágenes, todo También podemos ver nuestra composición aquí. El que acabamos de crear ya está ahí. También puedo crear carpetas haciendo clic aquí. Puedo renombrar la Carpeta 1 y ahora puedo hacer clic y arrastrar y organizar el proyecto. Si selecciono algo y hago clic en la papelera, eliminaré lo que esté seleccionado. Ahora, centrémonos en la línea de tiempo. Esto es muy importante para entender cómo funciona la línea de tiempo. Si hago clic y arrastre esta aguja, puedo navegar por mi animación. Por supuesto que todavía no hay animación aquí. Tenemos que entender este número aquí, que es la hora en que mi aguja está en este momento y el número se muestra aquí está en este orden; hora, minutos, segundos y fotogramas. Si arrastro mi aguja lentamente, puedo ver los números cambiando. Cuando llego al fotograma 24, tengo un segundo ya 24 es nuestro número elegido de fotogramas por segundo. También es importante saber cómo navegar por la línea de tiempo a tu teclado, puedes escribir Comando y flecha hacia la izquierda o hacia la derecha para ir un fotograma cada vez, yendo hacia adelante y hacia atrás. Si en cambio sostengo Comando y Mayús juntos, y luego las flechas, moveré las agujas cada 10 fotogramas. Aquí en el lado derecho, tenemos algunas pestañas importantes para previsualizar es donde puedo reproducir mi animación, haciendo clic en reproducir aquí Lo que más uso aquí es el botón Silenciar. A veces quería tocar sin sonido y aquí puedo decir si quiero que haga loop o no. También tengo aquí efectos y presets. Son tantos que no conozco y nunca conocería a todos y cada uno, pero hay que saber que los puede encontrar aquí, incluso buscar por sus nombres. Más adelante en este curso, vamos a echar un vistazo a algunos efectos. Ahora que estás familiarizado con los conceptos básicos de Adobe After Effects, es el momento de aprender a animar en él. Vamos. 5. Animación en Adobe After Effects: Chicos, ahora estamos listos para hablar de animación en After Effects. Ahí es donde realmente comienza la diversión. Ya tengo mi círculo verde aquí. Me gustaría mostrarles esas propiedades aquí debajo de mi capa. Dentro de Contenidos, tengo mis propiedades de elipsis, pero hablaremos de ello más adelante Ahora voy a ver las opciones que tenemos bajo Transformar. Tenemos punto de anclaje, que es ese pequeño objetivo en medio del círculo. Propiedades como escala y rotación modifican el objeto en base a este punto. Se puede ver que si cambio mi escala, el tamaño cambiará usando el punto de anclaje como centro. Tengo que usar la herramienta mover punto de anclaje para modificarlo. Si mantengo presionado Comando o Control, el punto de anclaje se ajusta a lugares específicos Si pongo el punto de anclaje aquí, la forma en que funciona la escala es diferente. Ahora tiene el fondo como centro de la escala. Cuando se anima la rotación, el punto de anclaje es aún más importante Cómo presionas Comando Z para regresar, centralicemos mi punto de anclaje Yo sostendré Comando para que se chasquee en el centro. También tenemos posición con eje x e y. Se puede mover horizontal o verticalmente. Por fin, tenemos opacidad que va de 0-100%. Es agradable conocer el atajo para revisar cada parámetro para que puedas ver solo los que quieres animar Cerraré todo, seleccionaré mi Capa y presionaré A para anclar punto, P a posición, S a escala, R a rotación y T a opacidad, lo que en realidad significa transparencia Si presiono P para revelar posición, pero también quiero animar escala, presionaré Mayús más el atajo de la propiedad que quiero ver, que es S. Ahora veo posición y escala Ahora voy a duplicar esta forma presionando comando D. Podemos ver que ahora tengo este Círculo 2 aquí. Doy click y arrastre el Círculo 2 hacia abajo sabiendo que si mantengo presionado Mayús mientras estoy arrastrando, mantiene el mismo eje, x o y, seleccionaré ambos al mismo tiempo, pincharé y los arrastraré aquí. pincharé y los arrastraré aquí Ahora quiero que el Círculo 2 sea de un color diferente, así que cambiaré los pocos dando click aquí y seleccionaré un color naranja. También cambiaré color de mi capa para mantener todo organizado. Ahora, animemos la posición. Seleccionaré ambos al mismo tiempo y presionaré “P”. Entonces puedo ver mis posiciones propiedades. Te habrás dado cuenta de que todas las propiedades tienen este pequeño icono aquí. Eso significa que se puede animar. Con ambos seleccionados, hagamos clic en este icono y podrás ver que se está poniendo azul. Ahora, tenemos esta pequeña forma de diamante en mi línea de tiempo. Este es un fotograma clave. Ahora puedo ir al momento un segundo en mi línea de tiempo. Volveré a seleccionar ambos y pincharé y arrastraré manteniendo presionada la tecla Mayús, así lo moveré solo horizontalmente. Ahora me gustaría cambiar mi configuración de composición. ¿Estás haciendo clic en ajustes de composición? Cambia aquí de cinco segundos a un segundo y medio. Un segundo y 12 fotogramas, voy a hacer clic en “Bien”, y ahora si voy al principio y presiono la barra espaciadora, veo mi animación. Recuerda que una vez que creas los primeros fotogramas clave, ya no necesitas hacer clic en el pequeño reloj para crear nuevos fotogramas clave Siempre que mueva su objeto ahora el fotograma clave se creará automáticamente También podrías crear un nuevo fotograma clave haciendo clic en este pequeño diamante aquí Genial. Ahora me gustaría seleccionar ambos fotogramas clave de mi herramienta círculo y presionar “F9" Ahora vemos que el pequeño diamante cambia de forma. Si le pego a “Play”, veo que el movimiento es diferente. Para mostrarte, los seleccionaré a ambos y quiero que veas esta línea que muestra nuestra trayectoria de pelota. Ves que hay pequeños puntos a través de la línea. Cada uno de los puntos es la posición va a estar mi punto de anclaje de objeto en cada fotograma de la animación. Puedes verlo si navegas por la línea de tiempo, presionando Comando y flecha derecha o izquierda. Cada vez que presionas, el punto de anclaje va a estar en una de estas posiciones de puntos. En la bola verde sin F9 presionado, todos los puntos tienen la misma distancia entre ellos. A diferencia de la bola naranja, se puede ver que al principio los puntos están más cerca el uno del otro, en el medio, están muy lejos, y al final, vuelven a estar cerca el uno del otro. Lo que acabo de hacer, le agregué facilidad a mi animación, es acelerar y ralentizar Ahora, la bola naranja comenzará como baja, ganará velocidad y volverá a disminuir la velocidad al final hasta que se detenga. La bola verde tiene un movimiento lineal que no existe en la naturaleza a menos que sea el robot, nada más puede moverse así. Es agradable decir que ambas animaciones tienen el mismo tiempo. Ambos tienen un segundo de largo, pero el espaciado es diferente. El espacio está representado por la distancia entre los pequeños puntos. En la siguiente clase, hablaremos del editor de grafos. Pero por ahora, me gustaría mostrarles cómo se ve la gráfica en estos momentos. Si hago clic aquí, abriré mi editor gráfico. No se puede ver nada porque no he seleccionado mi animación. Si selecciono Posición, veo el gráfico de barras naranja. Si selecciono esta, verá la gráfica de barras verdes, que es muy lineal. Esta es la gráfica de velocidad. También tenemos la gráfica de valores, pero esto es algo de lo que hablar en la siguiente clase. Chicos, ahora vamos a entender mejor cómo funcionan esos gráficos y cómo manipularlos para controlar el espaciado de nuestra animación. 6. El editor gráfico: Ya vimos cómo crear fotogramas clave, pero usar el editor de grafos es el trabajo real de un animador Casi siempre editarás el 99% del tiempo el editor gráfico de tus animaciones. Presionar F9 casi nunca es lo suficientemente bueno. Déjame explicarte eso. Hablemos de las gráficas. Como viste, tengo que dar click aquí para revelar la gráfica y luego seleccionar la animación que quiero mostrar. Esta es la gráfica de velocidad de la animación de posición del círculo naranja. El gráfico de velocidad muestra el cambio de velocidad a través de todo el tiempo. En el eje y, veo que aceleran en píxeles por segundo El eje x es el tiempo, por supuesto. Entonces es posible ver que al principio, mi velocidad es cero, luego su aumenta y vuelve a cero al final. Por otro lado, si hago clic en el círculo verde, la velocidad es lineal, nunca cambia. Entonces ambos de repente empiezan a moverse y repente se detiene son movimientos muy antinaturales Se pueden comparar ambos. Ahora, centrémonos en el círculo naranja. Si selecciono este primer punto, que es el primer fotograma clave como este, esos manejadores se mostrarán y me ayudarán a modificar la curva. Así que vamos a hacer clic y tirar. Ahora vemos que el pico de mi velocidad aumenta aún más si tiro del otro lado también. Ahora, la pelota inicia el movimiento es menor, acelera a una velocidad mayor y luego vuelve a disminuir la velocidad, se está parando suavemente Mira cómo la bola naranja tiene un movimiento más agradable ahora, mucho más natural Ahora, agregaré el predeterminado fácil a la bola verde presionando F9, para que podamos comparar Ahora se ve la bola moviéndose con la delantera F9 presionada y compararla con la naranja que agrego a la curva Yo personalmente siempre tire de esas asas de una forma u otra para todas mis animaciones. El defecto fácil para mí es esto a un poco robótico. Ahora, vamos a seleccionar el círculo naranja y te voy a mostrar la otra gráfica después de los efectos tiene. Haré clic en este botón y seleccionaré la opción. Gráfico de valor agregado. Este es solo un gráfico diferente que muestra el mismo movimiento que muestra el otro gráfico. Pero en este caso, podemos notar que tenemos dos líneas distintas, una verde y otra roja. Esto se debe a que esta gráfica muestra las dimensiones x e y por separado. La línea roja es x, horizontal, y la verde es y, vertical. Como esta bola no se mueve verticalmente, la línea verde es una recta. Sólo la línea roja cambia de valor. Pero bien, lo que realmente muestra esta gráfica. Si presiono Comando o Control R, revisaré esas reglas aquí en mi tablero de arte. Aquí puedo ver los valores desde cero en la esquina superior izquierda hasta el último píxel de mi composición en el lado opuesto. Lo mismo sucede en el eje y. Esos son los valores a los que se refiere esta gráfica. Eso significa que cada pixel de mi tablero de arte tiene un valor diferente de x e y eso es lo que muestra el gráfico de valores. La variación de la posición de cada eje. Podemos decir que cuando la línea es horizontal, el valor no está cambiando. Cuanto más inclinada es la línea, más rápido están cambiando los valores. Así que cuanto más rápido se mueve mi objeto. Entonces, al mirar esta línea, podemos ver que el movimiento comienza lentamente, gana velocidad y se detiene sin problemas. Al igual que vimos en la otra gráfica. Lo diferente viene ahora. Si trato de seleccionar el fotograma clave como lo hice en el gráfico de velocidad, no veo ninguno de esos manejadores. Para ver entonces o tengo que separar las dimensiones de mi posición. Para ello, vengo en posición, clic derecho y voy a separar dimensiones. Ahora tengo dos parámetros, posición x y posición y. apagaré la posición y ya que no estamos animando verticalmente Simplemente hago clic en el pequeño reloj. Así que ahora selecciono ambos fotogramas clave de la posición x, presiono F9 para tener la facilidad predeterminada Ahora veo que la curva ahora es similar a como era antes, pero ahora puedo ver y editar mis mangos. Realmente te recomiendo ahora que juegues con la curva y veas lo que sucede en tu animación. Por ejemplo, si arrastro esta manija hacia abajo así , ¿qué pasa? El balón naranja se detendrá repente como si se toparara contra una pared ¿Y si esta manija baja? Por lo que la pelota retrocede antes de seguir adelante. Eso es porque la línea pasa por valores en la dirección opuesta al movimiento. Así que es agradable para ti ver lo que pasa en la animación. Tratando de entender por qué basado en la gráfica. Solo diviértete, juega y vas a aprender mucho. Saber usar bien el editor de grafos es lo que hace a un buen animador Horas extras, también entenderemos qué gráfico es mejor para cada situación Cuando se trata de rebotar bolas, estaremos usando la gráfica de valores porque nos centraremos en el eje y Por lo general, el gráfico de valores tiene más sentido usar cuando tenemos que separar las dimensiones. En la siguiente clase, finalmente animaremos nuestra bola que rebota 7. Animación de la bola de rebotes: Ahora ya conoces las herramientas que vamos a utilizar para animar nuestra bola que rebota Como sabes que la pelota ganará velocidad al caer y perderá al subir, tendremos que averiguar cómo será esta gráfica. La mejor gráfica para usar para eso es la gráfica de valores, porque vamos a separar las dimensiones ya que nos concentraremos únicamente en el eje y Voy a crear una nueva composición, llamaremos rebotando 1920 por 1080, 24 fotogramas por segundo y duración de 2 segundos. El fondo gris está bien. Nueva composición creada, ahora hagamos un círculo. Seleccionaré el color antes de crearlo, hacer clic y arrastrar, mantener presionado el turno para mantener las proporciones, centralizaré la bola usando la pestaña alineada en el lado derecho, llamaremos bola 1 y cambiaré el color de la capa a verde Ahora voy a crear un rectángulo negro para ser el piso de mi animación. Ahora tengo que bloquear este rectángulo para evitar pinchar sobre él por error. Pero primero, vamos a llamarlo, colorea la capa verde oscuro y voy a dar click en este pequeño cuadrado de candado, así ya no puedo seleccionar y mover el piso Arrastremos mi pelota sobre el suelo y presionaré “P” para revelar mi parámetro de posición. Haga clic con el botón derecho, separe las cotas. Ahora vamos a crear un fotograma clave solo para el eje y. Pongamos el balón en la posición inicial, sostengamos el turno para no descentralizarlo. Ahora quiero que esta bola tome 12 fotogramas para golpear el suelo, así en el marco 12, coloco mi aguja, arrastre así sosteniendo turno para que no suceda hasta que la pelota toque el piso. Ahora cuando la pelota sube, no llega a esa misma posición porque ha perdido parte de su energía. Si me llevé 12 fotogramas para caer, quiero tomar, veamos, 8 fotogramas para subir así que iré al cuadro 20, haga clic y arrastre, creo que este alto es bueno. Ahora la pelota tardó ocho cuadros para subir, tomará los mismos ocho cuadros para bajar. Si lo desea, puede presionar Comando o flecha lateral de control para escribir ocho veces el fotograma 28. Entonces arrastre mi pelota al suelo, lo que también puedo hacer es como sé, que este fotograma clave de aquí es donde la pelota está tocando el suelo Simplemente puedo copiar el Comando C y el Comando V y tendré el balón en la misma posición. Ahora, quiero que la pelota tome seis fotogramas para subir, yendo un poco más abajo que antes y seis cuadros adelante, arrastraría o más eficientemente, copiaré y pegaré el fotograma clave que la pelota está en el piso Ahora quiero tomar solo tres fotogramas porque es más o menos rebote sube solo un poquito. Tres fotogramas adelante, copia y pega los fotogramas clave del piso Si presiono “Play” presionando la barra espaciadora, la pelota se mueve. Pero sigue siendo un kit muy robot y poco realista, echemos un vistazo a nuestro gráfico de valores Podemos ver aquí que la posición está cambiando de una manera muy lineal, no hay aceleración. Vamos a hacer clic y arrastrar así para seleccionar todos los fotogramas clave en mi gráfica y presionaré F9 para usar el valor predeterminado es Al golpear el juego, puedo ver que la pelota se mueve como un resorte, no realmente lo que quiero. Pensemos, si sabemos la pelota va a estar ganando velocidad al caer y perdiendo al subir y ya sabemos que en la gráfica de valores, están más inclinadas la línea es, más rápido se mueve la pelota. Quiero empezar lento teniendo la curva más horizontal al principio pero en este punto voy a ser la velocidad más alta por lo que hay que estar muy inclinado aquí. Ahora la curva es cada vez más empinada desde el principio hasta este punto. A partir de este punto, la pelota no, se ralentizó. Cambia de dirección muy drásticamente por el impacto En este punto aquí la curva es horizontal lo que significa que la pelota se ha detenido. Si le pego a “Play”, veo ahora que el primer rebote se ve muy bien. Siguiendo la misma lógica, agregaré a las curvas del resto de la animación. Ahora puedo golpear “Play” y mi pelota que rebota está funcionando muy bien Ahora estoy contento con ello, es interesante que a medida que separo las dimensiones, ahora puedo animar el eje x sin cambiar nada en mi animación vertical Si creo un fotograma clave aquí al principio de mi posición x, puedo cambiar el número y al final, me moveré hacia la derecha Voy a presionar F9, el último fotograma clave, así que aquí está mi bola rebotando y moviéndose en la Ya tengo los arcos del movimiento. Ahora vamos a diseñar el personaje y te voy a demostrar pelota que rebota tiene todo que ver con la animación de personajes 8. Diseño de personajes: El diseño de personajes es un gran tema, pero en esta clase, me gustaría proponer un enfoque sencillo y divertido para crear personajes. La idea es combinar formas simples para crear algo interesante. Como no tenemos ningún resumen en nuestros clientes, podemos crear el personaje que queramos. Incluso podemos dejar que la forma nos diga cuál debe ser el personaje. Déjame mostrarte lo que quiero decir con eso. Bienvenido a Adobe Photoshop. Nombremos el archivo aquí Bocetos de personajes. El tamaño será este, 1920 por 1080. Me gustaría asegurarme de que la mesa de trabajo esté activada, color tiene que ser RGB, y vamos a darle a “Crear”. Ahora, seleccionemos la herramienta de pincel. Puedo elegir aquí qué cepillo quiero y el tamaño aquí arriba. El tamaño será 12, dureza, 100. Cambiemos el color. Siempre me gusta bosquejar usando un azul muy claro como ese. Ahora somos libres de dibujar. También podemos usar el borrador, atajo E. Para eliminar todo esto, presionaré Comando o Ctrl A para seleccionar todo el lienzo, retroceso para eliminar, y Comando, o Ctrl D para desactivar Ahora presionemos B para volver al pincel y me gusta dibujar algunos círculos como este. Dibujaría aquí una segunda. La idea es que sea muy incompleto, sin líneas perfectas. Al mirar esta primera combinación de círculos, ya podemos empezar a imaginar un personaje a partir de ella. Imagínese si tuviéramos unas piernas así, brazos. Esta podría ser posiblemente la forma de nuestro primer personaje. Posteriormente podríamos añadir detalles de una manera muy rápida. Ahora es el chico que lleva pantalones cortos. Este es un ejemplo de lo que me gustaría que hiciéramos. Jugaremos con diferentes escalas de círculos, combinándolos entre sí y liderando la forma decirnos quiénes podrían ser los personajes posiblemente. Echa un vistazo. Cómo dirías que el contraste es muy importante para crear siluetas interesantes para nuestros personajes, así que es agradable tener estos círculos pequeños y grandes combinados Por ejemplo, si dibujo un personaje con los dos círculos más o menos del mismo tamaño así, es mucho menos interesante que cuando tenemos tamaños muy contrastantes como este. Este podría ser un tipo con el pelo fresco. Yo diría que es mucho más amable que éste. En esta, tengo algunas formas de elipses que también se pueden usar En este, usé tres círculos en lugar de dos. Podría llegar a ser un tipo muy fuerte. No, sólo tenemos que jugar y ver qué encontramos. Manteniendo el dibujo muy simple, solo necesitamos crear variaciones en forma, contraste y posición. Como mi mesa de trabajo está llena, permítame presionar Comando o Ctrl menos para alejar el zoom Me gustaría tener otra mesa de trabajo. Para ello, selecciono la herramienta de movimiento, el atajo V, clic en la mesa de trabajo 1 y doy clic en este signo más aquí Ahora puedo tener una segunda mesa de trabajo. Vemos que aquí en nuestras pestañas de capas, creé una nueva mesa de trabajo grupal 2 Pero para dibujar cualquier cosa, necesito crear una nueva capa haciendo clic en este pequeño icono aquí. Ahora, con la capa seleccionada, puedo dibujar, presiono B para el pincel, posicionar la pantalla haciendo clic y arrastrando sosteniendo la barra espaciadora y sigamos También podría usar esta herramienta Lazo para seleccionar y colocar la cabeza mis formas Selecciono así y utilizo mi herramienta de movimiento para mover la selección. Comando o Ctrl D, anulo la selección. También puedo seleccionar una parte específica. Seleccionando la herramienta de movimiento y presionando Comando T para la transformación, puedo cambiar las posiciones. Cuando tengo muchas formas, puedo empezar a mirarlas y ver qué podría traerme cada una. Entonces vayamos a la primera mesa de trabajo. Crea una nueva capa en la parte superior. Cambia mi pincel a negro, y empiezas a dibujar sobre mis formas favoritas. Tengo un tipo fuerte. Esto podría ser un ET. Lo mismo, este otro lado, nueva capa creada. Éste podría ser un regañazo. En realidad sólo me estoy divirtiendo. Se siente bien no tener un cliente para que pueda hacer cualquier cosa. Este, por ejemplo, es un tipo de campo con una gran barriga. Ahora puedo ocultar las capas azules y echar un vistazo. Aquí están. Ahora, para hacer un dibujo adecuado de mi chico favorito, voy a crear una nueva mesa de trabajo, crear una nueva capa aquí Creo que este de aquí es mi favorito porque tiene esta gran barriga y creo que va a quedar muy divertido en la animación. Déjame asegurarme de que esta capa esté seleccionada. Copia, Comando C, y colócala en esta otra capa Comando V. Presionemos Comando T para que pueda escalarlo un poco. Ahora aquí está mi principal referencia. Vamos a crear una capa más. Selecciona de nuevo el azul claro y lo vuelves a dibujar, muy rudo. Ahora es el momento de iniciar la finalización. Siempre creando nuevas capas para eso. Ahora voy a hacer un dibujo más pulido. Es importante prestar atención a la cantidad de elementos y detalles que tiene el personaje. Cada elemento, aumentaremos el tiempo de la fase de limpieza. Vamos a reducir la opacidad del dibujo aquí. Crea una nueva capa. Aquí tengo una persona de biblioteca de colores que estoy usando para seleccionar los colores para el personaje. Quiero seleccionar un pincel diferente para darle un poco de textura. Me gustan mucho esos pinceles de medios secos. Escogeré este, cambiaré la talla a 15. Asegurémonos que esta capa de línea negra con baja opacidad esté por encima de la capa que voy a pintar Ahora puedo pintar y aún ver las líneas. Siempre me gusta poner diferentes colores en diferentes capas por si quiero cambiar algunos colores. Así que cada vez que uso un nuevo color, agrego una nueva capa. Nombrar las capas también es una buena idea. Al hacer clic con el botón derecho, puede cambiar fácilmente el tamaño del pincel en caso de que desee llenar espacios más grandes Me gusta mucho dejar algunas imperfecciones en mi dibujo. Esta es en realidad la belleza de la misma. Ahora, voy a crear una capa más para agregar detalles. Algún buen consejo es también presionar R para rotar el lienzo. Te dará una mejor posición para dibujar. Aquí está, nuestro personaje final. Ahora, guardemos las imágenes como referencia para la animación. Cambiemos la opacidad del dibujo de la línea negra. Arrástralo aquí. Éste, voy a borrar. Este otro, azul, quiero quedarme porque me permitirá ver las formas básicas del personaje. Esta es la imagen que voy a guardar ahora. Voy a ir a Archivo, Exportar, Exportar Como, asegurarme de haber seleccionado solo la mesa de trabajo que quiero exportar No necesito ninguna transparencia. Exporte, seleccione la carpeta y asímbrala Referencia de caracteres. Eso es. Bueno, parece que ya tenemos un personaje con el que jugar. Ahora vamos a tomar sus formas y hacer la pelota que rebota con ellos. Así que vamos a Adobe After Effects. 9. Referencia de pelotas de rebotes Parte 1: Ahora estamos llevando nuestro diseño de personajes a After Effects y recreando allí sus formas principales Veamos cómo lo hacemos. Aquí estamos de nuevo en After Effects. Vamos a crear una nueva composición. Denle nombre, vive el tamaño 1,920 por 1,080. Asegúrese de que la velocidad de fotogramas sea 24. La duración me gustaría ser de un segundo y un fotograma. Un segundo será la duración de un ciclo de la carrera. Por eso esta es la duración de nuestra composición. Importaremos la imagen que creamos como referencia. Puedo hacer clic derecho en el archivo “Importar”. Encuentro la imagen de referencia del personaje. Puedo arrastrarlo a mi tablero de arte. Crearemos algunas formas básicas con su cuerpo. Permítanme centralizar aquí este dibujo rugoso azul. Voy a bloquear esta capa haciendo clic en este candado, así no la muevo por accidente En lugar de elipses para la capa de forma, seleccionaré la herramienta de rectángulo redondeado Puedo dibujar y mientras sigo sosteniendo el ratón, puedo presionar un par de veces y voy a cambiar las esquinas del rectángulo. Ahora está redondeado. Eso es lo que quería. Cambiemos el color ahora a algo así. Voy a cambiar el modo aquí para multiplicar. Puedo ver a través de mi forma. Por supuesto, no necesita ser perfecto. Es sólo una referencia. Asegurémonos de hacer clic fuera de la forma, así que la deseleccionaré Dibujemos elipses. Esta vez voy a cambiar el color primero. Dibujaré el vientre, sostendré el Shift, así que va a ser un círculo perfecto. Por último, haré lo mismo para dibujar la cabeza. Esas son las tres formas que estamos animando aquí como referenciadas para el ciclo de ejecución Vamos a crear una referencia para el piso lo cual es realmente importante, así que presionaré el Comando R para revisar esas reglas aquí. Entonces puedo hacer clic y arrastrar de las reglas para sacar a colación una pauta. Puedo ocultar mi imagen de referencia dejando solo mis capas de forma en la pantalla. También agregaré un color de fondo. Seleccionemos el rectángulo, hazlo blanco y presionemos “Bien”. Si hago doble clic en la herramienta rectángulo aquí, crearé un rectángulo exactamente del tamaño de mi composición automáticamente. Vamos a organizar nombrar todas esas capas. Quisiera enfocarme primero en mi cuerpo, escondamos las otras dos capas. Presiona “P” para revelar mi posición y separar las dimensiones. Animemos la posición Y. Vamos a arrastrar el cuerpo aquí. Creo que este es el punto más alto para ser. En el marco 6 estaría en el punto más bajo. Siempre teniendo el piso como referencia. Copio y pego la posición que quiero; cada seis fotogramas arriba y abajo. En un segundo la posición tiene que ser la misma del frame 0, así que el loopy funcionará Eso es lo que tenemos por ahora. Seleccionaré todo y presionaré “F9". Ve a mis Gráficos, asegúrate de que estoy usando el gráfico de valores y edita la curva como vimos en la clase anterior. Tenemos la primera forma animada, y ya podemos sentir un poco del techado del ciclo de carrera. Hagamos lo mismo con todas las demás formas. [inaudible], esto es lo que tenemos. Un consejo importante. Cuando un personaje se mueve, no todas las partes de su cuerpo se mueven juntas. En este caso, nos gustaría que el movimiento del vientre se retrasara en comparación con el cuerpo principal. En animación esto se llama seguimiento cuando partes secundarias del cuerpo como el pelo o la cola se mueven en un momento diferente del cuerpo principal Para ello, seleccionaré todos los fotogramas clave del cuerpo haciendo clic en posición y arrastraré luego dos fotogramas adelante que crean la sensación de que la campana es suave y está siguiendo al Quiero hacer lo mismo con la cabeza, que no se mueva exactamente al mismo tiempo del cuerpo sino que en vez de dos arrastraré los fotogramas clave solo un fotograma Podemos ver y ver lo que tenemos. Después de verlo decidí tener la cabeza un poco más alta en este punto aquí, así que la forma no se fusiona completamente con el cuerpo. Después de editarlo, simplemente puedo copiar y pegar este fotograma clave en la otra parte de la animación cuando la cabeza está en el mismo lugar. 10. Referencia de pelotas de rebotes Parte 2: Eso es todo, nuestro movimiento básico está hecho. Ahora solo quiero agregar el menor detalle que también es más fácil de hacer aquí en los efectos posteriores luego en la parte fotograma a fotograma del proyecto. Déjame visualizar de nuevo mi referencia porque me gustaría crear una forma para ser el sombrero. Voy a crear un rectángulo así. Cambiemos el color a azul. Con el rectángulo seleccionado, dibujaré otro rectángulo así. Aquí está la referencia para mi sombrero. Vamos a hacer clic en la capa y presionar R para revisar la rotación. Lo rotaré un poco y lo colocaré sobre mi cabeza de referencia. Recuerda nombrar tu capa y hacer que la capa sea amarilla. Ahora quiero emparejar mi sombrero a mi cabeza para que cuando la cabeza se mueva, el sombrero va con él. Haré clic en este pequeño icono en sus pares y enlazaré y lo arrastraré a la capa de la cabeza. Eso es. Voy a ocultar de nuevo mi referencia. Cuando le pego a play, se ve que el sombrero sigue a la cabeza. Ahora necesito agregar un poco de movimiento en el propio sombrero. Presionemos P para la posición y agreguemos un fotograma clave donde la cabeza esté en el punto más alto Ahora presiono Mayús R, así también puedo ver la rotación. En este punto, sí me gusta el sombrero un poco más alto. Aquí en el punto más bajo de la cabeza, movería el sombrero así y lo giraría un poco así. Ahora, copiemos y peguemos todos esos fotogramas clave. Para completar el bucle, iré a este tiempo aquí, copiaré y pegaré los fotogramas clave iniciales verdaderos y lo arrastraré un fotograma por delante Esta es la animación que tenemos ahora. Ahora presiono F9 con todo el fotograma clave sombrero seleccionado, abro mis curvas y en la gráfica de valores, me gustaría que la curva de rotación fuera similar a esa curva de bola rebotante que vimos En la curva de posición, como no separamos las dimensiones, elegiré usar el gráfico de velocidad en lugar del gráfico de valores y hacer algo como esto. Ahora quiero hacer lo mismo que hice antes, la colocación de un fotograma de los parámetros que he animado. Seleccionemos todos los fotogramas clave de rotación y arrástralos un fotograma por delante Eso hace que la animación sea un poco más fluida. Como esta pauta azul no se renderizará, necesito dibujar una referencia para que sea mi piso. Esta vez, seleccionaré la herramienta pluma, atajo g. Puedo cambiar aquí el ancho del trazo. Lo haremos de tres pixeles. El color del trazo puede ser negro. Aquí, dando clic en Rellenar, puedo eliminar cualquier relleno. Ahora hago clic aquí, mantén el turno y doy clic aquí. En el otro lado, seleccionaré ambos puntos de la línea y colocaré así sobre mi guía. Ahora tenemos el momento del amanecer de la animación y se ve muy bien. El único problema aquí es que hicimos todo en 24 cuadros por segundo. Pero como vamos a hacer las cosas cuadro por cuadro en el siguiente paso, es muy recomendable que hagamos la animación en dos, lo que significa un dibujo cada dos fotogramas En este caso, tendremos 12 cuadros por segundo. Tendrá más sentido cuando vayamos a Adobe Animate. Pero por ahora, solo voy a necesitar que sepas que tener 12 cuadros por segundo en lugar de 24 significa cortar la mitad de la cantidad de trabajo que vamos a tener. Como necesito que esta animación sea realmente de 12 fotogramas por segundo, agregaré un efecto para cambiar la velocidad de fotogramas a toda mi animación. Para ello, hagamos clic derecho en alguna parte aquí y seleccionemos Nueva capa de ajuste. La capa de ajuste no tiene ninguna forma pero cualquier efecto que le agregues afectará a todas las capas debajo de ella. Ahora, voy a añadir un efecto llamado posterize time. Para ello, iré a mi pestaña de efectos y presets, tipo de tiempo de posterización La puedo encontrar aquí y arrastrarla a mi capa de ajuste. Este efecto me permite cambiar la velocidad de fotogramas de animación. Aquí donde tengo 24, voy a cambiar ahora a 12. Ahora, cuando presionas Reproducir, puedes ver que la animación se mueve un poco diferente. Eso es porque ahora tenemos menos fotogramas por segundo. Ahora es el momento de exportar el video. Vamos a Archivo, exportar, agregar a Adobe Media Encoder Queue. Se abrirá el Adobe Media Encoder. Hagamos clic aquí para ver mi configuración. Asegúrese de seleccionar H264 que generará un video MP4 Todo lo demás debería estar bien. Aquí, elijo dónde quiero que se guarde el video. Presiona Reproducir y listo. 11. Introducción de Adobe Animate: Es hora de unos chicos de Adobe Animate. Vamos a hacer clic en crear nuevo para crear un nuevo proyecto. Aquí tengo el tamaño de mi Canvas 1920 por 1080, frame rate 24. Haga clic en crear. Te daré una descripción súper rápida de este software antes de animar. Aquí estamos. Primer comando o control más y menos para acercar y alejar. sostener la barra espaciadora, puedo hacer clic y arrastrar y mover el tablero de arte así. Aquí tenemos el pincel para dibujar. Recuerda que todo lo que dibujemos aquí en el Adobe Animate será un vector Aquí puedo cambiar el tamaño del pincel. El alisado también es importante. Lo que afecta a las líneas que dibujas haciendo que se mueva. Por supuesto, puedo cambiar el color del pincel así. Es interesante notar la diferencia entre el pincel que acabo de usar y el lápiz al que está debajo del pincel. Cuando dibujamos con el lápiz, ve que tiene el color del trazo, no el color de relleno. Obviamente, podría hacer click aquí y cambiar el color si quiero. Aquí también, puedo cambiar el tamaño del trazo. Déjame borrar todo para mostrar la diferencia entre el pincel y el lápiz. Aquí, dibujo con el lápiz, aquí dibujo con el pincel. Si selecciono la herramienta de selección blanca haciendo clic, sosteniendo esta negra aquí, y seleccionando también la subselección blanca, discurso o selecciona el punto del dibujo, no toda la forma. Si hago clic en la línea creada por la herramienta lápiz, puedo controlar cada punto individualmente. El pincel es diferente ya que dibuja una forma, no un trazo, agrega tantos puntos y necesita ser posible tener cierto control sobre el dibujo. Por eso nunca uso el pincel cuando estoy dibujando mis animaciones fotograma a fotograma, solo uso el lápiz También tengo el borrador para borrar. También puedo dibujar formas como hago en after effects. Simplemente haciendo clic y manteniendo presionado y seleccione qué forma quiero dibujar. Cuando lo creo, puedo hacer clic en un trazo específico como este para cambiar su color. Puedo cambiar el color de relleno. Si selecciono todo así, cambio todos los trazos a la vez. Seleccionemos y hagamos clic en eliminar o retroceder para eliminarlo todo Ahora hablaremos de la línea de tiempo animada. Este pequeño cuadrado que estoy viendo aquí es un fotograma de mi animación. Como pueden ver ahora, que borré todo lo que dibujé antes, este pequeño círculo está vacío y gris. Si dibujo algo, un pequeño círculo se vuelve negro. Ahora, aprenderás las tres claves más importantes para trabajar en Adobe Animate timeline, F5, F6 y F7 F5 extiende el marco que ha seleccionado. Si lo presiono muchas veces, esto es lo que pasa. Extiendo el dibujo que hice a lo largo de la línea de tiempo, haciéndolo menos largo en mi animación. Si tengo mi aguja en este punto y presiono F6, crearé un nuevo fotograma clave, pero el dibujo seguirá siendo el mismo Ahora bien, si modifico mi dibujo editando las curvas, puedo hacerlo presionando V para activar mi selección para hacer clic y mover las líneas así. Puedo ver que del fotograma anterior al siguiente, el dibujo cambia como si fuera animado. Por fin el F7 que también crea un nuevo marco clave, pero un fresco y M2,1 Me gusta usar el atajo punto y coma para navegar hacia adelante y hacia atrás a través de la línea de tiempo Es muy útil cuando estamos animando cuadro por cuadro. Para eliminar el fotograma que creé, puedo seleccionarlos haciendo clic y arrastrando y presionando Mayús F5 Sólo me quedé con los dos primeros fotogramas. Ahora, voy a hacer clic en el marco. Lo que me hace seleccionar todo el dibujo y presiono retroceso o borrar Ahora tengo una lona vacía otra vez. Eso es lo básico de Adobe Animate. Ahora importemos los videos y referencia que tenemos e instalemos la animación fotograma a fotograma 12. Marco animador por marco: Ahora importaremos el video de referencia y hablaremos sobre ciclos de ejecución. Ahora nos convertiremos en siete metros. Primero, importemos nuestras referencias. Vaya a Archivo, Importar, importar el video, elija esta tercera opción aquí, haga clic en Navegador, seleccione mi video de referencia de animación, siguiente, siguiente, termine. Aquí está. Voy a hacer clic derecho en mis propiedades de capa. Aquí puedo renombrar la capa, video referencia. Recuerda no usar ningún espacio porque animar no soporta eso Voy a reducir la opacidad a 25. Bloqueemos la capa. No hago clic y lo muevo. Ahora, voy a dar click aquí para crear una nueva capa para importar la referencia de diseño. Vamos a archivar, importar, importante al escenario, y busquemos y seleccionemos nuestra encantadora referencia. Lo voy a arrastrar hacia un lado. Ahora, también quiero reducir la opacidad de la misma manera que lo hacía antes y nombrarla. Me gustaría alinear sus pies con el suelo. Ahora, también voy a dibujar un piso sobre éste. Vamos a crear una nueva capa, haga doble clic para nombrarla, y con esta línea aquí, seleccionando el color negro para el trazo, simplemente hago clic y arrastre para dibujar. Si sostengo Shift, será una línea recta. Después presionaré V para activar mi herramienta de selección. Haga clic y arrastre para reposicionarlo de la manera que yo quiera. Quiero bloquear todas esas formas para no moverlas. Ahora, veamos cómo es tradicionalmente el ciclo de ejecución. Recuerda que nuestra animación será muy caricaturesca y exagerada Bueno, aquí tenemos que pensar en la pose más baja y más alta del personaje. Tenemos la pose más baja, que es cuando el personaje golpea el suelo, y la pose más alta es cuando está en el aire sin los pies en el suelo. Otra pose importante son justo antes de que el personaje golpee el suelo, y cuando se estira para obtener impulso. Empecemos a dibujar el cuerpo del personaje porque ya tenemos una clara referencia para ello. Voy a crear una capa y nombrarla, cuerpo. Ahora, quiero crear mi marco en blanco aquí en mi línea de tiempo ya que estamos animando en dos Quiero tener un dibujo para cada dos de esos espacios aquí, 1, 2, y aquí. Presionando F6, me gustaría crear mi nuevo fotograma clave. Hagámoslo hasta el final de la línea de tiempo. Este último fotograma clave aquí tendrá el mismo dibujo del primer fotograma De esta manera completamos el bucle. Vamos al primer fotograma clave, seleccione mi lápiz, seleccione mi lápiz, elija verde como color de trazo, y el tamaño del trazo, dos puntos Ahora dibujemos el cuerpo sobre la referencia. Vigila mi referencia de diseño aquí. Dejaré la barba para después. Así es básicamente como es mi cuerpo. Ahora, voy a hacer lo mismo con todos los marcos que he creado. Presionar Comma y Punto es muy útil porque puedo hojear rápidamente mis dibujos y ver lo consistentes que son No necesitas preocuparte por estirar algunas partes del cuerpo como en el cuello aquí, esto hará que la animación sea aún más agradable Porque en el ciclo de carrera, el cuerpo rebota dos veces. En este punto aquí, simplemente podemos copiar los mismos fotogramas que dibujamos antes y pegarlos por delante. Compruébalo, puedo seleccionar todos esos marcos, aguantar y arrastrarlos hacia adelante así. Si activo este botón de lazo aquí, voy a ver aquí esta zona azul que determina qué parte vamos a ver cuando retoquemos la animación Puedo ver que el bucle funciona. Si escondo mi referencia, esto es lo que tengo. Ahora, pensemos en las piernas. Voy a crear una nueva capa para esa llamada piernas. Crearemos los fotogramas clave como lo hice antes. Ahora, quiero dibujar la posición que me parece más importante. La posición donde el personaje está en el punto más alto justo antes de tocar el suelo y el punto más bajo del movimiento. Así sería la pierna en el punto más alto de la trayectoria corporal. Aquí, cuando esté en el punto más bajo, la pierna estará cruzándose entre sí. Para ayudarme, voy a encender mi piel de cebolla. Piel de cebolla es esta herramienta aquí que nos permite ver un par de marcos antes y después del marco en el que estamos dibujando. Esto ayuda mucho cuando estás animando para determinar cuántos fotogramas por delante y detrás de mí quiero ver Usa esas líneas azules y verdes aquí. Tenemos que prestar atención a qué pierna está detrás. Para identificarlo, voy a hacer una sombra en esta pierna aquí. En este movimiento, esta pierna estará aquí, y esta otra pierna, así. Ahora, voy a dibujar el marco antes de éste, justo antes de que la pierna toque el suelo. Es bueno tener una pierna muy estirada. Ahora que tengo dos marcos entre este vacío, la piel de cebolla me ayudará mucho para dibujar la pierna entre ellos. Siempre me gusta tener mi rodilla como referencia. No quiero que las rodillas estén en el medio. En este caso, lo acercaría un poco más al anterior ya que el movimiento va ganando velocidad. Puedo usar el mismo principio para la otra pierna. En este caso, incluso puedo dibujar sobre el anterior y simplemente moverme y rotar así. Si veo solo esta parte de la animación, puedo ver que el movimiento de la pierna está funcionando bien. Ahora en este marco, la pata de fondo está cruzando la otra así que vamos a dibujarla así. El vientre esconde parte de la pierna, pero eso está bien. Aquí está el momento en que el cuerpo se estira así que quiero una pierna estirada. Recuerda prestar atención qué pierna está en primer plano. A partir de este momento, la videoreferencia ya no es muy importante. Ahora bien, como sé este es el punto más alto de la trayectoria nuevamente, sé que mi pierna estará en una posición similar a la que tenía antes pero invertida. La pierna al frente no es la pierna en el fondo y viceversa. Algo como esto. Aquí de nuevo, voy a tener más o menos la misma pose, pero hemos invertido las piernas así. En el marco justo antes de éste, como vimos antes, tendré una pierna muy estirada antes de chocar contra el suelo. Nuevamente aquí, puedo aprovechar después tener esos dos fotogramas para dibujar el del medio, asegurándome siempre de que esté un poco más cerca del cuadro anterior. Ahora aquí tengo las piernas cruzándose otra vez. Se está tapando la pata de fondo. Para dibujar el único fotograma que falta, quiero copiar el primer fotograma, Control o Comando C, y pegarlo en el último, Control o Comando Mayús V para pegarlo en la misma posición que teníamos antes. Ahora puedo verlo usando la piel de cebolla y usarlo como referencia para dibujar el marco faltante. Incluso puedo imaginar la trayectoria del arco de la pierna para dibujar la pierna entre ellas. Ahora, pulsa Play y mira. Esto se ve bien. Ahora puedo arreglar algunos detalles que me gustaría arreglar. La parte más difícil se ha ido. Ahora es el momento de los brazos. Es necesario saber que el brazo se balancea en dirección opuesta a las piernas. pierna derecha está en la parte posterior, brazo derecho está en la parte delantera, y viceversa. Creando una nueva capa, nombra brazos. Esta es la primera posición. Presionaré F7 aquí, presionando F6 cada dos Ahora, dibujaré las posiciones clave de los brazos cuando esté cruzando el cuerpo y cuando esté en los extremos Ahora voy a llenar los huecos usando la piel de cebolla para asistirme. Los dibujos que están llegando al final de la trayectoria tienen que estar muy cerca unos de otros para que podamos tener un movimiento suave cuando los brazos se detienen. Golpeando Play, este es nuestro movimiento de brazos. Ahora, sólo nos falta el sombrero y algunos otros detalles. Vamos a crear de nuevo una nueva capa, ponerle un nombre a los detalles y crear las claves cada dos fotogramas. Recuerda que puedo rotar mi lienzo haciendo clic en este botón aquí. Como la forma de la cabeza no va a cambiar, en lugar de dibujarla muchas veces, solo presionaré F6 para crear nuevos marcos pero manteniendo el dibujo que tengo para poder simplemente reposicionarlo y girarlo en cada Ya está listo. Tenemos nuestra animación. Algunas personas querrían dibujar una línea más refinada sobre esos dibujos antes de llevarla a Photoshop para la limpieza. Pero prefiero ir directo a Photoshop para ahorrar algunas veces. Ahí, podremos usar cualquier pincel o textura que queramos. Eso es, chicos. La animación está lista, pero por ahora es un boceto. Ahora tenemos que volver a dibujar cada fotograma en Adobe Photoshop. Exportemos nuestro video. Ahora, vamos a renderizar esta animación. Yo borraría todos esos últimos fotogramas. No forman parte del bucle principal. Los seleccionaré todos y presionaré Mayús F5. Ahora, tengo que seleccionar mi capa de referencia, el video y la referencia de diseño. Haga clic con el botón derecho y seleccione Guía para que no se renderizen. Ahora vamos a dar click en Archivo, Exportar, Exportar Medios de Video, Exportar Medios de Video, aquí selecciono donde quiero que se guarde la animación. Asegúrese de que esta casilla esté marcada. Golpea Export y ya está listo 13. Animación en Adobe Photoshop: Por último, hablaremos de animar Adobe Photoshop. Photoshop es una buena herramienta porque nos permite usar cualquier pincel o textura en nuestra animación, diferente de Adobe Animate que solo hace vector Hagamos una rápida descripción general de cómo es animar usando Photoshop Voy a crear un documento aquí llamado Animation Clean Up. 1920 por 1080 es el tamaño, pero esta vez asegúrate de que la mesa de trabajo no esté activada Necesitamos que el modo de color sea RGB y presione “Crear”. Primero, iré a Windows para abrir mi línea de tiempo. Ahora voy a tener mi línea de tiempo aquí abajo. Todo lo que tengo que hacer es hacer clic en “Crear línea de tiempo de video”. Ahora puedes ver que tengo mi capa cero aquí y mi capa cero está en la línea de tiempo también. Aquí está el zoom de mi línea de tiempo y aquí puedo ver mis segundos en fotogramas muy similares a lo que veo después de los efectos. Pero antes de hacer algo, tengo que configurar la velocidad de fotogramas que me gustaría usar, así que haré clic en este menú aquí y haré clic en “Establecer velocidad de fotogramas de línea de tiempo”, y aquí puedo elegir la velocidad de fotogramas que quiero usar que es 24. Ahora colocaré mis agujas en algún punto de mi línea de tiempo y crearemos una nueva capa, para que veas qué pasa. Haga clic aquí para crear una capa. Ahora tengo una nueva capa que fue creada en el punto en que estaba mi aguja. Eso es algo importante para que sepas. Ahora puedo hacer clic y arrastrarlo al inicio de la línea de tiempo. Quiero mostrarles ahora cómo funciona la herramienta de tijera aquí. Si hago clic, recortaré la capa seleccionada en el punto en que esté mi aguja. En el panel de capas, como pueden ver, tengo ahora una copia de Capa 1, entonces esta de aquí es la Capa 1 y esta es la copia de Capa 1. Ahora, quiero crear más capas cortándolas con esta tijera Solo necesito seleccionar la capa, posicionar mi aguja y dar click en esta tijera De esta manera sigo creando nuevas capas como puedes ver aquí. La parte genial ahora es que si hago clic y arrastro esta capa hacia abajo para estar en la misma línea de la otra, automáticamente creo un grupo de video aquí en mi panel de capas. Eso quiere decir que cuando tengo las capas en la misma línea de mi línea de tiempo, se están agrupando aquí. Si hago lo mismo con el otro, se une al grupo. Esto hace que el trabajo aquí en Photoshop sea más organizado. Para dibujar una de las capas, necesito seleccionarla ya sea en la línea de tiempo o en la pestaña de capas, no importa, y además asegurarme de que mi aguja esté sobre ella, de lo contrario, no podré dibujar nada. Por ejemplo, si esta capa está seleccionada, pero mi aguja está aquí, no puedo dibujar como pueden ver. Arrastrando mi aguja aquí, ahora puedo dibujar normalmente y por supuesto, si dibujo en este marco y arrastre la aguja hacia la otra, el dibujo desaparece porque el siguiente fotograma está vacío Si quiero dibujar aquí, necesito seleccionar la capa. Ahora tengo un dibujo de cada fotograma y así es como creamos animaciones. Ten en cuenta que puedes ajustar fácilmente la duración de las capas, haciendo clic y arrastrando los bordes o cortándolos como vimos antes, y por supuesto, cada vez que corté, creo una nueva Puedo cortar tantas veces para tener tantas capas como quiera y claro, todas van a estar aquí en este grupo. Dicho esto, ya se puede ver que cambiando el orden de mis capas en mi pestaña de capas, también cambié el orden en mi línea de tiempo y viceversa. Ahora, aumentemos el zoom. Me gustaría que cada capa ocupara dos fotogramas en mi línea de tiempo ya que nuestra animación está a elegir, así que me aseguraré de ajustarla correctamente. Cada dos fotogramas, una nueva capa. Ahora podría venir y dibujar algo diferente en cada cuadro. Coloque la aguja y seleccione el marco y dibuje. Ahora puedo darle a “Play”. Vaya, el problema es que mi animación está haciendo cinco segundos que es la predeterminada Redujamos el tamaño de la capa cero. Esta capa cero por cierto es mi fondo blanco. Si lo borro, se puede ver que mi fondo ahora es transparente. Control o comando Z para traerlo de vuelta. Ahora golpeando “Play”, puedes ver esta animación loca y aleatoria que creé. Esta barra de aquí arriba también me permite controlar la duración que estoy tocando en caso de que solo quiera ver una parte específica de la animación. Eso es lo básico de los chicos de Photoshop timeline. Ahora estamos más que listos para limpiar nuestros dibujos. 14. Limpia: Ahora es el momento de finalizar cada fotograma de nuestra animación. Empecemos. Es hora de la limpieza. Primero, importemos la animación aproximada, Archivo, Colocar Vinculado y seleccionar el video. Presionemos aquí para confirmar, y ahora ya puedo presionar la barra espaciadora para jugar. Ahora, también necesito mi referencia de diseñador aquí, la misma manera iré a File, Place Linked, y seleccionaré la referencia. Se colocó un poco más tarde en la línea de tiempo, porque es donde estaba mi aguja. Entonces vamos a agarrarlo al principio, y aquí lo cortas y borras esta otra parte. Me gustaría que toda mi referencia tuviera multiplicar como modo de fusión. Puedo seleccionar ambos aquí y elegir multiplicar. Movamos mi referencia de diseño. Presionaré V para seleccionar mi movimiento para dar clic y arrastrarlo aquí. Este será el look final de mi dibujo. Ahora bien, sería útil reducir mi opacidad de video, así que solo vendré aquí para hacer eso Ahora, vamos a encerrarlos. Da click en este pequeño candado. Ahora, no puedo moverlos. Mi forma preferida de trabajar es crear primero todos los marcos vacíos, así entonces solo me concentraría en mis dibujos. Todo lo que necesito hacer es llevar mi aguja al principio, crear una nueva capa, hacer clic aquí. Voy a ir dos cuadros por delante, y hacer clic en esta tijera, así la cortaré Arrástralo hacia abajo para ser la misma línea que el otro fotograma, lo que me hace crear automáticamente un nuevo grupo de videos aquí. Vamos a llamarlo a cuerpo. Voy a dibujar mi cuerpo aquí. Ahora, quiero cortar la capa cada dos fotogramas para que sea más fácil. Quiero hacer clic aquí en este menú desplegable y asegurarme de activar las teclas de método abreviado de la línea de tiempo. De esta manera, si presiono las teclas de flecha, puedo navegar por la línea de tiempo. Eso significa que puedo seleccionar mi capa, cortar, caminar dos marcos hacia un lado con la flecha y volver a cortar. Lo haré hasta el final del video. El sobrante simplemente puedo borrar. Ahora, ya tengo todos mis marcos creados para el cuerpo. Ahora, ya he creado todos mis marcos vacíos para que el cuerpo nos haga la vida más fácil. También quiero duplicar eso un par de veces para dibujar las otras partes del personaje. Para ello, seleccionaré mi grupo, mantendré alt, pincharé y lo arrastraré. Ahora, tengo la copia del cuerpo, que puedo renombrar a Leg1 Haré lo mismo para crear los marcos para todo el personaje. Leg2, Arm1 y Arm2. Cabeza, barba, sombrero. Por último, una capa para los detalles en la parte superior. Ahora, tengo todas mis capas creadas eso significa que simplemente puedo dibujar. Solo necesito tener cuidado, porque siempre necesito dibujar las partes correctas de los personajes en el marco correcto. También es bueno tener mi video de referencia encima de todo, así que todavía puedo verlo líneas cuando estoy dibujando. Ahora, todo lo que necesito hacer es seleccionar el marco adecuado y pintar mi cuerpo. Si presiono la tecla I, seleccionaré mi color elige dos, y puedo elegir el color para mi referencia, b para el pincel. Este es el pincel que quiero usar, pero puedes usar tu favorito. La talla 50 para mi es buena. Ahora vamos a pintar. Presionando r. puedo rotar el lienzo, lo cual también es útil. Cuando termino un fotograma, hago clic en el siguiente y continúo con el proceso. la misma manera que lo hicimos cuando estábamos dibujando la animación, me gustaría repetir los seis primeros fotogramas de mi animación corporal, ya que sabemos que hacen loop Lo que voy a hacer es seleccionar mis seis últimos fotogramas. Puedo hacer clic en el primero, mantener el turno y hacer clic en el último. Eliminarlos haciendo clic en esta pequeña papelera, haz clic en “Sí”, luego seleccionaré esos aquí. Mantenga presionada la tecla Alt y haga clic y arrástralas así. Ahora, ya tengo el cuerpo hecho con un poco de tiempo ahorrado. Olvidé uno de los marcos. No hay problemas, lo pintaré, y reemplazaré el que esté más adelante en la línea de tiempo. Ahora, vamos a animar la cabeza. Mismo proceso de antes. A veces me gusta hojear mis animaciones, presionar las teclas de flechas para ver cómo se ve De esta manera puedo identificar y arreglar algunos detalles aquí. Si escondo mi video de referencia, puedo ver como se ve el dibujo final. Como hicimos con el cuerpo, también se pueden duplicar los seis primeros cuadros de la cabeza. Vamos a la cabeza, misma lógica. Después la barba. Por último, dibujaremos las piernas. Como tengo Leg1 y Leg2 en diferentes capas, necesito asegurarme de que la correcta esté frente a la otra En este caso, quiero que la Leg1 sea mi pierna de primer plano, así que Leg2 debería estar Ten cuidado porque es fácil arrastrarlo dentro del grupo corporal. Lo que no es lo que quieres. Dibujemos todas las piernas ahora. Ahora para hacer mi pierna de fondo, me gustaría usar un tono más oscuro de este morado, o incluso este negro aquí, así voy a diferenciar las piernas. Seleccionemos las capas Leg2 y comencemos a pintar. Podrán notar que a veces, en esta fase de limpieza, identifican y arreglan algunos problemas que antes no vi como la posición de la pierna cuando está cruzando la otra Cambié la pose un poco desobedeciendo mi referencia. Este no es el enfoque más recomendado, pero suele funcionar para mí. Las piernas están hechas. Dibujemos los brazos. Sabiendo que uno de ellos tiene que estar detrás del cuerpo, arrastraré el Arm2 hacia abajo detrás de todo Ahora, seleccionaré la capa Arm1 y dibujaré. Ahora por fin, los detalles finales. Como los ojos son elementos pequeños, es fácil ser inconsistente con su tamaño y posición, así que siempre me gusta hojear usando las flechas Alternativamente, también podría confiar en la piel de cebolla, que también tiene Photoshop. Puedo dar click aquí y activar la piel de cebolla. Podría ocultar mi referencia y elegir esta piel de cebolla piel transparente, para ver dónde está el dibujo anterior, y dibujar el siguiente ojo en la posición correcta. Ahora, ya está todo hecho. Vamos a reducir todas las carpetas, ocultar mis capas de referencia, y golpear la barra espaciadora para jugar. Mira lo genial que se ve esto. Lo último que me gustaría hacer aquí es dibujar un piso. Voy a crear una nueva capa, cortar el final para que tenga la duración correcta. Eliminar esta parte, y ahora en cualquier punto de mi línea de tiempo, simplemente puedo dibujar mi piso. Volveré a encender mi referencia. Haré clic y arrastraré manteniendo pulsada la tecla Shift, así tendré una línea recta. Ponle nombre Piso, y arrástralo debajo de todos mis dibujos. Ahora ya está listo. Chicos, eso es. La animación está hecha. Ahora, tenemos que llevarlo a after effects para hacer nuestra composición final. Sobre todo porque, esta animación aquí dura un segundo, necesitamos hacerla más larga para poder publicarla. Por supuesto, incluso podemos agregar algunos efectos ahí, para cambiar el color de fondo, así que te voy a mostrar cómo. 15. Composición final: Ahora, el paso final, hagamos la composición final en Adobe After Effects. Por fin estamos aquí, creando la composición final para nuestro proyecto. Vamos a importar nuestra secuencia PNG, para que veas cómo funciona. Hagamos clic con el botón derecho en Importar archivo. Ahora, tengo que encontrar mi secuencia de imágenes aquí en esta carpeta Limpiar. Aquí están. Todo lo que tengo que hacer es hacer clic en uno de ellos y asegurarme de que el cuadro de secuencia PNG esté marcado Haga clic en “Abrir”. Ahora, tenemos aquí esta secuencia PNG pero el efecto después sigue sin saber en qué velocidad de fotogramas queremos que reproduzca esas imágenes, así que hagamos clic con el botón derecho del ratón por separado en metraje y principal. Ahora, tenemos este 30, que es la velocidad de fotogramas predeterminada. Queremos que sean 24, así que vamos a arrastrar esta secuencia aquí para crear una nueva composición. Esta nueva composición tiene el tamaño exacto y duración de la animación, de un segundo de duración. Si presiono la barra espaciadora, puedo jugar y ver ahora cómo se ve. Me gustaría reposicionar la animación un poco así y voy a crear una capa de forma con el color de fondo que quiero, mis bibliotecas aquí Vamos a hacer clic en el rectángulo para eliminar el trazo y asegurarnos de que los pocos estén activados. Vamos a elegir los pocos colores, tal vez este verde aquí. Ahora, haga doble clic en la herramienta rectángulo y ahora tengo esta forma creada. Arrástralo abajo y ahora tenemos un fondo colorido. Le renombraré, cambiaré de color a verde oscuro y lo bloquearé. Ahora, agreguemos algo de textura a mi fondo. Para hacer eso, crearía una elipsis. Sostendré Control o Comando para crearlo desde el centro y elegir un color más verde ligeramente más brillante Ahora, quiero aplicar un efecto a los puntos suspensivos. Vamos a los Efectos y presets. Búsqueda de desenfoque gaussiano. Haz clic y arrastra el efecto a mis puntos suspensivos. Aquí, junto con mi pestaña Proyecto, puedo ver las propiedades del efecto. Voy a aumentar la borrosidad. Haga clic y arrastre el número a la derecha. Para evitar estas líneas raras aquí, deseleccionemos los píxeles de borde repetidos Ahora, cambiaremos el modo de fusión de la textura. Elijamos Disolver. Ahora, tenemos una textura fresca aquí. Vamos a nombrar la capa, cambiar el color de la capa a verde, y ponerla detrás del personaje. Ahora, quiero crear otro rectángulo del mismo color de mi fondo original. Dibujaré el rectángulo así, ocultará el fondo de mi textura así. Lo llamaremos Piso. Siéntase libre de alinear este piso a la línea que tenemos. Se puede reposicionar la textura, aumentando, reducir la borrosidad Lo que tú quieras. Así es como se ve. Incluso puedes seleccionar Dancing Disolver, en lugar de simplemente disolver, así que la textura te mueves un poco. El único problema que tenemos ahora es que este video solo dura un segundo. Esto es demasiado corto para que cualquiera lo vea. Por eso voy a aumentar la duración de la composición. Vayamos a Composición, Ajustes de composición y quiero que tenga 10 segundos de duración. Haga clic, “Bien”. Ahora, tengo una composición mucho más larga. Todo lo que necesito hacer es desbloquear las capas de bloqueo, poder estirar el fondo y texturas hasta el final de mi composición, la animación, simplemente puedo duplicarla, presionar Control o Comando D, arrastrarla hacia la derecha. Puedes acercar el zoom para certificar que no tienes un hueco entre esas capas Ahora, puedo volver a duplicar, ambas al mismo tiempo, y hacer lo mismo hasta el final de mi composición. Ahora, tenemos una composición larga de 10 segundos con nuestra animación. Como quiero publicarlo en Instagram. Siempre me gusta tener las animaciones cuadradas, así puedo ir a mis ajustes de composición y establecer el tamaño en 1080 por 1080. Ahora, es más adecuado para mi cuenta de Instagram. Ahora, podemos entorpecer el video. Para ello, vamos a Archivo, Exportar, agregar a la cola de Adobe Media Encoder. Aquí abrimos Adobe Media Encoder. Él es la animación. Puedo dar click aquí para ver la configuración. Siempre elijo H264 para animaciones en redes sociales. Aquí podemos cambiar el nombre y la ubicación donde se guardará la vista. Siempre presiono Usar la máxima calidad de renderizado. Ahora, solo tenemos que presionar Reproducir y animar, tenemos nuestra animación Enhorabuena. 16. ¡Gracias! : Chicos, este fue un viaje emocionante, cubrimos tanto. Muchas gracias por llegar al final de esta clase. Espero que te des cuenta que primero, animación no tiene reglas, no hay límite, puedes usar todos los softwares y técnicas disponibles para ti a la vez y aprovechar mejor que cada software puede ofrecernos Tengo muchas ganas de ver lo que ustedes van a crear. Por favor, sube tu producto aquí, y estaré viendo comentario sobre cada uno de ellos. Para inspirarte, echa un vistazo a esos otros personajes que creé usando el mismo proceso. Espero que te haya parecido divertido y te vea en la siguiente.