Presentación

¡Hola a todos! Feliz nuevo año ʕ•́ᴥ•̀ʔっ. El inicio del año es un buen punto para comenzar nuevas aventuras, como por ejemplo, iniciarse en el mundo de la animación. En esta ocasión les comparto algunos ejercicios para adentrarnos en este maravilloso mundo. Espero les guste, sin más preámbulos…

 

¡¡Comencemos!!

1. Animación en el Modo sencillo

Iniciemos conociendo el nuevo espacio de trabajo de animación agregado al modo sencillo en la actualización 4.2. Esta es una interfaz minimalista perfecta para pantallas pequeñas. Veamos como usarla.

 

Para los usuarios de Clip Studio Paint DEBUT/ PRO, se pueden emplear como máximo 24 fotogramas.

 

 

✦ ¿Dónde está?

Lo primero será ir al modo sencillo. Si ya tenemos un lienzo abierto desde el modo escritorio, entonces, para cambiar al modo sencillo debemos ir al icono flotante o en su defecto, desde la ruta: Icono de Clip Studio (esquina superior izquierda) > Cambiar al modo sencillo.

Una vez en la interfaz, hay que cambiar el lienzo de ilustración por uno para Animación. Para ello deberemos ir a: Menú (icono de los tres puntos) > Crear animación.

Una vez seleccionada la opción aparecerá una ventana donde podemos nombrar al proyecto.

Si abrimos el proyecto directamente desde la pantalla Clip Studio Start, solo tendremos que elegir la opción: Dibujar > Nuevo lienzo > Animación. En esta ventana encontraremos lienzos con medidas recomendadas, pero también podemos elegirlas de modo manual.

✦ ¿Cómo funciona?

Lo primero que encontraremos al activar la interfaz de animación es la línea de tiempo en la parte inferior del lienzo.

- LÍNEA DE TIEMPO -

 

En la barra del tiempo nos encontraremos con tres secciones importantes.

 

1. Botón de reproducción.

2. Barra de fotogramas: Por defecto la barra contiene un fotograma vacío que no puede ser borrado; además de eso, en esta barra se agregaran los fotogramas que sean creados. Al dar clic sobre cualquier fotograma se desplegará un menú con dos opciones: Duplicar y Eliminar.

 

Al duplicar un fotograma, este incluirá todas las capas vinculadas con él.

3. Con el símbolo (+) podemos agregar fotogramas vacíos a la línea de tiempo. Por otro lado, con el símbolo (…) podemos activar el papel cebolla y ver la tasa de fotogramas.

- FOTOGRAMAS Y CAPAS -

 

Cada fotograma es como una carpeta que contiene todas las capas y carpetas que se creen en la paleta «Capa» correspondiente a ese fotograma. Las capas dentro de cada fotograma se manejan igual que con en una ilustración.

Cada nuevo fotograma es una hoja en blanco donde no se puede copiar el contenido de las capas de fotogramas anteriores, así que tenemos dos opciones:

 

➀ Dibujar todo de nuevo.

➁ En lugar de crear un nuevo fotograma, podemos duplicarlo. Después hay que editar las capas para conseguir lo que se desea. Esta es una buena opción, nos ahorra dibujar algunos elementos de nuevo. Por ejemplo, para realizar la animación de este conejito necesité dos capas, una que contuviera las líneas guía y otra por encima de la anterior para el conejo. Una vez dibujada la pose correcta, duplique el fotograma para conservar la información de la capa guía; ya solo quedo borrar el conejo duplicado y dibujar al nuevo en la siguiente pose.

En la paleta «Capa» encontramos todos las funcionalidades que nos permitirán hacer las ilustraciones como lo haríamos de modo convencional.

- IMPORTAR IMÁGENES -

 

Si queremos importar alguna imagen para el fondo o algún otro elemento, lo que tenemos que hacer es ir a los tres puntos que se encuentran en la paleta «Capa» y elegir la opción «Galería». Esta opción nos llevará a la galería de nuestro dispositivo para seleccionar la imagen deseada.

- PAPEL CEBOLLA -

 

El papel cebolla nos permite ver los elementos del fotograma anterior y posterior al que se está trabajando. Los elemento del fotograma anterior se mostrarán con un color púrpura y los del fotograma posterior de color verde. El papel cebolla nos permite visualizar el recorrido de los fotogramas y sobre todo a crear una guía que permita dibujar la siguiente pose.

- CAMBIAR FOTOGRAMAS DE POSICIÓN -

 

Cambiar la posición de los fotogramas es tan fácil como mantener presionado el fotograma y moverlo a la nueva posición.

- FOTOGRAMAS POR SEGUNDO -

 

La tasa de fotogramas está por defecto establecida en 12 y no se puede editar directamente desde el modo sencillo, pero hay una forma de cambiarla.

Para ello hay que cambiar por un momento al modo estudio e ir a: Animación > Línea de tiempo > Cambiar tasa de fotogramas.

Dentro de la ventana se puede elegir entre varias opciones o escribirla directamente en la barra. Elegimos el que necesitemos.

Una vez que volvamos al modo sencillo, listo, los fotogramas por segundo habrán cambiado.

La tasa de fotogramas es el indicador de frecuencia con la que se muestran imágenes consecutivas (fotogramas) en una pantalla, medida en fotogramas por segundo (fps), determinando así la fluidez de la animación. Aquí varios ejemplos con diferentes FPS.

2. Ejercicios de animación

Ahora veamos algunos ejercicios de animación que nos ayudaran a entender el tiempo, el espacio, la aceleración o la desaceleración, entre otros. Estos ejercicios, aunque puedan parecer simples, en realidad abarcan algunos de los fundamentos de la animación.

 

 

✦ Péndulo

El péndulo es un ejercicio que nos permite entender algunos elementos de la animación que se presentan sin importar que se esté animando. Comencemos conociendo algunos conceptos importantes:

 

● TIEMPO (Timing): El timing es el tiempo que dura la animación. Pongamos como ejemplo el siguiente péndulo, el cual tiene una duración de 24 fotogramas, 12 para ir del punto A al punto B y otros 12 para volver del B al A. Este tiempo lo podemos indicar en las líneas guía como se muestra con las marcas a lo largo de la curva en el siguiente péndulo.

 

El timing no es fijo, varía dependiendo de lo que se esté animando. Es el propio animador el que decide cuanto durara cada acción.

● EXTREME: Son una serie de fotogramas que se utilizan para representar los movimientos más importantes. Marcan el inicio y el final al que se quiere llegar.

● BREAKDOWN: Es una pose que rompe con el movimiento, se utiliza para definir la transición entre dos cuadros. Indican la dirección del movimiento. Por ejemplo, si tuviéramos dos puntos, que en este caso serían nuestras poses clave, podríamos mover un objeto en línea recta, pero si, por otro lado, queremos marcar un movimiento en curva, entonces colocaríamos un breakdown entre ambos puntos para marcar la curva. Pero no precisamente un breakdown tiene que colocarse en el centro.

● INBERWEEN (intercalado): Son cuadros que se agregan entre las poses clave y los breakdowns para suavizar el movimiento y dar fluidez a la animación. Estos cuadros están relacionados con los conceptos de aceleración y desaceleración.

● ACELERACIÓN Y DESACELERACIÓN: Para lograr el efecto de aceleración y desaceleración se emplea el concepto de Spacing; es a simples rasgos el espacio que se deja entre un cuadro de movimiento y el siguiente al dibujar. Este concepto es fundamental para cualquier animación, sin importar con cuantos fotogramas se esté trabajando, el espacio que dejemos entre un cuadro y el siguiente es lo que le brindara la ilusión de aceleración y desaceleración.

 

A continuación conozcamos los cuatro tipos de movimientos que permiten animar cualquier cosa:

 

➀ CONSTANTE: En este, el objeto se mueve a una velocidad constante. Notamos entonces que el espacio entre un cuadro y el siguiente mantiene la misma proporción durante todo el recorrido.

➁ ACELERAR (Ease-In): El movimiento comienza lento y con el paso del tiempo acelera. En este podemos ver como los cuadros del comienzo están cercas unos de otros y conforme avanza el movimiento se separan mucho más.

➂ DESACELERAR (Ease-In): En este caso, el objeto inicia con cierta aceleración y la pierde a medida que avanza. Aquí los cuadros se invierten, comenzamos con una gran separación entre ellos y a medida que se llega al final comienzan a juntarse.

➃ EASE-IN y EASE-OUT: Este último es una mezcla de los dos anteriores. Tenemos una aceleración al comienzo y una desaceleración al final.

Ahora veámoslo con el péndulo.

 

- DESACELERACIÓN -

 

Al iniciar el movimiento, el objeto comienza su aceleración hasta llegar al punto donde su energía declina entrando a un estado de desaceleración. Primero, para desacelerar, o dar un efecto de lentitud, el espacio que se deja entre un cuadro y el siguiente debe de ser pequeño.

- ACELERACIÓN -

 

Segundo, para acelerar, o dar un efecto de rapidez, el espacio que se deja entre un cuadro y el siguiente debe ser grande.

- HAGÁMOSLO EN EL MODO SENCILLO -

 

Ahora veamos como animar este péndulo en el modo sencillo paso a paso, para familiarizarnos aún más con la nueva interfaz en el modo sencillo.

 

➀ Primero, dibujaremos las líneas guía. Estas guías serán una gran ayuda visual para entender la trayectoria del movimiento que queremos hacer y con qué tiempo se moverá de un cuadro a otro, como se explicó antes.

➁ En una capa nueva por encima dibujaremos el péndulo. Podemos dibujarlo en varias capas y después fusionarlas en una con la función «Combinar con capa inferior».

➂ El siguiente paso consistiría en crear un nuevo fotograma y dibujar el péndulo desde cero o en su defecto, si es una ilustración que lo permita, podemos ahorrar tiempo haciendo lo siguiente:

 

Una vez que ya tengamos las dos capas, la del péndulo y la de las líneas guía, nos dirigiremos a la ventana de la línea del tiempo y seleccionaremos el fotograma que corresponde a las capas que hemos dibujado, en nuestro caso será el único fotograma creado. Daremos clic en la miniatura, se desplegará el menú con las opciones donde elegiremos «Duplicar». Con el fotograma duplicado, ahora nos dirigiremos a la ventana de capas, seleccionaremos la capa donde se encuentra el péndulo y con la herramienta «Transformar» hay que mover el péndulo a su siguiente posición.

➃ Una vez que terminemos con la secuencia de ida, para volver no necesitamos modificar nada, solo duplicar los fotogramas que ya tenemos desde el último al primero y colocarlos siguiendo la secuencia que les corresponde en la línea del tiempo.

Listo, hemos terminado con nuestra primera animación. (๑˃ᴗ˂)ﻭ

Otro ejercicio que podemos hacer siguiendo esta línea de los péndulos es uno en el que la figura que oscila tenga tridimensionalidad.

Al hacerlo de este modo tendremos que rotar la figura de acuerdo al movimiento.

---

✦ Pelota rebotando

Sigamos conociendo otros conceptos importantes de la animación con el ejercicio de la pelota que rebota.

 

● APLASTAR Y ESTIRAR: (Squash y Stretch): Muchos de los objetos y seres organicos posen de forma innata las cualidades de deformación, elasticidad. Es por esto que el squash y el stretch son fundamentales, nos recuerda aplicarle características elásticas a lo que estemos animando.

 

Recuerda, aunque se aplaste o estire un objeto, su masa no cambia, no desaparece, simplemente se deforma.

● SQUASH: Si un objeto se aplasta al chocar en una superficie, al hacerlo, sus lados crecerán al volverse más ancho.

● STRETCH: Si el objeto se estira, sus lados se contraerán y por consecuencia su altura crecerá. Un objeto al caer o ir de un lado a otro a gran velocidad presenta esta característica.

Veamos el ejemplo: La pelota rebotará en el suelo, por lo que, al hacer contacto con este, la pelota se aplastara un poco y después se estirara al subir.

 

- PASO A PASO -

 

➀ Iniciemos dibujando el suelo y las líneas guía, cada cual en una capa independiente. El inicio será lento y luego irá acelerando.

➁ Ahora, en una capa nueva, dibujemos la pelota.

Con todas las capas guía creadas, comencemos con la animación.

 

➂ Iremos a la línea del tiempo y duplicaremos el fotograma donde se encuentran las capas. Esto con el fin, sobre todo de no perder las líneas guía al avanzar en la creación de nuevos fotogramas.

➃ Con la herramienta «Transformación» moveremos la pelota a su posición final o en su defecto, la dibujaremos.

➄ Ahora debemos de aplastar la pelota, para ello podemos hacer uso de varias herramientas, como por ejemplo, las herramientas: Licuar, Transformación de malla, o Deformación de posición libre.

➅ Lo siguiente consiste en movernos a la posición anterior a la última y dibujar la pelota aplicándole un estiramiento, el cual podemos hacer con las herramientas antes mencionadas.

 

Siendo exactos, este efecto no ocurre tal cual así en la realidad, pero eso es lo bonito de la animación, permite agregar un toque único.

➆ Por último, rellenaremos las posiciones que faltan con la pelota. Para ello podemos duplicar cada una de las capas y ordenarlas de acuerdo a la secuencia para simular que la pelota regresa y así completar el bucle, esto sin duplicar el de la última posición y la primera.

Listo, hemos terminado.

- OTROS EJERCICIOS -

 

➀ PESO: Otro ejercicio que podemos hacer siguiendo esta línea es jugar con la aceleración y la desaceleración para simular diferentes pesos en los objetos, y así insinuar el material con el que está fabricado, porque dependiendo del material, el objeto se comporta de modo distinto.

Los objetos que caen de forma diferente debido al diferente grado de flexibilidad y por lo mismo su grado de deformación también variara.

Otro aspecto que podemos agregar o tener en cuenta es superponer un movimiento de estiramiento y otro de aplastamiento al momento del impacto para crear un punto de contacto.

➁ ESPIRAL: Para el siguiente ejercicio hay que dibujar una espiral a la cual le colocaremos un espaciado siguiendo los principios de aceleración y desaceleración (menos cuadros, más rápido, más cuadros, más lento).

En cuanto a la pelota, esta deberá de seguir los principios de Squash y Stretch. Cuando acelera, la pelota se estirara y al desacelerar recobrara de a poco su forma original.

Es una animación simple, pero que ayuda a asimilar mejor los conceptos.

➂ GOTA DE AGUA: El tercer ejercicio consiste en dejar caer una gota de agua y que está al chocar con la superficie se descomponga en gotitas. Una vez más, las líneas guía nos ayudarán a visualizar la trayectoria.

La gota comienza su recorrido con una forma circular, pero a medida que baja, esta se estirara.

Al impactar con el suelo, la gota se aplasta contra el mismo y luego se expande liberando las gotitas. Para entender mejor este último movimiento aconsejo buscar referencias.

➃ EL MARTILLO: El ejercicio del martillo busca plasmar el peso del objeto haciendo uso de los conceptos de aceleración y desaceleración. Al principio tendremos varios cuadros juntos para señalar el comienzo de la aceleración, pero después de eso, los fotogramas siguientes aumentarán su espaciado para la simulación de la aceleración.

El siguiente nivel de este ejercicio es realizarlo en perspectiva.

➄ PERSONAJE SALTANDO: En el siguiente ejercicio podemos agregar algo más de dificultad diseñando un personaje al que haremos saltar siguiendo una trayectoria en arco (veremos la importancia de los arcos en el siguiente apartado).

---

✦ Arcos

Continuando con los conceptos, ahora hablamos de los arcos. En la vida, la trayectoria en una gran cantidad de movimientos se produce en arcos; en la animación sucede lo mismo, un ejemplo de ello es el péndulo que anímanos en la primera sección. Además, los movimientos en arcos son naturalmente más bellos.

Los arcos se suelen encontrar en las poses de Breakdown, es por esta razón que es importante tenerlos en cuenta al momento de animar, ya que de otro modo podríamos cometer el error de no mantener la proporción del objeto.

 

Veamos el siguiente ejemplo: Si no seguimos la trayectoria curva de la caída, entonces corremos el gran riesgo de que la figura de transición se deforme de un modo no deseado.

Ahora veamos el ejemplo de una pelota rebotando y deteniéndose. En este ejercicio podemos comprobar como la pelota va perdiendo velocidad con el paso del tiempo, como sucedería en la vida real. La pelota no pierde energía en el mismo punto, sino que va avanzando en una trayectoria formada por arcos que con la perdida de la energía se van tornando más pequeños.

 

- PASO A PASO -

 

➀ El proceso es esencialmente el mismo que en los ejercicios anteriores. Iniciaremos dibujando la trayectoria descendente de los arcos y las marcas de los cuadros a dibujar. Para colocar los cuadros, seguiremos la misma lógica en la que la pelota disminuye su velocidad al llegar a la cima del arco y al bajar aumentara, en el fondo rebotara y luego volverá a subir.

➁ Ahora, con respecto a la pelota, debemos recordar agregar el Squash. Cuando acelera, se alarga la forma.

Cuando está suspendida en el aire, regresa a su forma original.

Y por último, al impactar con el suelo, la pelota se aplasta.

Listo, hemos terminado. Otro ejercicio que podemos realizar sería este mismo, pero variando la posición de los cuadros, como por ejemplo, que la pelota se quede suspendida en el aire por mucho más tiempo. También podríamos hacer que la figurara cambie a otra con cada salto.

- PERSPECTIVA -

 

El siguiente es el mismo ejercicio que el anterior, pero agregando perspectiva. Lo único que tenemos que tener en cuenta en esta ocasión es que el objeto irá disminuyendo de tamaño mientras más se aleja del primer plano.

Con estos ejercicios podemos ver lo hermosos que son los movimientos cuando le agregamos arcos.

- OTROS EJERCICIOS -

 

➀ CUERDA: Continuando con los arcos, otro ejercicio que podemos hacer es el de la cuerda. Este ejercicio consiste en animar una cuerda oscilando por el viento. Este ejercicio es importante porque es el principio que permite animar el movimiento de muchos otros objetos.

Para animar la oscilación de la cuerda podemos visualizar dos círculos, uno a cada lado, sin tocar la cuerda. Esto ayudará a que la cuerda se mueva siguiendo curvas. Un punto a tener en cuenta es que la longitud de la línea debe ser aproximadamente la misma en cada cuadro.

A continuación podemos ver algunos ejemplos de elementos en los que podemos aplicar este principio: La cola de algunos animales, el cabello, la ropa, etc.

➁ CIRCUITO: Otro ejercicio que se puede hacer para practicar los conceptos antes explicados, es uno en el que diseñamos un circuito en el cual poner a rebotar una pelota, una que chocara con los obstáculos. De este modo se puede estudiar la incorporación de arcos en diferentes escenarios.

En mi caso, he diseñado una especie de circuito cerrado donde la pelota se encuentra rebotando indefinidamente.

---

✦ Anticipación

La anticipación es una pose que contiene un movimiento previo a la acción que se quiere realizar. Una acción que comunica el observador que algo está a punto de ocurrir. La pose puede contener un movimiento suave o exagerado, eso dependerá de lo que se desee transmitir. A continuación animaremos a un conejito saltando. Veamos el paso a paso:

 

➀ Iniciaremos con las líneas guía que hemos estado manejando desde el comienzo. Como se puede apreciar, una vez más trabajaremos con un arco.

➁ Ahora colocaremos las poses clave (extreme), el movimiento inicial y el final.

➂ Lo siguiente es agregar el breakdown entre la pose A y B. En este caso marcando el punto más alto del salto.

➃ El siguiente breakdown será la anticipación, esta pose se encontrará un poco antes de la pose A.

➄ Por último, agregaremos las poses intermedias para suavizar la transición entre las poses clave.

En este momento hay que recordar los conceptos de Aplastar y Estirar a la hora de definir el movimiento.

Listo, ahora tenemos a un lindo conejito saltarín.

- MOVIMIENTO DE LA CABEZA -

 

El principio es exactamente igual al anterior. Primero determinaremos las poses clave.

Ahora es el turno del breakdown entre las poses clave. Esta pose funcionará como transición.

Lo siguiente es agregar la pose de anticipación, esta se colocará un poco a la izquierda de la pose A. Además, en mi caso inclinaré la cabeza hacia abajo para que con el conjunto de las otras cabezas, la trayectoria forme un arco.

 

Cabe aclarar que la anticipación no tiene que venir solo de movimientos exagerados. También el movimiento de los ojos hacia el punto del siguiente movimiento puede servir de anticipación, así el espectador se percatará de que el personaje está a punto de realizar una acción.

A continuación, agregaremos las poses intercaladas que dotaran al movimiento de fluidez.

Por último, recuerda que para que un movimiento esté dotado de naturalidad, siempre es bueno hacer que siga una trayectoria en arcos.

Una vez establecido todo lo anterior, entonces, ahora podemos jugar con el espaciado y el tiempo.

Listo, hemos terminado.

3. Exportar animación

Para guardar la animación que hemos realizado hay que ir a los tres puntos de la parte superior derecha y elegir «Exportar animación». Al elegir la opción se abrirá un menú con dos opciones: Compartir y Guardar en el dispositivo. La opción de compartir permite elegir la ruta de almacenamiento.

Al elegir cualquiera de las dos opciones de guardado, se abrirá la ventana de la vista previa, junto con el botón de guardar.

Listo, hemos llegado al final.

Despedida

La animación requiere paciencia y dedicación, uno puede llegar a frustrarse, pero la recompensa de lograrlo es lo que lo hace tan divertido. Animar algo y luego verlo en acción es verdaderamente increíble. A mi modo de ver, la animación es como una forma de dar vida y eso en sí mismo es maravilloso. Así que, espero que ustedes también lo disfruten.

 

¡Gracias por llegar hasta aquí! Sería de gran ayuda que me regales un me gusta. ¡No vemos en otro momento! (≧∇≦)/

 

Bye bye.

 

Conoce más sobre mí en: