¡Hola a todos, bienvenidos a mi tutorial!

 

En este tutorial, les mostraré los sencillos pasos para hacer un diseño de personaje para un avatar animado o un modelo rigging .

Este tutorial se divide en 2 partes:

 

La primera parte les mostrará cómo crear arte de personaje para el avatar animado ,y

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

También pueden exportar el arte a otro software de animación para crear un modelo rigging 2D para avatares interactivos, como sprites de juegos o modelos Vtuber.

 

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

¡¡Empecemos!!

Tutorial en Video

Versión en video de este tutorial

Parte 1: Crear el modelo de avatar

Lo básico para hacer un avatar animado es simple.

Divide el personaje en partes y muévelas para crear la animación.

La forma tradicional de hacerlo es dibujando un personaje y luego cortando y editando las partes.

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

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

Paso 1: Creación del diseño claro

Bosqueja el arte en vista frontal y pose básica de pie.

El arte debe ser claro con los detalles para el proceso de trazado.

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

Puedes usar el modelo de cabeza para ayudarte con el boceto.

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

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

Opcional: Puedes personalizar las características faciales para que se adapten a tu diseño ajustando los valores en la pestaña [Características faciales] del panel [Detalle de subherramienta]

Crea una nueva capa y bosqueja sobre el modelo de 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 partes

Una vez que el diseño esté listo, divide el arte en partes.

 

La clave para la división de partes:

“Divide donde se va a animar” y “Empieza desde la línea central, de grande a pequeño”

Nota: en este tutorial, primero terminaré las partes del cuerpo, y luego trabajaré en las características faciales para evitar confusiones.

Empieza con la cabeza (cara + parte trasera de la cabeza) y el cuerpo.

Opcional:

Divido la cabeza en 2 partes: la cara y la parte posterior de la cabeza.

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

Divide los detalles adicionales alrededor de la línea central, enuméralos en orden de aparición.

Puedes ver que algunas partes son simétricas y otras asimétricas.

También hay partes que tienen una versión espejada en el lado opuesto, como los flequillos laterales o las coletas dobles.

Puedes dibujar estas partes una vez, luego copiarlas y voltearlas para hacer el otro lado.

Cuando termines de listar las partes, crea una nueva carpeta para cada parte.

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

puedes configurarlo de la manera que te resulte más cómoda.

Nota: Utilizo el ‘-’ en el nombre de la carpeta para identificar el grupo de la parte. (ej: ‘pelo-coleta doble-I’)

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 [Vista secundaria] para ello.

Cambia 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 Papel,

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

Configura las opciones:

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

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

[Ángulo de ajuste] : 90,

 

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

Haz que se muestre en todas las capas:

Haz clic derecho en el icono de la regla y [Mostrar en todas las capas].

Selecciona la regla con la herramienta [Objeto] y ajústala al centro del lienzo.

 

puedes configurar la opción [Centro X] en el panel [Propiedad de herramienta] a la mitad del ancho del lienzo.

O alinearla con el panel de alinear/distribuir (Clipstudio 2.0+)

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

[Editar > Transformar > Transformación de malla]

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

Dibujando las partes #1: Partes simétricas

Empecemos con la parte de la cara.

Crea una nueva capa vectorial para el arte lineal.

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

Asegúrate de que [Ajustar a regla especial] esté habilitado.

Cuando dibujes en el lienzo, aparecerá a ambos lados de la línea de la regla.

Nota: Si el pincel/borrador no funciona con la regla, comprueba la opción [Activar 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 de cabello.

Crea una nueva capa rasterizada

Rellena el color con [Rellenar] > [Referir otras capas]

En el panel [Propiedad de herramienta], configura la opción [Referir múltiples] a [carpeta]

Y habilita la opción [Rellenar hasta trazado vectorial]

Elimina la capa vectorial de la línea del cabello

luego bloquea el píxel transparente y el sombreado de la parte.

¡La primera parte está hecha!

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

Dibujando las partes #2: Partes asimétricas

Para las partes asimétricas,

deshabilita la opción [Ajustar a regla especial] y dibuja la parte.

Dibujando las partes #3: Partes espejadas

El flequillo izquierdo se puede voltear para hacer el flequillo derecho

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

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

Haz clic en el icono [Copiar y pegar] del menú flotante para copiar la carpeta de la parte.

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

y en el panel [Propiedad de herramienta], haz clic en el icono [Voltear horizontalmente]

Renombra la carpeta y añade detalles personalizados.

[Consejos de regla simétrica]

Puede que necesites otra regla especial para dibujar alguna parte,

y al terminar, la regla simétrica ya no funcionará.

Esto ocurre porque solo se puede ajustar una regla especial a la vez.

Así, cuando creas una nueva regla especial, la antigua se deshabilitará.

 

Para habilitarla, selecciona la regla con la herramienta [Objeto] y haz clic en el icono de ajuste de la regla.

Cuando todas las partes estén terminadas, selecciona todas las partes y cambia el [Modo de capa] de nuevo a [Normal]

Puedes notar el borde duro de algunas partes.

Para arreglarlo, crea una máscara con el icono [Máscara] en el panel [Capa]

y luego pinta el transparente con el [Aerógrafo suave]

Paso 4: Dibujar las partes # Cara

A diferencia del cuerpo, que debe dividirse por estilo de cabello y vestuario,

Existe una estructura básica que siempre es la misma.

También puedes añadir alguna parte extra (como la lengua o una capa separada para la pupila),

pero asegúrate de que esté en el orden de capa correcto.

Mueve la capa de boceto a la parte superior y crea carpetas para las partes de la cara.

Crea una selección [Rectángulo] que cubra solo media cara, luego enmascárala en el boceto.

Será menos confuso al dibujar la cara con la regla simétrica.

Cuando dibujas las partes, también puedes ver el resultado en las partes terminadas.

Consejos:

Para los usuarios de Clip Studio 3.0,

puedes seleccionar múltiples puntos en la transformación de malla para ajustar ambos lados juntos.

 

Nota: también tienes que seleccionar el punto en posición de espejo.

[Problema de recorte]

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

Sin embargo, a veces es más complicado de usar, dependiendo del software.

 

Es posible que tengas que investigar qué método se adapta mejor a tu software 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 pongo en la carpeta de los labios inferiores,

luego pinto la piel para cubrir el área interior de la boca.

Cuando la cara esté hecha, mueve las carpetas de capas hacia abajo, sobre la carpeta de la capa de la cara.

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

para hacer que el flequillo frontal sea translúcido.

Normalmente, los ojos izquierdo y derecho se animan por separado.

Para dividir las partes del ojo izquierdo y derecho:

Selecciona las carpetas de capa, haz una selección sobre un ojo

y luego haz clic en el botón [Cortar y pegar] del menú flotante.

¡Renombra las carpetas y ahora todas las partes están terminadas!

Paso 5: Limpiar el archivo

Cuando tu arte de avatar esté listo, puedes exportarlo para otro software de animación o animarlo en Clip Studio Paint. Algunos programas pueden requerir que fusiones las capas de cada parte antes de exportar, lo cual será incómodo si deseas editar la parte más tarde.

 

 

(Nota: Uso Spine 2D para el proceso de animación. Puede que tenga resultados diferentes en otros programas.)

 

¡¡La función [Objeto de archivo] de Clip Studio puede ayudarte a mantener la parte editable (en archivos separados) y no tendrás que fusionar las capas cada vez en el proceso de exportación!!

Preparamos el archivo.

 

Primero, elimina todo excepto las carpetas de las partes del archivo.

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

Convierte la carpeta de capa en un objeto de archivo:

Haz clic derecho en la carpeta de capa > [Objeto de archivo > Convertir capa a objeto de archivo]

Establece el área en [Área de dibujo] y guarda el archivo.

 

La parte ahora está guardada en un archivo externo.

Consejos: poner el menú de exportación en el panel [Acceso rápido] te ahorrará tiempo al convertir.

Convierte 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), puedes simplemente guardarlo con el menú [Guardar como...]

(Si necesitas editar algo, no podrás editarlo desde el archivo .psd con Clip Studio. Simplemente edítalo en el archivo .csp y luego exporta a .psd de nuevo.)

Para editar la parte, selecciónala con la herramienta [Objeto]

Luego, en el panel [Propiedad de herramienta], haz clic en [Abrir 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 con nombres claros!!

El arte de división de partes se anima generalmente con el método de rigging (esqueleto) para el modelo interactivo de juegos o avatares de streaming.

Si no necesitas el modelo dinámico,

¡¡Simplemente puedes hacer la animación en Clip Studio Paint y exportarla como un video o una animación GIF!!

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 facial es más fácil de animar con la animación cuadro por cuadro.

Coloca las partes de las características faciales en una carpeta de capa.

Selecciona todas las capas excepto la carpeta de expresiones faciales y haz clic en el icono [Escalar/Rotar]

En el panel [Propiedad de herramienta], establece el modo en [Distorsión],

luego mueve el punto de control superior y devuélvelo a su posición.

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

 

Crea una nueva línea de tiempo con Frecuencia de cuadros: 8 y Tiempo de reproducción: 24

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

Esta vez, selecciona todas las capas y habilita el fotograma clave de capa en el panel [Línea de tiempo]

La pestaña roja muestra el fotograma activo actual.

En el primer fotograma, haz clic en el botón [Añadir fotograma clave]

Nota: el color del icono de fotograma clave se basa en el tipo de interpolación.

Puedes usar lineal para una velocidad de movimiento constante, suave para una velocidad exponencial

y mantener para fijar la posición del objeto en el fotograma.

Cuando seleccionas la parte con la herramienta [Objeto]

en el panel [Propiedad de herramienta], verás que la opción [Transformar] aparece en la posición de las esquinas. Esto es resultado de distorsionar todas las partes en el paso anterior.

Con la esquina ajustable, la parte puede ser más libremente modificable.

Diseña la animación antes del ajuste.

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

Cuando se mapea la animación al marco de tiempo,

La pose debe establecerse solo para el inicio y para la posición de guiño.

Ajusta la pose inicial en el fotograma 1.

Nota: Empiezo con el cuerpo y luego muevo otras partes.

Añade los fotogramas clave finales para todos los objetos.

Selecciona todas las capas, haz clic en el último fotograma y añade el fotograma clave para crear el bucle.

Haz que la animación se detenga,

Crea fotogramas clave para todas las capas en el fotograma 7 y luego establece la pose para el fotograma de parada.

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

Haz clic y arrastra para seleccionar múltiples fotogramas clave,

luego haz clic derecho en el fotograma clave y copia.

Selecciona todas las capas, ve al fotograma 13 y pega.

Casi listo.

Desplaza los últimos fotogramas clave al fotograma 19,

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

Física de la animación

¡Hagamos el movimiento más vivo añadiendo algo de física de animación!

Ahora mismo, la ropa y el pelo se mueven todos juntos con el movimiento del personaje…

 

pero en realidad, existe un efecto de inercia que hará que los objetos adjuntos dejen de moverse más lentamente. Añadir este efecto a la animación hará que parezca más natural.

Añade más efecto de movimiento al fotograma que marca el final del movimiento.

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

Hay otro movimiento del fotograma 13 al 19.

Ajusta el efecto de movimiento también en el fotograma 19.

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

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

 

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

 

 

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

[Brecha de bucle]

La animación tiene una pequeña pausa entre los bucles porque el último fotograma clave está al final del fotograma 23.

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

 

Así es como se desplaza fácilmente.

[Rebote]

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

 

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

entre los fotogramas clave del efecto de inercia.

Consejos: si has ajustado demasiado la posición del movimiento y la animación parpadea,

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

Expresiones faciales

Es más fácil añadir las expresiones faciales con la [Carpeta de animación]

 

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

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

y rasteriza las capas de la boca.

Coloca las partes de la cara editadas en una carpeta.

Copia la carpeta y redibuja o ajusta 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

y luego mueve todas las carpetas de emociones faciales dentro.

Selecciona todas las capas y habilita de nuevo el fotograma clave de capa; los fotogramas clave volverán.

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

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

Haz clic derecho y selecciona la cara para asignarla al fotograma clave.

¡¡Y listo!!

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

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