Aprenda a animar su obra de arte existente utilizando fotogramas clave

Dibujé este perro como mascota para un videojuego:

Y nos gustó lo suficiente como para querer usarlo de manera más prominente. Queríamos poder agregar algo de animación.

 

Así que pasé unos 45 minutos y corté cada parte que estaba destinada a moverse. Guardé cada parte del cuerpo en su propia capa, y en áreas como la parte superior de la cabeza, el cuello y las rodillas, llené los espacios que faltaban. Se veía así:

Luego arrastré todas las capas a su lugar, activé una línea de tiempo, probé fotogramas clave y terminé con esta animación:

Bastante agradable, pero no tan útil para lo que estábamos haciendo. Pero hice una animación más complicada para hacerlo parte de nuestras notificaciones de la interfaz de usuario.

 

Esta próxima animación usa menos piezas, pero un movimiento más exagerado y un poco de intercambio de primer plano / fondo. Así que es una gran pieza para enseñar:

Animación con fotogramas clave en Clip Studio Paint

Paso 1: Configurarlo

Si está trabajando en un personaje que ya ha dibujado, no se preocupe por crear un nuevo archivo de animación. Puede utilizar su lienzo existente. Haga una copia de seguridad de su lienzo original ... eso será para realizar cambios en su dibujo si lo desea. Luego haz el trabajo de cortar cada pieza móvil y darle una capa. Completa las formas que faltan. Simplifique sus capas, eliminando todo lo que no sea una parte importante de la animación.

 

Configurar carpetas para una animación más rápida y sencilla:

 

Crea una carpeta llamada "Perro" (o "Tu personaje").

Pon cada pieza de tu personaje en él.

Dentro de la carpeta "Perro", cree una carpeta llamada "Cabeza".

Ponga todas las piezas que estén conectadas a la cabeza en él. (En mi caso, eso fue "Nariz", "Sombrero", "Orejas" y "Cabeza".

Dentro de la carpeta "Perro", crea otra carpeta llamada "Cuerpo".

Ponga todas las partes del cuerpo restantes en eso.

Tus carpetas deberían verse así:

Habilite la ventana Línea de tiempo.

Haga clic en "Nueva línea de tiempo".

(Si está usando Clip Studio Pro, solo obtiene 24 cuadros como máximo. Es un gran número para practicar. Mi animación es de 1 segundo de duración, por lo que usé el estándar de la industria de 24 cuadros por segundo. Si desea un entretenido, 2 -segunda animación, haz que sea de 12 cuadros por segundo. O 6 fps, para una animación realmente entrecortada de 4 segundos de duración).

 

Su línea de tiempo debería llenarse automáticamente con todas sus carpetas y capas, y tener controles azules alrededor de una sección de animación de 24 cuadros.

 

(La línea de tiempo también tiene "Carpetas de animación". No use carpetas de animación para este tutorial. Son geniales y útiles, pero aquí serán confusas).

 

Seleccione la carpeta "Perro", luego haga clic en "Habilitar fotogramas clave en esta capa" en la ventana de la línea de tiempo:

(Lo que hemos hecho es convertir cada parte del perro en una celda de fotograma clave. Si necesita hacer una corrección de dibujo en cualquier pieza ahora, debe volver a esta carpeta de perro y hacer clic en el icono "habilitar fotogramas clave" nuevamente. Con fotogramas clave habilitado, los pinceles artísticos no funcionan).

 

Con los fotogramas clave habilitados, trabajará exclusivamente con la herramienta Objeto:

¡Ahora estamos listos para animar!

Paso 2: hacer que se mueva

Con el primer fotograma seleccionado en la línea de tiempo, seleccione su carpeta "Head".

 

Haga clic en el icono "Agregar fotograma clave" en la parte superior de la ventana de la línea de tiempo. Aparece un diamante en la línea de tiempo y aparecen tiradores azules alrededor del lienzo.

 

Arrastre el centro de rotación desde el centro del lienzo hasta el punto donde la cabeza se encuentra con el cuello. (Es el signo + pequeño. Si no lo ve, asegúrese de que está utilizando la herramienta "Objeto").

 

Pruebe la rotación moviendo el cursor justo fuera del borde azul, donde cambia a un icono de "rotación". Hacer clic y arrastrar. Si la cabeza asiente de forma natural, está bien.

 

(Si la cabeza gira, pero las orejas y el sombrero permanecen estacionarios, ha seleccionado la capa de dibujo "Cabeza").

 

Gire la cabeza a una posición hacia abajo.

 

Haga clic en la línea de tiempo aproximadamente en el cuadro 6.

 

Gire la cabeza a una posición hacia arriba. Un fotograma clave se crea automáticamente cada vez que realiza una modificación.

 

Pulsa el botón "Reproducir" en la línea de tiempo para probar.

 

Haga clic en la línea de tiempo aproximadamente en el fotograma 12.

 

Gire la cabeza a una posición ligeramente hacia abajo.

 

Haga clic en la línea de tiempo aproximadamente en el fotograma 16. Gire la cabeza ligeramente hacia arriba.

 

Haga clic en la línea de tiempo aproximadamente en el fotograma 20. Gire la cabeza hacia su posición natural.

 

Presione el botón "Reproducir" para probar.

 

Pase al sombrero y repita todos estos pasos.

 

Muévase a las orejas y la nariz. Rotar, probar, avanzar.

 

 

Necesitaremos un nuevo brazo para el perro, uno que pueda descansar naturalmente sobre el letrero. Dibujarlo, ya sea en un lienzo diferente o en este lienzo después de deshabilitar fotogramas clave. También necesitaremos una manga de camisa dibujada en el ángulo correcto:

Podrías dibujar estos dos elementos juntos en una capa, pero quería obtener un toque extra de movimiento de la manga.

 

Eliminé el otro brazo, el que tenía la mano escondida en el bolsillo, y lo reemplacé con este. Me quedé con la manga de la camisa anterior, dejándome con 2 imágenes de mangas de camisa. Esta sería una oportunidad perfecta para una carpeta de animación, pero en cambio, le mostraré cómo hacer intercambios de dibujos simples sin ellos.

 

Anime el hombro del perro moviéndose hacia arriba para demostrar que está comenzando a levantar el brazo.

 

En el fotograma donde el hombro es más alto, arrastre el controlador en la parte superior de esa única pista de animación de derecha a izquierda. (Para mí, es el cuadro n. ° 5. Esto hace que toda la capa solo aparezca hasta el cuadro n. ° 5, cuando desaparece).

En la pista de animación con la nueva manga de la camisa, arrastre la manija opuesta para que la nueva manga de la camisa aparezca cuando la anterior desaparezca.

Paso 3: Pasar del fondo al primer plano

Hemos mantenido visible nuestro letrero de notificación todo este tiempo, solo para tener una referencia de buen tamaño a mano. Ahora mueva esa capa a la parte superior de las ventanas de capas. Esto debería cubrir parte del perro.

 

Cree y mueva fotogramas clave en la carpeta "Perro", para que aparezca sobre el letrero como un objeto completo.

 

Duplica la capa de señal de notificación.

 

Mueva la copia de la capa del letrero hacia abajo, de modo que quede justo debajo de las capas del brazo y la manga.

 

Mueva la manija en la pista de animación como lo hizo con la manga de la camisa, de modo que la copia del letrero solo aparezca cuando el brazo esté levantado y la carpeta "Perro" haya dejado de moverse.

 

Haz lo mismo con el letrero original, para que desaparezca cuando aparezca la copia.

 

Mueva la copia del letrero al mismo espacio que el letrero original. Así terminaron mis capas:

Para el fotograma final que aparece detrás de la cabeza del perro, cree fotogramas clave como lo ha estado haciendo, luego:

 

Agarre el controlador más a la izquierda y utilícelo para escalar la capa hasta que sea invisible. (Si la imagen se encoge en lugar de aplanarse, haga clic en el signo + junto a "Transformar" en Propiedades de la herramienta de objeto, luego desmarque "Mantener relación de aspecto".

 

Avanza en la línea de tiempo y vuelve a escalarla a su apariencia normal.

 

Agregue algunos fotogramas clave más para animar el movimiento y darle un poco de rebote.

Efectos especiales de bonificación!

Realmente me gustan algunos de los efectos que puede lograr con propiedades de capa y capas de recorte. Dado que la mayoría de nuestras piezas ya están en carpetas, son fáciles de aplicar.

 

Para obtener un borde limpio, de estilo art-nouveau, agregué una carpeta y solté la capa de signo y la carpeta "Perro" en ella. Luego habilité el efecto de borde en las propiedades de la capa:

¡Consejos adicionales sobre animaciones de paseo con fotogramas clave!

Los ciclos de caminata pueden ser bastante desafiantes. A continuación se ofrecen algunos consejos:

 

Copie su primer fotograma clave en la última posición de su ciclo. Haz esto en cada capa.

 

Primero, anima los pies.

 

Los hombros giran en sentido opuesto a las caderas. Entonces, el brazo derecho se mueve hacia adelante con la pierna izquierda, el brazo izquierdo se mueve hacia adelante con la pierna derecha.

 

Codifique con colores las capas de primer plano y de fondo para que pueda encontrarlas rápidamente.

Y aquí está todo el espacio de trabajo en acción. Hágalo en pantalla completa para ver bien las capas y la ubicación de los fotogramas clave:

No sé ustedes, pero para mí, ver a los personajes cobrar vida es emocionante. Espero que este tutorial te ayude a superar los mismos obstáculos que me causaron tantos problemas cuando estaba aprendiendo. Si tiene preguntas, hágalas en los comentarios ... mientras estaba creando esto, seguí pensando en todas las cosas diferentes que podrían salir mal y causar confusión, pero no quería desviarme del tema.