Introducción

Hola, soy Qilin.

 

La animación es una de las formas de arte más avanzadas porque es una combinación de muchas habilidades: muestra una comprensión del espacio, el movimiento, la actuación... sin mencionar que es INCREÍBLEMENTE difícil, ya que es necesario dibujar cada cuadro. Eso podría significar 24 dibujos completos para un solo segundo de animación. A pesar de esto, el resultado del arduo trabajo que implica una animación dibujada a mano brinda resultados muy satisfactorios y es increíblemente inspirador.

 

¿Qué pasaría si te dijera que hice la siguiente animación en Clip Studio Paint con solo UN dibujo?

En este tutorial, compartiré mi proceso y las técnicas que utilicé para crearlo.

 

Mira mi video a continuación, ya que el proceso de animación es mucho más claro en formato de video.

Video

✱ Dibujo para preparar la animación

Empiezo con mi idea inicial de boceto de mi personaje con una polilla en la cara. Mi primer paso consiste simplemente en mirar mi boceto y decidir qué tipo de elementos animados quiero incluir en la ilustración final.

 

Esto es lo que estoy pensando animar:

► Alas de polilla batiendo

► Algunos movimientos de ojos

► Algunos movimientos de cabello

► Algunos movimientos de brazos

► Luz pulsante

Todos estos movimientos imaginarios significan que probablemente habrá muchas partes móviles. ¡Y esta es la clave! Al dibujar tu ilustración, no tengas miedo de usar muchas capas.

 

Esto te permite separar y agrupar elementos de la ilustración, lo que hará que la preparación de tu ilustración para la animación sea mucho más fácil.

 

Solo como referencia, te mostraré cómo organizo y agrupo mis capas durante el proceso de dibujo.

 

Por ejemplo, con el brazo, mientras lo dibujaba, lo tenía separado en capas de línea, color plano y sombra. Estos componentes se combinarán en una capa, que se usará para la animación.

Cada una de estas “partes” que se pueden utilizar para la animación se divide en sus propias capas. Puedes ver cómo separé todas las partes del personaje en la imagen de abajo.

Las áreas que tendrán muchas más partes móviles incluyen los ojos y el cabello, y las áreas que no estarán animadas incluyen la cabeza y el cuerpo.

En general, tengo carpetas de capas para cada grupo grande, con grupos principales como “polilla”, “personaje” y “fondo”, y dentro de esos grupos de capas hay subgrupos más pequeños, como “cabeza”, “parte superior del cabello”, “parte inferior del cabello”, etc.

Agrupar las capas de forma adecuada antes de animar ayudará a despejar mucho el espacio de trabajo de la línea de tiempo y hará que sea más fácil encontrar las cosas. No tienes que cambiar el nombre de todas las capas, pero sí ayuda mucho hacer un seguimiento de ellas.

 

Esta etapa se trata en gran medida de organización, pero tampoco te presiones demasiado para que las cosas sean "perfectas" o sientas que necesitas organizarte de la misma manera que yo. Es probable que tengas que ajustar cosas o superar obstáculos inesperados durante el proceso de animación, que es exactamente lo que me pasó a mí, así que dibuja y agrupa las capas según lo que creas que es correcto y lo que te ayudará.

✱ Configuración de la línea de tiempo de la animación

Vamos a configurar el espacio de trabajo de animación. Abra la línea de tiempo de la animación en “Ventana” → “Línea de tiempo”.

A partir de ahí, hagamos una nueva línea de tiempo.

1 ► Crea una nueva línea de tiempo.

 

2 ► Para la velocidad de fotogramas, 12 o 24 son los estándares en animación, pero elegiré 12 para simplificar. Nota: si quieres exportar la animación como GIF, el máximo es 12 fotogramas.

 

3 ► Puedes alternar la duración de la animación. Si tu velocidad de fotogramas es 12, entonces 12 fotogramas = 1 segundo. Si aún no te has decidido, te recomiendo configurarlo como un número más largo, ya que es más fácil reducir la cantidad total de fotogramas en la línea de tiempo usando los interruptores azules que se ven en la imagen a continuación.

 

4 ► Dejaré todo lo demás como predeterminado.

1, 2 ► Una vez creada la línea de tiempo, puedes ver que todas las capas están ordenadas de la misma manera que en la ventana de capas.

 

3 ► Hay dos botones azules a cada lado de la línea de tiempo que puedes usar para ajustar la duración de tu animación como se mencionó anteriormente.

¡Ahora todo está configurado y listo!

Animando la polilla (+Introducción a la animación de fotogramas clave)

Comenzaré animando la polilla. En esta sección, presentaré la técnica de animación principal que usaré durante el resto del tutorial: animación de fotogramas clave.

 

Tengo un total de 7 capas de polilla: 4 capas para cada parte del ala, 2 para las antenas y 1 para el cuerpo.

Primero prepararé mis capas de polilla girándolas y reposicionándolas dentro de los fotogramas clave.

1 ► En mi primera capa de ala, voy a hacer clic en "Habilitar fotogramas clave en esta capa".

 

2 ►Luego, voy a seleccionar el punto de inicio (fotograma 1), indicado por el marcador rojo en la línea de tiempo.

 

3 ► Voy a hacer clic en "agregar fotograma clave".

 

4 ► Deberías ver aparecer un diamante en la línea de tiempo: ¡ese es tu fotograma clave!

1 ► Voy a usar la herramienta “Objeto” (O) y me aseguraré de tener seleccionada la capa correcta.

 

2 ► Debería aparecer un cuadro azul alrededor de su lienzo con controles de transformación.

 

3 ► Observe cómo cambia la ventana “Propiedades de la herramienta” para que pueda alternar entre todos los tipos de controles de transformación.

 

 

Como quiero rotar la polilla, voy a ingresar (-30) en el parámetro “Ángulo de rotación” en la ventana “Propiedades de la herramienta”.

Ahora la capa está rotada en el ángulo que quiero y voy a hacer exactamente lo mismo para cada capa de polilla: habilitar fotogramas clave, agregar fotogramas clave y rotar (-30). Es importante mantener el valor constante.

 

Cuando las 7 capas de polillas estén rotadas en el ángulo que quiero, simplemente voy a seleccionar el grupo de capas y usar la herramienta "Mover capa" (K) para ajustar su posición.

La polilla fue reposicionada para estar alrededor del borde de la cara del personaje.

Antes de hacer cualquier otra cosa, volví a cada capa y ajusté los puntos de anclaje para las capas de las alas y las antenas. Los puntos de anclaje indicarán dónde se centrarán los ajustes de transformación y se indican con un pequeño signo "+".

Los 4 puntos de anclaje de la capa “ala” se reposicionan para estar en el centro del cuerpo de la polilla, mientras que los 2 puntos de anclaje de la capa “antenas” se reposicionan para estar en el centro de la cabeza de la polilla.

Quizás te preguntes por qué no roté todo el grupo de capas y, en su lugar, roté cada capa individualmente. Puede parecer tedioso, ya que tengo 7 capas de polillas, pero consideré que era un paso necesario. Esto se debe a que suceden cosas raras al rotar un grupo de capas que utilizan ajustes de escala (que utilizaré más adelante), y consideré que esta era la mejor manera de obtener el resultado que necesitaba.

Esto es lo que sucede cuando giras un grupo de capas que usan ajustes de escala, que se utilizan para animar las alas plegables que se explican en la siguiente parte.

---

LAS ALAS

Ahora que todas las capas están preparadas, comenzaré a animar las alas. Tengo 4 capas de alas, divididas en la parte superior derecha, la superior izquierda, la inferior derecha y la inferior izquierda.

En la capa del ala superior izquierda, haré clic en la línea de tiempo y agregaré otro fotograma clave. En “Propiedades de la herramienta”, desmarcaré “Mantener relación de aspecto” y cambiaré el ancho a (2). Cuando hago clic en reproducir, ¡parece que el ala se está plegando!

1 ► Haz clic en la línea de tiempo para avanzar.

2 ► Agrega un nuevo fotograma clave.

3 ► Desmarca la opción “Mantener relación de aspecto” en las propiedades de la herramienta.

4 ► Cambia el ancho a “2”.

Para completar el movimiento, simplemente seleccionaré el primer fotograma clave. Cuando lo veas resaltado en rojo, haz clic izquierdo y mantén presionada la tecla [ALT], lo que te permitirá duplicar y arrastrar el fotograma clave. Simplemente arrástralo hacia adelante en la línea de tiempo.

¡Ahora el ala ha completado su movimiento de aleteo!

Voy a hacer exactamente lo mismo para cada una de las capas de las alas: crear un nuevo fotograma clave y cambiar el ancho a (2).

 

La razón por la que dividí las alas en 4 capas en lugar de solo 2 fue para poder ajustar el tiempo de la animación de modo que haya un poco de retraso en la mitad inferior de las alas para lograr un aspecto más natural. Puedes ajustar fácilmente el tiempo haciendo clic y arrastrando los fotogramas clave.

Algunos fotogramas clave para el “ala inferior izquierda” están retrasados en comparación con los del “ala superior izquierda”.

¡Aquí está la animación final del ala!

LAS ANTENAS

También quiero que las antenas de la polilla se muevan, así que estoy usando la misma técnica. Tengo dos capas de antenas, una para la izquierda y otra para la derecha.

 

Esta vez, en lugar de ajustar el ancho, voy al parámetro “Ángulo de rotación” y ajusto el valor para que ambas antenas se muevan hacia abajo.

 

Estoy duplicando los dos fotogramas clave que tengo para llenar toda la línea de tiempo, asegurándome de que mi último fotograma clave sea el mismo que el primero para que los movimientos se conecten.

En el cuadro 7, “antena l” (izquierda) tiene el ángulo de rotación en (-40), mientras que “antena r” (derecha) tiene el ángulo de rotación en (-20).

¡Así se ve la animación de las antenas con las alas!

EL POLVO

Quería intentar hacer una animación con algunos efectos, donde cayera un poco de polvo brillante cuando la polilla batiera sus alas.

 

Primero usé este pincel de efectos para dibujar un poco de polvo brillante en una nueva capa. ¡Échale un vistazo!

Luego, utilizo la herramienta Lazo para seleccionar partes del sello y crear cuatro capas de polvo. Esto es para poder animar diferentes partículas de polvo que caen en diferentes momentos para que se vean más naturales.

Esta vez, estoy usando fotogramas clave para realizar cambios en el parámetro “Posición” arrastrando el polvo hacia abajo para que parezca que está cayendo.

Para mejorar el efecto, hago que el polvo desaparezca a medida que cae, por lo que también estoy manipulando el parámetro “Opacidad”. ¡Ten en cuenta que debes hacer clic en el signo [+] en tus capas en la línea de tiempo para ver los fotogramas clave de opacidad!

Así es como se ve la animación de polvo terminada:

Es posible que notes que aquí hay un nuevo color de fotograma clave. Los diamantes verdes indican un fotograma clave de “interpolación lineal”. Puedes cambiar el tipo de fotograma clave que utilizas haciendo clic en la flecha junto al botón “crear nuevo fotograma clave”.

Básicamente, lo que cambia es la forma en que cae el polvo. Cuando se utiliza la “interpolación suave” predeterminada, la velocidad comienza lentamente, luego rápidamente y luego lentamente nuevamente. Cuando se utiliza la “interpolación lineal”, se mueve a una velocidad constante.

 

Los fotogramas clave de interpolación suave son excelentes para usar en todas mis animaciones de personajes, pero en el caso de que algo caiga, sería más natural que cayera a una velocidad constante.

Observe cómo “suave” muestra más bien una pausa al comienzo de la animación, lo que hace que parezca menos natural para un movimiento de caída.

Animando los ojos

Animar los ojos es la forma más sencilla de darle vida a un personaje, así que estos son los siguientes. Quería que mirara a su alrededor y cambiara entre una expresión relajada y una expresión de sorpresa.

---

LOS IRISES

Cuando observas los ojos de una persona, los iris se mueven rápido y entrecortados. Por el contrario, sería extraño si se movieran en un arco lento. Con esto en mente, tengo mucho cuidado con la ubicación exacta de los iris en mis fotogramas clave para imitar ese aspecto "entrecortado".

 

Cuando los fotogramas clave están uno al lado del otro (es decir, fotograma clave 1 → 2), no hay espacio para que CSP agregue automáticamente movimientos intermedios. Esto me ayuda a obtener un movimiento "entrecortado". Tengo cuidado de no hacer que el movimiento sea demasiado abrupto, ya que vuelve a un territorio poco natural.

Cuando el iris se establece en una posición sin movimiento, me aseguro de duplicar el mismo fotograma clave y dejar espacio entre ellos para que el iris pueda mantener su posición.

También estoy poniendo la mayor parte de la animación del iris durante las partes donde la polilla no mueve sus alas, para que dé la impresión de que los ojos están reaccionando a los movimientos de la polilla.

Para mantener el iris dentro del límite correcto, la capa del iris se configura como una máscara de recorte para que quede restringida dentro de la capa de “blanco del ojo”.

¡Así lucen los iris!

EL RESTO DE LOS OJOS

Voy a crear dos “posiciones” de ojos, una en la que tenga los ojos bien abiertos y otra en la que tenga los ojos relajados.

Tengo cuatro capas de pestañas, dos para las pestañas superiores y dos para las inferiores, y estoy animando los dos ojos por separado, ya que su rostro no está en un ángulo recto hacia adelante.

 

Al igual que antes, comenzando con las pestañas superiores, estoy activando fotogramas clave, estableciendo los puntos de anclaje para que estén en el centro del ojo y manipulando la posición y la escala de las pestañas usando el cuadro de transformación, asegurándome de que los fotogramas clave estén alineados en la línea de tiempo.

Cambiar de posición ajustando el cuadro de transformación exterior.

Para que el movimiento de los ojos abiertos parezca más natural, utilizo una técnica de animación llamada sobreextensión. En este caso, simplemente permito que los ojos se abran un poco antes de relajarse, lo que ayuda a exagerar el movimiento y a darle más dinamismo a la animación. Puedes ver la comparación aquí.

Es una pequeña adición que solo requiere un fotograma clave adicional.

Una vez que termino con las pestañas y los párpados, uso la misma técnica de transformación de fotogramas clave para alinear el blanco de los ojos de modo que no haya superposición.

¡Así se ve la animación del ojo terminada!

Animando el brazo

Cada vez se añaden más animaciones pequeñas a mi ilustración. Se me ocurrió que el brazo, la mano y el dedo índice se movieran ligeramente.

 

Lamentablemente, no planifiqué esto con tanta antelación al dibujar, por lo que tendré que separar el brazo en tres partes. Hice esto usando la herramienta Lazo y dividiendo la capa del brazo. Para evitar posibles huecos en la animación, agregué bloques de color adicionales al brazo y al dedo, y los oculté detrás de la capa de la mano.

Seleccionar y separar la mano del brazo en dos capas y rellenar el orificio del brazo para evitar espacios.

Seleccionar y separar el dedo de la mano en dos capas y extender el dedo para evitar espacios.

Ahora puedo repetir la misma técnica de animación de fotogramas clave que antes: habilitar fotogramas clave, ajustar puntos de anclaje (imagina las articulaciones de una muñeca articulada) y ajustar el parámetro de rotación.

 

No quiero que el movimiento sea demasiado errático, así que solo cambio la posición y el ángulo muy levemente, y esparzo los fotogramas clave a lo largo de toda la línea de tiempo para que el movimiento sea lento y no distraiga demasiado. En realidad, solo estoy creando 2 nuevos fotogramas clave aquí: la posición inicial y la posición final. El último fotograma clave es solo un duplicado del inicio para que la animación se repita sin problemas.

Por último, aplico la misma animación de rotación de fotogramas clave a todo el grupo de capas, de modo que la animación de la mano que ya he realizado seguirá la rotación de todo el brazo. En total, ¡animar todo el brazo, incluido el corte de las piezas, llevó menos de 10 minutos!

Animando el cabello

Dejé el cabello casi al final, ya que es el que tiene más partes en mi personaje. Dividí los grupos de capas más grandes en la coronilla, las secciones medias, la espalda y esos mechones flotantes, la mitad de los cuales están detrás de todo el personaje y la otra mitad en la parte superior de todas las capas de cabello.

 

Al igual que con el brazo, me di cuenta de que necesitaba cortar y crear más partes. Quiero que el movimiento del cabello sea flotante, como si hubiera una suave brisa.

SECCIONES MEDIAS DEL CABELLO

Empiezo por las secciones medias. Divido la capa en dos partes, lo que se hace fácilmente seleccionando y cortando/pegando.

Antes de comenzar cualquier animación, hago algunos dibujos adicionales para rellenar los espacios vacíos y reorganizo el orden de las capas para que el cabello del lado derecho quede oculto detrás de la cabeza.

Estoy haciendo la misma técnica de animación de fotogramas clave que antes: habilitando fotogramas clave, ajustando el punto de anclaje y usando fotogramas clave de rotación para que el cabello tenga un movimiento de balanceo.

El fotograma clave del medio indica dónde estoy ajustando la rotación. No están alineados, por lo que puede haber algún desfase temporal en la animación.

Estoy yendo y viniendo entre ajustar el tiempo de la animación y volver a dibujar para asegurarme de que todos los espacios estén llenos y verificar que estoy satisfecho con todo.

PARTE SUPERIOR DEL CABELLO

Me pareció que lo mejor era dividir todos los mechones en capas individuales y la parte superior del cabello en tres partes: el lado izquierdo, el lado derecho y la parte superior. Esto facilitaría la animación de cada parte.

Al igual que antes, estoy activando fotogramas clave, ajustando los puntos de anclaje y usando fotogramas clave de rotación, comprobando que todos los espacios estén llenos y conectados. Nuevamente, me estoy asegurando de ajustar las posiciones de los fotogramas clave para que haya algún desfase temporal que genere interés visual.

Fotogramas clave para las 4 capas de cabello. Les di a todas diferentes tiempos y le di a la capa inferior una velocidad de movimiento más rápida agregando más fotogramas clave.

Fotogramas clave para la parte superior del cabello. El último no necesita ningún fotograma clave porque permanecerá inmóvil.

¡Cualquier hueco que apareció durante el proceso de animación fue realmente fácil de arreglar simplemente usando la herramienta Licuar!

PELO HACIA ATRÁS

Como antes, dividí la parte posterior del cabello en dos partes y separé cada hebra de cabello en su propia capa.

La parte de atrás era más de lo mismo: dividí el cabello en dos y usé animación de rotación. Si esto suena repetitivo, es porque lo es.

 

Si tienes un grupo de partes que se animarán de la misma manera que los mechones de cabello, también puedes variar los números de los parámetros para que haya una variedad de movimientos más pequeños y más grandes.

Fotogramas clave para todas las piezas de cabello de la espalda.

¡Ahora todo el personaje y la polilla están animados!

Efectos adicionales + acabado

¡Ufff! Mi archivo de clip se está haciendo cada vez más grande. Pero solo quiero agregar una última cosa: una luz pulsante que provenga de la polilla. No creo que mi computadora pueda manejar mucho más el tamaño creciente de mi archivo .clip, así que tuve que simplificarlo.

 

Estoy usando un aerógrafo grande con una opacidad baja para dibujar algo de luz.

Luego, utilizando un pincel más duro, dibujé algunas formas más exactas en su rostro, cabello y hombro.

Como toque final, estoy usando el mismo pincel de efectos que utilicé cuando animé el polvo de polilla que caía y lo dibujé generosamente sobre la ilustración.

Para animar la luz de modo que pareciera que pulsaba, cambié la opacidad en mis fotogramas clave y luego repetí los fotogramas clave en toda la línea de tiempo.

¡Ahora toda la animación está terminada, esta vez con luz!

Este tutorial resultó ser mucho más largo de lo que esperaba, así que agradezco a todos los que se quedaron hasta el final.

 

Recuerda mirar mi video tutorial en YouTube y cuéntame qué te pareció, si probaste estas técnicas por ti mismo y ¡gracias por mirar!