Ilustración en movimiento con fotogramas clave

977

Mana1057

Mana1057

¡Hola!

¿Alguna vez has querido hacer que tus dibujos se muevan pero la idea de dibujar celda por celda casi te desanima?

¡Te entiendo! ¡Ojalá!

 

Te mostraré cómo lo hice, con una imagen:

 

 

Si quieres, puedes encontrar una versión en vídeo aquí:

Hice una animación de dibujo simple muy simple que no implica cortar el dibujo y se centra principalmente en la animación del entorno, aquí mismo:

Olvidé cómo hacer una serie, pero esto es como la segunda parte de la primera.

 

Lo mismo que con la primera, estoy usando Clip Studio Paint Pro, solo que con 24 fotogramas.

Así que cualquiera puede hacerlo.

 

Estos nuevos consejos se centran más en la superposición y la organización de carpetas para que podamos usar más fotogramas clave.

 

¡Comencemos!

PREPARACIÓN – borrador y dibujo

Primer paso: prepara tu imagen. Haz un borrador de lo que quieres ver

Quería que pareciera somnoliento y tal vez comencé a inclinarme hacia un lado

⭐  Lo que también implicará algo de cabello y animación de parpadeo

¿Quizás también agregar algunos efectos de luz en la parte inferior?

⭐  Lo que probablemente implique algo de animación de sombras

Quiero que llueva en el fondo

⭐  Me gusta la lluvia :D

 

Entonces tenemos nuestro plan

 

Abre tu Clip Studio Paint, carga tu imagen.


Tienes que cortar las partes que quieres animar, no lo voy a mostrar aquí.

Corté el personaje en once piezas

Puedes cortar tantos como necesites

Asegúrate de etiquetar tus capas correctamente para mantenerlas organizadas.

CRONOLOGÍA

Para obtener nuestra línea de tiempo, vaya a [Windows] > [Timeline]

Haga clic en [New Timeline]

Voy a utilizar Frecuencia de cuadros 8 y tiempo de reproducción 24

 

RECORDATORIO: Clip Studio Paint tiene un tiempo de reproducción máximo de 24. Si quieres animar durante más tiempo, debes actualizar a la versión EX.

 

Comencemos a animar

ANIMACIÓN DE LLUVIA - animación celular

El título dice fotogramas clave, ¡excepto en esta parte!

Haremos la lluvia con celdas para hacernos la vida más fácil.

¡El resto serán fotogramas clave después de esto!

 

Hagamos una animación de lluvia simple y rápida usando celdas

Usaré un PINCEL DE LLUVIA

 

Usé este pincel aquí:

Comencemos con la ANIMACIÓN DE LLUVIA

 

Cree una [Nueva carpeta de animación] > cámbiele el nombre a LLUVIA

Recordatorio: cambie el nombre de sus carpetas y capas para que estén organizados

En el CUADRO 1, haga clic en [Nueva celda de animación], aparecerá un número o cuadro 1 dentro de la carpeta.

Toma tu PINCEL DE LLUVIA y, usando tu pincel, simplemente dibuja un poco de lluvia

Pasar al siguiente cuadro, CUADRO 2 – hacer clic en [Nueva Celda de Animación] > hacer otra lluvia

Haz lo mismo para el CUADRO 3 Y el CUADRO 4

 

Ahora, pongamos estas cuatro animaciones para toda la reproducción.

 

Asegúrate de estar en el próximo cuadro en blanco,

por ejemplo, el CUADRO 5, ve a [Animación] > [Editar pista] > [Asignar múltiples celdas]

Opté por [Asignar por nombre de celda]

Comenzar por la celda 1 hasta la celda 4

 

Repetir 5 veces

Entonces, 4 multiplicado por 5 es 20, ya tenemos 4, por lo que completamos nuestros 24 cuadros

 

Haga clic en Aceptar cuando haya terminado.

Verás que nuestra carpeta de animación RAIN ahora está llena de números (celdas)

 

Y cuando haces clic en REPRODUCIR

Así es como se ve nuestra animación

Si es demasiado brillante, puedes cambiar la Opacidad de la CARPETA DE ANIMACIÓN

ANIMACIÓN DE CABEZA - inclinación de cabeza

A continuación, animemos la cabeza. Primero, crea una nueva CARPETA, una carpeta normal.

Nómbrala CABEZA

 

Arrastra todos los elementos de la cabeza a esa carpeta

Ojos, Cejas, Rostro, Cabello, Cabello superior y la capa de la cabeza

A continuación, mientras la CARPETA de la cabeza sigue seleccionada, haz clic en [Habilitar fotogramas clave en esta capa]

 

Ve a la herramienta [Operación] > cambiar el punto de anclaje de la Carpeta de la cabeza, haz clic y arrástrala; colócala debajo del mentón.

Se agregarán fotogramas clave a la carpeta porque moviste el punto de anclaje, puedes eliminarlos para mantener limpia tu línea de tiempo.

 

Aquí animaremos la ROTACIÓN.

No necesitas POSICIONES ni CENTRO DE ROTACIÓN, puedes eliminar esos fotogramas clave

Vamos a crear un pequeño REBOTE

 

Haz clic en ROTAR

Es sutil, pero puedes ver un cambio cuando haces clic en las transformaciones

Interpolación de fotogramas clave; manténgala SUAVE

La animación que quiero es la de él durmiendo (inclinando la cabeza) y luego despertándose (inclinando la cabeza hacia atrás)

 

Establezcamos nuestro primer fotograma clave. Yo usaré el fotograma 6.

Agregue un fotograma clave en GIRAR: sin movimiento, simplemente mantengamos esta posición

Siguiente tecla, Cuadro 12: inclina o gira la cabeza un poco hacia la izquierda; ahora la cabeza comienza a moverse.

Próxima clave, Fotograma 14: agrega un fotograma clave, no hagas ningún movimiento.

Básicamente, solo copiamos la clave del fotograma 12.

Ahora vamos al Cuadro 13: inclinamos la cabeza un poco más que en el Cuadro 12.

Hice la misma animación unos cuantos fotogramas más adelante, pero esta vez la ROTACIÓN es en sentido antihorario.

 

Haz un clip en PLAY para comprobar la animación.

Si la renderización comienza a retrasarse, aleje la imagen para renderizar en tiempo real

 

A continuación, se muestra el REBOTE al que me refiero:

1. Copia tu último movimiento

2. Pégalo dos cuadros hacia adelante

3. En el medio de esos cuadros clave

4. Aumenta la ROTACIÓN de tu último movimiento (como exagerarlo, agregarle más valor)

ANIMACIÓN DE OJOS - fotograma clave

Las animaciones de ojos suelen realizarse con celdas, pero como ya estamos usando fotogramas clave, también podemos hacer lo mismo con las animaciones de ojos.

 

Hacer animaciones de ojos con fotogramas clave es básicamente jugar con la opacidad, es directo al grano.

Es fácil, pero puede ser complicado.

 

Es preferible usar MANTENER interpolaciones para que CONSERVE los valores clave hasta que coloques otra clave.

Como nuestra carpeta HEAD ya tiene los fotogramas clave habilitados y los OJOS ya están dentro de esa carpeta, los ojos también tienen los fotogramas clave habilitados

 

DESOCULTAR TODAS LAS CAPAS DE TUS OJOS

Selecciona el fotograma en el que quieres que comience la animación.

Puedes usar los fotogramas clave HEAD como referencia.

 

Cambia la interpolación de fotogramas clave a HOLD

Digamos que en el fotograma 8 los ojos estarán abiertos, por lo que:

 

Ojos abiertos tiene una opacidad del 100 %.

Ojos a la mitad tiene una opacidad del 0 %.

Ojos cerrados tiene una opacidad del 0 %.

Básicamente, si necesitas OJOS ABIERTOS, establece una opacidad del 100 % y establece las demás CAPAS DE OJOS con una opacidad del 0 %

 

Y así sucesivamente

Conserva lo que necesitas con una opacidad del 100 %

Establece lo que no necesitas con una opacidad del 0 %

ANIMACIÓN DE CEJAS

Seré honesto, esta parte es un poco innecesaria porque puedes hacer esto en las cejas individuales. Quiero mostrar que puedes animar la carpeta y las capas dentro de la carpeta y todo estará bien.


A continuación, trabajemos en las cejas.

 

Animaré la carpeta CEJAS, la carpeta en sí misma: dentro de la carpeta están L_Cejas y R_Cejas

Animaré en POSICIÓN para la carpeta CEJA

 

La animación que quiero para esto es que frunza el ceño un poco (las cejas bajan) antes de inclinar la cabeza hacia atrás

Antes de comenzar, asegúrate de que tu Interpolación de fotogramas clave sea SUAVE

Coloca un fotograma clave, no muevas nada, solo coloca un fotograma clave en POSICIÓN en FOTOGRAMA 14

La posición actual del personaje es que su cabeza ya está inclinada aquí, sus ojos están cerrados, las cejas están en una posición relajada.

Solo colocamos un fotograma clave de inicio, la posición original.

Así podemos preparar nuestro próximo fotograma clave antes de que la cabeza se incline hacia atrás

Luego, en el Cuadro 19, asegúrate de estar en [Herramienta de operación], arrastra las cejas hacia abajo, como si estuviera frunciendo el ceño.

A continuación, abre los ojos, así que levantemos las cejas.

 

Copiemos la clave del fotograma 14, porque esa es nuestra posición original.

 

Haga clic en el fotograma clave > abra el Teclado Edge > haga clic en ALT y arrastre la clave al fotograma 22

Recuerda hacer clic nuevamente en ALT para desactivar esa tecla.

Vamos a crear un rebote cuando sus cejas se levanten.

 

Agrega el mismo fotograma clave al Fotograma 24

 

Ahora, el fotograma del medio, Fotograma 23, está vacío. Asegúrate de estar en [Herramienta de operación], arrástralo un poco más hacia arriba.

Cuando lo juegas…

Sí, parece extraño. Falta algo.

 

Las cejas suben y bajan, pero no giran ni fruncen el ceño.

Trabajemos en eso.


Cejas individuales

Quiero que frunza el ceño un poco cuando baje las cejas, cuando esté a punto de levantar la cabeza.

 

Aquí utilizaré ROTATE con más frecuencia, para que las cejas parezcan fruncidas.

 

Trabajemos primero con L_Eyebrow, asegúrate de estar en [Operation Tool] > toma el punto de ancla y arrástralo hasta el medio de la ceja

Cambiar el punto de anclaje agrega automáticamente fotogramas clave. Elimínelos, son demasiados, no los necesitamos.

Comencemos a animar

 

Usando la Carpeta de cejas como referencia, comience con el Cuadro 14, agregue un fotograma clave en ROTATE.

-- Este sería nuestro fotograma clave inicial, el fotograma clave antes de la acción

— No necesita mover nada, solo coloque un fotograma clave

Tomando como referencia la carpeta de cejas – Cuadro 19, gira la ceja un poquito – haz que parezca que está frunciendo el ceño.

Ahora volvemos a la rotación original

 

Copia tu fotograma clave en el fotograma 14

Selecciona Fotograma clave > Teclado Edge > Alt > Arrástralo al Fotograma 22

Esto copia el fotograma clave

 

 

Nuevamente, estamos haciendo un rebote, así que coloca el mismo fotograma clave en el fotograma 24

 

Ahora el centro del fotograma está vacío, fotograma 23, agreguemos el rebote.

 

Rotemos la ceja un poco en sentido contrario a las agujas del reloj, para que parezca que está subiendo, solo por un momento.

La acción aquí es que la cabeza del personaje ahora está inclinada hacia arriba, sus ojos se abrieron de golpe.

Cuando tocas eso, rebota un poco.

Haz lo mismo con la ceja derecha, cuando esté listo se verá así;

Terminé colocando fotogramas clave en POSICIÓN también porque no podía encontrar el centro de la ceja derecha.

La POSICIÓN me ayudó a evitar que las cejas se movieran en lugares aleatorios mientras ROTO.

ANIMACIÓN DEL CABELLO

Técnicamente, aquí se trata de una animación de cabello diminuto. Es ese cabello diminuto que está sobre su cabeza. Pero también puedes usar esto si planeas cortar el cabello de tu personaje en secciones.

 

Vayamos a ese cabello diminuto, asegúrate de estar en [Herramienta de operación] > obtén el punto de anclaje de CABELLO SUPERIOR > muévelo al extremo inferior del cabello o donde debería estar el cuero cabelludo.

 

 

Recuerda eliminar los fotogramas clave del cambio del punto de anclaje, no los necesitamos.

La animación que vamos a hacer aquí es que el cabello se balanceará hacia adelante y hacia atrás mientras la cabeza se balancea.

 

Recorre la línea de tiempo y verifica dónde se inclina la cabeza, cuando estés allí muévete unos fotogramas hacia atrás. Pondremos un fotograma clave de inicio.

— un fotograma clave antes de la acción.

— este es también nuestro valor/rotación original

 

Digamos Frame 9, agrega un fotograma clave allí en ROTATE

Avanzamos unos cuantos fotogramas, digamos el fotograma 14, y giramos el cabello en el sentido de las agujas del reloj.

La acción es que el personaje se inclinará hacia un lado, por lo que su cabello caerá.

ESTA SECCIÓN NO SERÁ MUY DETALLADA

Porque la animación que hice es básicamente,

 

⭐Si el personaje se inclina hacia la derecha - el cabello gira en el sentido de las agujas del reloj

⭐Si el personaje se inclina hacia la izquierda - el cabello gira en el sentido contrario a las agujas del reloj

 

pero, también hay algunos pequeños "rebotes" o puedes llamarlos balanceos.

⭐ Antes de hacer el fotograma clave final, hice varios fotogramas clave del cabello yendo de izquierda a derecha hasta que el valor disminuyó y llegó a mi fotograma clave final

Si desea crear una animación en bucle

¡Asegúrate de que tu fotograma clave final sea el mismo que el primero!

ANIMACIÓN DEL TORSO

Vamos a animar el torso o la parte superior del cuerpo

 

Primero, crea una carpeta (normal) > Renómbrala TORSO > coloca la carpeta Cabeza y la capa Superior allí**

Coloca todo lo que involucre la mitad superior del cuerpo

Asegúrate de que tu TORSO > Haz clic en [Fotogramas clave habilitados en esta capa]

Utilice la [Herramienta de operación] > Mueva el punto de anclaje y muévalo a la cadera del personaje

 

Se colocarán fotogramas clave debido al cambio de rotación, elimine esos fotogramas clave, no los necesita

Si lo desea, utilice la carpeta HEAD como referencia

 

Coloque un fotograma clave inicial en ROTATE en el fotograma 7

- solo coloque un fotograma clave allí, no haga nada.

- ese es nuestro fotograma clave inicial para mantener la rotación.

Usando la carpeta HEAD como referencia, nos movemos a FRAME 12 > rotamos en sentido horario, solo un poco

Solo lo muevo 1 valor

CUADRO 20 - Gira nuevamente en el sentido de las agujas del reloj, aumenta el valor solo un poco

La acción que hicimos es que se inclinará más lentamente

El resto de la animación del TORSO es igual que la del CABELLO.

 

⭐ Asegúrate de que el fotograma clave final sea el mismo que el fotograma clave inicial.

⭐ Había fotogramas vacíos antes del final de la línea de tiempo, así que hice que se balanceara hacia atrás y hacia adelante un poco.

Si la reproducción se retrasa, es posible que sea útil acercar o alejar la imagen o deshabilitar la otra animación.

Mi reproducción se retrasaba y olvidé deshabilitar la lluvia. Aquí hay una exportación rápida de la animación actual:

Nada demasiado extremo, la inclinación lenta hacia abajo y luego un poco de balanceo al final: esos fueron los fotogramas clave finales balanceándose hacia adelante y hacia atrás (en el sentido de las agujas del reloj y en el sentido contrario a las agujas del reloj) hasta que llegamos al fotograma clave final.

ANIMACIÓN DE HOJAS

Asegúrese de que la capa HOJAS esté seleccionada > Haga clic en [Fotogramas clave habilitados en esta capa]

Mueva el punto de anclaje de las hojas al extremo más alejado, en el centro derecho del lienzo —salga del lienzo si es necesario

Piense en el punto de anclaje como una articulación, ¿cómo rotará el objeto si coloco la 'articulación' aquí?

Obtendrás fotogramas clave porque moviste el punto de anclaje, elimínalos.

No los necesitas.

La animación que estamos haciendo aquí es que las hojas simplemente se balancearán.

Usaremos ROTATE, lo seleccionaremos

 

FRAME 1 - coloca un fotograma clave en ROTATE

- no hagas nada, solo colócalo allí, es nuestro fotograma clave inicial

Coloca el mismo fotograma clave al final de la línea de tiempo en ROTATE, FRAME 24

- sin cambios, sin transformación - solo coloca un fotograma clave allí.

 

Además, arrastra el fotograma clave final hasta el final de la línea de tiempo.

Selecciona y arrástralo.

Esto hará que la animación de las hojas sea perfecta.

Para la mitad de la animación, CUADRO 13 > GIRE las hojas en sentido antihorario, sin hacerlo demasiado extremo.

Jugar para comprobar

OTROS EFECTOS

Luego simplemente agregué algunas sombras e iluminación usando capas normales, sin necesidad de animarlas.

Para el efecto BOKEH, animé esos.

Solo 3 fotogramas clave como máximo por transformación

 

Para la Opacidad, comencé con 0%, luego el medio es 100% y termina nuevamente con 0%

- se desvaneció y se desvaneció.

 

También hice dos BOKEH, por lo que puedo animar ambos en diferentes intervalos.

- poner muchos bokeh en una animación puede verse desordenado

Para la POSICIÓN, simplemente la hice subir

- diferentes tiempos

Una vez terminado, se verá así:

ANIMACIÓN DE SOMBRAS

Quería tener una sombra en la parte posterior del personaje, ¡probémoslo!

 

Duplica tu carpeta de personajes > Renómbrala como Shadow Char

*opcional*

DESENFOCA TODO LO QUE HAY DENTRO DE LA CARPETA DE PERSONAJES DE SOMBRA

— si quieres una sombra de borde más suave, puedes desenfocar las capas dentro de esa carpeta

— puedes eliminar las capas faciales, no las necesitas aquí

— Utilicé desenfoque gaussiano al 10 %

 

Desactiva el fotograma clave haciendo clic en [Habilitar fotograma clave en esta capa] > para poder editar.

— tus fotogramas clave no desaparecerán siempre que no los fusiones con otras capas.

Asegúrate de mover la carpeta Shadow Char debajo de Character Folder.

 

A continuación, hagamos que esto sea una sombra

Ve a Capa > Nuevas capas de corrección > Tono/Saturación/Luminosidad

 

Reduce la saturación y la luminosidad a -100

Asegúrate de que tus capas se vean así:

⭐Personaje

⭐Capa de corrección

⭐Personaje de sombra

 

Luego, recorta la capa de corrección a la capa de abajo

Después de eso, simplemente haz clic en [Enabled Keyframes on this Layer]

Aumenta la ESCALA un poco y simplemente mueve la POSICIÓN para crear distancia

 

Los fotogramas clave se colocarán porque mueves la ESCALA y la POSICIÓN; puedes eliminarlos, no necesitas animar esta carpeta

 

Y ahora se ve así:

*opcional - CÁMARA

¡Puedes agregar una cámara si lo deseas!

 

Ve a [Animación] > [Nueva capa de animación] > [Carpeta de cámara 2D]

Aparecerá una carpeta llamada Cámara 1 en tu pestaña Capas, coloca todas tus capas dentro de ella

Aparecerá un cuadro azul en el lienzo, esa es tu cámara.

 

Generalmente, primero reduzco la escala para hacer zoom, de modo que tengo más espacio para trabajar cuando muevo la cámara

Puedes eliminar estos fotogramas clave, no los necesitamos.

 

Luego uso la POSICIÓN para mover la cámara usando 3 fotogramas clave.

 

Los fotogramas clave de inicio y fin son los mismos, el del medio se movió un poco, solo un poquito, solo para sacudir


¡La cámara es opcional!

 

Sin cámara, se ve así:


Después de eso, simplemente exporta tu trabajo

 

Si lo exportas como GIF animado, es preferible habilitar el tramado.

 

⭐ SIN TRAMADO:


⭐ CON DITHERING:


La superposición y organización de carpetas (y capas) ayudan a esta animación.

Además, ¡mantén el orden!

 

¡Espero que esto te sirva de algo!

Comentario

Nuevo

Últimas publicaciones en Oficial