Introducción

¡Hola! Mi nombre es Hira Karmachela, también conocida como BABE ODED. En esta publicación compartiré consejos para crear árboles y bosques de pixel art para tilesets en Clip Studio Paint. Estoy seguro de que todos los que leen este artículo conocen muy bien las ventajas de Clip Studio Paint sobre otros programas de gráficos.

 

Según mi experiencia usando Clip Studio Paint profesionalmente, este software ha satisfecho completamente todas mis necesidades gráficas, tanto para dibujar como para diseñar. Especialmente en esta ocasión, me gustaría demostrar las capacidades de Clip Studio Paint para crear activos para juegos o ilustraciones de estilo Pixel Art.

 

Espero que esta publicación sea un consejo interesante para aquellos de ustedes que buscan consejos para hacer pixel art en Clip Studio Paint.

Acerca de los Tilesets de Pixel Art

El Pixel Art es un arte gráfico digital precursor de los gráficos digitales modernos. Aunque han pasado décadas desde su existencia, el Pixel Art es atemporal y sigue existiendo junto con las artes visuales contemporáneas.

Además de ser arte puro, el pixel art se aplica habitualmente como activos de juego que llevan específicamente el estilo píxel u 8 bits. Al crear activos de juego de píxeles, los fondos suelen crearse en forma de arte conceptual, ilustraciones y tilesets.

 

En este caso, el pixel art es muy adecuado para crear tilesets, que son una colección de gráficos creados por elemento de mosaico que se pueden usar repetidamente para producir una imagen unificada más amplia.

#1 Configuración del Archivo

Por cierto, en este trabajo utilizo la versión móvil de Clip Studio Paint para Android.

Empecemos. Elige Crear nuevo archivo, y aparecerá un cuadro de diálogo emergente.

Al hacer pixel art, suelo usar un lienzo con un tamaño de 128px por 128px con una resolución de 72dpi. Este tamaño es perfecto para crear imágenes lo suficientemente detalladas, no demasiado estrechas y no demasiado anchas para organizar los píxeles.

 

El siguiente paso importante para crear pixel art en Clip Studio Paint es configurar y mostrar la "cuadrícula".

Ve al menú Ver > Cuadrícula.

 

Verás líneas de cuadrícula en tu lienzo. Sin embargo, la cuadrícula que aparece no se ajusta a las necesidades del pixel art. Por lo tanto, debemos ajustarla primero.

Vuelve al menú Ver > Ajustes de cuadrícula/regla...

 

Aparecerá una ventana de diálogo. Establece el punto de inicio en el centro y el Espaciado (D) en 1px. Verás líneas de cuadrícula en el lienzo formando pequeños cuadrados en el lienzo.

#2 Configuración del Esquema de Color

El siguiente paso antes de empezar a dibujar o pintar píxeles es determinar el esquema de color que se utilizará. En teoría, los juegos de 8 bits significan que usamos un esquema de color con una profundidad de 8 bits, donde 1 bit consta de dos colores, por lo que 8 bits significa dos a la potencia de ocho, lo que equivale a 256 colores.

 

Sin embargo, recomiendo limitar el número de colores aún más para mantener el esquema de color en línea con los matices que deseamos.

Para ello, sugiero que crees tu propia paleta de colores. Haz clic en el icono "Paleta de colores" en la barra inferior y luego en el icono "Editar paletas de colores".

Aparecerá un cuadro de diálogo emergente. Especifica un nombre para tu paleta de colores y luego haz clic en "Crear nueva paleta".

Ahora elige los colores que formarán parte de tu paleta. Haz clic en el icono "Rueda de colores" en la barra inferior. Elige un color.

Vuelve a hacer clic en el icono "Paleta de colores" y selecciona la paleta de colores que has creado. Dentro hay ranuras de color que aún están vacías. Vamos a rellenar los colores seleccionados uno por uno. Haz clic en una de las ranuras vacías. Luego haz clic en el color que hemos elegido en la esquina inferior izquierda. Luego haz clic en el icono "Añadir color" en la parte inferior del panel derecho.

Realiza este paso, empezando por elegir un color en la "Rueda de colores", hasta que tengas una ranura de color llena con los colores de tu elección.

#3 Mosaico del Lienzo

En la creación de activos de juego, cada elemento puede tener un tamaño de alrededor de 16px por 16px o 32px por 32px. Cuanto menor sea el tamaño del elemento, más difícil será causar una impresión, ya que es difícil añadir detalles.

 

Para ello, crearemos elementos con un tamaño mínimo de 32px por 32px. Para facilitar el proceso de pixelado, vamos a crear una capa base de mosaico.

Haz clic en la herramienta de selección "Rectángulo" en la barra de herramientas izquierda. Luego marca "Tipo de aspecto" y selecciona "Especificar longitud" para poder hacer una selección con un tamaño fijo. No olvides deshabilitar "Antialiasing" (extremo izquierdo) para que la imagen de píxeles no produzca ruido.

Establece el cuadro de selección en 32px por 32px. Luego toca el lienzo para hacer una selección.

Ahora usa la herramienta "Relleno" para rellenar el cuadro de selección con color. Elige un color oscuro de tu paleta de colores.

La primera baldosa ha sido creada. Vuelve a usar la herramienta de selección "Rectángulo" y luego arrastra la selección al lado de la primera baldosa.

Elige otro color para hacer la segunda baldosa y rellena el segundo cuadro de selección. Repite este paso hasta que rellenes todo el lienzo con baldosas como un tablero de ajedrez. Puedes nombrar esta capa como "base".

#4 Configuración de Herramientas para Pixel Art

Como se configuró previamente en la herramienta de selección "Rectángulo", para crear pixel art, necesitamos deshabilitar la función Antialiasing. El antialiasing es una función que hace que los bordes de los objetos de imagen digital parezcan suaves añadiendo y manipulando el color de los píxeles de muestra a su alrededor.

Puedes configurar el "Antialiasing" en el panel de propiedades de algunas herramientas. Por ejemplo, en la siguiente herramienta "Figura (línea)".

Para la herramienta principal, podemos usar la herramienta "Pluma" con el subtipo "Marcador y Pluma de puntos". Este tipo de pluma producirá un dibujo de línea con un grosor de 1px para que podamos crear fácilmente objetos de píxeles orgánicos.

Por supuesto, necesitamos la herramienta "Borrador" para borrar los píxeles innecesarios en el trabajo. Selecciona el tipo "Vector" para borrar los píxeles sin dejar rastro.

En el panel de propiedades, establece el tamaño del pincel en 1px y desactiva "Antialiasing".

#5 Determinación de las Proporciones y Ángulos de Visión

Los preparativos están completos, ahora comencemos la fiesta de píxeles. Nuestro objetivo es crear un fondo o entorno para el Bosque, para lo cual necesitamos comparar los objetos dentro de él.

En el juego hay muchos ángulos de visión diferentes. En esta ocasión, utilizaremos una vista de 3/4 desde arriba. Este ángulo tiene atractivo y da una impresión 3D porque nos permite explorar la luz y la profundidad de los objetos.

Para facilitar la orientación del punto de vista, podemos usar materiales 3D primitivos.

Haz clic en el icono "Materiales" de la barra inferior. Luego selecciona "Cubo 3D" y haz clic en el botón como muestra la imagen para colocar el cubo en el lienzo.

Después de que el cubo esté en el lienzo, ajusta el ángulo del cubo haciendo clic en el icono de la cámara como se muestra en la imagen de abajo.

Luego selecciona el ángulo de 3/4 desde arriba como se muestra en la imagen de abajo.

Abre el panel de capas y selecciona la capa "Cubo". Mantén pulsado hasta que aparezca el menú de opciones. Desplázate y selecciona "Rasterizar".

A continuación, usa "Transformación libre" haciendo clic en su icono en la barra inferior para cambiar el tamaño del cubo a una baldosa o aproximadamente 32px por 32px.

Ahora empezamos a dibujar objetos simples en el bosque. Comenzamos dibujando la hierba. Selecciona una de las baldosas y luego coloréala con el color base de hierba de tu paleta de colores.

Usa la herramienta "Marcador" para rellenar el área de hierba con líneas de hierba según tu estilo. Puedes empezar con un color más oscuro que el color base de la hierba.

Añade otro color más claro y luego rellena entre las rayas de hierba oscura.

Ahora podemos crear un objeto con la proporción de hierba como base. Empezamos haciendo las plantas de arbusto.

Usa la herramienta "Marcador" para dibujar una forma de arbusto con el color base de tu elección. Compara el tamaño y el ángulo con los objetos de hierba y cubo.

A continuación, añade un color más claro sobre la forma para darle una sensación de dimensión.

Después de eso, puedes añadir detalles usando otros colores más oscuros como el morado y el marrón como sombreados.

#6 Dibujando un Árbol

Ahora apliquemos la técnica de los arbustos para dibujar un árbol.

 

Primero, dibuja la forma del árbol con el color base. En esta etapa dibujé las hojas en verde y los tallos en marrón.

A continuación, añade un color más claro para crear dimensión. Usa el cubo como guía de ángulo.

Ahora la forma del árbol se ve más dimensional. Añade colores oscuros como el morado y el marrón como sombreados. Luego añade otros colores para dar detalles.

Nuestro árbol está casi terminado. Para el toque final, haz que los árboles se mezclen más con el fondo de hierba. Añade rayas de hierba en la parte inferior del árbol.

#7 Construyendo Tilesets

Una vez que tengas los objetos de hierba, arbustos y árboles. Ya podemos construir tilesets.

Comenzamos con los tilesets de hierba. Haz una selección en las 9 baldosas como se muestra en la imagen de abajo.

Luego rellénalo con un color base terroso.

A continuación, crea un área de hierba en el medio como en la imagen de abajo en la nueva capa.

Dibuja una textura de hierba como antes sobre toda el área de hierba.

Da forma a los bordes del área de hierba para que se vea más natural con el Borrador.

A continuación, añade una sombra debajo del área de hierba con un color oscuro.

Termina con un color más claro para que el suelo tenga más textura.

A continuación, une todas las capas para crear estos tilesets de hierba. Luego selecciona la primera baldosa en la parte superior izquierda, de 32px por 32px.

Haz clic en el icono "Copiar" en la barra inferior. Luego crea una nueva capa y haz clic en el icono "Pegar" en la barra inferior. Ahora tenemos una baldosa de hierba separada.

Realiza este paso para las 8 baldosas de hierba restantes.

Ahora tenemos 9 baldosas de hierba separadas que se pueden duplicar y organizar aún más para formar el entorno deseado.

Lo siguiente es construir los tilesets para los arbustos y árboles. Los pasos para ambos son los mismos, así que solo te mostraré cómo crear tilesets de árboles.

Selecciona la capa del árbol, luego mantén presionado hasta que aparezca el menú de opciones. Selecciona "Duplicar capa".

Mueve la copia del árbol a la baldosa de la derecha. Luego duplica la capa del árbol de nuevo.

Ajusta la copia del árbol para que tenga la misma posición (presta atención a cada fracción de píxel) en cada baldosa.

Ahora, tenemos árboles agrupados. Abre el panel de capas. Luego fusiona la capa de copias de árboles haciendo clic en el icono como se muestra a continuación.

A continuación, dividimos este grupo de árboles en tres baldosas separadas. Selecciona el centro del grupo de árboles con una selección rectangular de 32px por 32px.

Haz clic en el botón "Copiar" en la barra inferior. Ve al panel de capas y crea una nueva capa. Haz clic en el botón "Pegar" en la barra inferior y tendremos una baldosa de árbol separada del grupo.

Haz lo mismo para las dos baldosas restantes hasta que tengamos tres baldosas de árbol separadas.

#8 Colocación de Tilesets

Ahora intentemos organizar los tilesets que hemos creado para que se conviertan en un entorno de Bosque. El método es muy fácil, solo necesitamos duplicar la capa de mosaico que necesitamos.

Luego coloca las baldosas en lugares específicos para que se conecten entre sí y formen un entorno.

Mantén todas las baldosas de hierba en la capa inferior.

Repite este paso para cada elemento de baldosa que necesitemos. Mantén la baldosa de arbusto y todas las baldosas de árbol encima de la capa de hierba.

Veamos ahora cuando todas las capas están desbloqueadas y todas las baldosas están conectadas para formar el entorno del Bosque.

#9 Exportación y Publicación de la Imagen

Nuestro trabajo está completo y ahora estamos listos para exportarlo y publicarlo. Pero primero debemos tener en cuenta que el tamaño de la imagen actualmente es de solo 128px por 128px, lo cual es demasiado pequeño para ser publicado.

Por lo tanto, primero debemos cambiar el tamaño de la imagen sin destruir la calidad de los píxeles.

Ve al menú Edición > (desplázate) Cambiar resolución de imagen...

Aparecerá un cuadro de diálogo emergente. Cambia el tamaño de la imagen a 1080px por 1080px o al tamaño que necesites. Luego, en la sección del método de interpolación, selecciona "Bordes duros" para mantener la calidad de los píxeles y que no generen ruido.

La imagen se ampliará y obtendrás más píxeles en la imagen.

Ahora exportemos la imagen a PNG para una fácil visualización en varias plataformas o aplicaciones digitales.

Ve al menú Archivo > Exportar (Capa única).

Luego selecciona PNG como resultado de la exportación. Acepta todas las configuraciones existentes si no planeas añadir otras configuraciones de exportación.

El archivo exportado se ha guardado en el almacenamiento de tu teléfono.

Lo más interesante de la versión móvil de Clip Studio Paint es que podemos publicar inmediatamente nuestro trabajo en redes sociales con pasos sencillos.

Ve al menú Archivo > Compartir rápidamente...

Aparecerá un cuadro de diálogo emergente. Luego elige la red social donde publicaremos nuestro trabajo. Para esta ocasión elegí Twitter.

El sistema se conectará y abrirá la aplicación de Twitter para crear un nuevo tweet con nuestro trabajo adjunto.

¡OK! Eso es todo lo que puedo compartir. Espero que sea útil y por favor apóyenme para hacer más consejos.