Tutorial de animación vectorial con Clip Studio Paint EX

27 494

easyQuiet

easyQuiet

1. Sobre este curso

La animación digital ha despegado como una tendencia importante en los últimos años, ya sea en un entorno comercial o como un hobby. En este curso, haremos una descripción general de las herramientas de animación y la interfaz de usuario de Clip Studio Paint EX, luego iremos al proceso para crear una animación.

2. Crear una nueva descripción de animación

Crear un lienzo:

  • Después de crear un nuevo lienzo en Clip Studio Paint EX, primero haga clic en la opción "animación" en "Uso del trabajo".

 

  • En "Nombre de archivo", puede nombrar su archivo.
  • En "Preset", puede elegir entre una lista de tamaños predeterminados para trabajar.

  • También puede guardar sus propios ajustes preestablecidos presionando el icono de guardar al lado del menú desplegable. Esto le permitirá volver fácilmente a sus opciones guardadas en el futuro.

  • En "Unidad", puede determinar con qué unidades desea trabajar desde centímetros, milímetros, pulgadas, píxeles y puntos.

-Principalmente uso píxeles (px), y los usaré para este tutorial.

Determine el tamaño de su marco de referencia:

  • Aquí puede establecer las dimensiones del marco de referencia (la línea azul). Recomiendo investigar las dimensiones de tamaño recomendadas de la plataforma en la que planea cargar porque las dimensiones de tamaño difieren entre las diferentes plataformas para compartir videos (y cambian constantemente con las actualizaciones).

 

Por ejemplo, a la fecha (8 de agosto de 2019):

  • YouTube: cualquier cosa con una relación de 16: 9 (1920x1080, 1280x720, etc.)

  • Instagram: se recomienda una relación de aspecto 1: 1 (1080x1080) para el cuadrado o una relación 1.91: 1 (1080x608) para el paisaje, pero puede llegar hasta 16: 9

  • Twitter: relación de aspecto 16: 9 (1280x720 es lo que recomiendan)

 

-En cuanto a la resolución, tenga en cuenta que aunque usaremos una capa vectorial más adelante, deberá asegurarse de que su resolución sea superior a al menos 150 píxeles; de lo contrario, sus líneas vectoriales se verán pixeladas. Se recomienda configurar la resolución ahora.

 

-Por lo general, tengo mi resolución establecida en 600 px, pero realmente no la necesitas a esta altura.

Marco de efecto y tamaño de dibujo:

 

Marco de efecto:

  • Es probable que no necesite esto a menos que esté usando CSP para animación profesional (para TV / animación de funciones), pero es bueno tenerlo en cuenta.

 

-Esto básicamente establece las pautas para el área que definitivamente aparecerá en tu animación. Esto se hace porque no todas las pantallas de TV son del mismo tamaño, por lo que hay una zona de corte que podría no aparecer en ciertas pantallas. Establecer esta directriz ayuda a asegurarse de que no encuadre sus disparos de manera que se puedan cortar en diferentes pantallas.

 

Tamaño de dibujo:

  • Esto se refiere al tamaño del espacio en blanco adicional que pueda necesitar para su animación. Si está haciendo fondos de fondo verticales u horizontales o movimientos de pivote muy específicos de los personajes, es posible que desee que su lienzo se extienda más allá de la línea del marco de referencia. Por ejemplo, si está animando una caminata pero solo muestra los pies, a menudo es mejor animar la parte inferior del cuerpo fuera de la pantalla y mantener los pies en el límite de su marco de referencia para que su caminata tenga un punto de pivote preciso. Puede establecer el tamaño de su dibujo a una escala específica (es decir, 2x o 3x la escala de su tamaño de referencia) o por una altura y ancho específicos (en mi caso, por medidas de píxeles).

 

No voy a utilizar ninguna de estas opciones para mi animación, por lo que las dejaré sin marcar.

Espacio en blanco:

  • Esto se refiere al espacio en blanco alrededor del marco de referencia.

 

Información de la historia:

  • Si está trabajando en un proyecto de larga duración con varias escenas, se recomienda que organice sus archivos desde el principio. Esta sección es donde puede configurar su información de "historia", que puede ayudar con la organización de archivos y proyectos al tener un directorio de guardado específico y una convención de nomenclatura establecida desde el principio.

Configuración de línea de tiempo:

  • Aquí, puedes establecer la configuración de tu línea de tiempo

  • La velocidad de fotogramas hace referencia a la velocidad a la que se reproducen los fotogramas por segundo. En este caso, lo tengo configurado en 24, por lo que mi velocidad de cuadros será de 24 cuadros por segundo. Puede experimentar con esto, pero también debe consultar la plataforma en la que desea cargar su animación, ya que algunas plataformas de video tienen especificaciones para la velocidad de fotogramas (generalmente 24 fps funciona en la mayoría de las plataformas).

-El tiempo de reproducción se refiere al número de fotogramas en toda su línea de tiempo. Siempre puede cambiar este número más adelante si no tiene una longitud específica en mente en este momento.

 

-En el menú desplegable, tiene las opciones para configurar su número de fotograma. Esto solo se refiere a si desea que su cuadro inicial sea “1” o “0”. “Segundos + cuadros” configura la reproducción en cuadros y segundos incrementos, en lugar de solo cuadros. El "código de tiempo" establece la reproducción en minutos y segundos.

  • Estableceré el mío en "Número de fotograma (a partir de 1)".

 

  • Las escenas y tomas son un medio para organizar proyectos a gran escala. Recomiendo usar estas etiquetas para sus escenas y tomas si está trabajando con múltiplos de cada una. Esto solo entra en juego una vez que marca la casilla "Establecer el nombre de la línea de tiempo automáticamente".

  • En mi caso no lo necesito, así que dejaré ambos a la 1.

 

  • Las líneas divisorias son útiles cuando se trata de muchos cuadros. Básicamente, dibuja una línea hacia abajo de su marco entre los incrementos que elija.

  • En mi caso, lo configuré en seis, por lo que cada seis cuadros habrá una línea indicadora más oscura en mi línea de tiempo.

 

  • También tiene la opción de usar plantillas preestablecidas en las opciones de plantilla.

 

Así es como se ve mi configuración si desea copiar la mía:

Una vez que establezca su configuración en consecuencia, presione el botón "ok" en la esquina superior derecha para crear su archivo de animación.

3. Cronología / resumen de herramientas

Así es como se ve la línea de tiempo:

  • La barra roja indica el cuadro que está viendo / activado actualmente.

  • Las banderas azules indican su rango de cuadros. Tengo mi línea de tiempo establecida en 24 cuadros. Si desea ampliar la cantidad de fotogramas que se reproducirán, puede arrastrar la bandera azul más a la derecha para alargar su reproducción. También puede arrastrar para acortar su reproducción.

  • En el lado izquierdo, tiene un menú desplegable que muestra en qué línea de tiempo se encuentra. Debajo están tus carpetas de animación.

  • En la parte superior está la barra para tus herramientas de línea de tiempo.

 

Herramientas de línea de tiempo:

  • Comenzando desde la izquierda, los números 1/1/24 se refieren al cuadro actual / cuadro inicial / cuadro final.

  • Los dos botones de la línea de tiempo al lado son "Editar línea de tiempo" y "Nueva línea de tiempo".

 

  • El botón "Editar línea de tiempo" abre la pestaña de herramientas "Operación" en la barra de herramientas lateral.

 

  • Objeto (O): mueve cualquier objeto en la capa en la que se encuentra

  • Selección de capa (D): selecciona la capa para objetos específicos en el marco

  • Mesa de luz (L): mueve el lienzo

  • Editar línea de tiempo (L): se desplaza por los cuadros mientras presiona, mantiene presionado y arrastra hacia la izquierda o la derecha sobre el cuadro.

 

Recomiendo aprender las teclas de acceso rápido para obtener eficiencia. También puede cambiar la configuración de las teclas de acceso rápido para estos en Archivo> Configuración de acceso directo> Operación

 

  • El botón "Nueva línea de tiempo" abre un cuadro de diálogo para crear una nueva línea de tiempo. Puede hojear diferentes líneas de tiempo seleccionando el menú desplegable que muestra el nombre de su línea de tiempo.
  • Para eliminar una línea de tiempo, vaya a la barra de menú superior> animación> línea de tiempo> administrar línea de tiempo. En el cuadro de diálogo que se abre, seleccione la línea de tiempo que desea eliminar y haga clic en "Eliminar".
  • Las flechas son tus controles de reproducción. Puede saltar al principio o al último cuadro de su animación, recorrer cada cuadro uno por uno, reproducir su animación e incluso alternar la reproducción en bucle.
  • Nueva carpeta de animación: crea una nueva carpeta para guardar sus cuadros de animación.

  • Nueva celda de animación: crea una nueva "celda" en su línea de tiempo. Un cel es una capa dentro de su carpeta de animación en la que puede dibujar.

  • Especificar cel: asigna una celda ya creada a un área seleccionada en la línea de tiempo.

  • Eliminar cel especificada: elimina un fotograma seleccionado.

  • Onionskin: le permite ver el cel antes y después del que está viendo.

 

Ahora que conoce los conceptos básicos de estas herramientas, es hora de comenzar a animar.

 

4. Proceso de animación.

Storyboard:

-Comienza bloqueando las partes principales de tu historia. Estos serán cuadros fijos en forma de cómic que le darán una idea general del movimiento y la progresión de su animación. También establece el tiempo general durante esta fase. Puede usar cualquier pincel para esto, ya que el punto es ser áspero y rápido.

 

Método 1

Método 2

  • Puede hacer esto haciendo una serie de pequeños cuadros en una celda para obtener rápidamente una vista en miniatura de su animación (Método 1) o haciendo celdas separadas en su línea de tiempo para cada cuadro fijo (Método 2). Ambas técnicas funcionan bien, así que elige la que mejor se adapte a ti.

 

  • Si sigue con el Método 1, aún así tendría que crear celdas separadas en su línea de tiempo para cronometrar su pieza con precisión. Sin embargo, el beneficio es que puede mantener la coherencia en el encuadre de la toma al administrar varias escenas, pero en animaciones a pequeña escala como esta, simplemente puede comenzar haciendo celdas separadas.

 

  • Cuando cree un proyecto, tendrá una capa ya creada para el primer fotograma de forma predeterminada.

 

  • Como quiero que el primer fotograma de mi animación esté en blanco, crearé una nueva celda en otro fotograma.

  • Para crear una nueva celda, haga clic en un marco en su línea de tiempo. El marco se resaltará en rojo para indicar que está seleccionado. Luego presione el botón "Nueva animación cel" en su línea de tiempo.

 

  • Esto creará una nueva capa de animación debajo de la pestaña de capas. Tenga en cuenta que, aunque creé esta celda en el marco n. ° 3, no lleva el nombre del número de marco que seleccioné. Esta capa por defecto se llama "2". El nombre de la capa aparece en su línea de tiempo.
  • Para cambiar el nombre de una capa, haga doble clic en el nombre de la capa o haga clic con el botón derecho en la capa, vaya a la configuración de la capa y presione "Cambiar nombre de capa".
  • Comenzaré a dibujar el primer fotograma de mi guión gráfico. Puede dibujar directamente en cada capa de celdas que se crea con las herramientas pincel, lápiz o bolígrafo.

 

  • Si ya dibujó su guión gráfico, puede copiar y pegar sus dibujos en cada celda.

 

  • Tenga en cuenta que cuando utiliza la función pegar, no se pegará directamente en la celda (capa) que ha creado. En cambio, creará otra capa (en mi caso llamada "1a") que está atenuada.

  • Esto indica que la capa "1a" no aparece en su línea de tiempo porque no se ha asignado a un marco. De hecho, quiero que la capa "1a" esté en el lugar de la capa "2", por lo que para solucionar esto seleccionaré la capa llamada "2", la eliminaré y luego cambiaré el nombre de la capa "1a" a "2".

 

  • Su línea de tiempo registrará la nueva capa "2" y aparecerá en el lienzo.
  • Luego puede continuar haciendo esto por el resto de su guión gráfico. Cree nuevas celdas para cada cuadro que tenga un nuevo dibujo, y dibuje directamente sobre él o pegue su guión gráfico ya creado.
  • Ahora que tengo todos mis dibujos, puedo ajustar el tiempo general en el guión gráfico moviendo cada celda dentro de la línea de tiempo. Para hacer esto, primero expandiré la cantidad de marcos a los que tengo acceso.

 

  • Haga clic en la bandera azul en el lado derecho de su línea de tiempo y arrástrela más hacia la derecha.

 

  • Ahora puede ajustar sus celdas individuales usando el mismo método, presionando y manteniendo presionada cada celda, luego arrastrándola al marco deseado. Mantuve los nombres de mis celdas como dígitos numéricos porque es más fácil para mí registrarme, pero puedes nombrarlos como quieras.
  • También puede hacer clic derecho en un cuadro y asignarle un número de celda, en el caso de que desee que se repita un cuadro. Al final de mi animación, me gustaría repetir cel "1", por lo que asignaré la celda llamada "1" al último fotograma.
  • Tenga en cuenta que en la fase del guión gráfico solo debe dibujar las poses clave que cuentan su historia. Esto es si tiene cambios drásticos en sus disparos, solo tendrá un puñado de cuadros para cambiar. Aunque dependiendo de lo complicada que sea su animación, es posible que deba retroceder y agregar más cuadros intermedios para que su movimiento sea claro. En un entorno de producción, desea que su guión gráfico sea muy claro para que el animador que se hace cargo después de usted no esté confundido acerca de cómo animar la escena. Sin embargo, si solo está haciendo esto por sí mismo, puede hacerlo tan detallado como mejor le parezca, ya que de todos modos hará la animación aproximada.

 

  • Agregué algunos cuadros intermedios en mi guión gráfico. Mis cuadros intermedios se indican con una letra adicional que complementa el cuadro primario (es decir, "1a", "1b", etc.)

 

Este es el guión gráfico final para mi animación:

Animación aproximada / diseño:

  • Aquí es donde realmente animas tu pieza, agregando las teclas principales, así como los en medio. Esto seguirá siendo difícil, ya que pulirás el movimiento de tu animación aún más aquí.

 

  • El objetivo de esta fase es verificar sus principios básicos y si su movimiento fluye de la manera que lo desea. También es el mejor lugar para detectar cualquier gran error en la puesta en escena y otros errores antes de ser demasiado detallado.

  • Básicamente, agregará aún más cuadros intermedios y ajustará su sincronización a su mayor precisión. Después de esta fase, debe evitar hacer grandes cambios de tiempo en su animación.

 

Así es como se ve mi línea de tiempo:

 

Y aquí está mi animación aproximada:

Vector / Limpieza:

 

Para limpiar mi animación, estaré haciendo líneas vectoriales.

 

  • Cuando crea una animación en Clip Studio Paint, crea automáticamente una capa ráster (también conocida como mapa de bits). Por lo tanto, todo lo que dibuje en estas capas se representará en formato ráster.

 

  • Las imágenes ráster se muestran usando un número de cuadrados minúsculos conocidos como píxeles. Si se acerca lo suficiente, podrá ver todos los cuadrados pequeños que componen su dibujo. Este método de dibujo a menudo se usa al pintar, mezclar colores o al editar fotografías.

  • El vector, por otro lado, se basa en cálculos matemáticos que definen su imagen con líneas y polígonos. Vector mantiene sus líneas suaves y evita la pixelación al aumentar o disminuir el tamaño de su imagen. Los vectores también se crean a lo largo de una ruta, lo que le permite editar fácilmente sus líneas moviendo los puntos de anclaje a lo largo de la ruta de las líneas.

 

  • Antes de comenzar a crear una capa vectorial, primero debe asegurarse de que su resolución esté configurada correctamente. Si creó su lienzo con una resolución superior a 150 px, debería estar bien. De lo contrario, debe cambiar su resolución.

 

  • Vaya a Edición> Cambiar resolución de imagen.
  • Aparecerá una opción de diálogo que indica que “se eliminarán los marcos. ¿Quieres que continúes?
  • Se recomienda establecer la resolución correcta y la configuración del marco desde el principio para evitar esto.

  • Eliminar los marcos elimina la guía azul alrededor de su lienzo y evita que altere su marco de efecto y el tamaño del dibujo en la pestaña de propiedades de su lienzo.

  • En mi caso, no tener estas opciones no plantea un problema, pero definitivamente se recomienda elegir correctamente la resolución desde el principio.

 

  • Tengo mi resolución establecida en 600 px como preferencia personal. Solo necesita que sea superior a 150 px.

 

  • Ahora que ha cambiado su resolución, puede crear una capa vectorial

  • Primero cree una nueva carpeta de animación presionando el botón "Nueva carpeta de animación" en la línea de tiempo.

 

  • Luego, en las opciones de capa, agregue una "Nueva capa de vector" debajo de la nueva carpeta de animación que creó.
  • Ahora puede entrar y rastrear cuidadosamente y "limpiar" su animación aproximada. A menos que esté tomando una decisión estilística, asegúrese de cerrar todos los espacios con sus líneas, ya que esto facilitará agregar color.

 

  • Usaré la herramienta de lápiz para esto porque quiero líneas definidas y limpias.

 

  • Al usar líneas vectoriales, puede modificarlas usando la herramienta de línea correcta (Atajo de teclado: Y) en su barra de herramientas. Esto ayudará a asegurarse de que sus líneas estén limpias y sean precisas para su dibujo preliminar.

Entonces tendrás algo como esto:

Agregar color:

 

  • Si desea agregar color a su animación, debe crear otra “Nueva carpeta de animación” desde su línea de tiempo. Luego, en las opciones de capa, agregue una "Nueva capa ráster".
  • Elija su herramienta de cubo de pintura de la barra de herramientas lateral y haga clic en "Referir otras capas".
  • Esto le permitirá completar sus líneas mientras hace referencia a su capa vectorial. Tienes la opción de seguir creando nuevas capas de animación para cada color, o simplemente poner todo tu color en una capa, pero para el mío solo lo puse todo en una capa.

 

  • Tienes que repetir esto para todos tus cuadros.

 

  • Si tiene espacios en su trabajo de línea debido a razones estilísticas, deberá agregar color rellenándolo manualmente, como con la herramienta de lápiz.

 

Entonces tienes una animación terminada:

 

5. Opciones de exportación

  • Hay varias formas de exportar su proyecto. Primero vaya a Archivo> Exportar animación.

Secuencias:

  • Para exportar una secuencia de imágenes, vaya a Archivo> Exportar animación> Secuencia de imágenes ...

  • Una secuencia de imágenes se exporta como una serie de archivos jpg / png / bmp / Targa / Tiff equivalentes a la cantidad de cuadros que tiene. Básicamente, en lugar de un video, exporta una imagen por fotograma.

 

  • Si desea que su secuencia de imágenes tenga transparencia (alfa), asegúrese de desactivar su capa de papel (o cualquier capa de fondo) y exporte como secuencia png.
  • A menudo verá personas que exportan secuencias antes de instalar software de composición porque no son tan pesadas como los archivos de video reales.

 

GIF:

  • Para exportar un gif, vaya a Archivo> Exportar animación> GIF animado

  • Primero se le pedirá que elija una ubicación para guardar.

  • Al exportar como gif, asegúrese de corregir su relación ancho x alto, así como su velocidad de cuadros antes de exportar.

 

Vídeo:

  • Para exportar un archivo de video, vaya a Archivo> Exportar animación> Película

  • De manera similar a la exportación de un gif, primero se le pedirá que elija una ubicación para guardar.

  • En su configuración de exportación, asegúrese de tener la configuración establecida correctamente para el tamaño / velocidad de fotogramas que desea exportar.

 

6. felicidades

¡Ahora conoce los conceptos básicos para crear una animación en Clip Studio Paint EX!

Comentario

Nuevo

Últimas publicaciones en Oficial