La importancia de las paletas de color (tutorial básico)

Ya tenemos nuestro programa configurado, unas nociones de animación de sprites y es hora de dar un pasito más. Es la hora de darle la importancia que se merece a la paleta de colores.

Como descubriremos, en el pixel art hay algunas normas básica para convertir nuestro dibujo plano y aburrido en algo mucho más interesante.

En el siguiente tutorial aprenderemos los parámetros a tener en cuenta con unos ejemplos y unos cuantos enlaces a otros artistas más experimentados que servirán para ampliar conocimientos.

Empezamos!



Antes de empezar y como siempre advierto, no soy un experto en la materia así que pido disculpas de antemano por cualquier error que pudiera cometer en la explicación. Si hay algo que rectificar, no dudes en decirlo ;)


Introducción y elementos básicos


No importa el programa que usemos ya que todos tienen los mismo parámetros para poder jugar con el color.  Poniendo como ejemplo Photoshop, lo primero que nos encontramos son los parámetros RGB (Red Green Blue). Como sabréis, cada color básico tiene un rango de 0 a 255 y mezclando los tres conseguiremos cualquier combinación. Pero eso no es lo que necesitamos así que hay que cambiar de RGB a HSL. Como?

En programas centrados en pixelart ya vendrá por defecto pero en otros como Photoshop es tan sencillo como lo siguiente:

Fijémonos en los tres valores:

El HUE es todo el rango de colores dispuestos de forma horizontal. Como vemos en la imagen, empieza y acaba en el mismo color, el rojo.

La Saturación afecta a lo 'limpio' que veremos el color por explicarlo de forma entendible. Contra más bajo sea el valor, más grisáceo se verá.

El Brillo o Luminosidad nos afectará a la intensidad del color llegando al negro si llevamos su valor a cero.

Ya estamos listos para empezar.

Teoría y uso del HUE

Si volvemos a fijarnos en el HUE, veremos como empieza, como hemos dicho, en el color rojo y acaba en el mismo tono. Debemos imaginarnos el bucle como si fuera un círculo. 

La mejor forma de entendernos es con un ejemplo práctico.  Así que vamos a dibujar un pequeño sprite. Algo sencillo en el que poder ver claro el ejemplo.

Un guisante con gorra... en que estaría pensando?

Tras elegir el color base, la tendencia más común sería oscurecer o aclarar el tono con la barra de brillo. Una sombra para nuestro verde será siempre un verde más oscuro, verdad? Pues no exactamente. 

Cogeré como base el ejemplo de Kiwinuptuo que es el más claro que he logrado encontrar. Así es como nos explica el buen uso del HUE.

Es muy sencillo de entender en realidad. Las lunas de los extremos marcan los colores más oscuros y la dirección de las flechas indican el camino de cada color para conseguir un tono más claro.

Tomando en base nuestro ejemplo anterior, si queremos iluminar el verde, deberemos tener en cuenta que su tono más luminoso es el amarillo y el más oscuro es azul. 

A partir de ahora, no solo ajustaremos el tono con la barra de Brillo/Luminosidad sino que tomaremos en cuenta el HUE.

Volvemos a los tonos de nuestro sprite y ponemos en práctica lo explicado. De esa forma, en cada sombra que queramos aplicar, moveremos el HUE hacia la zona de la luna (hacia el azul) y por cada capa de luz iremos hacia el sol (en este caso, el amarillo). 

Cuánto ajustar el Hue y el Brillo? Para ir a lo seguro, podemos empezar por 15 puntos en cada parámetro. Una vez tengamos más experiencia podremos estirar esos valores a nuestro gusto. 

Aclarar que lógicamente no solo hemos de mover el HUE sino que se sobreentiende que el brillo también.

Si nos fijamos en el cambio de la paleta, veremos que los tonos van del amarillo al turquesa. No solo eso sino que el color verde base ahora es menos vivo. Aquí es cuando entra el juego la Saturación que ha dotado a los colores de menos viveza.

Así nos ha quedado el cambio.

Mucho más interesante, verdad?

No solo hemos usado el HUE sino que los colores están menos saturados y por lo tanto más agradables a la vista. Otro detalle es el outline que en el segundo paso ya no es completamente negro (a gusto de cada uno).

Esa paleta no es definitiva pero sí un buen punto de partida para nuestras pruebas.

La técnica funciona con cualquier color, así que os dejaré otro ejemplo visual, ésta vez con el color rojo.

Como podéis ver, animarse a jugar con las paletas de color es el siguiente paso si queréis mejorar vuestro pixel art.



Cómo organizar las paletas


Avanzamos un poco más en el tema para hablar sobre como es la manera correcta de organizar nuestros colores en el pixelart.

Lo interesante en una ilustración es que haga una cierta homogeneidad. Utilizar demasiado colores puede provocar que nuestra imagen quede cargada y pierda interés (a no ser que sea la intención).  Por ello, es interesante reducir la paleta reutilizando algunos colores para el mismo gradiente.

Por ejemplo, probablemente nuestras paletas ahora mismo sean así. (volvemos a coger un ejemplo de Kiwinuptuo)

No es que esté mal, es que se puede hacer mucho mejor. Como digo, la clave es reorganizar los colores para conseguir algo más como esto:

Fijaos como un marrón oscuro puede servir de base para un gradiente beige, otro morado y uno turquesa claro. Lo mismo con el azul oscuro que sirve para verdes, azules y grises.

No es fácil y requiere de práctica pero el resultado es el de una imagen con los colores optimizados y bien integrados. Un salto de calidad.



Ejemplos de paletas "pro"


Ahora que entendemos las bases, es hora de fijarnos en algunos ejemplos de virtuosos del píxel. Es la mejor manera de aprender y coger ideas para usos de paleta más agresivos.

Una paleta muy conocida por PixelJoint es la de Dawnbringer, 16 colores.

A priori no se consigue ver demasiada relación entre ellos, pero he aquí la cuestión. Los degradados evidentes son sólo el principio. Dominar los colores es difícil pero vamos a comprobar como se han utilizado en unos ejemplos.

Un mockup que recuerda enormemente a Alien Breed (Amiga). No es increíble como ha dado de sí la paleta? Atención al uso del verde como aliasing de las zonas metalizadas y las cabezas de los alien.

Misma paleta, otro ejemplo.

Increíble como puede ser la misma combinación de 16 colores, verdad? Fijémonos en este caso el los árboles. El paso del verde base al amarillo del brillo, pasa por un azul celeste. De la misma forma, el paso del verde base a un verde oscuro, pasa por un gris amarronado. La limitación de color ha provocado eso y resulta que queda perfectamente bien.

Aquí queda demostrado que no hay límites.

Para acabar, quiero retomar una famosa paleta que dio lugar a algo espectacular. También 16 colores, esta vez más saturados.

Se trata del pixelart colaborativo de PixelJoint a finales del 2011. Fijaos lo que da de si la paleta y como el resultado, a pesar de estar realizado por más de 50 artistas, es totalmente homogéneo.

Aquí ha tocado agudizar el ingenio para poder llevar a cabo cualquier bioma, situación o escena. Recordar que comento esta imagen más a fondo en este post.


Conclusiones


En este tutorial hemos sentado unas bases sencillas para comprender el uso del color pero como se puede comprobar en los últimos ejemplos, el límite está en la imaginación de cada uno.

Lo importante está en usar el HUE y no limitarnos a subir o bajar el brillo. 

No es sencillo crear de la nada una paleta en condiciones. A base de práctica aprenderemos a lograr mejores combinaciones más o menos atrevidas, así que mi consejo es empezar  fijándose en los demás artistas y adoptar paletas ya creadas y testeadas para realizar nuestras primeras pruebas.

Espero que os resulte de ayuda y si os animáis, no dudéis en enviar vuestros resultados a pixelsmil@gmail.com.




Generador de Paletas automático
Ampliación sobre color
Kiwinuptuo tutorial iniciación