¡Hola a todos! En este tutorial voy a explicar como utilizar algunas funciones especiales de Clip Studio Paint Ex para ayudarnos a crear arte isometrico de una manera sencilla, enfocado al diseño de escenarios y arte para videojuegos, pero las técnicas se pueden aplicar a diseños o ilustraciones.

●No soy un experto en el tema asi que estuve experimentando, y quiero compartirles los métodos y técnicas que me dieron resultado. Espero les sea de utilidad

 

■NOTA: Utilizo Clip Studio Paint Ex. Algunas funciones pueden no estar disponibles en otras versiones.

 

Aquí les dejo algunos ejemplos que pinté utilizando las técnicas que vamos a aprender▼

 

1. Introducción | Perspectiva o proyección isométrica

■ Observemos las diferencias entre distintos tipos de perpectiva:

 

• Perspectiva de dos puntos: Si observamos objetos en perspectiva podemos notar que se vuelven más chicos a medida que se alejan hacia el punto de fuga. De esta manera percibe el ojo humano.

 

• Perspectiva Isométrica: A diferencia de la perspectiva tradicional, la perspectiva isométrica es un tipo de proyección axonométrica. En todo momento vemos 3 lados y su escala de medición es la misma. Los objetos no se ven más pequeños o grandes sin importar la posición de la "camara". Los lados forman un ángulo de 30° con el eje vertical.

La ventaja de este tipo de proyección es que podemos construir fácilmente en perspectiva incluso siendo principiantes, pero hay que tomar en cuenta que pueden generarse problemas para percibir la profundidad y la altura de los objetos.

 

• Perspectiva 2:1 : Otro tipo de proyeccíon axonométrica muy utilizada en videojuegos y diseño. En este caso dos lados tienen el mismo ángulo de aproximadamente 26.6°.

Si lo comparamos con la isométrica, los objetos se ven con una vista superior menos pronunciada, por lo tanto se perciben de una manera un poco más natural para el ojo.

 

 

La perspectiva 2:1 se volvió popular por su uso en Pixel Art para videojuegos, el ángulo permite generar lineas rectas limpias si se las compara con la vista isométrica.▼

 

■ NOTA: La proyección más adecuada depende del estilo que busquemos, para juegos de estrategia y diseño arquitectónico la perspectiva isométrica es muy útil, para diseño y pixel art podemos utilizar 2:1.

Personalmente me resulta más agradable la vista que proporciona la perspectiva 2:1, pero lo mejor es experimentar para elegir correctamente según las necesidades de cada proyecto y los gustos personales, incluso podemos explorar otros ángulos para obtener diferentes perspectivas.

2. Primer Método: Transformación

• Vamos a utilizar las herramientas de transformación en clip studio para crear las proyecciónes isométricas:

 

■ [1] Para el ejemplo utilizo un cuadrado. Primero vamos a [Edición] > [Transformar] > [Escalar / Rotar] o utilizamos el atajo de teclado CTRL + T.

■[2] Rotamos la capa 45° utilizando los manejadores o en la paleta [Propiedad de herramienta] y confirmamos la transformación presionando Aceptar o la tecla Enter

■[3] Volvemos a aplicar una transformación.

•[3.1] Nos aseguramos de desactivar [Mantener Proporción]

•[3.2] Cambiamos la Altura para lograr la perspectiva. Para la proyección isométrica muchas veces se utiliza 60 pero personalmente me da mejor resultado 58 para lograr el angulo de 30°.

Confirmamos la transformación presionando Aceptar o la tecla Enter y ya nos queda una baldosa que podemos utilizar como base.

▼ ¿COMO CREAR VOLUMEN A PARTIR DE ESTA FORMA?

 

■[4] Podemos utilizar la base para crear volumen de manera muy sencilla. Primero vamos a duplicar la capa utilizando la herramienta Mover (Atajo V) sosteniendo ALT para duplicar y SHIFT para mover verticalmente. La colocamos un poco más arriba para definir la altura de nuestro objeto.

■NOTA: También podemos duplicar utilizando el atajo CTRL + J o el menú desplegable de [Capa] > [Duplicar capa] en estos métodos duplico capas frecuentemente así que les recomiendo utilizar el atajo de teclado para ser mas eficientes :D

 

■ [5] Utilizando la herramienta de linea que más nos guste, conectamos los puntos en el eje vertical para crear el volumen.

•[5.1] En la herramienta forma utilizo un paso de ángulo de 15° lo cual me permite crear tanto las lineas verticales como los lados a 30°

■NOTA: En este ejemplo también conecte los lados y configuré la capa superior como referencia para ayudarme a rellenar, este paso es opcional.

■ [6] Utilizo el bote de pintura en la capa inferior para rellenar los lados y luego combino las capas utilizando el atajo CTRL + E

• Con estos sencillos pasos la base de nuestro objeto ya está lista. Ahora podemos utilizarla para crear los objetos que imaginemos.

 

▼ UTILIZAR LA BASE PARA CREAR DISTINTOS MATERIALES

 

■ [7] Siguiendo la geometría de la base podemos crear distintos materiales en la perspectiva isométrica.

Podemos trabajar en la misma capa o crear nuevas si consideramos necesario.

 

El proceso depende de cada uno, en mi caso boceto algunos detalles como textura y fisuras en el material. Trato de romper los bordes para que el objeto se vea más orgánico. ▼

Para finalizar simplemente pintamos el material con nuestros pinceles favoritos.

Tomando en cuenta la dirección de la luz y tratando de generar formas interesantes a partir de la base en perspectiva.

 

El nivel de detalle depende de las necesidades y estilo de cada uno. Es muy divertido imaginar y experimentar con distintos materiales.

 

■Partimos de una baldosa, le dimos volumen y luego definimos un material orgánico en perspectiva isométrica.

 

•Espero que este simple ejemplo les de una idea de las posibilidades expresivas que tiene este método.

2.1 | Acción automática

■ Para hacer estas acciones repetitivas menos tediosas, prepare un conjunto de acciones automáticas.

 

Pueden descargarlas en clip studio assets junto al resto de herramientas que prepare para el tutorial. ▼

 

■ [1] Si no vemos el panel de acciones automáticas lo podemos activar desde el menú [Ventana] > [Acción Automática]

 

• [1.1] Luego cargamos las acciones arrastrando desde el panel de materiales.

■ [2] Las acciones estan divididas en dos partes.

• [2.1] Isométrica 30° (Base, frente, lado)

• [2.2] Dimétrica 2:1 (Utilizo una escala de ancho 141 y alto 71)

■ [3] Podemos usar las 3 acciones de Isométrica 30° para construir fácilmente un cubo. Lamentablemente no pude definir lados para la perspectiva 2:1. ▼

 

• La acción Isometric 2:1 nos sirve para crear la base de la perspectiva 2:1 ▼

■NOTA: Debido a la falta de decimales e inclinación en las opciones de transformación, las formas no son perfectas. De todas maneras sirven para ahorrar tiempo y luego podemos refinar la base.

■ [4] TIP: Podemos asignar atajos de teclado a las acciones automáticas, de esta manera podemos ser incluso más eficientes y optimizar el flujo de trabajo.

 

Vamos a [Archivo] [Ajustes de atajo (H)] o utilizamos el atajo CTRL+ALT+SHIFT+K

•[4.1] Seleccionamos Acción Automática del menú desplegable.

•[4.2] Seleccionamos el conjunto de acciones isometrica, elegimos la acción a la cual queremos asignar un atajo y presionamos editar atajo

•[4.3] Agregamos el atajo y confirmamos.

 

 

•Ahora podemos aplicar las acciones presionando el atajo de teclado. Muy útil y eficaz. :D

3. Segundo Método: Reglas especiales

Otra forma de ayudarnos a crear perspectivas es utilizar las reglas especiales de CSP.

Les voy a mostrar dos técnicas diferentes.

■ [1] Para la primer técnica vamos a utilizar la regla especial de [Línea Paralela]

 

•[1.1] Configuramos el Paso de ángulo a 30 para definir la perspectiva Isométrica de 30° y activamos Crear en capa de edición

 

•[1.2] Sosteniendo la tecla SHIFT creamos una regla a 30 grados hacia la derecha

•[1.3] Luego creamos otra hacia la izquierda para definir el otro lado.

 

•[1.4] Finalmente creamos una regla vertical

•[1.5] En el panel de capas configuramos la regla para que sea visible en todas las capas.

■ [2] Ahora que definimos las reglas podemos dibujar los ángulos correctos.

 

•[2.1] La regla activa es la que tiene color violeta. Podemos rotar entre cada regla utilizando el botón en la barra de comandos o el atajo de teclado CTRL+4.

 

•[2.2] Podemos utilizar el botón en la barra de comandos o el atajo de teclado CTRL+2 para activar y desactivar el uso de las reglas. Por ejemplo Desactivamos las reglas para agregar detalles orgánicos.

■ [3] TIP: Podemos tomar ventaja de las capas de vectores para construir nuestros objetos.

•[3.1] Dibujamos las líneas sin preocuparnos que se crucen

•[3.2] Utilizamos el borrador de vectores para eliminar las líneas sobrantes.

■NOTA: Este método es probablemente el más preciso para crear isométrica de 30°, pero personalmente no me resulta tan intuitivo ni eficaz.

 

Para resolver este problema prepare unas reglas de perspectiva y grillas, las pueden encontrar en las herramientas que compartí en assets▼

■ [4] Para utilizar las reglas y grillas simplemente arrastramos desde el panel de materiales al lienzo.

 

•[4.1] Ajustamos la grilla al tamaño que prefiramos, utilizando la herramienta Objeto | Operación.

•[4.2] Tomando ventaja de la regla de perspectiva, dibujamos de manera más intuitiva.

•[4.3] Como hicimos antes, podemos utilizar el atajo CTRL+2 para activar/desactivar el uso de las reglas, de esta manera podemos dibujar sin restringirnos a los ángulos cuando sea necesario.

•[4.4] Usando la regla 2:1 podemos crear esa perspectiva de la misma manera que la isométrica 30°

•Espero que las reglas les resulten útiles. Vamos a combinarlas con las acciones automáticas para realizar nuestros diseños. Pero primero vamos a hablar sobre creación de mapas para videojuegos. ▼

4. Conjunto de mosaicos Tilemaps

Una técnica muy versátil y popular para la creación de escenarios en videojuegos es el uso de Tilesets y Tilemaps.

 

■ ¿QUE SON LOS TILESETS?

 

• Un tileset es un conjunto de baldosas o "tiles" que podemos utilizar para crear nuestros mapas en una grilla formando un "Tilemap", son una forma eficaz de crear mapas y suelen ser utilizados en distintos motores de juego como Godot o Unity.

 

• Se suelen crear en un formato cuadrado y usualmente forman patrones entre si estableciendo un sistema modular.

▼Les voy a mostrar como configurar nuestros archivos para trabajar con tilesets y algunas técnicas interesantes para crear escenarios isométricos.

■ Preparando los archivos:

 

•[1] Vamos a [Archivo] >[Nuevo] para crear nuestro lienzo base al que nombramos Tileset,

 

•[1.1] El tamaño puede variar pero generalmente es mas sencillo trabajar en formato cuadrado. En mi caso 512x512px

el tamaño puede variar pero generalmente es mas sencillo trabajar en formato cuadrado. En mi caso 512x512px

 

•[1.2] Importante: Vamos a activar Crear ilustración en movimiento y definir un numero de fotogramas. Este paso es importante para el sistema que desarrollé.

 

Cada fotograma va a representar un Tile o baldosa. 12 es un buen numero para comenzar, podemos agregar más cuando sea necesario.▼

■ [2] Nuestro archivo ya tiene preparada una carpeta de animación con 12 celdas

•[2.1] Para ver los fotogramas vamos a [Ventana] > [Línea de tiempo (X)]

•[2.2] Como configuramos en el menú anterior, ahorramos tiempo y ya tenemos asignada una celda por fotograma :D

 

■ [3] Para poder trabajar con múltiples capas por tile o baldosa vamos a dar click derecho y [Crear una carpeta e Insertar capa(F)] o utilizamos el atajo CTRL+G

•[3.1] Definimos una carpeta para cada Celda

■ [4] Definimos una grilla guía desde el menú [Ver] > [Ajustes de regla/cuadrícula(N)...]

•[4.1] Origen de la regla/cuadrícula: Centro

•[4.2] Intervalo igual al tamaño del lienzo, en este caso 512px. 4 divisiones

■ [5] Para terminar guardamos el archivo en un lugar fácilmente accesible.

Ahora vamos a pintar nuestros Tiles. Para asegurarnos que los motivos se repiten de manera correcta podemos crear un archivo de referencia.

■ [6] Primero pintamos en el primer fotograma para ayudarnos a configurar el archivo.

• [6.1] Creamos un nuevo archivo, para definir el tamaño vamos a crear una grilla de 9 tiles, por lo tanto multiplicamos el tamaño del archivo base por 3. En este caso 512 x 3 =1536

•[6.2] Importamos el archivo de tilesets como objeto de archivo desde el menú [Archivo] > [Importar] > [Crear objeto de archivo]

•[6.3] Con la herramienta Operación| Objeto, configuramos motivo desde el submenú Propiedad de herramienta.

 

•[6.4] Configuramos la ventana para poder usarla de referencia. Cualquier cambio que hagamos en el archivo Tileset original se refleja en esta capa cuando guardamos.

■ [7] A modo de ejemplo creo una variante del primer tile. Duplico la capa y la coloco en la carpeta "2" Correspondiente al segundo fotograma o celda.

 

•[7.1] Con el atajo CTRL+U utilizo la corrección Tono/Saturación/Luminosidad, y cambio el tono para crear la variante de color. Esta es una técnica muy utilizada en videojuegos para aprovechar el arte y ahorrar tiempo.

•[7.2] Ahora mi parte favorita de este sistema que preparamos: En el submenú Propiedad de herramienta podemos seleccionar el fotograma específico que se muestra del Objeto de archivo.

 

¡De esta manera si cambiamos de 0 a 1 pasamos del TILE 1 al 2!

 

▼Vamos a utilizar este método para crear nuestros mapas utilizando los tiles creados en un solo archivo. Personalmente me parece una forma muy interesante y creativa de utilizar esa función de Clip Studio Paint :D

4.1 TIP | Motivos o Patrones

■No soy un experto creando patrones o motivos que se repitan, pero les voy a compartir un par de métodos que me resultan útiles a la hora de pintarlos.

■NOTA: En Marzo del 2020 uno de los temas para los TIPS del mes fue motivos y patrones. Si quieren pueden revisar los increíbles tutoriales que crearon otros autores de la comunidad. Aqui les comparto un par de mis favoritos. ▼

■[1] Vamos a crear un tile de "LAVA". El primer paso es pintar la textura que queremos, todavía no nos preocupamos de hacerla un motivo.▼

•Utilicen sus pinceles favoritos.

■NOTA: Una opción es primero crear un boceto de la textura, convertirla en un patrón y luego refinarla, pero en este caso decidí realizar el tile en color para ahorrar tiempo.

■[2] Activamos la Cuadrícula que preparamos antes con 4 divisiones.

•[2.1] Nos aseguramos de activar [Ajustar a cuadrícula] (Atajo CTRL+3) y utilizando la herramienta de selección rectangular (Atajo M) seleccionamos desde una esquina al centro.

•[2.2] Con la selección activa, CTRL+C y CTRL+V para copiar y pegar en una nueva capa.

•[2.3] Repetimos con las otras 3 esquinas y ya tenemos dividida el "Tile" en 4 partes.

■[3] Con la Herramienta Mover capa (Atajo V) Movemos cada cuarto a la esquina opuesta.

Podemos sostener SHIFT para mantener la diagonal, Una vez que ubicamos la imagen en la esquina utilizamos las flechas del teclado para comprobar que lo colocamos en el pixel correcto.

 

•[3.1] Repetimos con las otras 3 partes.

•[3.2] Utilizando CTRL+E unimos las capas en una sola.

El antes y el después▼ Ahora tenemos que corregir las uniones del centro para finalizar la textura.

■[4] Comenzamos a pintar para corregir las uniones en el centro. Podemos trabajar en la misma capa o crear nuevas cuando sea necesario.

 

•[4.1] En el archivo de referencia, configuramos el fotograma correspondiente al TILE utilizando la herramienta Operacion / Objeto y la paleta Propiedad de herramienta

•[4.2] Utilizando la referencia para comprobar la textura seguimos pintando y refinando hasta quedar conformes con el resultado.▼

■NOTA: Recuerden guardar el archivo (Atajo CTRL+S) cuando realicen cambios en la textura para actualizar el Objeto de archivo en el lienzo de referencia. ("Tileset Check")

■[5] En Clip Studio Assets podemos encontrar excelentes patrones y motivos. Para utilizarlos simplemente arrastramos desde la paleta de materiales al lienzo.

 

•[5.1] Para asegurarnos que quede configurado correctamente utilizamos la herramienta Objeto y en la paleta Propiedades de herramienta, configuramos Ajustar posición a "Lienzo".

De esta manera el motivo queda perfecto en los bordes de nuestro lienzo.

 

■NOTA: Idealmente utilizamos los materiales de Assets como base para ayudarnos a crear nuestros Tiles, y luego pintamos con nuestro propio estilo para generar un sistema visual consistente. Cada uno es libre explorar distintas técnicas para obtener buenos resultados.

▼Algunos ejemplos de Tiles, cada uno en su respectivo fotograma.

 

▼Algunos Materiales que utilicé en los ejemplos.

4.2 TIP | Creando mapas utilizando Tilesets

Les voy a presentar algunas técnicas para utilizar el tileset que creamos en la sección anterior y crear mapas o escenarios de manera dinámica.

■[1] Creamos un nuevo Lienzo, en este caso 1920x1080px

•[1.1] Vamos a utilizar el material de grilla y regla 2:1 para definir la perspectiva.

•[1.2] Importamos el Tileset como Objeto de archivo desde el menú [Archivo] > [Importar] > [Crear objeto de archivo] y seleccionamos el archivo "Tileset"

 

■[2] Utilizamos la Acción automática "Isometric 2:1" Para definir el "Tile" en perspectiva

Utilizamos los controles para reposicionar y darle la escala adecuada al Tile▼

•[2.1] Cambiamos el fotograma en la paleta Propiedades de Herramienta para seleccionar el Tile correcto.

•[2.2] Activamos Motivo para convertirlo en un patrón repetitivo. De esta manera definimos el piso de nuestra escena.

•[2.3] Para crear otros elementos, duplicamos el objeto archivo y seleccionamos otro Tile cambiando el fotograma.

•[2.4] En las opciones de Motivo, podemos elegir como se repite. Si seleccionamos Horizontal o vertical vamos a crear solo una Fila de baldosas en una de las dos direcciones. En este caso definimos una especie de río con el Tile de Agua.

•[2.5] Duplicamos nuevamente, y esta vez cambiamos la dirección del motivo.

Luego definimos el tile modificando el fotograma.

■[3] Nuestro mapa todavía se ve plano, vamos a darle algo de profundidad.

Fácilmente podemos crear dimensión utilizando las reglas y pintando manualmente.

Primero creamos una capa debajo de lo bloques.

 

•[3.1] Con la regla activa y el pincel que más nos guste, pintamos el costado de las baldosas.

•[3.2] TIP: Si creamos variantes de un Tile, podemos utilizar máscaras de capa para crear fusiones y texturas interesantes.

Primero duplicamos y cambiamos el fotograma.

 

•[3.3] Sosteniendo ALT apretamos el botón para crear una máscara de capa, de esta manera escondemos toda la capa.

•[3.4] Utilizando un pincel suave pintamos para crear una transición entre las 2 variantes. Color revela y transparente esconde.

•[3.5] Para finalizar agrupamos todas las capas en una carpeta.

•[3.6] Vamos a crear una sombra para definir la altura del elemento que creamos.

Creamos una nueva capa debajo del grupo.

Luego sosteniendo CTRL hacemos click en la carpeta para crear una selección.

Rellenamos la selección con un color azul oscuro y movemos la capa hacia abajo para crear la distancia entre las baldosas y el suelo.

•[3.7] Completamos la parte que falta con un pincel.

Colocamos la capa en el modo Multiplicación y bajamos la opcidad.

•[3.8] Para completar el efecto, vamos a [Filtro] > [Desenfocar] > [Desenfoque Gaussiano] y ajustamos el valor para suavizar los bordes de la sombra.

■[4] Ahora vamos a darle un poco de profundidad al río.

Creamos una nueva capa encima de los tiles de agua.

Pintamos un borde con la ayuda de la regla de perspectiva.

▼En este caso pinte sin preocuparme por la parte que se solapa en el agua. Luego Cargué la capa de agua como una selección presionando CTRL+Click en la miniatura de capa y borré lo que sobraba para obtener un borde limpio.

 

•[4.1] Podemos desactivar la regla y pintar manualmente bordes más orgánicos y detalles.

•[4.2] Para crear una sombra en el agua primero cargamos la capa como selección nuevamente, y vamos al menú [Seleccionar] > [Reducir área seleccionada] y le damos un valor de 10px

•[4.3] Suavizamos la selección desde el menú [Seleccionar] > [Desenfocar borde] y le damos un valor de 40px.

Luego rellenamos en una nueva capa con cualquier color ya que es solo para utilizar como selección más tarde.

•[4.4] Duplicamos la capa de agua y la ponemos en el modo de fusión multiplicación

•[4.5] Para finalizar cargamos la selección que creamos previamente y la utilizamos como máscara de capa.

Refinamos la máscara pintando manualmente con un pincel suave.

▼Si comparamos, con la sutil sombra tenemos algo más de volumen. Este tipo de detalles son sencillos de realizar y enriquecen la pieza.

■[5] Seguimos creando elementos. En este caso utilizo el Tile de madera para crear un puente.

Primero Duplico el objeto archivo como hicimos previamente y selecciono el Fotograma correspondiente al Tile de maderas.

•[5.1] Sosteniendo la tecla ALT creamos una máscara de capa ocultando toda la capa.

Luego pintamos revelando solo el área al rededor del agua para crear el puente de madera.

Refinamos la máscara de capa pintando manualmente para obtener una forma interesante.

•[5.2] Duplicamos la capa por debajo. El siguiente paso es rasterizar y Aplicar la máscara de capa.

Luego Movemos un poco hacia abajo para crear el volumen del puente.

(CTRL+U ) Tono/saturación/luminosidad para oscurecer la capa y poder ver la silueta.

•[5.3] Siguiendo la forma de la silueta, pintamos manualmente el borde del puente para darle volumen. Tratamos de definir la iluminación. (No tiene que ser perfecto)

•[5.4] Para finalizar, creamos una nueva capa por debajo del puente en modo multiplicación y pintamos una sombra sobre el piso y el agua para integrar el objeto a la escena.

▼Así quedó el puente.

▼Combinando estas técnicas podemos crear diversos objetos y definir nuestro escenario o mapa.

■[6] Algunos últimos detalles en este ejemplo:

En una capa en modo Luz fuerte pinté unos efectos luminosos para mejorar el ambiente con un aerógrafo suave.

•[6.1] Duplico una vez más el objeto "tileset" y elijo el Tile, pero esta vez desactivo Motivo, para tener solo una baldosa.

•[6.2] En una nueva capa debajo de la baldosa, pinto uno de los lados con la ayuda de las reglas para definir el volumen.

•[6.3] Duplico el Lado y utilizo el atajo CTRL+T para transformación libre. Luego le doy Click derecho y elijo [Voltear Horizontalmente]

Finalmente Posiciono la copia para obtener el otro lado del cubo y agrupo las capas en una carpeta.

■TIP: Podemos bloquear los pixeles transparentes y pintar la iluminación/texturas sin preocuparnos de perder la forma.

•[6.4] Creo una copia del grupo y le cambio el Tile para obtener una variante de color.

•[6.5] CTRL+T para transformación libre. Achico el objeto y defino su posición.

•[6.6] Finalmente, para integrarlos a la escena, creé una capa por debajo de los objetos en modo multiplicación y pinté una sombra proyectada manualmente.

▼Decidi cambiar la textura en la máscara de capa de las baldosas verdes para generar una textura más interesante en la transición.

▼Este es el resultado final de mi ejemplo. Espero se den una idea de las posibilidades de este sistema. Combinando técnicas de pintura manual con los Tilesets podemos crear infinidad de escenarios de una manera creativa y eficaz.

(Me llevó mucho más tiempo explicar los pasos que pintar este ejemplo)

■NOTA: Si no rasterizamos los objetos de archivo, todavía podemos hacer cambios en el Tileset y se va a ver reflejado en la composición Isométrica final. Eso nos permite tener un gran control sobre la pieza y en mi opinión es una herramienta creativa muy potente.

▼ Por ejemplo cambiando el tile de "agua" por el de "lava", el resto de los ajustes son casi todos con Tono/saturación/luminosidad (CTRL+U) y en 5 minutos tengo una variante ambiental del escenario.

5. Pintando escena isométrica 2:1

Combinando las técnicas presentadas vamos a pintar una escena más compleja como concepto de videojuego.

■[1] El lienzo en este ejemplo es 4k (3840x2160px).

 

•[1.1] La perspectiva que elegí es 2:1 nuevamente.

 

•[1.2] Este es el Tileset que preparé, para tener una paleta de Tiles con la que trabajar. Si pueden notar tengo algunas variantes del Tile de "rocas" para poder generar variedad.

•[1.3] Para romper el lienzo en blanco pinte un ambiente base, sin demasiado detalle ya que voy a cubrir la mayor parte. Este paso es opcional pero en mi opinión ayuda a integrar la escena desde el inicio.

•[1.4] Utilizando las reglas creé el boceto de la escena. Es una batalla contra un jefe araña. Traté de definir diferentes planos y elementos con los que nuestro personaje podría interactuar en el juego.

■[2] Comienzo a definir los elementos. Primero importo el Tileset como Objeto de archivo.

[Archivo] > [Importar] > [Crear objeto de archivo]

•[2.1] Selecciono una de las baldosas de "roca" con el fotograma correcto.

•[2.2] Con la ayuda de la acción automática, convierto el tile en proyección 2:1 como hice previamente en el ejemplo anterior.

•[2.3] Tomando la grilla y el boceto como referencia achico el Tile a la escala apropiada.

•[2.4] En una nueva capa debajo del tile defino la altura del bloque utilizando la grilla como referencia. en este caso el bloque tiene 1 de alto x 4 de ancho.

Luego Agrupo las capas en una carpeta a la que Nombro Tile Roca 1 y le doy un color para organizarme

•[2.5] Bloqueo los pixeles transparentes en la capa de los lados y comienzo a pintar detalles, seleccionando colores del tile con la tecla Alt. Como es una textura de rocas sigo los contornos par darle un volumen más realista. No es necesario que la perspectiva esté perfecta, alcanza con crear la ilusión del material.

•[2.6] Para acentuar la iluminación, Duplico la capa, la coloco en modo multiplicar y le bajo la opacidad, luego borro las partes que no son necesarias.

•[2.7] Cargo el tile como selección y en una nueva capa en modo Trama pinto para aumentar el brillo en la parte de arriba del bloque.

•[2.8] Creo una copia de la carpeta, y la muevo para ver como se solapan los bloques. La unión se siente un poco forzada, por lo tanto creo una nueva capa y pinto volumen en los bordes para mejorar la transición entre bloques. No importa que salgamos un poco de la grilla ya que es una textura orgánica.

•[2.9] Es importante entender como se superponen los bloques. Para lograr el efecto correcto, en el panel de capas los bloques que están a la derecha del lienzo tienen que estar arriba en las capas. A su vez, las "filas" que van desde abajo a arriba tienen que estar en orden.

■NOTA: Cuando creé las variantes del Tile "Roca" me aseguré de modificar solo el centro, por lo tanto simplemente cambiando el Tile con el fotograma ya tenemos 3 bloques de "rocas" que podemos utilizar.

 

Vamos a duplicar los bloques que creamos para definir el terreno facilmente.

■[3] Seguimos definiendo elementos.

Repitiendo los mismos pasos creamos bloques con otros "tiles".

En este caso modifiqué el tono para crear la variante de bloque.

•[3.1] Utilizando CTRL+T en la carpeta, jugamos modificando la escala de los bloques para definir fácilmente la base de otros elementos de la escena.

•[3.2] Con la ayuda de las reglas extiendo la textura del Tile a los costados.

•[3.3] Creo una copia y las coloco para formar un escalón con 2 bloques.

•[3.4] Agrupo los 2 bloques en una carpeta y creo 3 copias mas. Modificando la posición vertical defino distintas alturas para los escalones, consiguiendo una estructura más interesante sin demasiado esfuerzo.

•[3.5] Para mejorar el modo en que se superponen, en una nueva capa en modo multiplicación pintamos sombras. Para evitar salirnos de los bordes simplemente cargamos los bloques como selección (CTRL+SHIFT+Click en la miniatura de capa) y creamos una máscara de capa. Luego borramos las partes que no necesitamos.

•[3.6] Repetimos los pasos en los otros bloques. Utilizando la misma máscara en una Capa en modo Trama podemos pintar algo de luz en el escalón más alto.

Para finalizar, juntamos todos los escalones en una sola carpeta.

•[3.7] Seguimos creando copias de los bloques de "rocas" definiendo el mapa. No es necesario apegarse perfectamente a la grilla si ajustando las posiciones obtenemos una mejor estructura visual.

•[3.8] Para mejorar los bordes en los bloques extremos creamos una máscara de capa y borramos parte de la estructura siguiendo la forma de las rocas.

•[3.9] Defino la segunda fila, y luego agrupo todos los bloques en una carpeta, de esta manera puedo duplicar fácilmente las filas y completar el suelo.

•[3.10] Utilizo 3 bloques de alto para que el piso de la araña esté en un plano superior.

•[3.11] Termino de completar el suelo, y ajusto los Tiles de forma aleatoria para que no sea tan repetitivo.

•[3.12] Simplemente moviendo algunos bloques verticalmente tanto hacia arriba como abajo, podemos romper la grilla y darle más volumen a la escena.

Este tipo de detalles son sutiles pero le dan vida a la escena, y no toman demasiado tiempo para realizarlos.

También nos sirven para contar una historia o explciar mecánicas para el concepto del juego. Tal vez algunos bloques se caigan cuando los pisa el personaje o activan trampas.

■ Completamos el piso de esta escena. Podemos reutilizar los elementos para crear infinidad de escenarios con el sistema de grillas y bloques.

■[4] Para integrar la escalera con los bloques de rocas creo una máscara de capa en el grupo y pinto con color transparente para borrar parte de los bordes y que no parezcan tan perfectos.

•[4.1] Siguiendo el boceto y con ayuda de la grilla ubicamos las baldosas que creamos previamente para crear superficies flotantes.

•[4.2] En una capa en modo multiplicación pintamos una sombra donde el primer bloque hace contacto con el suelo de piedra. De esta manera integramos a la escena.

•[4.3] Cargamos la forma del Tile como selección y la rellenamos con el color oscuro de la sombra.

Utilizando la grilla nos aseguramos que las sombras se ubican en el lugar correcto para no romper la ilusión de la perspectiva.

Modificamos la opacidad de la capa para ajustar la intensidad de la sombra.

•[4.4] Duplicamos la capa y la ubicamos debajo del siguiente bloque.

Para la sombra de los 4 bloques que forman una estructura, cargamos cada tile como selección y lo rellenamos en la misma capa. Luego ubicamos la sombra en el piso siguiendo la grilla.

•[4.5] Aplicamos un [Filtro] > [Desenfoque] > [Desenfoque gaussiano] a cada sombra para suavizar los bordes. Finalmente agrupamos todas las capas y le aplicamos una máscara de capa para refinar el resultado final.

▼ Uno de los principales problemas de este tipo de perspectiva es la dificultad de percibir la altura de los objetos. Utilizando las sombras creamos la ilusión de profundidad, no es necesario que sea muy realista.

■[5] Seguimos creando los elementos del boceto. El siguiente paso, el río de lava.

Los pasos siguen siendo muy similares. Primero duplico el tilset.

Selecciono el Tile de lava y lo coloco en la posición correcta detrás de los bloques de rocas.

Esta vez activo "Motivo" para crear una línea.

Utilizando una máscara de capa y color transparente escondo las partes que no necesito.

•[5.1] El costado de los bloques "altos" se ve un poco extraño por las partes repetidas. Vamos a pintar en una nueva capa manualmente para que se vea más natural.

•[5.2] Agrupamos los bloques, y enmascaramos parte de la base para integrarla con la Lava.

•[5.3] Creamos una nueva capa en modo Luz Fuerte y le aplicamos una mascara de recorte a los bloques. Luego pintamos un brillo anaranjado para reforzar el efecto de la lava.

•[5.4] Para los bloques que están sobre el Río de lava podemos crear una variante especial facilmente. Primero duplicamos la capa de "Tile" y la cambiamos al Tile de lava.

Luego Sosteniendo ALT creamos una máscara de capa escondiendo todo el contenido.

Pintamos para revelar creando detalles de lava sobre la superficie del bloque.

•[5.5] En una nueva capa pintamos sombras para definir el volumen de las grietas.

También agregamos efectos de luz con una capa en Añadir Brillo

•[5.6] Duplico el bloque y modifico un poco el las grietas de lava. Para integrarlos, nuevamente enmascaro parte de la base y luego agrego un brillo suave.

Finalmente en una nueva capa pinto manualmente detalles sobre la superficie de la lava.

▼Este es el resultado del río de lava y como se integra con los bloques

■[6] Seguimos paso a paso detallando la escena. Los siguientes elementos que voy a preparar son las rocas que enmarcan el río. Como base utilizo uno de los bloques pero lo aumente de tamaño utilizando CTRL+T.

No tengo mucho para explicar con este tipo de elementos, tratamos de mantener la perspectiva pero no es necesario ser perfectos. Voy pintando manualmente con una variedad de pinceles.

▼Nuevamente utilizo Brillos y máscaras para integrar los elementos.

Aunque algunos elementos parezcan complejos de realizar, simplemente dividimos por partes y repetimos los mismos pasos, con paciencia para obtener el nivel de detalle deseado.

Siempre que puedo intento reutilizar elementos para ahorrar tiempo.

•[6.1] Algunos elementos son más sencillos de trabajar en vista frontal. Podemos bocetar y luego aplicar la perspectiva o como hicimos con el Tileset podemos pintar una base a color.

En este caso Utilizo una regla de simetría para acelerar el proceso y diseñar el arco de la entrada al calabozo.

•[6.2] CTRL+T para transformar, sosteniendo CTRL muevo el manejador del centro hacia abajo para deformar el arco en perspectiva tomando de referencia la grilla.

Una vez definido el ángulo, duplico la capa y la muevo para darle volumen al arco.

Con ayuda de las reglas completo los lados para definir la forma básica.

•[6.3] Utilizando la estructura base, voy pintando detalles y definiendo los diferentes planos, tomando en cuenta el material y la iluminación.

El proceso de definir la base primero utilizando las reglas y la grilla facilita la creación de objetos complejos. Luego es cuestión de pulir la pieza con el estilo y los detalles que queremos.

•[6.4] Para finalizar creo una capa en modo luz fuerte y utilizo una máscara de recorte. En esta capa agrego texturas y ajustes de iluminación.

En una capa en modo multiplicación creo la sombra como en los elementos que vimos previamente.

•[6.5] Siguiendo el mismo proceso manual pinté el bloque de rocas que va a servir de base para una fuente y un cristal a modo de "savepoint" o punto de guardado.

Algunos elementos no los explico en detalle paso a paso ya que repito la mismas técnicas. Espero que se entienda de todas maneras.

•[6.6] Otra opción es crear guías en vista frontal, y luego colocarlas en perspectiva utilizando la acción automática que les compartí. En este caso voy a crear una fuente, por lo tanto dibuje 2 circulos y unas lineas de división.

Coloco la guía en perspectiva (Con capas separadas para poder hacer selecciones) Y con transformación libre defino la escala y posición correctas sobre el bloque de piedra.

•[6.7] Duplico la capa y la muevo verticalmente para definir la altura de la fuente. Estas capas superiores nos sirven para crear selecciones.

En una capa inferior pinto el volumen ayudándome de las selecciones.

•[6.8] Pinto la sombra interna, y siguiendo las líneas guía divido la estructura en partes.

Para obtener el color rellene el circulo interno en una capa en modo Luz fuerte, la muevo verticalmente hacia abajo y elimino las partes que se solapan invirtiendo la selección.

•[6.9] En una nueva capa pinto manualmente las rocas individuales, enfocándome en los bordes y la textura.

•[6.10] Utilizando un pincel que descargué de Assets, pinto la textura de agua, Luego utilizando la acción automática la pongo en perspectiva. Borro el excedente utilizando la selección del borde interno

•[6.11] Finalizo con una sombra en modo multiplicar y ajustando los colores.

Combinando las técnicas que vimos previamente y con la ayuda de guías, Dibujar objetos circulares isométricos no es complicado.

■[7] Como vengo explicando, Para objetos orgánicos prefiero pintar directamente, solo tomando la grilla y la perspectiva de referencia. Algunas partes, además, no necesitan tanto detalle.

 

Para el fondo del escenario simplemente pinté manualmente la estructura utilizando las reglas isométricas. Luego las desactivo y agrego detalles con diferentes pinceles.

•[7.1] Pinte un par de huevos monstruosos de araña. Pinté el primero y luego lo dupliqué, le cambié la escala y modifique algunos detalles.

Aunque no estén perfectamente en perspectiva, la sombra en el piso los integra a la escena.

•[7.2] Para finalizar estos detalles orgánicos, pinte unas telarañas y efecto luminoso sin demasiado detalle. Es suficiente sugerir la textura para generar el clima. Siempre puedo volver y pulir más los pequeños detalles.

■[8] Una de las ventajas de la perspectiva isométrica es que podamos reutilizar elementos para construir otros.

En este caso superpuse 3 bloques con diferentes tamaños, para definir un pilar.

Duplico el grupo y lo muevo hacia abajo en el eje vertical.

Luego utilizando las reglas conecto los bordes, y finalmente pinto la textura e iluminación.

•[8.1] Duplico el bloque superior una vez más y reduzco el tamaño. Repito los pasos anteriores para definir el pequeño pilar.

•[8.2] Para crear un orbe fácilmente, primero relleno una selección circular. Realizo una máscara de recorte utilizando un material de esmeralda para obtener algo de detalle.

Finalmente acoplo las capas y pinto detalles de iluminación.

•[8.3] Duplicando el mismo bloque podemos generar las demás estructuras. Primero defino la parte de arriba y luego pinto los lados.

•[8.4] Con el mismo bloque construí unas escaleras. Intenté generar dimensión con las sombras.

▼Los elementos básicos del mapa ya están construidos. Solo nos faltan los personajes y algunos detalles.

5.1 Elementos 3D

Una función de Clip studio paint que me gusta mucho, son las capas 3D. Increíblemente útiles para utilizar como referencia en cómics, concept art y dibujar objetos en ángulos complejos.

 

■Lamentablemente no podemos seleccionar vista isométrica de manera simple en la cámara de las capas 3d. Para resolver esto, prepare un par de capas 3D vacías, con la cámara lo más cerca a vista isométrica que pude conseguir. Este material también lo compartí en Assets

■[1] Colocamos la capa 3d correspondiente, en este caso 2:1

Nos crea un grupo con una capa 3d vacía y un área de referencia.

•[1.1] Con la capa 3d seleccionada arrastramos un objeto 3d al lienzo. El objeto se coloca con la cámara que configuré previamente. (No la modifiquen)

 

•[1.2] Utilizando los controles de capa 3d, modificamos la rotación, Escala y posición del objeto.

■NOTA: el objeto tiene que estar posicionado arriba del área de referencia para asegurarnos una perspectiva lo más precisa posible.

•[1.3] Cuando estamos conformes con el objeto, duplicamos la capa 3d y la rasterizamos.

Utilizando CTRL+T modificamos la escala y posición de ser necesario.

•[1.4] Eliminamos el objeto de la Capa 3d y repetimos los pasos con otros modelos que nos interesen.

▼ Con los diversos objetos la escena ya está completa. Solo nos queda pintar utilizando los objetos 3d como base o referencia.

▼Aquí estan los objetos que utilicé

https://assets.clip-studio.com/en-us/detail?id=1726790

■[2] Voy pintando cada elemento, Todo lo realizo con pinceles, y algunas capas en diferentes modos de fusión. Si necesitan pueden consultar mi tutorial sobre modos de fusión.

Primero pinté el cristal del "savepoint" Intenté romper un poco la estructura del modelo 3d y darle un aspecto mágico con los brillos y el color.

•[2.1] El segundo objeto fue el balde, muy sencillo. Primero modifiqué el color con mapa de degradado y luego pinte manualmente. Importante como en los otros objetos pintar la sombra en contacto con el suelo, de esta manera el objeto se integra a la escena.

•[2.2] Los cristales de colores decidí dejarlos prácticamente igual, Solo difuminé algunos bordes y modifiqué parte de la iluminación. Para finalizar duplique la capa, le apliqué un desenfoque gaussiano y la coloque en modo trama.

•[2.3] Si bien se ve más complejo, el cofre "mimic" sigue el mismo proceso. Utilizando la geometría del objeto 3d voy pintando hasta definir la imagen que tengo en mente.

Le cambié la "boca", Le agregué una especie de ojos y Patas de araña. Una vez que le coloco la sombra proyectada se integra mucho mejor en la escena.

•[2.4] Para Pintar el personaje, simplemente dividí los diferentes elementos en capas y pinté manualmente igual que con el resto de los elementos.

•[2.5] Finalmente pintamos la araña. Fui definiendo la forma y la textura dibujando por encima del modelo 3d.

Dividí el cuerpo en 3 partes y trabajé el color en capas en modo Luz fuerte.

El proceso para todos los elementos es similar, Solo hay que tener paciencia y pintar hasta alcanzar el nivel de detalle necesario. Siempre es buena idea mirar referencias.

■[3] Para finalizar la escena pinté algunos efectos luminosos y mágicos. Pueden encontrar los métodos que utilizo en mi tutorial sobre efectos mágicos.

Generalmente utilizo capas en modo Añadir (brillo) , pero depende del resultado buscado.

■ Este es el resultado final, desde el boceto hasta los efectos mágicos.

■ Lo interesante del arte isométrico es que podemos mover los elementos y crear nuevas escenas.

Conclusión

Muchas gracias por mirar mi tutorial.

Fue muy interesante explorar arte isométrico enfocado en videojuegos.

Siento que algunas partes no las expliqué en detalle ya que repetía las mismas técnicas que en pasos anteriores. Disculpen si es un poco largo.

 

■ Espero que les sirvan los materiales que compartí. Pueden aplicarlos a ilustraciones y diseño no solo arte para videojuegos.

 

Si tienen alguna pregunta no duden en dejarme un comentario.

Cuídense y exploren su creatividad.