Cómo crear gráficos pixelados para videojuegos en Photoshop - Final

Cómo crear gráficos pixelados para videojuegos

El enfoque de este tutorial está en la técnica del coloreado basado en tonos en escala de grises, sobre la cual se aplican técnicas de edición no destructivas para lograr tanto añadir color como ajustar el brillo y contraste de cada capa o grupo de capas. El video cubre hasta esta parte. Posteriormente, procedí con principios similares para el fondo, usando técnicas de collage y fotomontaje que iré cubriendo en otros tutoriales. Adicionalmente, el uso de los filtros de pixelado y desenfoque se utilizaron para lograr los efectos finales.
Los materiales utilizados fueron los mismos que para el tutorial de Cómo dibujar caricaturas en Photoshop (I).

Referencias

Para el estilo que quería lograr, me basé descaradamente en Ultimate Mortal Kombat 3, un videojuego que representó buenos momentos en la infancia de incontables personas alrededor del mundo. Este juego, al utilizar fotografías en gran parte de los gráficos, tiene un estilo realista aunque la vestimenta y los escenarios añaden un surrealismo muy particular a la identidad del juego. Aunque los personajes representados en el tutorial son de mi imaginación, tuve en cuenta detalles previamente mencionados al elegir los tonos de piel, la iluminación y el escenario.

1. Selección de la gama de colores

Empecé por aplicar una Capa de Ajustes en blanco y negro a la imagen de referencia, para obtener un tono máximo de oscuro y claro, a partir de la cual colorear el personaje de la derecha (Syrups).
Igualmente, añadí un fondo de color neutro para tener un ambiente con el contraste adecuado al colorear.

Cómo crear gráficos pixelados para videojuegos en Photoshop - Gama de colores

2. Limitar las áreas de coloreado

Para limitar el área donde debe aparecer el color, lo más sencillo es:

  1. Utilizar la herramienta de varita mágica (tecla W)Cómo crear gráficos pixelados para videojuegos en Photoshop - Varita mágica, seleccionar todas las capas
  2. Marcar la opción de seleccionar todas las capas
  3. Hacer click en un área alrededor de la figura que queremos seleccionar.
  4. Con esta selección activa, invertimos la selección (Ctrl + Mayúsculas + I).
  5. Eligiendo la herramienta de lazo (L) y manteniendo pulsadas las teclas Alt + Mayúsculas, seleccionamos alrededor de nuestro personaje para solamente preservar la nueva porción seleccionada.
  6. Cómo crear gráficos pixelados para videojuegos en Photoshop - Máscara de grupoFinalmente, con la selección activa, creamos una máscara de capa mediante el icono correspondiente en la parte inferior del panel de capas.

Cómo crear gráficos pixelados para videojuegos en Photoshop -Seleccionar área de coloreado

3. Separación en capas por tonos

Para evitar mezclar tonos oscuros y claros, utilicé una capa individual para cada tono según su luminosidad. Las tres capas creadas fueron: una para las sombras, otra para los tonos medios y otra para los brillos. Igualmente, agrupé todas estas capas para cada personaje de forma a poder trabajar sobre cada uno con más facilidad y convertirlos en un Objetos Inteligentes más adelante.
Algunas maneras sencillas de crear capas y grupos:

  • Mediante los iconos en la parte inferior derecha del panel de capas (ver imagen a continuación)
  • Crear capas pulsando las teclas Ctrl + Shift + N.
  • Crear grupos seleccionando varias capas (manteniendo la tecla Ctrl o Mayúsculas pulsada) y pulsando Ctrl + G.

Cómo crear gráficos pixelados para videojuegos en Photoshop - Nueva capa y grupo

4. Técnica alternativa de coloreado con las herramientas de sobreexposición y subexposición

Para el segundo personaje (Old Bear) utilicé otra técnica, no tan precisa como para el primero, pero que es más rápida y algo más natural. Se trata del uso de las herramientas de sobreexposición y subexposición (tecla O). La primera aclarará los tonos de igual manera que modo de fusión de capa que lleva el mismo nombre. Para la acción contraria de oscurecer, la herramienta complementaria es la de subexponer color. El porcentaje de exposición, visible sobre el panel de herramientas superior, controla la intensidad de la acción. Una herramienta adicional que permite fácilmente obtener tonos intermedios, es la de difuminado (adyacente a la de sobreexposicón) y es útil tanto para esta técnica como para la anterior.

Cómo crear gráficos pixelados para videojuegos en Photoshop - Herramienta de sobreespoxición

5. Detalles finales

Una vez coloreados los personajes, creé la imagen de fondo a partir de un collage de imágenes, que edité y adapté al contexto de este videojuego. Este paso es complemente opcional y puede bastar con obtener una imagen de fondo ya hecha. El efecto del pixelado, característico de estos videojuegos del siglo pasado, lo conseguí aplicando el filtro Pixelado > Mosaico y eligiendo un tamaño de celda de 4 píxeles. Et voilá!

Conclusión

Cómo crear gráficos pixelados para videojuegos en Photoshop - Final

En este tutorial hemos abordado un proceso algo avanzado de coloreado y edición no destructiva, aplicando técnicas y principios propios del proceso profesional de ilustración. Y nos hemos remontado a unos años en el pasado para dar nueva vida a un clásico videojuego mortalmente divertido.

Descargar

Si deseas, puedes practicar desde la base del .psd original disponible aquí.