Hola a todos, ¡bienvenidos a mi tutorial!

 

En este tutorial, te mostraré los sencillos pasos para crear un arte de personaje para un avatar animado o un modelo de rigging.

Este tutorial se divide en 2 partes:

 

La primera parte te mostrará cómo crear el arte de personajes para el avatar animado y

la segunda parte te mostrará cómo animar el avatar en Clip Studio Paint (Pro/Ex)

También puedes exportar el arte a otro software de animación para crear un modelo de rigging 2D para un avatar interactivo, como un sprite de juego o un modelo de Vtuber.

 

Este tutorial también incluye el proceso de limpieza de archivos para ello.

¡¡Empecemos!!

Tutorial en vídeo

Versión en vídeo de este tutorial

Parte 1: Crear el modelo de avatar

El procedimiento básico para crear un avatar animado es sencillo: divide el personaje en partes y muévelas para crear la animación.

La forma tradicional de hacer esto es dibujar un personaje y luego cortar y editar las partes.

Si, en cambio, dibuja las partes por separado, planificar la división de las partes le ayudará a trabajar más fácilmente.

Estos son los procesos que te mostraré en este tutorial.

Paso 1: Crear el diseño claro

Esboza el dibujo en vista frontal y pose básica de pie.

El dibujo debe ser claro y detallado para el proceso de trazado.

Opcional: También coloreé el boceto para usarlo como referencia de color en el proceso de dibujo

Puede utilizar el modelo de cabeza para ayudar con el boceto.

El modelo de cabeza se encuentra en [Panel de materiales > 3D > Cabeza]

(Puede acceder a este panel mediante el menú [Ventana>Material:3D])

Opcional: puede personalizar las características del rostro para que se ajusten a su diseño ajustando el valor en la pestaña [Características faciales] en el panel [Detalle de la subherramienta]

Crea una nueva capa y dibuja sobre el modelo de la cabeza.

El modelo de cabeza tiene detalles claros, puedes usarlo como referencia para la forma de la cara, la posición de las orejas y los ojos.

Paso 2: Planificación de la división de piezas

Cuando el diseño esté terminado, divida el dibujo en partes.

 

La clave para dividir las partes es:

“Divida donde se animará” y “Comience desde la línea central, de grande a pequeño”

Nota: en este tutorial, terminaré las partes del cuerpo primero, luego trabajaré en los rasgos del rostro más tarde para evitar confusiones.

Comience con la cabeza (cara + parte posterior de la cabeza) y el cuerpo

Opcional:

Dividí la cabeza en dos partes: la cara y la parte posterior de la cabeza

Esto le dará un aspecto más natural a la animación de giro de la cabeza.

Divide los detalles adicionales alrededor de la línea central y enuméralos en el orden en que aparecen. Puedes ver que algunas partes son simétricas y otras son asimétricas.

También existen las partes que tienen una versión reflejada en el lado opuesto, como el flequillo lateral o las coletas. Puedes dibujar estas partes una vez, luego copiarlas y darles la vuelta para hacer otro lado.

Cuando termine de enumerar las piezas, Cree una nueva carpeta para cada pieza

En este tutorial, he establecido la etiqueta de color por tipo para mostrar el proceso de trabajo.

Puedes configurarlo de la forma que te resulte más cómoda.

Nota: Utilizo el ‘-’ en el nombre de la carpeta para identificar el grupo de la pieza. (ej: ‘hair-twintail-L’)

Paso 3: Dibujar las partes # Cuerpo

Configurar el espacio de trabajo

Copio el boceto con color para usarlo como referencia de color.

También puedes usar el panel [Subvista] para ello

Cambiar el color de la capa de boceto en el panel [Propiedad de capa]

Ahora es el momento de ¡La regla simétrica!

 

Selecciona la capa de papel,

Ve a la [Regla] y elige la [Regla simétrica]

Configura las opciones:

[Número de línea]: 2,

[Simetría de línea]: marcada,

[Ángulo de ajuste]: 90,

 

Dibuja la regla en el lienzo, la regla se ajustará a 90 grados

Hacer que se muestre en todas las capas:

Haga clic derecho en el ícono de la regla y [Mostrar en todas las capas]

Seleccione la regla con la herramienta [Objeto] y alinee con el centro del lienzo

 

puede configurar la opción [Centrar X] en el panel [Propiedad de herramienta] a la mitad del ancho del lienzo

o alinearla con el panel Alinear/Distribuir (Clipstudio 2.0+)

Ajuste alguna parte para alinearla con la línea de la regla con la transformación de malla:

[Editar> Transformar > Transformación de malla]

¡El lienzo está listo, es hora de empezar a dibujar!

Dibujo de las piezas #1: Piezas simétricas

Empecemos con la parte del rostro.

Crea una nueva capa vectorial para el dibujo lineal

Esto es opcional, también puedes usar la capa rasterizada para el dibujo lineal, pero la capa vectorial será más fácil de editar/cambiar en el proceso posterior

Asegúrate de que la opción [Ajustar a regla especial] esté habilitada.

Cuando dibujes en el lienzo, lo harás en ambos lados de la línea de la regla.

Nota: Si el pincel o borrador no funciona con la regla, verifique la opción [Habilitar ajuste]

en el panel [Detalle de subherramienta], pestaña [Corrección]

Para rellenar el color:

Crea una nueva capa vectorial y dibuja líneas para cerrar el área

Para la parte de la cara, dibujo una línea para el cabello

Crear una nueva capa rasterizada

Color de relleno con la opción [Relleno] > [Hace referencia a otras capas]

En el panel [Propiedades de la herramienta], configure la opción [Hacer referencia a varias] en [carpeta]

Y habilite la opción [Rellenar hasta la ruta del vector]

Elimina la capa vectorial de la línea del cabello

luego bloquea el píxel transparente y sombrea la parte

¡La primera parte está hecha!

Opcional: cambio el modo de capa de la carpeta a [Luz suave] para poder ver la capa del boceto para trabajar en otra parte.

Dibujo de las piezas #2: Piezas asimétricas

Para las partes asimétricas,

deshabilite la opción [Ajustar a regla especial] y dibuje la parte

Dibujo de las piezas #3: Piezas reflejadas

El flequillo izquierdo se puede voltear y hacer el flequillo derecho

Cuando termines de dibujar una parte, selecciona la carpeta de partes.

Luego, crea una selección rectangular, cubre la parte y el ancho del área del lienzo

Haga clic en el ícono [Copiar y Pegar] en el menú flotante para copiar la carpeta de piezas

En el menú flotante, haga clic en [Escalar/Rotar]

y en el panel [Propiedades de la herramienta], haga clic en el ícono [Voltear horizontalmente]

Cambie el nombre de la carpeta y agregue detalles personalizados

[Consejos para usar una regla simétrica]

Es posible que necesites otra regla especial para dibujar alguna pieza,

y cuando termines, la regla simétrica ya no te servirá

Esto sucedió porque solo se puede ajustar una regla especial al mismo tiempo

por lo que, cuando crea una nueva regla especial, la anterior se deshabilitará

 

Para habilitarla, seleccione la regla con la herramienta [Objeto] y haga clic en el ícono de ajuste en la regla

Cuando todas las partes estén terminadas, seleccione todas las partes y cambie el [Modo de capa] nuevamente a [Normal].

Se puede notar el borde duro de alguna parte.

Para solucionarlo, crea una máscara con el ícono [Máscara] en el panel [Capa].

Luego, pinta el elemento transparente con el [Aerógrafo suave]

Paso 4: Dibujar las partes # Cara

A diferencia del cuerpo, que tiene que dividirse en partes por peinado y vestuario,

hay una estructura básica que siempre es la misma

También puedes agregar alguna parte extra (como la lengua o una capa separada para la pupila)

pero asegúrate de que esté en el orden correcto de las capas

Mueva la capa del boceto a la parte superior y cree carpetas para las partes de la cara

Crea una selección de [Rectángulo] que cubra solo la mitad del rostro y, luego, enmascara el contorno en el boceto.

Será menos confuso al dibujar el rostro con la regla simétrica

Al dibujar las piezas, también puedes ver el resultado en las piezas terminadas.

Consejos:

Para los usuarios de Clip Studio 3.0,

pueden seleccionar varios puntos en la transformación de malla para ajustarlos en ambos lados a la vez

 

Nota: también deben seleccionar el punto en posición reflejada

[Problema de recorte]

La mayoría de los programas de animación para la animación de avatares tienen la función máscara de recorte.

Sin embargo, a veces es más complicado de usar, depende del programa.

 

Es posible que tengas que investigar qué método es más adecuado para tu programa de animación

Para dibujar la boca, dibujo la línea de la boca y el interior de la boca.

Copio la línea de la boca y la coloco en la carpeta para los labios inferiores.

Luego pinto la piel para cubrir el área interna de la boca.

Cuando la cara esté lista, mueva las carpetas de capas hacia abajo hasta la carpeta de capas de la cara.

Puedes pintar sobre la máscara de capa con el borrador transparente o suave

para que el flequillo frontal sea translúcido

Por lo general, los ojos izquierdo y derecho se animan por separado.

Para separar las partes del ojo izquierdo y derecho:

Seleccione las carpetas de capas, haga una selección sobre un ojo

y luego haga clic en el botón [Cortar y pegar] en el menú flotante

¡Cambia el nombre de las carpetas y ahora todas las partes están terminadas!

Paso 5: Limpiar el archivo

Cuando el diseño de tu avatar esté listo, puedes exportarlo a otro software de animación o animarlo en Clip Studio Paint. Algunos programas pueden requerir que fusiones capas para cada parte antes de exportar, esto puede resultar incómodo si deseas editar la parte más tarde.

 

 

(Nota: utilizo Spine 2d para el proceso de animación. Puede tener resultados diferentes en otro software)

 

La función [Objeto de archivo] de Clip Studio puede ayudarte a mantener la pieza editable (en archivos separados) y no tienes que fusionar las capas cada vez en el proceso de exportación.

Preparemos el archivo.

 

Primero, elimine todo excepto las carpetas de piezas del archivo

(Ej.: capa de papel, capa de boceto, referencia, etc.)

Convertir la carpeta de capas en un objeto de archivo:

Haga clic con el botón derecho en la carpeta de capas > [Objeto de archivo > Convertir capa en objeto de archivo]

Establezca el área en [Área de dibujo] y guarde el archivo

 

La pieza ahora está guardada en un archivo externo

Consejos: coloque el menú de exportación en el panel de [acceso rápido] para ahorrar tiempo en la conversión

Convertir todas las carpetas en archivos.

El nombre del archivo será el nombre de la carpeta por defecto

Nota: Si el software de animación requiere el formato .psd (documento de Photoshop), puede guardarlo con el menú [Guardar como...]

(Si necesitas editar algo, no podrás editar desde el archivo .psd con Clip Studio. Simplemente edítalo en el archivo .csp y luego expórtalo a psd nuevamente)

Para editar la pieza, selecciónela con la herramienta [Objeto]

Luego, en el panel [Propiedad de la herramienta], haga clic en [Abrir el archivo]

Cuando guardes el archivo de la parte, se actualizará automáticamente en el archivo principal

 

Ahora tu avatar está listo para ser animado

¡Tiene una estructura de archivo limpia y un nombre claro!

El arte de división de piezas generalmente se anima con el método de aparejo (esqueleto) para el modelo interactivo para el juego o el avatar de transmisión.

Si no necesitas el modelo dinámico,

¡Puedes simplemente hacer la animación en Clip Studio Paint y exportarla como video o animación GIF también!

Parte 2: Animar el avatar en Clip Studio Paint

Puedes usar el [Fotograma clave de capa] para crear la animación de tu avatar.

La expresión del rostro es más fácil de animar con la animación cuadro por cuadro.

Coloca las partes de las características del rostro en una carpeta de capas

Seleccione todas las capas excepto la carpeta de expresión facial y haga clic en el ícono [Escalar/Rotar]

En el panel [Propiedades de la herramienta], configure el modo en [Inclinar],

luego mueva el punto de control en la parte superior hacia afuera y de regreso a su posición.

Abra el panel de la línea de tiempo ([Ventana > Línea de tiempo])

 

Cree una nueva línea de tiempo con Framerate : 8 y Playback time :24

(Esta cantidad de cuadros es compatible con la versión Pro de Clipstudio Paint)

Esta vez, seleccione todas las capas y habilite el fotograma clave de la capa en el panel [Línea de tiempo].

La pestaña roja muestra el fotograma activo actual.

En el primer fotograma, haga clic en el botón [Agregar fotograma clave]

Nota: el color del icono del fotograma clave depende del tipo de interpolación.

Puede utilizar el modo lineal para una velocidad de movimiento constante y el modo suave para una velocidad exponencial

Mantenga presionado para fijar la posición del objeto en el fotograma

Cuando seleccionas la pieza con la herramienta [Objeto]

en el panel de propiedades de la herramienta], verás que aparece la opción [Transformar] en la posición de las esquinas. *Esto es por sesgar** todas las piezas en el paso anterior

Con la esquina ajustable, la pieza se puede ajustar con mayor libertad.

Diseña la animación antes de realizar el ajuste.

En este tutorial, haré una pose de guiño en una animación en bucle

Al asignar la animación al período de tiempo,

la publicación debe configurarse solo para la posición de inicio y de guiño

Ajusta la pose inicial en el cuadro 1

Nota: empiezo con el cuerpo y luego muevo otras partes más adelante

Agrega los fotogramas clave finales para todos los objetos

Selecciona todas las capas, haz clic en el último fotograma y agrega el fotograma clave para crear el bucle

Detener la animación.

Crear un fotograma clave para todas las capas en el fotograma 7 y, a continuación, establecer la pose para el fotograma final.

Cuando termines de posar, copia los fotogramas clave para detener la siguiente animación.

Haz clic y arrastra para seleccionar varios fotogramas clave,

luego haz clic derecho en el fotograma clave y copia.

Seleccione todas las capas, vaya al cuadro 13 y pegue

Casi terminado

Desplaza los últimos fotogramas clave al fotograma 19,

y ahora el movimiento del personaje es el mismo que el diseño.

Animación física

¡Hagamos que el movimiento sea más animado agregando algo de física de animación!

En este momento, la tela y el cabello se mueven al mismo tiempo que el movimiento del personaje...

 

Pero en realidad, hay un efecto de inercia que hará que los objetos adjuntos dejen de moverse más lentamente. Agregar este efecto a la animación hará que se vea más natural.

Añade más efecto de movimiento al cuadro que es el final del movimiento.

Hay movimiento en el cuadro 1 al 7, añade más efecto de movimiento en el cuadro 7

Hay otro movimiento en el cuadro 13 al 19.

Agregue el efecto de más movimiento también en el cuadro 19

Los fotogramas clave del fotograma 19 solían ser los mismos que los del fotograma 1, y la animación está en bucle.

Dado que hay un ajuste en el fotograma 19, la animación ya no estará en bucle.

 

Para solucionarlo, copie todos los fotogramas clave del fotograma 1 y péguelos en el último fotograma clave.

 

 

Este ajuste hace que el cabello continúe moviéndose en el marco donde el personaje no se mueve.

[Espacio entre bucles]

La animación tiene un pequeño espacio entre bucles porque el último fotograma clave está al final del fotograma 23**

Para eliminarlo, debes desplazar el fotograma clave al final del fotograma 24.

 

Así es como puedes desplazarlo fácilmente

[rebote]

Agregar un efecto de rebote a la animación le da un aspecto más natural.

 

Inserte un fotograma clave con el objeto moviéndose/rotando en dirección opuesta,

entre los fotogramas clave del efecto de inercia.

Consejos: si ajustaste demasiado la posición del movimiento y la animación parece parpadeante,

puedes ampliar el espacio entre los fotogramas clave en lugar de reajustar los objetos

Expresiones faciales

Es más fácil agregar la expresión de la cara con la [carpeta Animación]

 

Selecciona todas las capas y desactiva el [Fotograma clave de capa], las partes estarán en su posición inicial

En la carpeta de expresiones faciales, fusiona todas las partes del ojo izquierdo y derecho (excepto el iris y la pupila),

y rasteriza las capas de la boca

Coloque las partes de la cara editadas en una carpeta

Copia la carpeta y dibuja o ajusta nuevamente las partes con [Transformación de malla]

Creé 3 emociones faciales.

Crea una nueva carpeta de animación dentro de la carpeta de expresiones faciales.

Luego mueve todas las carpetas de emociones faciales dentro de ella.

Seleccione todas las capas y habilite nuevamente el fotograma clave de la capa; los fotogramas clave volverán a estar disponibles.

Expande la carpeta de capas expresión facial, se mostrará la carpeta de animación

Expande la opción de la carpeta con el ícono [+], verás la línea de tiempo de [cel]

Haga clic derecho y seleccione la cara que desea asignar al fotograma clave.

¡¡Y ya está!!

¡Espero que mi proceso de trabajo y mis técnicas de animación te resulten útiles para tu proyecto!

¡Diviértete animando y nos vemos en el próximo tutorial!