Creación de juegos de mosaicos de bosque con arte de píxeles | Estudio de clip móvil

4 923

babeoded

babeoded

Introducción

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

 

Basado en mi experiencia usando Clip Studio Paint profesionalmente, este software ha satisfecho por completo 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 en la creación de 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 mosaicos de Pixel Art

Pixel Art es un arte gráfico digital que es el precursor de los gráficos digitales modernos. A pesar de que han pasado décadas desde su existencia, Pixel art es atemporal y aún existe junto con las artes visuales contemporáneas.

Además de ser arte puro, el arte de píxeles generalmente se aplica como activos de juegos que llevan específicamente el estilo de píxeles o de 8 bits. Al crear activos de juegos de píxeles, los fondos generalmente se crean en forma de arte conceptual, ilustraciones y conjuntos de mosaicos.

 

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

#1 Configuración de archivo

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

Empecemos. Elija Crear nuevo archivo, luego aparecerá un cuadro de diálogo emergente.

Al hacer pixel art, generalmente uso un lienzo con un tamaño de 128 px por 128 px con una resolución de 72 ppp. Este tamaño es perfecto para crear imágenes lo suficientemente detalladas, ni demasiado estrechas ni 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".

Vaya al menú Ver > Cuadrícula.

 

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

Vuelva al menú Ver > Configuración de la barra de cuadrícula/regla...

 

Aparecerá una ventana de diálogo. Establezca el punto de inicio en el centro y establezca el Gap (D) en 1px. Verá líneas de cuadrícula en el lienzo que forman pequeños cuadrados en el lienzo.

#2 Establecer el esquema de color

El siguiente paso antes de comenzar a dibujar o pintar píxeles, debemos 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 que dos elevados a ocho equivalen a 256 colores.

 

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

Para eso te sugiero que hagas tu propio set de colores. Haga clic en el icono "Conjunto de colores" en la barra inferior y luego haga clic en el icono "Editar conjuntos de colores".

Aparecerá un cuadro de diálogo emergente. Especifique un nombre para su conjunto de colores y luego haga clic en "Crear nuevo conjunto".

Ahora elija los colores que entrarán en su conjunto de colores. Haga clic en el icono "Rueda de colores" en la barra inferior. Elige un color.

Haga clic nuevamente en el icono "Conjunto de colores" y luego seleccione el conjunto de colores que ha creado. En el interior hay ranuras de color que aún están vacías. Rellenemos los colores seleccionados uno por uno. Haga clic en una de las ranuras vacías. Luego pulsamos sobre el color que hemos elegido en la esquina inferior izquierda. Luego haga clic en el icono "Agregar color" en la parte inferior del panel de la derecha.

Realice este paso comenzando por elegir un color en la "Rueda de colores" hasta que tenga un espacio de color lleno con los colores de su elección.

#3 Embaldosar el lienzo

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

 

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

Haga clic en la herramienta de selección "Rectángulo" en la barra de herramientas izquierda. Luego marque "Tipo de aspecto" y seleccione "Especificar longitud" para que podamos hacer una selección con un tamaño fijo. No olvide configurar "Anti-aliasing" en deshabilitado (extremo izquierdo) para que la imagen de píxeles no produzca ruido.

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

Ahora use la herramienta "Rellenar" para llenar el cuadro de selección con color. Elija un color oscuro en su conjunto de colores.

Se ha creado el primer mosaico. Reutilice la herramienta de selección "Rectángulo" y luego arrastre la selección al lado del primer mosaico.

Elija otro color para hacer el segundo mosaico y llene el segundo cuadro de selección. Repita este paso hasta que llene todo el lienzo con mosaicos como un tablero de ajedrez. Puede 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, debemos deshabilitar la función Anti-aliasing. El suavizado es una función que hace que los bordes de los objetos de imágenes digitales se vean suaves al agregar y manipular el color de los píxeles de muestra que los rodean.

Puede configurar "Suavizado" 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 la subherramienta "Marcador y Pluma de punto". Este tipo de bolígrafo producirá un dibujo lineal con un grosor de 1 px para que podamos crear fácilmente objetos de píxeles orgánicos.

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

En el panel de propiedades, establezca el tamaño del pincel en 1px y configure "Suavizado" para deshabilitarlo.

#5 Determinar las proporciones y los á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 Forest, para eso necesitamos hacer comparaciones de objetos dentro de él.

En el juego hay muchos ángulos de visión diferentes. En esta ocasión, utilizaremos una vista de arriba hacia abajo de 3/4. 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 utilizar materiales 3D primitivos.

Haga clic en el icono "Materiales" en la barra inferior. Luego seleccione "Cubo 3D" y haga clic en el botón como muestra la imagen para colocar el cubo en el lienzo.

Una vez que el cubo esté en el lienzo, ajuste el ángulo del cubo haciendo clic en el ícono de la cámara como se muestra en la imagen a continuación.

Luego seleccione el ángulo de arriba hacia abajo de 3/4 como se muestra en la imagen a continuación.

Abra el panel de capas y seleccione la capa "Cubo". Mantén pulsado hasta que aparezca el menú de opciones. Desplácese y seleccione "Rasterizar".

A continuación, use "Transformación libre" haciendo clic en su icono en la barra inferior para cambiar el tamaño del cubo a un mosaico o aprox. 32 px por 32 px.

Ahora comenzamos a dibujar objetos simples en Forest. Empezamos dibujando la hierba. Seleccione una de las fichas y luego coloréela con el color base de la hierba en su conjunto de colores.

Use la herramienta "Marcador" para llenar el área de césped con líneas de césped según su estilo. Puede comenzar con un color más oscuro que el color base de la hierba.

Agregue otro color más claro y luego rellene entre las rayas de hierba oscura.

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

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

A continuación, agregue un color más claro en la parte superior de la forma para darle una sensación de dimensión.

Después de eso, puede agregar detalles usando otros colores más oscuros, como el púrpura y el marrón, como sombras.

#6 Dibujar un árbol

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

 

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

A continuación, agregue 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. Agregue colores oscuros como el púrpura y el marrón como sombras. Luego agrega 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 césped. Agregue rayas de hierba en la parte inferior del árbol.

#7 Construyendo juegos de mosaicos

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

Partimos de los mosaicos de hierba. Haga una selección en los 9 mosaicos como se muestra en la imagen a continuación.

Luego rellénalo con un color base terroso.

Luego, cree un área de césped en el medio como en la imagen de abajo en la nueva capa.

Dibuja una textura de césped como antes sobre toda el área de césped.

Dale forma a los bordes del área de césped para que se vea más natural con Eraser.

A continuación, agregue una sombra debajo del área de césped con un color oscuro.

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

A continuación, une todas las capas para crear estos mosaicos de hierba. Luego seleccione el primer mosaico en la parte superior izquierda a 32px por 32px.

Haga clic en el icono "Copiar" en la barra inferior. Luego crea una nueva capa y haz clic en el ícono "Pegar" en la barra inferior. Ahora tenemos una loseta de hierba separada.

Haz este paso para las 8 fichas de hierba restantes.

Ahora tenemos 9 mosaicos de césped separados que se pueden duplicar y organizar para formar el entorno deseado.

El siguiente paso es construir los mosaicos para los arbustos y árboles. Los pasos para ambos son los mismos, por lo que solo le mostraré cómo crear conjuntos de mosaicos de árboles.

Seleccione la capa del árbol y luego mantenga presionada hasta que aparezca el menú de opciones. Seleccione "Duplicar capa".

Mueva la copia del árbol al mosaico derecho. Luego duplica la capa del árbol nuevamente.

Ajuste la copia del árbol para que esté en la misma posición (preste atención a cada fracción de píxel) en cada mosaico.

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

A continuación, dividimos este grupo de árboles en tres mosaicos separados. Seleccione el centro del grupo de árboles con una selección de rectángulo de 32 px por 32 px.

Haga clic en el botón "Copiar" en la barra inferior. Ve al panel de capas y crea una nueva capa. Haga clic en el botón "Pegar" en la barra inferior y tenemos un mosaico de árbol separado del grupo.

Haz lo mismo con las dos fichas restantes hasta que tengamos tres fichas de árbol separadas.

#8 Colocación de mosaicos

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

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

Mantenga todas las baldosas de hierba en la capa inferior.

Repita este paso para cada elemento de mosaico que necesitemos. Mantenga la loseta de arbustos y todas las losetas de árboles por encima de la capa de hierba.

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

#9 Exportación y publicación de imágenes

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 128 px por 128 px, que es demasiado pequeño para publicarlo.

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

Vaya al menú Editar > (desplazamiento) Cambiar resolución de imagen...

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

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

Ahora exportemos la imagen a PNG para verla fácilmente en varias plataformas o aplicaciones digitales.

Vaya al menú Archivo > Exportar (capa única).

A continuación, seleccione PNG como resultado de la exportación. Acepte todas las configuraciones existentes si no planea agregar otras configuraciones de exportación.

El archivo de exportación se ha guardado en el almacenamiento de su teléfono.

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

Vaya al menú Archivo > Compartir rápido...

Aparecerá un cuadro de diálogo emergente. Luego elige las redes sociales 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.

¡DE ACUERDO! Eso es todo lo que puedo compartir. Espero que sea útil y por favor ayúdame a hacer más consejos.

Comentario

Nuevo

Últimas publicaciones en Oficial