Intro

¡Hola a todos! Gracias por consultar este tutorial. ¡Hoy me gustaría compartir sobre las herramientas básicas de figuras de CSP y un ejemplo del uso de herramientas de figuras para la animación!

 

Voy a repasar el resumen aquí, pero te recomiendo que revises mi video a continuación para obtener más detalles con una guía de video. ^^

1. ¿Qué es la herramienta Figura?

Con la herramienta de figuras, puede crear fácilmente formas simples como líneas, curvas, círculos, etc.

Puedes encontrar la herramienta de figura en la imagen que te muestro arriba.

En este tutorial cubriré lo básico de esta subherramienta de Direct Draw.

¡Antes de comenzar, asegúrese de crear VECTOR LAYER primero!

Puede notar la capa vectorial por el ícono al lado.

 

¿Por qué utilizar Vector Layer? ¡Es para que tu línea sea EDITABLE!

Esto es importante para la herramienta Figura, así que asegúrese de volver a verificar antes de dibujar.

2. Relleno de línea recta, curva y lazo

La herramienta de líneas rectas y curvas es bastante simple, puede hacer clic y arrastrar para crear las líneas.

Para la curva, puede arrastrar y hacer clic nuevamente para ajustar la curva.

 

Si mantiene presionada la tecla Mayús mientras arrastra, puede ajustar la línea en el eje horizontal, vertical o diagonal.

 

El relleno de lazo es un poco diferente, no se puede usar en una capa vectorial, por lo que debe usar una capa ráster.

Básicamente, lo usa para llenar rápidamente el área que selecciona.

Puede usarlo para dibujar rápidamente símbolos u otras cosas ... (no lo uso tan a menudo)

3. Rectángulo, elipse y polígono

Para formas básicas, podemos usar la herramienta Rectángulo, Elipse o Polígono.

Como de costumbre, haga clic y arrastre para crear el objeto. Mantenga presionada la tecla Mayús para hacer un círculo, cuadro o polígono perfecto.

 

Para Polígono, puede editar el número de esquinas (triángulo, diamante, hexágono, etc.)

También puede editar la redondez de la esquina.

 

También hay otros perímetros, como Relleno, Ajuste de ángulo, Opacidad, etc.

¡No dudes en probarlo y utilizarlo según tus necesidades!

4. Polilínea, curva continua y curva Bezier

Con Polyline, puede crear una serie de líneas rectas.

Siempre que haga clic, seguirá creando líneas basadas en el último punto.

 

Es lo mismo con Continuous Curve y Bezier Curve.

La diferencia es que puede ajustar la curva haciendo clic y arrastrando.

Bezier Curve es una mezcla de curvas y rectas.

Probablemente probaste estas herramientas y pensaste para ti mismo ...

"¿Cómo evitar que esta cosa haga más líneas ...?"

 

Bueno, hay 3 formas de detener estas herramientas:

1) Si presiona ENTER, detendrá las líneas según el último cursor.

2) Si presionas ESCAPE, básicamente deshaces todas las líneas.

3) Si mantiene presionada la tecla CTRL y luego HAGA CLIC, se detendrá en el último punto.

5. ¡Edición de líneas y formas + Borrador de vectores!

Digamos que tenemos la forma, pero la estropeamos un poco, ¿podemos cambiarla?

¡SÍ! ¡podemos editarlos fácilmente siempre que usemos CAPAS VECTORIALES!

 

Puede editar puntos, líneas y curvas utilizando OBJECT TOOL (atajo: O)

Haga clic en el objeto, seleccione el punto y luego edítelo como desee.

 

Para una corrección más avanzada, puede usar HERRAMIENTA DE LÍNEA CORRECTA (atajo: Y)

Puede agregar / eliminar puntos, ajustar muchas cosas individualmente.

 

También puede editar el grosor de la línea con solo usar la herramienta Objeto

Simplemente seleccione el objeto y luego cambie el parámetro, ¡y cambiará toda la forma!

Hay una cosa más útil si está trabajando con una capa vectorial: ¡HERRAMIENTA BORRADOR!

Puede usar su borrador predeterminado, solo asegúrese de que el borrador de vector esté marcado

 

Hay tres opciones para el borrador de vectores:

1) El de la izquierda te permite borrar como de costumbre como un pincel

2) El del medio te permite borrar la línea de intersección.

3) El correcto te permite borrar toda la línea a la vez

Consejo rápido: siempre haga su línea más larga, luego simplemente elimine la intersección más tarde.

Esto también funciona con formas ... ¡así que es bastante ordenado!

6. Dibuje Lineart usando la herramienta Figura!

Ahora que tenemos todos los conceptos básicos, ¡intentémoslo en nuestro dibujo!

Explicaré el proceso desde el lineart hasta la animación aquí, pero te recomiendo que revises mi video de youtube en la introducción ... porque será más fácil de seguir con la guía de video ^^;

 

También te animo a que pruebes esto mientras lees / miras, ¡para que puedas contarme lo que has hecho! :D

 

Lo primero es boceto. Aquí hice el boceto de un gato (?) Usando el pincel predeterminado.

A continuación, usaremos Figure Tools para el lineart. Lo que hice fue:

• Usé las herramientas que están cerca con la forma que quiero.

• Utilice la herramienta Objeto para ajustar la posición y la curva.

• Utilice Vector Eraser para eliminar la línea de intersección.

 

Sin embargo, no borré la intersección en el cuerpo porque podría animarlos más tarde.

7. ¡Trabaje con la línea de tiempo!

Primero tenemos que abrir la ventana de la línea de tiempo (ventanas> línea de tiempo)

Si su línea de tiempo está en blanco, puede hacer clic en Agregar nueva línea de tiempo.

Para este tutorial, utilicé 12 fps y 24 fotogramas de duración ... para que el usuario de CSP Pro también pueda probarlo.

 

Para hacer una animación, necesitamos crear una carpeta de animación.

Después de eso, colocamos el lineart del gato dentro de la carpeta de animación.

 

No olvide cambiarle el nombre a "1" para que sea menos confuso más adelante.

(esto se debe a que CSP cambiará automáticamente el nombre de las siguientes capas con números)

"¡Oh, no, después de ponerlo en la carpeta de animación, el dibujo se ha ido!"

Debe seleccionar Especificar celdas (icono con la cadena), luego seleccione el nombre de su capa.

¡Esto pondrá tu capa en la línea de tiempo!

 

Consejo rápido: las capas que no están en las líneas de tiempo simplemente se almacenan.

¡Tienes que especificar celdas para que aparezca y tenga una duración!

A continuación, simplemente duplico la capa vectorial del gato (clic derecho> Duplicar capa).

Y luego Especifique el marco de las celdas 2 o 3 al lado del primero.

 

A continuación, editamos la capa de dibujo número "2". Solo voy a cambiar los ojos usando la herramienta de transformación.

Puede activar PIEL DE CEBOLLA para comprobar el dibujo anterior / siguiente fácilmente.

 

Repita los pasos del dibujo "3". Duplicar, Haga clic en el tiempo, Especifique celdas, Editar.

¡Trabaja con tu línea de tiempo!

Utilice la herramienta Especificar para REUTILIZAR el dibujo que ha realizado.

 

Por ejemplo, la línea de tiempo de mi gato parpadeante es en realidad así: 1 - 2 - 3 - 2 - 1

¡Así que en realidad solo consta de tres dibujos!

También intenté hacer que el gato saludara y mover su cola ... ¡pero tú también puedes explorarlo!

Una vez que estoy satisfecho, continúo usando la herramienta de borrador para eliminar la línea de intersección.

Así es, tienes que hacerlo en todas las capas ... ¡así que disfruta tu tiempo! :'D

 

Aquí está la línea de tiempo final del lineart y la vista previa de la animación:

8. ¡Coloración, sombreado y acabado!

Ahora que las líneas están terminadas, ¡continuemos coloreando!

Para hacer eso, tendremos que crear otra carpeta de animación.

Pero dentro de la carpeta, esta vez crearemos Raster Layer en lugar de Vector.

 

Coloque la carpeta de animación de color debajo de la carpeta de animación de lineart.

Siguiendo la guía de lineart, simplemente lo decoramos con color usando la herramienta de relleno.

 

No olvide crear una nueva capa y especificar celdas nuevamente como en el lineart.

El proceso es muy similar, pero en esta ocasión tenemos una guía de tiempos.

Así que solo tenemos que hacer coincidir el tiempo de animación del lineart.

En cuanto al sombreado, recorta una nueva capa con Multiplicar encima de la carpeta de animación de color.

Relleno el dibujo de multiplicar con color, elimino algunas partes y luego ajusto el tono y la saturación.

Esto es solo un sombreado estático y simple, así que asegúrese de jugar y volver a verificar si hay errores.

 

A continuación, agrego una sombra paralela en una capa separada, colocada debajo del color.

Siéntase libre de agregar más efectos como Degradado, Cambiar color de línea, etc.

Ahora para el fondo, para este tutorial, utilicé el material predeterminado de CSP.

Para usarlo, simplemente arrastre y suelte los materiales y colóquelo bajo la sombra paralela.

 

También puede agregar movimiento de zoom utilizando la carpeta de cámara 2D.

Primero, mueva todas las carpetas y capas dentro de la carpeta de la cámara.

 

A continuación, haga clic en el botón Agregar fotograma clave. Ese será el primer fotograma clave en la carpeta de la cámara.

Elija el tiempo para el segundo fotograma clave, luego haga clic en Agregar fotograma clave.

Ahora, en el fotograma clave que desea editar, use la herramienta Objeto para cambiar el tamaño de la cámara.

 

Si el movimiento de la cámara no se muestra, ve a Animación> Configuración de reproducción> asegúrate de marcar "Renderizar cámara 2D"

 

Puede ajustar algunas cosas, como mover los fotogramas clave y probar la animación.

Por último, para exportar como video, haga clic en Archivo> Exportar animación> Película

(asegúrese de marcar Aplicar efectos de cámara 2D si usa la cámara)

 

O puede exportarlo como GIF animado.

(Será mucho más pequeño y se reproducirá en bucle)

Clausura

¡Aquí está el resultado final! (GIF animado)

Muchas gracias si lees esto o miras el video hasta el final. Esta es mi primera publicación de tutorial, así que me disculpo si cometí algunos errores (y lo siento si es demasiado largo, jaja).

 

Todavía estoy trabajando con mi Youtube y planeo publicar otros tutoriales en el futuro. ¡Todavía es pequeño, por lo que se agradece mucho cada apoyo!

 

También tengo curiosidad por lo que hicieron con este tutorial.

¡No dudes en decírmelo en los comentarios a continuación! :D

 

Por último, espero que disfrutes de este tutorial y lo encuentres útil.

¡Manténgase a salvo y tenga un buen día! ^^