¡Qué pasa, chicos!
Soy Link, animador e ilustrador de @linkurys
Linkurys (@linkurys) • Fotos y vídeos de Instagram
Esta es la primera vez que comparto consejos de animación en línea, así que si alguno de mis consejos parece poco claro o confuso, ¡no dude en preguntar! Puedes dejar un comentario o enviarme un DM.
En este tutorial, te mostraré 3 formas de animar tus gestos rápida y fácilmente. Cada método presenta sus propios desafíos, ¡pero no te preocupes! ¡Te guiaré en cada paso, de principio a fin, usando Clip Studio Paint Ex! 😁
¿Que vamos a hacer?
Cuando piensas en hacer emoticones animados, puedes creer que es difícil, complicado y requiere mucho trabajo. Pensé lo mismo antes de empezar a animar. Pero lo creas o no, ¡esos tres puntos anteriores son esencialmente todo lo que hay que hacer! Bueno, por supuesto, no es tan sencillo, ¡pero es más fácil de lo que piensas! Especialmente cuando usamos Clip Studio Paint que nos brinda muchas funciones 😎
¡3 formas de animar tus gestos!
Como mencioné anteriormente, te brindaré 3 formas de crear tus propios emoticones animados, que son:
1. Animación de imagen estática
La esencia de esta técnica es simple, básicamente simplemente mueve tu imagen/dibujo para lograr el movimiento que deseas.
(Este es el método más popular que la gente usa al crear sus gestos animados y probablemente hayas visto este tipo de gesto muchas veces, ¿verdad?)
2. Animación de piezas
Aquí, separarás las partes de tus emoticones y las moverás individualmente, usando la misma técnica que en el primer método.
(Similar al primer método, pero con más componentes para animar).
3. Animación cuadro por cuadro
¡Anímate dibujando cada movimiento cuadro por cuadro!
Esta técnica exige más esfuerzo y puede resultar algo desafiante para los principiantes. Sin embargo, con práctica constante, ¡te volverás más rápido y más competente en la creación de estas animaciones!
(¡El más desafiante pero muy divertido! :D)
Preparando su espacio de trabajo y demás
1. Prepara el dibujo de tus emoticones que deseas animar.
¡Asegúrate de poder verlo!
Cuando hablamos de emoticones animados, a menudo se usan para chats de transmisión en vivo, como en Twitch o plataformas similares. Dado que pueden parecer pequeños, es importante asegurarse de que sean fáciles de ver. No agregues demasiados pequeños detalles que podrían perderse. ¡Mantenlo simple!
2. Configurar el espacio de trabajo de pintura de tu estudio de clips
Antes de sumergirnos en el tutorial de animación, ¡preparemos las cosas!
1. Abre tu Clip Studio Paint
2. Haga clic en Archivo > Nuevo…
3. Seleccione Animación en proyecto
4. Establezca el tamaño de su lienzo/marco en 1000x1000 px y la resolución en 150
(Puedes elegir un tamaño diferente, pero asegúrate de que mantenga una escala 1:1)
5. Establece tus velocidades de fotogramas en 24 FPS
6. Haga clic en Aceptar**
Si no tienes el Panel Línea de tiempo, puedes hacer que aparezca yendo a Ventana > Línea de tiempo
Espera, ¿qué es una Línea de tiempo?, preguntas. Bueno, es esencialmente la columna vertebral de cualquier proyecto de animación. En la línea de tiempo, usted diseña secuencias, establece el ritmo y organiza los cuadros de animación. Es donde se unen todas las piezas individuales, lo que te permite visualizar y controlar el flujo de tu animación de principio a fin. Piense en ello como el tablero del director donde se traza cada movimiento, cada transición y cada momento.
Esto es opcional, pero puedes ocultar la vista previa de la carpeta de animación para obtener mejor espacio yendo a Icono de hamburguesa (3 líneas) junto a Línea de tiempo y luego a Tamaño de miniatura > Ninguno.
¡Hurra! ¡Ya ha terminado de configurar su espacio de trabajo de Clip Studio Paint! ✨
Animar y mover tus cosas
Si estás leyendo esto, significa que estás listo para animar tus emoticones, ¿verdad? (O tal vez simplemente saltaste a esta parte 😏). De cualquier manera, comencemos con el método más simple pero más fácil: ¡Animación de imagen estática!
Primeros consejos: animación de imágenes estáticas
En la imagen de arriba, verá tres formas de mover y cambiar su imagen estática. Puedes cambiarlo, girarlo, hacerlo más grande o más pequeño, o mezclar estos métodos para obtener diferentes efectos. Hay tantas posibilidades que puedes hacer con solo usar estos trucos, ¡tu creatividad es el único límite!
Animación de imágenes estáticas: nivel 1 (básico)
1. Preparando tu imagen/dibujo estático
Para el nivel 1, hagamos esos gestos de decepción simplemente usando 2 imágenes:
-Tu personaje dibujando
-Imagen de fondo
2. Creando carpeta de animación
Antes de importar tus dibujos a Clip Studio Paint:
1. Crea una nueva carpeta de animación. Esto te ayudará a separar el dibujo de tu personaje y la imagen de fondo en diferentes capas.
2. Cambie el nombre de la carpeta de animación como desee. Por ejemplo, uso "Personaje" para la capa superior y "Fondo" para la inferior".
3. Importando tus imágenes/dibujos
En Clip Studio Paint para animación, no puedes simplemente arrastrar y soltar imágenes directamente en tu lienzo para importarlas. Esto se debe a que las celdas de animación en CSP están diseñadas principalmente para pinceles y otras herramientas, no para importaciones directas de imágenes. Piénselo de esta manera: no están hechos para materiales de imagen en bruto.
Para importar correctamente sus archivos de imagen, asegúrese de arrastrarlos y soltarlos en el área de la paleta de capas, precisamente debajo de la carpeta de animación.
El archivo de imagen se insertará como una Capa vectorial denominada “Dino 1”.
("Dino 1" es el nombre de mi archivo de imagen)
“Pero las imágenes no aparecieron en el lienzo :( “¿Dices?
Bueno, ¡es porque primero debes asignar tu capa de vector de imagen a tu carpeta animada!
Puedes hacerlo haciendo clic en Asignar celda al marco > Selecciona tu capa de imagen > Aceptar
El tamaño de la imagen importada puede ser mayor o menor que el tamaño del lienzo. Para ajustar la imagen al lienzo sin alterar sus proporciones, presione y mantenga presionada la tecla Mayús mientras arrastra la esquina de la imagen.
¡Eso es todo! ¡Ya terminaste de importar la imagen de tu personaje! ✨
¡Ahora puedes hacer lo mismo al importar y asignar tu fondo con la otra carpeta de animación!
4. ¡Anima tu dibujo!
Para comenzar a animar tu dibujo, primero debes activar la función de fotograma clave haciendo:
1. Seleccione la carpeta de animación "Fondo"
2. Habilitar fotogramas clave para la capa que elijas
Cuando el fotograma clave esté habilitado, agregue un fotograma clave en el primer fotograma.
Ahora, copia el fotograma clave que agregaste y pégalo al final de la duración de tu animación, que es de 2 segundos. Puedes hacerlo fácilmente presionando ALT+Arrastrar y soltar el fotograma clave.
¡Ahora tienes 2 fotogramas clave!
Primero, seleccione el fotograma clave inicial. A continuación, haga clic en Modo de operación >Objeto. Esta configuración le permitirá comenzar a ajustar su fondo a partir de ese primer fotograma clave.
Después de eso, mueve la imagen de fondo hacia arriba/saliendo del lienzo.
¡Y ESO ES!
¡Has creado tu primer gesto animado! 🥳
Si cree que la animación de fondo es demasiado lenta, no dude en ajustarla a su gusto. Personalmente, agrego más fotogramas clave cercanos al inicial para ajustar la velocidad.
¡Aquí está el resultado!
¡Y aquí hay otro resultado usando las 3 técnicas básicas de animación estática (rotar, escalar y posicionar) con exactamente el mismo procedimiento! ¿Puedes decirme dónde y cuándo los uso todos? 👀
¡SUBIÓ DE NIVEL! ¡FELICIDADES! ✨
Has completado la animación estática Nivel 1. ¡Ahora estás listo para pasar al Nivel 2!
Animación de imágenes estáticas: nivel 2 (avanzado)
¡Bienvenido al Nivel 2!
A estas alturas, supongo que ya tienes un conocimiento sólido de los conceptos básicos de la animación de imágenes estáticas. Entonces, nos saltaremos los pasos básicos y nos sumergiremos directamente en el proceso de animación, ¿de acuerdo?
1. Material de gestos de nivel 2
Usar dos imágenes diferentes puede parecer sencillo, especialmente teniendo en cuenta las infinitas posibilidades que ofrece la combinación de técnicas básicas de animación estática. Pero para este nivel, ¿qué tal si subimos la apuesta? ¡Creemos un gif animado usando solo una imagen! 😈
2. ¿Nuevo archivo o nueva línea de tiempo?
Tienes dos opciones para esta parte: crear un nuevo archivo/lienzo como hemos estado haciendo, o simplemente crear una Nueva línea de tiempo con el mismo formato que antes, pero con ajustes menores. ¿Tienes curiosidad por hacer Nueva línea de tiempo? ¡Déjame decirte!
Aquí se explica cómo crear una nueva línea de tiempo:
1. En el Panel de línea de tiempo, haga clic en el botón Nueva línea de tiempo.
2. Aparecerá una pantalla emergente. Como utilizamos el mismo formato de animación, no es necesario ajustar ninguna configuración. Simplemente cambie el nombre de la línea de tiempo a "Nivel 2" o tal vez desee cambiar el tiempo de reproducción por una duración más corta o más larga.
3. Haga clic en Aceptar**
¡Su nueva línea de tiempo está lista para funcionar! ✨
Sin embargo, si observa el panel de capas, notará que las imágenes de dibujo anteriores que importó todavía están allí. Esto se debe a que crear una nueva línea de tiempo significa que estás trabajando dentro del mismo archivo que antes. ¡Sin embargo, eso no afectará tu progreso en la nueva línea de tiempo!
¡No los borres! ⛔
Si los elimina, eliminará los archivos importados de la línea de tiempo anterior. Y sí, esto significa que la animación en la que has estado trabajando en la otra línea de tiempo desaparecerá. Entonces, es mejor dejarlos intactos.
Pero si eso te molesta, aquí tienes una solución rápida
1. Seleccionar toda la capa
2. Agrupe estas capas seleccionadas presionando CTRL G
3. Etiquételo como "Línea de tiempo 1".
4. Simplemente minimice la carpeta para mantener ordenado su espacio de trabajo.
5. ¡Voilá! Tu espacio de trabajo ahora tiene una apariencia fresca y organizada con una nueva apariencia lista para la línea de tiempo ✨
3. ¡Animando tu dibujo!
Tu nueva línea de tiempo ya está configurada, ¡comencemos a animar!
Aquí hay un recordatorio rápido de las cosas que necesita preparar:
1. Crea una nueva carpeta de animación.
2. Importa tu imagen/dibujo
3. Asigne su imagen importada a celdas de animación
4. Ajusta la escala de tu imagen
Agregar carpeta de cámara 2D:
1. Haga clic en el botón de hamburguesa
2. Nueva capa de animación
3. Carpeta de cámara 2D
Ahora que la carpeta de su cámara 2D está configurada, mueva la capa de dibujo a ella. Simplemente arrastre y suelte la capa dentro de la carpeta de la cámara 2D. Hacer esto activa el efecto de cámara en tus imágenes/dibujos.
Nota antes de animar el efecto de cámara 2D
1. Asegúrate de haber seleccionado la carpeta o capa de la cámara.
2. El marco cuadrado que ves en el lienzo representa el área que será capturada por el efecto de la cámara. Esencialmente, todo lo que esté dentro de este cuadrado será la salida.
3. Cuando comience a ajustar el cuadro del efecto de la cámara, se agregará automáticamente un cuadro clave a su línea de tiempo. Si avanza a otra duración de cuadro y luego ajusta el cuadro de su cámara, se adaptará en consecuencia.
4. Para ver el resultado del efecto de cámara, haga clic y abra Menú del botón Hamburguesa en la línea de tiempo > Configuración de reproducción > Renderizar cámara 2D
Animar el efecto de cámara 2D
Cree un efecto de cámara rápido y vibrante moviendo el cuadro del efecto de la cámara a una posición aleatoria cada 2 o 3 cuadros.
El resultado esperado debería verse así
Efecto de zoom de animación
1. Elige la capa de animación de tu dibujo que está dentro de la carpeta de la cámara.
2. Active la opción de fotograma clave.
3. Agregue un fotograma clave tanto al principio como al final de la animación.
4. En el fotograma clave final, aumente y amplíe su capa de dibujo/imagen para lograr un efecto de zoom (asegúrese de hacerlo con herramientas de operación > objeto, o no podrá mover la imagen)
¡El resultado esperado sería así!
Si bien podrías considerarlo terminado en este punto, ¿por qué no agregarle un toque extra de estilo? Realcemos esa sonrisa para hacerla aún más amenazadora. JAJA 😈
Añadiendo filtro
1. Seleccione su capa de dibujo
2. Desactivar la función de fotograma clave temporalmente
(No te preocupes, cuando lo vuelvas a encender, el fotograma clave seguirá siendo el mismo)
3. Rasteriza tu imagen haciendo Clic derecho en la capa > Rasterizar
La rasterización convierte su capa vectorial en un formato de mapa de bits, que luego le permite aplicar filtros a su imagen.
4. Abrir filtro > Desenfocar > Desenfoque radial
(Nota: ¡hay muchos otros filtros disponibles que puedes explorar además de este!)
5. Ajuste la fuerza, Dirección a Ambas direcciones y Modo a Suavizar, luego Aceptar
6. Una vez hecho esto, puede reactivar la función de fotograma clave para su capa de dibujo.
¡Y AQUÍ ESTÁ LA SONRISA AMENAZANTE! 😈 😈 😈
¡SUBIÓ DE NIVEL! ¡FELICIDADES! ✨
Has completado la animación estática Nivel 2. ¡Ahora estás listo para comenzar con la Animación de piezas!
Segundo consejo: animación de piezas.
El concepto detrás de la animación de piezas es similar a la animación de imágenes estáticas, en la que mueves, escalas o rotas tu dibujo. Una cosa que lo hace diferente es que debes separar cada parte de tu personaje que quieras mover individualmente. Como se ilustra en la imagen de arriba, mi personaje tiene cuatro partes, cada una de las cuales se puede animar por separado y luego puede brindarte más posibilidades e incluso poses dinámicas para tus emoticones.
Separando partes de personajes
En esta sección de consejos, mi objetivo es animar a mi personaje bebiendo una taza de café.
Para lograr esto, dividiré el personaje en cinco partes, que son:
1. Cuerpo,
2. Ojo,
3. Ceja,
4. Labios
5. la taza de cafe
Solo un recordatorio rápido, muchachos, no tienen que imitar mis poses o diseños. Siéntete libre de utilizar tus propios personajes, poses y elementos relacionados. ¡Deja brillar tu creatividad!
Configurar la carpeta de animación e importar imágenes
Configura tu carpeta de animación
Crea carpetas de animación basadas en la cantidad de partes distintas que tiene tu personaje. Como mi personaje está dividido en cinco partes, crearé cinco carpetas de animación separadas.
Asegúrese de organizar las carpetas correctamente. No querrás que una imagen que debería estar en primer plano se superponga con otras partes, ¿verdad?
Importa y asigna tu dibujo a cada celda de carpeta de animación
1. Importa tu imagen/dibujo a cada carpeta de animación que hayas creado
2. Asigne su dibujo importado a la carpeta de animación respectiva, tal como lo hicimos con la animación de imagen estática: Haga clic en 'Asignar celda al marco', seleccione la capa de su imagen y luego haga clic en 'Aceptar'. Repita esto para cada parte.
3. Establezca esas partes en sus posiciones iniciales para la condición inicial o el primer cuadro.
Animar partes de personajes.
Antes de sumergirse en la animación, es fundamental planificar el movimiento deseado. Según la imagen de arriba, para lograr la acción de sorber de nuestro personaje, necesitamos identificar qué partes moveremos y qué partes permanecerán estacionarias.
Si observamos la imagen, esto es lo que podemos aprender:
1. Las cejas se mueven hacia abajo.
2. Los ojos permanecen estacionarios.
3. La boca se oscurece mientras el personaje sorbe el café.
Ahora que tenemos la condición de movimiento deseada, ¡comencemos a animar!
1. Lo primero que queremos hacer es habilitar la función de fotograma clave en cada carpeta/capa de animación para que podamos comenzar a colocar el fotograma clave en ella y animarla.
2. Agregar fotograma clave en el primer fotograma y en el último fotograma
3. Edite todos los fotogramas clave finales para representar el movimiento final. Para mi personaje, es el momento en el que el personaje está bebiendo.
¡El resultado esperado debería verse así!
Técnicamente podríamos terminarlo aquí, pero ¿por qué no agregarle un poco de estilo para hacerlo aún mejor? ¡Vamos a darle vida a las cosas! 😎
1. Agregue el efecto de cámara 2D haciendo Clic derecho en la carpeta Animación> Nueva capa de animación> Carpeta de cámara 2D
2. Inserte la carpeta de animación de todas las partes del personaje en la carpeta de la cámara
Animación del efecto de cámara 2D
1. Cierra la carpeta de tu cámara para ocultar otras capas. Esto hace que su línea de tiempo sea más fácil de ver.
2. Agregar fotogramas clave en el primer y último fotograma
3. Reduzca la escala del marco del efecto de la cámara para lograr el efecto de acercamiento
¡El resultado esperado debería verse así!
Se siente un poco picante, ¿no? pero esto no es lo suficientemente picante, ¡agreguemos más especias! 😤
4. Agregue fondo agregando una nueva carpeta de animación debajo de la carpeta de la cámara
5. Seleccione la capa de fondo > Nueva celda de animación
6. Agregar figura/forma negra en la capa de fondo
7. Habilitar fotogramas clave en la capa de fondo
8. Agregue fotogramas clave en el primer y último fotograma de la capa
9. Seleccione el primer fotograma clave y baje su opacidad a 0.
¡El resultado esperado debería verse así!
Ya se ve aún mejor, ¿no crees? ¡Pero tengo un toque final más!
1. Cree una nueva carpeta de animación en la parte superior de la carpeta de la cámara y llámela Primer plano
2. Crea una nueva celda de animación. Agrega una forma negra de 1/4 al lienzo, cubriendo una parte de los dibujos de tus personajes. Duplica la carpeta de animación de primer plano y mueve el duplicado a la parte inferior del lienzo. Entonces ahora tienes 2 capas de primer plano diferentes encima de la capa de la cámara.
3. Habilitar fotograma clave en ambas capas
4. Agregue un nuevo fotograma clave en el primer y último fotograma de ambas capas
5. Seleccione el primer plano negro superior, luego seleccione el primer fotograma clave, cambie la forma negra para que quede fuera de la parte superior del lienzo.
6. Seleccione el primer plano negro inferior, luego seleccione el primer fotograma clave, cambie la forma negra para que quede fuera de la parte inferior del lienzo.
El primer cuadro se vería así
Aquí está el resultado!!! ✨
¡Y aquí hay otro resultado que hice usando todas las técnicas de animación que hemos cubierto hasta ahora! ¿Puedes decirme qué y dónde los uso todos? 👀
¡SUBIÓ DE NIVEL! ¡FELICIDADES! ✨
¡Has logrado completar Animación de piezas y Animación de imagen estática!
¡Al llegar hasta aquí, has demostrado que tienes un potencial increíble cuando se trata de animar emoticones! ¡Estoy orgulloso de ti! 🥹 💖
Tercer consejo: animación fotograma a fotograma
Introducción
Antes de sumergirnos en nuestro viaje de animación cuadro por cuadro, es importante repasar algunos términos y conceptos fundamentales. ¡Esto asegurará que todos tengamos una comprensión clara y estemos en la misma página a medida que avanzamos!
¿Qué es la animación cuadro por cuadro?
En comparación con las técnicas anteriores en las que cambiábamos principalmente fondos y partes del personaje para mostrar movimiento, la animación cuadro por cuadro nos permite ilustrar cada acción de nuestro personaje en detalle.
Echa un vistazo a la imagen de arriba.
Notarás al personaje saltando de un punto a otro.
Cada fase de ese salto está representada por una imagen única, que captura cada matiz del movimiento. ¡Esta es la esencia de dibujar cada movimiento paso a paso!
Marco
Una sola imagen en una secuencia de imágenes. Como una sola foto en un álbum.
Cuadro por segundo (FPS)
Cuántos fotogramas (o imágenes) se muestran en un solo segundo. Por ejemplo, si tienes 24 FPS en tu animación, significa que hay 24 fotogramas por segundo para que la acción parezca fluida.
Fotograma clave y intermedio
Fotogramas clave Estos son los fotogramas principales o 'puntos clave' de tu animación. Definen los puntos inicial y final de cualquier transición suave. Usando el ejemplo del lanzamiento de una pelota, que se muestra en la imagen de arriba, los fotogramas clave serían el lanzamiento inicial, el punto más alto y el momento en que aterriza.
En el medio, Este es el proceso de dibujar los fotogramas que existen entre los fotogramas clave para suavizar el movimiento. Para nuestra pelota, son los fotogramas los que muestran el ascenso y la caída entre esos tres puntos principales.
¡Más espacios intermedios significan más fotogramas y una animación más fluida!
Gestos animados con fotograma a fotograma
Aunque crear emoticones cuadro por cuadro lleva más tiempo, vale la pena para los emoticones animados. No es necesario que sean tan detalladas ni largas como las animaciones normales. ¡Mientras muestren la emoción, hacen su trabajo!
Analizar cada detalle de la técnica fotograma a fotograma llevaría mucho tiempo. Hay mucho que cubrir, como los 12 principios de animación y cómo hacer una buena escena. Eso haría que este artículo fuera muy largo y podría ser demasiado. Hablaremos de esos otros detalles más adelante en un artículo diferente. 😉
¡Por ahora, centrémonos en hacer esos gestos animados con la técnica cuadro por cuadro!
Que vamos a hacer
Antes de sumergirnos en el proceso de creación de emoticones mediante la técnica cuadro por cuadro, ¡esto es lo que vamos a hacer! (Creo)
1. Configurar el espacio de trabajo
Preparando nuestro lienzo de animación.
2. Bocetos y sincronización
Planificando nuestra animación a través de bocetos y estableciendo el timing adecuado.
3. Arte lineal
Convirtiendo esos bocetos en líneas limpias.
4. Coloración y renderizado
Agregar colores y darle un aspecto pulido.
5. Toque final
Umm… eso ya lo veremos luego jeje 😋
1. Configurar el espacio de trabajo
Configurar el lienzo de animación
Si ha seguido los pasos de nuestros consejos anteriores, sabrá que estamos utilizando el mismo espacio de trabajo para esta técnica. Sin embargo, si has saltado directamente a esta sección o necesitas un repaso, ¡déjame hacerte un resumen rápido!
1. Abre tu Clip Studio Paint, luego abre Archivo > Nuevo
2. Seleccione Animación en la pestaña Proyecto y configure el ajuste preestablecido de animación de esta manera:
3. Haga clic en Aceptar
4. Si tu Línea de tiempo no se muestra, abre Ventana > Línea de tiempo
Configurar la capa de animación
Cuando crea un nuevo lienzo, se agrega automáticamente una capa de animación y se le asigna un nombre. Es una buena idea cambiar el nombre de esta capa para reflejar su propósito. Por ejemplo, si está dibujando su animación en esa capa, puede cambiarle el nombre a "Capa de boceto".
¡Esto te dará una gran ventaja en la gestión de tu línea de tiempo de animación!
¡Y eso es! ¡Su espacio de trabajo está listo para realizar animaciones cuadro por cuadro!
Configurar la carpeta de capas
El uso de carpetas de capas es crucial en la animación cuadro por cuadro. Le permiten apilar varias capas dentro de una sola celda o cuadro de animación, manteniendo todo organizado y eficiente.
¡Aquí se explica cómo configurar esto!
1. Seleccione su capa de animación
2. Cree una nueva carpeta de capas en la paleta/panel de capas
3. Cree una nueva capa ráster y colóquela en el interior de la carpeta de capas.
4. Asigne celdas de carpeta de capas a su cuadro de animación
Nota: Cuando hayas asignado celdas de carpeta de capas a tus cuadros de animación, automáticamente duplicarán la cantidad de capas ráster dentro de esa carpeta. Entonces, si el Cuadro 1 tiene una carpeta de capas con 2 capas ráster, cuando agregue un nuevo cuadro como el Cuadro 2, también tendrá 2 capas ráster, reflejando el Cuadro 1.
Activar la piel de cebolla
Esta herramienta le permitirá ver y hacer referencia a fotogramas anteriores y posteriores para lograr transiciones más suaves. Es similar a superponer capas de pieles de cebolla translúcidas, proporcionando una imagen "fantasma" de fotogramas adyacentes para guiar el trabajo del animador.
Puedes activarlo simplemente activando el botón de piel de cebolla en la paleta de la línea de tiempo.
2. Bocetos y sincronización
Dibujando
También conocida como 'Animación aproximada', consiste en dibujar movimientos básicos de personajes o cosas. Estos sencillos dibujos muestran las acciones principales sin miradas detalladas. Nos ayudan a tener una idea y planificar el movimiento.
Momento
El tiempo en la animación se trata de cuántos fotogramas se utilizan para cada movimiento para que se sienta bien. Ayuda a mostrar cosas como qué tan rápido o pesado es algo.
Si has seguido mis consejos de animación de partes e imágenes estáticas, ¡básicamente lo has hecho al ajustar el fotograma clave!
Paso 0: concepto de gestos
Antes de empezar a dibujar, piensa en el gesto que quieres hacer. Pregúntese:
1. ¿Qué sentimiento o expresión quieres mostrar?
2. ¿Cómo se moverá? ¿Cómo empezará y terminará?
En mi caso, haré un emote rápido y sencillo para que lo entiendas, que es:
1. Quiero que mi personaje guiñe un ojo
2. Pasará de una sonrisa 🙂 a un guiño 😉 .
Comprender claramente su objetivo mejorará tanto la calidad como la velocidad de su animación. ¡Es importante saber a qué apuntas!
Paso 1: Crear capa y celda de animación
1. Crear una nueva carpeta/capa de animación
2. Cambie el nombre de la capa de animación a "Sketch"
3. Agregar nuevas celdas/fotogramas de animación
Nota:
1. Realice este paso cada vez que desee dibujar nuevos fotogramas para su animación.
2. También puedes usar la carpeta de capas si quieres.
Paso 2: ¡Dibujar!
Ya que estamos en la fase de boceto, ¡siéntete libre de experimentar en tu lienzo y explorar diferentes ideas! Tal vez encuentres una mejor pose para tu personaje o lo que sea 😎
Nota: Normalmente uso el G-Pen para dibujar, dibujar líneas y colorear. ¡Pero elige la herramienta con la que te sientas más cómodo!
Resumen de bocetos
Por cada cambio en la expresión o pose del personaje, agregar una pose principal adicional u otro fotograma clave ayuda a que la transición del personaje sea más fluida. Entonces, en mi caso de animación, agregaré 1 fotograma clave más entre el personaje que sonríe y guiña un ojo 😗
Aquí algunos bocetos rápidos y mapeo de tiempo de la animación:
Como puedes ver en la imagen de arriba, ahora tengo 3 fotogramas clave que son:
1. Sonriendo - Postura inicial
2. Aviso: Transición de la postura K1 a K3
3. Guiño - Postura final
¡Más adelante agregaremos algunos fotogramas intermedios (IB) para un movimiento más suave de nuestro personaje al cambiar los fotogramas clave!
Dibujar fotograma clave
Comencemos a dibujar nuestro fotograma clave principal siguiendo estos 2 sencillos pasos:
1. Dibuja la pose inicial de tu personaje en el primer cuadro (cuadro 1)
2. Dibuja la pose de tu personaje de transición en el cuadro central (cuadro 12)
3. Dibuja la pose final de tu personaje en el último cuadro (cuadro 24)
Nota: Esto es opcional, pero puedes cambiar el nombre de cada uno de tus fotogramas (en mi caso es K1, K2, K3) para obtener una línea de tiempo más organizada. ¡Bueno, es tu desición!
El resultado esperado debería ser así:
¿Te ves bien? 😉
Dibujando en el medio
Ahora agreguemos algunos fotogramas intermedios para que la transición entre fotogramas clave se vea perfecta haciendo lo siguiente:
1. Haz y dibuja cuadros intermedios para K1 y K2 en el medio entre ellos (cuadro 6) con la técnica de anticipación para generar impulso en el personaje antes de hacer la siguiente pose.
2. Haz y dibuja cuadros intermedios para K2 y K3 en el medio entre ellos (cuadro 18) con la técnica de Squash para generar impacto en el personaje al hacer el guiño después del mano a mano.
El resultado esperado sería así:
Como puede ver la animación preliminar que hacemos, todavía parece demasiado entrecortada para darla por terminada. Entonces, para resolver esto, necesitamos agregar más cuadros intermedios, ¡entre cuadros intermedios que hemos creado! (¿entendido?) 😇
¡Añadiendo más en el medio!
Estos fotogramas intermedios adicionales difieren de los anteriores, que utilizaban técnicas de anticipación y squash. Para estos fotogramas, simplemente dibujaremos líneas que realicen una transición suave desde el fotograma clave al original intermedio.
1. Cree y dibuje fotogramas intermedios adicionales en medio de cada fotograma clave y el original intermedio. Etiquetemos cada extra intermedio con “e”
¡Aquí está el resultado esperado!
Velocidad actual
ralentizado
Esto es lo que sucede en cada fotograma 👀
El total de fotogramas que hemos dibujado son 9 fotogramas, que es:
1. 3x fotogramas clave/poses principales
2. 2x marco intermedio
3. 4x marco intermedio adicional
Si la animación aproximada te parece un poco extraña, es porque aún no hemos ajustado el tiempo. ¡El objetivo de esta etapa de dibujo es comprender cómo dibujar fotogramas clave e intermedios correctamente! ¡Así que no te preocupes más porque vamos a la parte del cronometraje! 😎
Nota: La parte del boceto no es el mejor movimiento de tu personaje. ¡Es posible que queramos eliminar algunos fotogramas innecesarios o agregar un nuevo fotograma cuando ajustemos el tiempo!
Paso 3: ¡Tiempo!
Ajustar el tiempo es la parte bastante difícil cuando se trata de animar cosas, ¡incluso para mí! Se necesita mucha práctica para conocer y sentir el mejor momento para tu animación porque cada movimiento diferente o pose diferente también requiere un tiempo diferente.
No puedes replicar este paso exactamente (a menos que estés usando mi personaje específico como referencia). En su lugar, confíe en sus instintos y ajuste el tiempo según su propia visión. ¡Ajusta el movimiento del personaje hasta que se sienta perfecto!
A continuación se incluyen algunos consejos que puedes seguir para ayudarte a encontrar el momento adecuado para tus gestos:
1. Determina la velocidad de los movimientos de tu personaje.
-Si el movimiento va de lento a rápido, coloque los marcos más juntos.
-Si el movimiento va de rápido a lento, espacie los fotogramas un poco más.
2. Cambia, elimina o incluso agrega un nuevo cuadro si el movimiento de tu personaje no te parece correcto.
Porque estoy haciendo este tutorial al mismo tiempo que hago la animación y el dibujo. Tengo algunos marcos innecesarios que debo eliminar y algunos marcos que agregar.
Nota: Tener demasiados o muy pocos fotogramas puede afectar negativamente el flujo y la claridad de la animación.
Aquí está mi línea de tiempo con tiempos ajustados y modificando algunos fotogramas.
Aquí hay una ilustración del marco que eliminé y agregué.
1. Como puede ver en la imagen de arriba, eliminé 3 fotogramas innecesarios, que son:
1. e2
2. e3
3. e4
Eliminé este cuadro porque interrumpía el flujo natural del movimiento de mi personaje. Es fundamental revisar cuidadosamente cada cuadro de la animación para identificar y eliminar cualquiera que pueda causar inconsistencias o hacer que el movimiento parezca poco natural.
2. ¡Agregué fotogramas K22 y K33 a la línea de tiempo!
pero ¿por qué tiene el mismo aspecto con K2 y K3? es porque simplemente dupliqué esos cuadros para crear un efecto de superposición y rebote estirando el dibujo duplicado de esta manera:
Seleccione el fotograma que desee estirar > CTRL Shift T para ingresar al modo de transformación libre > Seleccione el nodo superior y estírelo ligeramente hacia arriba
Efecto de superposición
En la imagen de arriba, puedes ver cómo el marco hace que el personaje se superponga durante el movimiento de "cabeza arriba". ¡Esto exagera el movimiento, haciéndolo más dramático!
efecto rebote
Después del gesto de "cabeza arriba", notarás que cuando mi personaje mueve rápidamente la cabeza hacia abajo, se crea un efecto de rebote cuando guiña un ojo. ¡Esto añade dinamismo a la animación!
¡Y aquí está el resultado final!
Antes
(Movimiento tonto ahh 💀)
Después
(Finalmente un movimiento real 😎)
Paso 4: descansa y admira tu animación aproximada ✨
¡Oficialmente has terminado con el paso de dibujar y cronometrar! ¡Bien hecho! ✨
¡Por supuesto que aún no ha terminado! ¡Necesitamos que se vea mejor poniendo algunas líneas suaves y agregando lindos colores para hacer emoticones adecuados!
¿Por qué no te tomas tu tiempo para admirar y revisar tu boceto animado completo?
Como lo hice ahora mismo 🥹🥹🥹
3. Arte lineal
Ahora que hemos logrado el movimiento deseado durante la fase de boceto y sincronización, ¡es hora de refinar nuestra animación con líneas suaves y precisas!
Paso 1: configurar la capa de animación
1. Reduzca la opacidad de la capa de animación del boceto a 30
2. Cree una nueva capa de animación encima de la capa de boceto y cámbiele el nombre a Lineart
3. Crear una nueva carpeta de capas en la capa de animación lineal
4. Asigne las celdas de la carpeta de capas al cuadro de animación
Ahora que has terminado de configurar tu capa de animación para lineart, ¡vamos al siguiente paso!
Paso 2: hacer el lineart
Después de configurar la capa de animación, ¡dibujemos nuestro lineal en ella!
A continuación se ofrecen algunos consejos que pueden ayudarle durante el proceso:
Herramientas:
1. Seleccione sus herramientas de lápiz o pincel preferidas que se ajusten a sus estilos de dibujo (que siempre usa en su dibujo). En mi caso uso G-Pen.
3. ¡Asegúrate de tener un tamaño de bolígrafo o pincel consistente!
4. Habilitar el estabilizador en tu lápiz te ayudará dramáticamente a la hora de trazar tu línea.
5. Agregue más capas rasterizadas a su carpeta de capas, para que pueda dibujar las partes de su personaje por separado
6. Utilice las herramientas de transformación para cambiar la posición, la forma, etc. de su dibujo.
Consejos:
1. Utilice trazos largos y continuos para una apariencia más suave y segura en lugar de trazos cortos y entrecortados.
2. Tómese descansos, aléjese periódicamente para ver la imagen general y asegúrese de que todo sea proporcionado y coherente.
3. TENGA PACENCIA. Si una línea no se ve bien, no dude en deshacerla y volver a intentarlo. Esfuércese por conseguir la mejor calidad, aunque sean necesarios varios intentos.
4. Limpia cualquier línea superpuesta o imperfección una vez que hayas terminado para darle un aspecto pulido a tu animación.
5. Siéntete libre de personalizar las poses de los personajes y agregar fotogramas a la animación.
6. Vea el progreso de su arte lineal limpio activando y desactivando la visibilidad de la capa de boceto.
Y eso es todo por los consejos de lineart que puedo darte ahora mismo.
¡Buena suerte y diviértete haciendo el lineart! 😘
¡Aquí está la versión lineal de mi personaje!
Paso 3: Descansa y admira la versión lineal de tu animación ✨
¡Has terminado oficialmente con Lineart! ¡Fantástico! ✨
¡Buen trabajo al llegar hasta aquí en nuestro viaje de emoticones animados! Dibujar, ajustar el tiempo y perfeccionar el arte lineal pueden ser los aspectos más desafiantes de la animación. Ahora que esos pasos quedaron atrás, podemos sumergirnos en la parte divertida: ¡colorear! ¡Démosle vida a esos dibujos!🤩
Pero antes de eso, ¿por qué no te tomas tu tiempo nuevamente para admirar y revisar tu boceto animado completo?
Como lo hice ahora (otra vez) 🥹🥹🥹
4. Colorear y renderizar
La forma en que coloreamos y representamos nuestros dibujos en animación depende de la complejidad del dibujo en sí. Sin embargo, dado que estamos animando emoticones que tienen un diseño simple y solo unos pocos cuadros para colorear, ¡esta parte debería ser la más divertida y fácil!
Paso 1: configurar la capa de animación
1. Cree una nueva capa de animación debajo de la capa Lineart y cámbiele el nombre a Color
2. Cree una nueva carpeta de capas en la capa de animación en color
3. Asigne las celdas de la carpeta de capas al cuadro de animación
Ahora que has terminado de configurar la capa de animación para el color, ¡vamos al siguiente paso!
Paso 2: Color base
En esta parte del paso de colorear, usaremos Herramienta de relleno para el color base de nuestra animación. Hay 2 formas de hacer el color base:
Primera forma: usando la herramienta Relleno
1. Asegúrate de haber seleccionado tu capa de color y marco.
2. Seleccione Herramienta de relleno en la barra de herramientas
3. En la configuración de la herramienta de relleno, elija "Hacer referencia a otras capas".
Esto le permite usar la herramienta de relleno según los límites de una capa activa diferente.
4. Selecciona tu color preferido
5. Usa la herramienta de relleno para colorear tu lienzo.
6. ¡Hecho!
Segunda forma: usando la herramienta Lazo
1. Asegúrate de haber seleccionado tu capa de color y marco.
2. Seleccione Área de selección en la barra de herramientas
3. Elija Lazo
4. Selecciona tu color preferido
5. Utilice la herramienta Lazo para dibujar y seleccionar el área específica de su lienzo que desea llenar de color.
6. Aparecerá una ventana emergente, luego seleccione el ícono del cubo de pintura (o el ícono de Relleno)
¡Y así es como poner color base en tu animación! ¡Todo lo que tienes que hacer ahora es repetir el mismo proceso para cada cuadro que hagas!
¡Aquí está mi personaje con el color base!
¡Podemos ver a nuestro personaje claramente cuando terminemos este paso!
¡Pasemos al siguiente!
Paso 3: renderizar
El paso de renderizado incluye agregar colores secundarios, sombreados y resaltados. Estas son las cosas que debes hacer:
Línea de sombra
Dibujar líneas de sombra para cada fotograma clave garantiza un sombreado consistente y preciso durante el proceso de renderizado. Significa que será el borde cuando apliques color a tu capa de renderizado. He aquí cómo hacerlo:
1. Crea una nueva capa de animación sobre el dibujo lineal de tu personaje y llámala Línea de sombra
2. Dibuja la línea de sombra de tu personaje en cada cuadro. (use un color de contraste para una mejor vista)
Nota: También puedes implementar esto en otras cosas, como para resaltar tu personaje.
Aquí está esa línea de sombra cuando se implementó en mi personaje ✨
Debido a que mi personaje es un limo, ¡necesito hacer que la línea de sombra sea bastante diferente de otros diseños de personajes! (Como si la sombra estuviera en el interior de su cuerpo)
Representación
Ahora podemos comenzar nuestro proceso de renderizado, siguiendo estos pasos:
1. Cree una nueva capa de animación debajo de la capa de línea de sombra y asígnele el nombre Renderizar.
2. Agregue una nueva carpeta de capas y asígnela al marco de la capa de renderizado
3. Seleccione la capa Renderizar, luego coloree el área de sombra con la herramienta de Relleno
(Asegúrese de que la opción de la herramienta Relleno sea "Referir otras capas")
4. Hazlo para cada cuadro.
5. Si ha terminado de usar la línea de sombra, puede desactivar el botón de visibilidad o eliminarlo si es necesario.
¡Voilá! ¡Aquí está el resultado final de nuestra animación!
¡Podemos darlo por hecho ya! Pero como mencioné anteriormente en la primera página de Animación cuadro por cuadro, ¡agregaremos algunos toques finales! 😎
5. Toque final
El toque final puede variar; ¡Puedes mejorar tu animación agregando efectos especiales, un fondo o cualquier otro elemento que creas que elevará tu pieza animada!
¡Aquí está el toque final de mis gestos animados con efecto de brillo! ✨
¡NIVEL MÁXIMO ADQUIRIDO! ¡FELICIDADES! ✨
¡Has dominado el arte de la animación fotograma a fotograma al crear gestos animados! Con este logro en su haber, ahora está listo para embarcarse en nuevos viajes creativos y perfeccionar aún más sus habilidades. ¡El mundo de la animación espera ansiosamente tu próxima obra maestra! 🚀
Exportar tus gestos animados
Después de haber viajado conmigo a través de las distintas etapas de la creación de emoticones animados, has adquirido algo más que habilidades. ¡Como recuerdo, llévate los gestos animados que creamos juntos! Después de todo, es un testimonio de su arduo trabajo y dedicación. ¡Disfrutar! 🌟
Cómo reclamar tu gesto animado:
1. Ajuste el cuadro de punto inicial y final de su animación preferida
2. Abra Archivo > Exportar > Animación > GIF animado…
3. Seleccione la carpeta de destino donde le gustaría almacenar sus gestos animados.
Aparecerá una ventana emergente que le permitirá modificar la configuración de exportación:
1. Ancho y alto, el tamaño de tus gestos animados en píxeles
2. Rango de exportación, cuánto fotograma desea exportar
3. Velocidad de cuadros, configurada al máximo (24 FPS)
4. Exportar con tramado o fondo transparente depende de usted
5. DE ACUERDO
¡Siiii! ¡Has reclamado tus gestos animados! ✨
Pin de dominio de la animación
Ahora que tienes tu recuerdo por hacer el arduo trabajo de animar conmigo, ¿por qué no vas a buscar algo de tu título aquí? ¿Cuál obtienes? 👀
Clausura
Mi viaje para compartir mis experiencias con emoticones animados ha llegado a su fin. Ha sido un placer guiarlo a través del proceso y realmente espero que lo haya encontrado esclarecedor. 🥺 💖
Mientras te embarcas en tus propias aventuras de animación, recuerda siempre mantener la curiosidad, practicar con frecuencia y, lo más importante, ¡disfrutar el proceso! Te deseo la mejor de las suertes en todos tus esfuerzos creativos.
¡Hasta la proxima vez! ✨ ✨ ✨
Usuarios a los que les gustó esta publicación
Comentario