¡Este tutorial te mostrará cómo animar partes de una imagen con animación de fotogramas clave para convertirla en un lindo gesto animado!

Si desea seguirnos, puede descargar el archivo .clip desde mi sitio web aquí:

Aquí está la versión en video de mi tutorial. Si prefiere texto, puede encontrarlo a continuación.

Configuración

Capas de partes de personajes

Para animar un personaje con fotogramas clave, todas las partes que se mueven deben estar en su propia capa separada. Mi dragón tiene seis piezas: las dos partes del huevo, la cabeza, el cuerpo y dos alas.

Con los fotogramas clave, puedes hacer que cada capa se mueva, gire y escale como quieras.

 

Pero el verdadero poder de la animación de fotogramas clave es que puedes usarla en carpetas y encadenar varias animaciones. Dejame mostrarte como funciona.

Si estás siguiendo la descarga del archivo, he organizado las piezas como si el dragón estuviera aplastado detrás de las capas de huevos, haciendo que parezca que están dentro del huevo.

Crear jerarquía de carpetas

Primero, organicemos las capas en una jerarquía usando carpetas.

La cáscara del huevo superior quedará en equilibrio sobre la cabeza del dragón, así que comenzaré haciendo una carpeta y poniendo estas dos piezas en ella. Llamaré a esta carpeta "Cabeza".

 

A continuación, quiero juntar todas las piezas del dragón, así que haré una carpeta y pondré en ella la carpeta de la cabeza, junto con el cuerpo y las alas del dragón. A este lo llamaré "Dragón".

 

Finalmente, si el huevo se mueve, el dragón también lo hará, así que crearé una carpeta principal final para colocar todas las capas y la llamaré "Base".

 

                                 + **Sugerencia:**El método abreviado CtrlG (o**⌘**\GonMac) creará una nueva carpeta que contiene las capas que ha seleccionado. También puede simplemente usar el botón “Nueva carpeta de capas” en la parte superior de la paleta Capas.

Configurar la línea de tiempo

A continuación necesitaremos una línea de tiempo de animación.

Si no ve la paleta Línea de tiempo, vaya al menú Ventana y haga clic en Línea de tiempo.

Haga clic en el botón Nueva línea de tiempo de animación (flecha verde arriba).

 

Aparecerá el cuadro de diálogo Nueva línea de tiempo. Voy con una velocidad de fotogramas de 8 y un tiempo de reproducción de 24 fotogramas, que es una animación de 3 segundos. Haga clic en Aceptar cuando haya terminado.

 

Pista: Clip Studio Paint Pro tiene un límite de 24 fotogramas de animación por línea de tiempo, lo que mucha gente interpreta como que solo puedes tener una animación de 1 segundo. ¡Pero eso sólo es cierto si tu velocidad de fotogramas es de 24 FPS! Al reducir la velocidad de fotogramas, puede realizar animaciones más largas. No hay limitaciones en Clip Studio Paint EX.

 

Consulta mi tutorial de descripción general de la animación para obtener más información sobre las velocidades de fotogramas:

Cuando trabajas en una animación corta con varias capas, puede resultar útil ver la línea de tiempo verticalmente.

Haga clic en la pestaña de la paleta y arrástrela para reposicionarla al costado de su espacio de trabajo.

 

No te preocupes si al principio cubre todo el espacio de trabajo, ¡esto es fácil de solucionar!

Pase el cursor sobre el borde de la paleta Línea de tiempo hasta que se convierta en una flecha doble y arrástrela para cambiar su tamaño.

                        + Utilice la barra espaciadora para convertir el cursor en una mano para mover la vista y utilice Ctrl barra espaciadora (o **⌘**espaciador en Mac) para habilitar el acercamiento y alejamiento.

 

Puede que requiera un poco de práctica para dominarlo, pero aprender a reposicionar partes de su espacio de trabajo de esta manera puede ahorrarle mucho tiempo a largo plazo.

Habilite fotogramas clave y ajuste los puntos de pivote de la capa

La animación de fotogramas clave significa que usaremos nuestras carpetas y capas como objetos.

Vaya a la herramienta Operación y asegúrese de que la subherramienta Objeto esté seleccionada.

Haga clic en la carpeta Base.

 

Sugerencia: Puede seleccionar carpetas y capas haciendo clic izquierdo sobre ellas en la paleta Capa o directamente en la línea de tiempo.

 

En la línea de tiempo, haga clic en "Habilitar fotogramas clave en esta capa" para convertirla en un objeto animable.

Un objeto se puede mover, rotar y cambiar de tamaño, y tiene un centro de rotación o punto de pivote. Para facilitar la animación, revisemos y ajustemos los puntos de pivote ahora.

Imagínese dónde desea que gire la capa base. Si queremos que el huevo se balancee hacia adelante y hacia atrás, podemos hacer clic y arrastrar el punto de pivote hacia abajo.

Observe que ha aparecido un diamante azul que indica un fotograma clave en la línea de tiempo de la carpeta base.

 

Aparecerá un fotograma clave en la ubicación del cabezal de reproducción rojo cada vez que cambie cualquier aspecto de una capa que tenga habilitada la animación de fotogramas clave.

 

Pista: Si el tuyo no está en el fotograma 1, puedes hacer clic y arrastrarlo para moverlo allí.

Además, si su fotograma clave no es azul, haga clic en el menú desplegable Interpolación de fotogramas clave y elija Interpolación suave, luego haga clic en el botón Agregar fotograma clave. ¡Profundizaré en esto más adelante en el tutorial!

Ahora, esconde las dos capas de huevos para que podamos ver al dragón.

Sugerencia: Puede ocultar una capa haciendo clic en el ojo en la paleta Capa o la paleta Línea de tiempo; Ellos hacen la misma cosa.

Haga clic en la carpeta Cabeza (toda la carpeta, no solo la capa Cabeza) y mueva el punto de pivote aproximadamente a la mitad del cuerno de la nariz, donde en la parte posterior de la cabeza se uniría al cuello.

 

Debido a que la carpeta Base tiene fotogramas clave activados, todas las carpetas y capas secundarias heredarán esta característica, por lo que aquí también aparece automáticamente un fotograma clave.

 

Nota: Me estoy saltando un poco porque no todas las capas se animarán por separado de la carpeta en la que se encuentran; Tendrá más sentido a medida que comencemos a animar.

El cuerpo del dragón será controlado por la carpeta Dragón, así que selecciónala y coloca el punto de pivote en el centro de masa del cuerpo.

A continuación, oculta la carpeta Cabeza y la capa Cuerpo del Dragón para que podamos ver las alas.

 

Su posición puede parecer un poco extraña, pero créanme: ¡se verá bien cuando la animemos!

Conversión de capas en objetos de archivo (opcional)

Si el objeto que estás animando es solo una pequeña capa individual, como cada ala, es posible que desees convertirlo en algo llamado Objeto de archivo.

Haga clic derecho en la capa, vaya a Objeto de archivo y seleccione Convertir capa en objeto de archivo.

 

Asegúrese de que Área esté configurada en Área de dibujo y Mantener capa original no esté marcada, y presione Aceptar.

Se le pedirá que guarde el objeto en el formato de archivo .clip de Clip Studio Paint. Elija una ubicación y un nombre de archivo, luego haga clic en Guardar.

Si recibe este mensaje, simplemente presione Aceptar.

Ahora tenemos un objeto mucho más compacto que rodea solo el ala, en lugar de ocupar todo el lienzo. Convertir partes de la animación en objetos de archivo es opcional, ¡pero es útil saberlo!

 

Puedes mover el punto de pivote a su posición en la base del ala de la misma manera que lo haces con un objeto normal.

 

Luego, repita el proceso de convertir el ala derecha en un objeto de archivo y mover su punto de pivote.

También mostraré la capa Egg Top y la convertiré en un objeto de archivo.

 

Su punto de pivote está bien donde está, pero aún queremos un fotograma clave inicial en esta capa, así que haga clic en el botón Agregar fotograma clave.

Animación

Moverse con fotogramas clave

Ahora, haga visibles todas las capas excepto la parte superior del huevo; volveremos a eso.

Primero, queremos que el dragón salga del huevo. Seleccione la carpeta Dragón.

 

Haga clic en la parte superior de la línea de tiempo para mover el cabezal de reproducción rojo al fotograma 8.

Pase el cursor sobre el borde del cuadro delimitador del objeto para obtener el icono de movimiento y haga clic y arrastre para mover el dragón hacia arriba.

 

Observe que ha aparecido un segundo fotograma clave en la línea de tiempo en la ubicación del cabezal de reproducción en el fotograma 8.

 

Los fotogramas clave indican el punto inicial y final de una animación, y la computadora calcula la ruta intermedia.

Hay tres tipos de fotogramas clave: lineal, suave y mantenido. Afectan la forma en que la animación se mueve entre fotogramas clave. (¡Quizás recuerdes este gráfico de mi tutorial de descripción general de la animación!)

 

 + **Lineal**: se mueve uniformemente entre fotogramas clave

   + **Suave**: tiene una desaceleración natural cerca de fotogramas clave

     + **Mantener**-Simplemente salta de una posición a la siguiente

Puedes cambiar entre ellos usando el menú desplegable que mostré anteriormente. Solo usaremos Interpolación suave para esta animación.

Seguir adelante

Cuando haces un movimiento animado rápido, a menudo quieres excederte un poco para enfatizar el impulso. Este es un principio de animación llamado seguimiento.

Vaya al cuadro 6 y mueva el dragón un poco más arriba que su ubicación final.

Ahora voy a obtener una vista previa de la animación, pero primero, una pista rápida. Si no desea reproducir toda la animación, puede arrastrar los corchetes azules para reproducir solo una parte seleccionada de ella.

Pulsa el botón de reproducción para verlo en acción.

Agregar una animación secundaria a una subcarpeta

En este momento, la cabeza está hacia abajo para que quepa en el huevo, pero queremos que también se levante.

Asegúrate de estar en el cuadro 8, selecciona la carpeta Head y muévela hacia arriba.

 

Observe cómo la cabeza todavía se mueve hacia arriba con el cuerpo (ya que es una subcarpeta de la carpeta Dragon ya animada), pero también tiene su propio movimiento independiente.

También agregaré un poco de seguimiento con la cabeza en el cuadro 6 para que se vea más natural.

Separe los fotogramas clave de posición, escala y rotación

De vuelta en el cuadro 8, también rotaré un poco la carpeta principal.

Tenga en cuenta que la inclinación solo ocurre una vez que llegamos al fotograma 6, porque ya hay un fotograma clave allí. Quizás te guste cómo se ve, pero ¿qué pasaría si quisieras que la cabeza comenzara a girar de inmediato?

Haga clic en el botón más junto al nombre de la capa o carpeta (en este caso, la carpeta principal), luego en el menú desplegable que aparece junto a ella.

 

Como puede ver aquí, está creando no uno sino varios fotogramas clave para cada movimiento: para la posición, escala, rotación y punto de pivote.

 

Nota: Si bien no lo usaremos para este tutorial, observe que hay un fotograma clave donde también puede ajustar la opacidad. Mostré cómo usarlo en la sección Destellos de mi tutorial de 3 efectos animados mágicos si deseas obtener más información. .

Haga clic izquierdo en el fotograma clave central junto a Girar para seleccionarlo. Esta parte es importante: si no ves el resaltado rojo alrededor SOLO del fotograma clave Girar, es posible que elimines más de lo que deseas.

 

Una vez seleccionado el fotograma clave, haga clic derecho sobre él y elija Eliminar.

Ahora la rotación de la cabeza comienza en el cuadro 1.

Además, tenga en cuenta que el fotograma clave superior ha cambiado a una forma de diamante hueco más pequeña, lo que indica que no todas las propiedades de ese fotograma tienen un fotograma clave.

Terminar el movimiento emergente

Ahora, seleccione el ala izquierda y vaya al cuadro 8. Mueva y gire el ala hasta su posición final.

 

Como antes, puedes sobrepasarte un poco en el cuadro 6 para agregar un movimiento de seguimiento aquí también.

 

Haz lo mismo con el ala de la derecha.

Muestra la parte superior del huevo. Como es hijo de la carpeta Cabeza, ya sigue el movimiento y la inclinación de la cabeza.

En el cuadro 10, lo moveré a una mejor posición y lo encogeré un poco para mantenerlo fuera del camino de la cara del dragón.

Y luego, en el cuadro 8, agregué un pequeño exceso, haciendo que pareciera que la parte superior del huevo rebotó un poco antes de posarse en la cabeza del dragón.

 

Nota: Cuando tengas animaciones dentro de animaciones como esta, asegúrate de arrastrar el cabezal de reproducción hacia adelante y hacia atrás a través de los fotogramas (esto se llama "barrido") para asegurarte de que ninguna parte de tu animación termine superponiéndose al exterior del lienzo. ¡Es posible que tengas que modificar un poco tus fotogramas clave para asegurarte de que la animación final se vea bien!

¿Ves cómo mover un poco estos fotogramas añade un bonito movimiento secundario? El dragón se mueve y el huevo reacciona a ese movimiento un momento después.

Copie fotogramas clave para invertir la animación (bucle)

Al final de la animación, el dragón volverá a meterse en el caparazón. La forma más sencilla de hacerlo es invertir los fotogramas.

Recordatorio: Si arrastraste el corchete azul hacia adentro para acortar tu animación, asegúrate de volver a arrastrarlo a la duración completa de la animación ahora.

Haga clic izquierdo en el primer fotograma clave del fotograma 8 para seleccionarlo. Mantenga presionada la tecla Mayús y haga clic en cada uno de los otros fotogramas clave en el fotograma 8 para agregarlos a la selección. Omita la capa superior de huevo por ahora.

 

Mantenga presionada la tecla Alt, luego haga clic y arrastre los fotogramas clave hasta el fotograma 16. Esto crea una copia duplicada de los fotogramas clave.

Haga lo mismo con los fotogramas clave del fotograma 1, duplicándolos en el fotograma 21. Nuevamente, omita la Parte superior del huevo y también el fotograma clave en la capa Base.

Al copiar los fotogramas clave desde el principio hasta el final, hemos creado una animación que se repetirá sin problemas.

 

(Excepto por la capa Egg Top, pero llegaremos a eso en un momento).

Anticipación

También copiaré los fotogramas clave excedentes y los moveré al fotograma 18.

 

Observe que el icono especial que indica que no hay un fotograma clave de rotación para la carpeta Head en el fotograma 6 se conserva, por lo que tampoco habrá un fotograma clave de rotación en el fotograma 18.

Esta ligera elevación antes del movimiento hacia abajo es una técnica de animación llamada anticipación.

 

Es algo así como lo opuesto al seguimiento. ¡Piensa en ello como si tuvieras que agacharte un poco el cuerpo antes de saltar!

Terminando la animación

Ahora, la parte superior de la cáscara del huevo debe volver a su posición. Dado que el dragón se mueve tan rápido, me gustaría que el caparazón flotara por un momento antes de seguirlo, otro tipo de animación de seguimiento.

Copie el fotograma clave Egg Top del fotograma 10 al fotograma 18, y el del fotograma 1 al fotograma 23.

Debido a que la cáscara del huevo está unida a la cabeza, tendremos que agregar algunos fotogramas clave adicionales aquí para mantenerlo en el aire manualmente.

 

Comenzando en el cuadro 19, mueva el huevo nuevamente hasta la parte superior del lienzo.

 

Repita esto para los fotogramas 20 y 21, moviéndolo un poco hacia abajo cada vez.

¡Una última cosa para la tapa del huevo! Vaya al cuadro 24 y levante y gire el caparazón sólo un poquito para darle un buen rebote.

Ahora la parte superior se detiene por un momento más, antes de volver a caer rápidamente sobre el caparazón. ¡Cuando llega, rebota!

 

Sin embargo, el dragón salta directamente a la acción demasiado pronto, así que una cosa más que haré es adelantar el comienzo de la animación un par de fotogramas.

Puede seleccionar fotogramas clave en masa haciendo clic y arrastrando. Seleccione todos los fotogramas clave antes de la mitad del camino. (Aún no hemos realizado ninguna animación en la carpeta Base, así que me la saltaré).

 

Haga clic y arrastre para mover todos los fotogramas clave seleccionados en dos fotogramas.

Voy a terminar mi animación usando la carpeta base para agregar un suave movimiento de balanceo y también agregaré un poco más de movimiento a las alas.

 

Nota: Recuerda que si quieres que algo se repita, como la animación del huevo balanceándose, copia el primer fotograma clave usando la tecla Alt y muévelo hasta el final.

 

Como puedes ver, gran parte de finalizar una animación como esta consiste simplemente en hacer pequeños ajustes hasta que estés satisfecho con el resultado.

¡Eso nos lleva a la animación terminada!

Guardar como GIF animado

Para emoticonos y stickers animados, verifique la plataforma en la que desea cargarlos para conocer el formato y tamaño de archivo correctos. Los que revisé, como Discord y Twitch, preferían GIF animado como formato de archivo, así que elegiremos ese.

Vaya al menú Archivo -> Exportar animación -> GIF animado.

 

Pista: Hay varias otras opciones de exportación aquí, que explico con mucho más detalle en mi tutorial de descripción general de animación!

Seleccione una ubicación y un nombre para su archivo exportado, luego haga clic en Guardar.

Aquí puedes cambiar el tamaño de tu gif terminado. Discord recomienda 128 por 128, así que seguiremos con eso. Asegúrese de hacer coincidir el rango de exportación y la velocidad de fotogramas con su animación: en este caso, fotogramas del 1 al 24 y 8 FPS.

 

Buenas noticias: a partir de la versión 2.1 de Clip Studio Paint, los gifs animados ahora se pueden guardar con transparencia. Marque la casilla Hacer fondo transparente en la parte inferior para guardar su GIF con transparencia.

Nota: Si su imagen tiene degradados de color, guardarla con el tramado activado puede hacer que se vea mucho mejor a expensas de un tamaño de archivo más grande. Siempre pruebo ambos para ver cuál prefiero; sin embargo, para esta pequeña animación de dragón, no es necesario.

 

Haga clic en el botón Aceptar cuando esté listo para guardar su GIF animado terminado.

Conclusión

¡Y eso es! Espero que hayas disfrutado siguiéndome y me encantaría ver tus animaciones. Etiquétame @MsRedNebula en Twitter o Instagram, o Mastodon y muéstrame tu trabajo. Sígueme aquí en Consejos de Clip Studio o en mi canal de YouTube para más tutoriales de arte y CSP.