En este tutorial, le mostraré cómo hacer un emoticón de lobo a partir de una imagen y usar la herramienta de transformación para crear varias expresiones y animaciones suaves. (También compatible con las versiones Clip studio PRO y EX)

 

mira el video para seguir el paso en acción. ;)

Consulte también la sección de bonificación para guardar animaciones en formato de animaciones gif transparentes, gratis con Gimp

El video tutorial

Algunos conocimientos básicos sobre el diseño de un emote

Antes de hacer diseños para el emote, debe comenzar haciendo un alcance de su diseño y las especificaciones del emote que son

 

1. ¿Cuál es el tamaño del emote que tienes que hacer?

2. ¿Cuál es la expresión que vas a mostrar?

3. ¿Cuál es el color de fondo de la plataforma?

 

 

-Tamaño: el tamaño del emote limita los detalles del mismo. Si pone demasiados detalles en un pequeño emote, no podrá ver los detalles, como se muestra aquí.

-Expresión: la expresión del emote básico comienza desde los ojos y la boca. La emoción será más compleja si se agregan cejas y efectos detallados, que a menudo se ven en cómics / manga.

-Color de fondo de la plataforma: algunas plataformas de chat social tienen varios modos para los fondos, algunas se colocan en modo único, asegúrese de que su diseño de emote sea adecuado para el fondo de la plataforma para la que se está utilizando el emote.

Consejos: algunas plataformas que permiten a los usuarios personalizar el fondo; puedes arreglarlo fácilmente aplicando algunos trazos con la herramienta de efecto de borde.

Cuando pueda ver su emote, ahora estará listo para el diseño

Paso 1: diseña el emote

Creé un alcance para mi emote usando las preguntas de alcance de emote que hice.

 

1. ¿Cuál es el tamaño del emote que tienes que hacer?

• 50 50, 25 25

2. ¿Cuál es la expresión que vas a mostrar?

-Sad "feliz" sudor "no"

3. ¿Cuál es el color de fondo de la plataforma?

• gris oscuro (discordia)

El emote que voy a hacer en este tutorial es pequeño, así que decidí dibujar solo la cara del personaje

Consejos: la búsqueda de alguna referencia de lobo ayuda a obtener algunas imágenes claras sobre la forma de la cabeza del animal y sus características.

definir la forma de la cabeza (cráneo) ojos + posición de la nariz y pelaje

Cuando tenga la forma, es fácil agregar algunos detalles al boceto. Varíe el detalle hasta que esté satisfecho con él.

El siguiente paso es agregarle emociones. Si no estás acostumbrado a dibujar expresiones, dibuja gestos simples y luego aplícalo al diseño.

Los animales también tienen otras formas de mostrar expresiones, como la posición de las orejas o el pelaje. Aquí hay algunos ejemplos de ello.

Consejos: si no tienes idea de cómo la criatura que dibujas puede hacer su propia cara de firma, intenta buscar algunas fotos de referencia en Internet

Paso 2: Dibuja partes de emoticones

En primer lugar, necesitamos diseñar las partes de la capa para hacer la animación con transformaciones de capa. Al organizar el diseño juntos, podemos planificar algunas partes móviles como orejas, nariz, ojos, mejillas, etc.

La cara del lobo es simétrica, podemos usar la herramienta de regla simétrica para ayudar con el dibujo;

Crea una nueva capa vectorial para la tinta

Luego use la regla simétrica para crear la línea central, con la configuración "Número de líneas" 2 y marque "Simetría de línea"

(mantenga presionada la tecla Mayús para alinearla con la línea vertical)

 

Dibuje la tinta con la herramienta preferida, aquí uso mi herramienta de tinta favorita más nueva: "curva Bezier"

(si aún no encuentra la herramienta, actualice su estudio de Clip a la versión más reciente;))

Cree una nueva capa vectorial para otras partes, si falta la regla simétrica al cambiar la capa, configúrela en "Mostrar en todas las capas" (el menú está en el panel de capas)

Dibuja solo la mitad de la imagen, excepto la cara y la nariz.

Coloréalo por separado con un color liso. Utilizo la configuración de herramienta del activo de Clip studio:

En la capa de tinta, configúrela como capa de referencia, luego configure la propiedad de la herramienta para "referir múltiples" a la capa de referencia

Arrastre para cubrir la tinta (no debe tener espacio de tinta)

Use el modo transparente de bloqueo para pintar las formas.

Coloque la capa de tinta y el color en una carpeta y repita el paso para todas las partes

Consejo: si la pieza no tiene una forma cerrada, pinte para cerrar el espacio antes de usar la herramienta de relleno.

Asegúrese de nombrar todas las carpetas y luego convierta la carpeta en objetos de archivo haciendo clic derecho en la capa> Objeto de archivo y Convertir capa en objeto de archivo.

 

El "objeto de archivo" facilitará la edición de las partes en el futuro.

 

La parte de la nariz será una técnica diferente, crea 2 círculos para superponerlos para que parezca tinta.

Esta técnica es útil para crear una dimensión en movimiento que podrá ver en el siguiente paso.

Copie la capa de objeto y use la herramienta de objeto para voltearla, repita en todas las partes

[¡Importante! ] Cambie el nombre de todas las capas para evitar confusiones al animar

Al seleccionar la capa de objeto con la herramienta de objeto, puede abrir el archivo de las partes

Edite las partes y guarde, la edición aparecerá en todas partes donde aparezca el objeto.

Ahora tu imagen está lista para la animación.

Paso 3: prepara el archivo

Prepare el espacio de trabajo para su emote, volviendo a nuestro diseño desde el principio, vamos a hacer emotes para Discord que tiene un fondo gris oscuro

[Cita en Wikipedia]

Discord es una aplicación de VoIP gratuita y plataforma de distribución digital diseñada para comunidades de videojuegos.

Imprima en pantalla la aplicación y péguela en el lienzo, luego elija el color y aplíquelo en la capa de papel

Agrupe las partes que hemos hecho en una carpeta, selecciónela y presione la tecla CTRL + C y luego CTRL + V en el nuevo lienzo

Mantenga presionada la tecla CTRL y haga clic en el icono de la carpeta para hacer la selección, luego vaya al menú Editar> Recortar

Luego, con el menú Editar> Cambiar el tamaño del lienzo, establezca la dimensión igualmente en el cuadrado.

 

también agregue más píxeles para el área de animación

El archivo está listo ahora. Guárdelo como plantilla para la animación más tarde.

Paso 4: anima el emote

Comience la animación, cree una nueva línea de tiempo.

(si no tiene un panel de línea de tiempo, vaya al menú Ventana> Línea de tiempo)

Si tiene Clip Studio EX, puede crear un tiempo de reproducción de más de 24 cuadros, pero no se preocupe si tiene la versión Pro, para el emote, ¡24 cuadros son suficientes!

 

Establezca la velocidad de fotogramas de la línea de tiempo en 8 o más. La animación no se verá tan suave si tiene menos de 8 cuadros.

Dibuja el animatic primero,

Animatic es la forma en que traza cómo se verá la animación en el momento

para hacer animatic, usaremos la clásica animación cuadro por cuadro.

 

Crear carpeta de animación

Seleccione el marco que desee y "cree una nueva celda de animación"

Crea 2 cel, cel 1 para la emoción principal y cel 2 para el estado antes de alcanzar la emoción.

también ponga cel 2 al final, haga clic derecho en el marco y seleccione cel 2

para dibujar el animatic, simplemente haga clic en el marco y dibuje

Usaremos este animatic que hicimos para la posición de referencia para el movimiento de piezas.

Asegúrese de que el animatic sea la capa superior. Bloquee la capa para evitar clics incorrectos

Para hacer parpadear los ojos, tenemos que usar la técnica cuadro por cuadro. Entonces lo dibujamos en la carpeta de animación

asegúrese de que el marco sea el mismo que animatic

para las otras partes que simplemente se mueven (sin cambios como los ojos), selecciónelo con "Herramienta de objeto" y "Habilitar fotogramas clave en esta capa"

Luego agregue el fotograma clave en el cuadro 1

También hay opciones para fotogramas clave, para facilitar su manejo, recomiendo el lineal. Pero si te acostumbras a las herramientas de gráficos de animación, también puedes usar la suave.

También cree el fotograma clave para el último fotograma, simplemente creándolo, simplemente copiará la posición del primer fotograma.

Haga clic en el diamante verde y arrástrelo hasta el final de la línea de tiempo para hacer el cuadro final.

Hacemos esto para que sea una animación en bucle.

Nota: consulte mi antiguo tutorial para la animación de bucle:

 

Si las partes se mueven juntas, animarlas juntas al mismo tiempo.

seleccione el cuadro en la posición de cel 1 del animatic, luego use la herramienta de objeto para ajustar la posición de la imagen, el fotograma clave se creará automáticamente en la línea de tiempo.

Copia el diamante y ponlo donde termina cel 1 de animatic

 

Haga clic derecho en el diamante verde en la línea de tiempo y luego seleccione copiar.

Haga clic derecho en el fotograma clave donde termina cel 1 y seleccione pegar

esto hará que la emoción se demore en el emote

Comenzarás a ver algunos movimientos suaves en las cejas ^ ^

Repita el paso a las otras partes también, use la capa animática como referencia

Nota: También agregué algunos fotogramas clave adicionales para más movimientos, como las orejas, y también apliqué el fotograma clave de capa para transformar la posición de los ojos.

Resultado final:

Paso 4: anima el emote en un nivel más avanzado

Esta es una muestra más avanzada para el método de transformación en Clip Studio utilizando la herramienta de objeto.

 

De forma predeterminada, cuando habilita el fotograma clave para la animación, el modo para ajustar la imagen será el modo de escala, que no es tan flexible para las animaciones.

 

Pero si configura el modo para transformar, luego mueva un nodo y habilite el fotograma clave, obtendrá el modo de transformación libre que le permite mover los nodos libremente

 

(El activo de Sakura pertenece a Clip Studio)

use el modo de transformación libre para ajustar nuestro objeto antes de habilitar el fotograma clave de capa. entonces puedes ajustar tu fotograma clave en modo de transformación libre

Repetir el mismo paso de creación de línea de tiempo que hicimos en la parte anterior del tutorial con el método de transformación libre le dará un aspecto más avanzado del resultado.

También puede aplicar algún efecto transparente con el fotograma clave de capa también.

En la capa de línea de tiempo, haga clic en el icono [+]

 

Haga clic en Opacidad y puede agregar fotogramas clave para controlar la opacidad de la capa en cualquier marco

Bonificación: ahorre emoticón transparente con The Gimp

Todavía faltan algunas funciones al exportar animaciones gif a con fondo transparente. el resultado contendrá el fondo blanco que es perturbador como un emote.

Una buena solución es exportarlo a un apng (formato de animación png) y convertirlo si desea un formato de animación gif

 

Sin embargo, tengo mi propia solución para exportar los gestos de fondo transparente con el software de código abierto que es confiable y gratuito: The Gimp

puedes descargarlo desde su sitio oficial:

 

 

Primero, exporte la secuencia de imágenes desde Clip studio, vaya al menú: Archivo> Exportar animación> Secuencia de imágenes

Nota: no olvides ocultar la capa de papel para crear el fondo transparente.

 

En la configuración, seleccione la carpeta y el tamaño preferido [¡Importante!]

Obtendrá una secuencia de imágenes para su emote en el tamaño preferido.

 

(Siempre trabajo con archivos de gran tamaño para varios usos en el futuro y uso la opción de exportación para varias especificaciones de exportación)

Ahora en el lado de Gimp:

 

abre The Gimp, ve a Archivo> Abrir como capas

Vaya a la carpeta para la secuencia de imágenes, seleccione todo, luego ábralo

Los archivos se organizarán en capas.

Luego expórtalo a gif, archivo> exportar como

Establezca el nombre del archivo, seleccione el tipo de archivo "gif" y exporte

Obtendrá un menú emergente, marque la casilla "como animación" y establezca la disposición del cuadro en un cuadro por capa.

 

El retraso entre fotogramas es 1000 / velocidad de fotogramas del gif que hiciste

 

ejemplo: framerate = 10 fps; será 1000/10 = 100 milisegundos de retraso entre cada cuadro

Espero que te diviertas creando tus propios gestos <3

¡¡Hecho!!