Cómo diseñar y vectorizar un conjunto de poses de un personaje para un videojuego
Spanish (Español) translation by CYC (you can also view the original English article)



En este tutorial vamos a ver cómo diseñar un personaje para un videojuego, en este caso un "beat 'em up". Trabajaremos desde el primer boceto hasta la obra final. Compartiré mi proceso y mi flujo de trabajo para dibujar personajes vectoriales con un montón de consejos, trucos y atajos para usarlos en tu flujo de trabajo diario.
¡Empecemos!
Paso 1
Primero, comenzaremos con un boceto de tu personaje. Puedes hacerlo con la Herramienta Pincel de Manchas (Shift + B) en una capa llamada Sketch. Siempre trato de usar un color como rojo o azul con una opacidad del 50%, esto te ayudará a rastrear el boceto más tarde.



Paso 2
Ahora, bloquearemos la capa Sketch. En una nueva capa que llamaremos "Drawings", comienza a dibujar tu personaje.
En este caso, usaremos una línea negra de 1 pt. Por ejemplo, yo dibujo muchas formas usando la Herramienta Rectángulo (R) y la Herramienta Rectángulo Redondeado (una ventaja es que si la arrastras y la sostienes, puedes modificar la redondez de la Herramienta de Rectángulo con las teclas de flecha).
Trata de dibujar tu personaje en segmentos. De esta manera se puede utilizar como una marioneta, y se pueden mover o cambiar sólo las piezas que necesitas. Divide tu personaje en secciones de la cabeza, cuerpo, brazos y piernas.



Trata de dibujar con formas geométricas y ajustarlas con la Herramienta Borrador (Shift + E) y Busca Trazos.



Recuerda bloquear tu capa llamada Sketch y dibujar en una nueva capa.
Paso 3
Con los puntos de anclaje tenemos la opción de mover los nodos utilizando la Herramienta de Selección (A) para aprovechar las formas básicas y ajustarlas para contornear el boceto.
En algunos casos, esta podría ser la forma más rápida de dibujar o volver a dibujar elementos, simplemente añadiendo o ajustando formas.
Sugerencia: para modificar o hacer cortes rectos sin el Busca Trazos, puedes utilizar la Herramienta Borrador (Mayús + E) pulsando Alt y arrastrando el ratón, recuerda seleccionar el objeto que deseas eliminar, porque si no tienes nada seleccionado podrías Eliminar una línea y todos tus objetos.



Mueve los nodos con la Herramienta de Selección (A) y modifica los objetos con la Herramienta Borrador, presionando Alt + Arrastrando el ratón para hacer cortes rectos.



En este paso, piensa como si estuvieras trabajando de atrás hacia delante, porque por defecto cada nuevo objeto que dibujas va a estar delante. Basta con tener esto en mente (puedes usar capas para separar objetos como la cabeza, los brazos, etc. Pero yo prefiero trabajar con grupos).
Paso 4
Una sugerencia rápida para dibujar, por ejemplo, los brazos de un personaje, es usar la Herramienta Anchura (Shift + W). Con esta herramienta, sólo ajustas el ancho de las líneas. Luego puedes convertirlas en trazos, y eso es todo.
Ahora podemos tomar esta forma para dibujar las mangas, esto podría hacerse Copiando (Comando + C) y Pegando en el frente (Comando + F), luego modificando las formas a tu gusto. Si necesitas utilizar el Busca Trazos, siempre haz una copia de tu objeto básico. Recuerda que puedes utilizar la Herramienta Borrador para cortes rectos, en este caso para la manga del brazo.









La Herramienta de Anchura puede ser muy útil para dibujar un montón de cosas, sólo inténtalo y experimenta con esta impresionante herramienta, puedes ahorrar tiempo y hacer algunas formas suaves.
Paso 5
Así es cómo puede quedar el personaje cuando hayas terminado de seguir las formas. Presiona D para establecer el relleno de color predeterminado (relleno blanco con una línea negra de 1pt).
Ajusta las piezas que necesitas reparar. Una forma rápida de hacerlo es cortar el objeto (Comando + X) y pegarlo delante (Comando + F) o atrás del objeto seleccionado.
Por ejemplo, en este boceto, corté el semicírculo y las gafas de mi personaje, y luego seleccioné la nariz para pegarla en la parte posterior (Comando + B) de los objetos.












En este momento debes tener la línea artística dibujada del personaje, aquí viene la parte donde tu ejemplo viene a la vida con color.
Paso 6
Mantén la ilustración aparte, pero dentro de un solo grupo, la cabeza, el cuerpo, los brazos derecho e izquierdo. Esto podría hacerse en dos grupos. Uno de ellos desde el hombro hasta el codo y el otro desde el codo hasta la muñeca, las manos, los pies y las piernas (se dividen como los brazos), así que cuando tengas que dibujar otras posiciones del personaje, sólo tienes que dibujar ciertos detalles y no toda la ilustración. Tu personaje debe ser como un títere.
Paso 7
Primero tienes que decidir qué colores utilizarás.
Para hacer una buena paleta, puedes elegir 3 de tus colores favoritos. Selecciónalos y utiliza la Herramienta Fusión (W) para realizar una mezcla entre estos colores. Pulsa Intro para ver las opciones de mezcla, luego, utiliza Pasos específicos y escribe 2.
Para añadir todos los colores a Muestras, debes Expandir la Mezcla (para hacer esto, haz clic en Menú / Objeto / Expandir) y selecciónalos todos. Luego ve a muestras de tela, crea un Nuevo Grupo de Color, y dale un nombre.
Elige los colores básicos de tu ilustración. Puedes seleccionar, por ejemplo, un color para las luces y otro para las sombras. En este caso, los colores se seleccionaron como base de color de la piel y la ropa del personaje.



Utiliza la Herramienta Combinar para hacer esta combinación. Recuerda configurar tus opciones de la Herramienta Combinar a Pasos específicos con un valor de 2.






Para poner tus colores en las muestras, tienes que expandir la combinación y seleccionar todos los colores. Después, en la ventana de muestras, haz clic en el botón "Nuevo grupo de colores" y coloca un nombre en tu paleta.



Paso 8
Para aplicar los colores base, utiliza la Herramienta Cuentagotas (I) y haz clic en el color para darle el valor. Presionando ALT
Sugiero poner tu paleta de colores cerca de la imagen para seleccionar y utilizar los colores rápidamente



Paso 9
Para agregar las luces y las sombras puedes usar las mismas formas que hiciste para la imagen principal, sólo tienes que arrastrar y mantener Alt para duplicar la forma. Luego Copia (Comando + C) y Pega en Frente (Comando + F) el objeto que deseas detallar.
Podemos usar la Herramienta Busca Trazos para hacer este trabajo. Tenemos varias opciones: Intersección o Menos Frente para agregar resaltes y sombras (por cierto, al presionar Comando + 4, se repetirá la última acción del Busca Trazos). Otra forma de hacer las luces es seleccionar un objeto, como el oído, y luego ir a Objeto / Ruta / Ruta de Desplazamiento. Esto hará una copia dentro o fuera de la figura.
Selecciona la opción de la vista previa para comprobar los cambios que realices. En este caso 2px.



Aprovecha las figuras que ya tienes para crear sombras y luces.



Paso 10
El personaje terminado se verá un poco como este. Recuerda dibujar una vuelta alrededor del personaje para ver todos los ángulos. Para hacer esto un poco más fácil, usa algunas líneas guía en ciertos puntos como la cabeza, hombros, cintura, rodilla, etc.






Paso 11
Para hacer las expresiones del personaje, usaremos una vista 3/4.
Para cambiar las expresiones podemos hacer algunos ajustes de la boca y las cejas. Todo esto se puede hacer con la Herramienta Anchura (Shift + W), la Herramienta Rectángulo Redondeado y Ruta de Desplazamiento. En este caso, usaremos 4 expresiones faciales: normal, feliz, enojado y derrotado. Estas expresiones servirán como referencia para el juego.



Paso 12
Ahora es el momento de hacer las posiciones del personaje. Tomamos nuestro boceto básico y añadimos cambios y detalles. De esta manera, sólo es necesario volver a dibujar estas partes con los bocetos que dan la vuelta. Puedes ver algunas de las posiciones del personaje, como el salto o su posición de victoria. Esto será útil cuando tengamos que animar tu personaje o cuando alguien necesite dibujarlo.
Le daré miembros más grandes para mejorar el efecto de movimiento de los ataques.



Paso 13
Así es como se ve el personaje al finalizar, agrega el detalle como desees. ¡Diviértete con los colores y las formas!



Paso 14
Por último, pon tus ilustraciones en una nueva página, ¡y tu hoja del personaje estará lista!
Este documento es muy útil cuando se necesita dibujar el personaje en nuevas poses o expresiones y con el giro alrededor es mucho más fácil de dibujar porque se puede ver cómo luce en todos los ángulos. Si trabajas en un juego con todo un equipo y todo el mundo está haciendo animaciones e ilustraciones de un personaje específico, la hoja del personaje es un documento básico para hacer el trabajo fácilmente.
Con una hoja del personaje, todos deben estar en el mismo canal y el flujo de trabajo será mejor que sin él. Con esto nuestro tutorial ha terminado, espero que lo disfrutes, ¡Hasta pronto!






En este tutorial vamos a ver cómo diseñar un personaje para un videojuego, en este caso un "beat 'em up". Trabajaremos desde el primer boceto hasta la obra final. Compartiré mi proceso y mi flujo de trabajo para dibujar personajes vectoriales con un montón de consejos, trucos y atajos para usarlos en tu flujo de trabajo diario.
¡Empecemos!
Paso 1
Primero, comenzaremos con un boceto de tu personaje. Puedes hacerlo con la Herramienta Pincel de Manchas (Shift + B) en una capa llamada Sketch. Siempre trato de usar un color como rojo o azul con una opacidad del 50%, esto te ayudará a rastrear el boceto más tarde.



Paso 2
Ahora, bloquearemos la capa Sketch. En una nueva capa que llamaremos "Drawings", comienza a dibujar tu personaje.
En este caso, usaremos una línea negra de 1 pt. Por ejemplo, yo dibujo muchas formas usando la Herramienta Rectángulo (R) y la Herramienta Rectángulo Redondeado (una ventaja es que si la arrastras y la sostienes, puedes modificar la redondez de la Herramienta de Rectángulo con las teclas de flecha).
Trata de dibujar tu personaje en segmentos. De esta manera se puede utilizar como una marioneta, y se pueden mover o cambiar sólo las piezas que necesitas. Divide tu personaje en secciones de la cabeza, cuerpo, brazos y piernas.



Trata de dibujar con formas geométricas y ajustarlas con la Herramienta Borrador (Shift + E) y Busca Trazos.



Recuerda bloquear tu capa llamada Sketch y dibujar en una nueva capa.
Paso 3
Con los puntos de anclaje tenemos la opción de mover los nodos utilizando la Herramienta de Selección (A) para aprovechar las formas básicas y ajustarlas para contornear el boceto.
En algunos casos, esta podría ser la forma más rápida de dibujar o volver a dibujar elementos, simplemente añadiendo o ajustando formas.
Sugerencia: para modificar o hacer cortes rectos sin el Busca Trazos, puedes utilizar la Herramienta Borrador (Mayús + E) pulsando Alt y arrastrando el ratón, recuerda seleccionar el objeto que deseas eliminar, porque si no tienes nada seleccionado podrías Eliminar una línea y todos tus objetos.



Mueve los nodos con la Herramienta de Selección (A) y modifica los objetos con la Herramienta Borrador, presionando Alt + Arrastrando el ratón para hacer cortes rectos.



En este paso, piensa como si estuvieras trabajando de atrás hacia delante, porque por defecto cada nuevo objeto que dibujas va a estar delante. Basta con tener esto en mente (puedes usar capas para separar objetos como la cabeza, los brazos, etc. Pero yo prefiero trabajar con grupos).
Paso 4
Una sugerencia rápida para dibujar, por ejemplo, los brazos de un personaje, es usar la Herramienta Anchura (Shift + W). Con esta herramienta, sólo ajustas el ancho de las líneas. Luego puedes convertirlas en trazos, y eso es todo.
Ahora podemos tomar esta forma para dibujar las mangas, esto podría hacerse Copiando (Comando + C) y Pegando en el frente (Comando + F), luego modificando las formas a tu gusto. Si necesitas utilizar el Busca Trazos, siempre haz una copia de tu objeto básico. Recuerda que puedes utilizar la Herramienta Borrador para cortes rectos, en este caso para la manga del brazo.









La Herramienta de Anchura puede ser muy útil para dibujar un montón de cosas, sólo inténtalo y experimenta con esta impresionante herramienta, puedes ahorrar tiempo y hacer algunas formas suaves.
Paso 5
Así es cómo puede quedar el personaje cuando hayas terminado de seguir las formas. Presiona D para establecer el relleno de color predeterminado (relleno blanco con una línea negra de 1pt).
Ajusta las piezas que necesitas reparar. Una forma rápida de hacerlo es cortar el objeto (Comando + X) y pegarlo delante (Comando + F) o atrás del objeto seleccionado.
Por ejemplo, en este boceto, corté el semicírculo y las gafas de mi personaje, y luego seleccioné la nariz para pegarla en la parte posterior (Comando + B) de los objetos.












En este momento debes tener la línea artística dibujada del personaje, aquí viene la parte donde tu ejemplo viene a la vida con color.
Paso 6
Mantén la ilustración aparte, pero dentro de un solo grupo, la cabeza, el cuerpo, los brazos derecho e izquierdo. Esto podría hacerse en dos grupos. Uno de ellos desde el hombro hasta el codo y el otro desde el codo hasta la muñeca, las manos, los pies y las piernas (se dividen como los brazos), así que cuando tengas que dibujar otras posiciones del personaje, sólo tienes que dibujar ciertos detalles y no toda la ilustración. Tu personaje debe ser como un títere.
Paso 7
Primero tienes que decidir qué colores utilizarás.
Para hacer una buena paleta, puedes elegir 3 de tus colores favoritos. Selecciónalos y utiliza la Herramienta Fusión (W) para realizar una mezcla entre estos colores. Pulsa Intro para ver las opciones de mezcla, luego, utiliza Pasos específicos y escribe 2.
Para añadir todos los colores a Muestras, debes Expandir la Mezcla (para hacer esto, haz clic en Menú / Objeto / Expandir) y selecciónalos todos. Luego ve a muestras de tela, crea un Nuevo Grupo de Color, y dale un nombre.
Elige los colores básicos de tu ilustración. Puedes seleccionar, por ejemplo, un color para las luces y otro para las sombras. En este caso, los colores se seleccionaron como base de color de la piel y la ropa del personaje.



Utiliza la Herramienta Combinar para hacer esta combinación. Recuerda configurar tus opciones de la Herramienta Combinar a Pasos específicos con un valor de 2.






Para poner tus colores en las muestras, tienes que expandir la combinación y seleccionar todos los colores. Después, en la ventana de muestras, haz clic en el botón "Nuevo grupo de colores" y coloca un nombre en tu paleta.



Paso 8
Para aplicar los colores base, utiliza la Herramienta Cuentagotas (I) y haz clic en el color para darle el valor. Presionando ALT
Sugiero poner tu paleta de colores cerca de la imagen para seleccionar y utilizar los colores rápidamente



Paso 9
Para agregar las luces y las sombras puedes usar las mismas formas que hiciste para la imagen principal, sólo tienes que arrastrar y mantener Alt para duplicar la forma. Luego Copia (Comando + C) y Pega en Frente (Comando + F) el objeto que deseas detallar.
Podemos usar la Herramienta Busca Trazos para hacer este trabajo. Tenemos varias opciones: Intersección o Menos Frente para agregar resaltes y sombras (por cierto, al presionar Comando + 4, se repetirá la última acción del Busca Trazos). Otra forma de hacer las luces es seleccionar un objeto, como el oído, y luego ir a Objeto / Ruta / Ruta de Desplazamiento. Esto hará una copia dentro o fuera de la figura.
Selecciona la opción de la vista previa para comprobar los cambios que realices. En este caso 2px.



Aprovecha las figuras que ya tienes para crear sombras y luces.



Paso 10
El personaje terminado se verá un poco como este. Recuerda dibujar una vuelta alrededor del personaje para ver todos los ángulos. Para hacer esto un poco más fácil, usa algunas líneas guía en ciertos puntos como la cabeza, hombros, cintura, rodilla, etc.






Paso 11
Para hacer las expresiones del personaje, usaremos una vista 3/4.
Para cambiar las expresiones podemos hacer algunos ajustes de la boca y las cejas. Todo esto se puede hacer con la Herramienta Anchura (Shift + W), la Herramienta Rectángulo Redondeado y Ruta de Desplazamiento. En este caso, usaremos 4 expresiones faciales: normal, feliz, enojado y derrotado. Estas expresiones servirán como referencia para el juego.



Paso 12
Ahora es el momento de hacer las posiciones del personaje. Tomamos nuestro boceto básico y añadimos cambios y detalles. De esta manera, sólo es necesario volver a dibujar estas partes con los bocetos que dan la vuelta. Puedes ver algunas de las posiciones del personaje, como el salto o su posición de victoria. Esto será útil cuando tengamos que animar tu personaje o cuando alguien necesite dibujarlo.
Le daré miembros más grandes para mejorar el efecto de movimiento de los ataques.



Paso 13
Así es como se ve el personaje al finalizar, agrega el detalle como desees. ¡Diviértete con los colores y las formas!



Paso 14
Por último, pon tus ilustraciones en una nueva página, ¡y tu hoja del personaje estará lista!
Este documento es muy útil cuando se necesita dibujar el personaje en nuevas poses o expresiones y con el giro alrededor es mucho más fácil de dibujar porque se puede ver cómo luce en todos los ángulos. Si trabajas en un juego con todo un equipo y todo el mundo está haciendo animaciones e ilustraciones de un personaje específico, la hoja del personaje es un documento básico para hacer el trabajo fácilmente.
Con una hoja del personaje, todos deben estar en el mismo canal y el flujo de trabajo será mejor que sin él. Con esto nuestro tutorial ha terminado, espero que lo disfrutes, ¡Hasta pronto!



