TEORÍA BÁSICA DEL COLOR

Bueno antes de empezar hay que hacer una nota aclaratoria y es que este curso no va destinado a toda la extensa teoría del color. Al final de este capítulo haré una recomendación de un par de libros muy interesantes acerca de esto, pero por lo menos ya que estamos en el bloque del curso de “Color” me parece adecuado entrar un poco en este área y refrescar la memoria o al menos darte unas pinceladas de lo más básico.Cuando hablamos de teoría del color nos referimos a un conjunto de reglas para mezclar los colores y conseguir el efecto que deseamos. Pero, profundizando un poco más debemos preguntarnos ¿Qué es el color?

Técnicamente, cuando la luz emitida por una fuente luminosa, (como puede ser el sol o una bombilla) llega a una superficie, la materia absorbe parte de las longitudes de onda del espectro de luz y hace rebotar otras. Las longitudes que rebotan son las que aportan color a las cosas. Esta luz rebotada llega a nuestro ojo estimulando nuestros conos y provocando que nuestro cerebro interprete el color.

Técnicamente, cuando la luz emitida por una fuente luminosa, (como puede ser el sol o una bombilla) llega a una superficie, la materia absorbe parte de las longitudes de onda del espectro de luz y hace rebotar otras. Las longitudes que rebotan son las que aportan color a las cosas. Esta luz rebotada llega a nuestro ojo estimulando nuestros conos y provocando que nuestro cerebro interprete el color.

Colores luz y colores pigmento

En nuestro ojo tenemos tres tipos de conos que nos determinan los llamados colores primarios de luz. Son el rojo, el verde y el azul (Modelo RGB). La combinación de todos estos colores nos da la gama cromática completa y, si los mezclamos los tres, el resultado es el blanco y la ausencia de los tres nos genera el negro. En pintura, sin embargo, trabajamos con un modelo diferente. Los llamaríamos colores pigmento e interactúan de forma distinta a los colores luz. Los colores pigmento primarios son el amarillo, el cían y el magenta (Modelo CMYK). La mezcla de los tres nos genera el negro.

Los colores primarios en pintura (Cian, magenta y amarillo) son los que necesitamos para generar, a partir de ellos, el resto de colores. Cuando mezclamos a partes iguales dos primarios generamos los colores secundarios. Cuando mezclamos a partes iguales un primario y un secundario, obtenemos un color terciario. Con el resto de combinaciones se pueden conseguir mezclas infinitas.

Atributos del color

Antes de continuar vamos a detenernos un segundo a analizar las características de los colores que nos rodean. A cada color podemos asignarle tres atributos básicos.

• El matiz: Nos determina si se trata de un color u otro, es decir, decimos que tiene un matiz verde, un matiz anaranjado, un matiz amarillo…
• La luminosidad: Cuando hablamos de este concepto nos referimos a la claridad u oscuridad del color. Es decir, la intensidad lumínica. Los colores oscuros tienen hacia el negro y los claros hacia el blanco. Normalmente nos referimos a ella cuando hablamos de “es un verde oscuro” o es “un azul claro”.
• La saturación: Se trata de la pureza de un color. Es decir, la cantidad de gris que contiene un color. Cuanto más alto sea el porcentaje de gris menor será la saturación y al revés.

El círculo cromático 

Ahora que ya conocemos las propiedades del  color vamos a adentrarnos en un nuevo concepto, el círculo cromático. Este círculo es una representación gráfica muy clara de distintas paletas de colores. Debes tener en cuenta que este círculo cromático toma como referencia los colores pigmentos que indicamos anteriormente. En ella vemos reflejados el matiz a través de los colores primarios Amarillo, cian (azul) y magenta (Rojo), los secundarios y terciarios. A su vez están representada la saturación y la luminosidad.

En el círculo cromático, los colores complementarios se sitúan entre sí por pares, uno en frente del otro. Estos pares de colores son los que proporcionan mayor contraste y tendrán mayor armonía estética.

HUE / SATURATION / VALUE

O lo que es lo mismo: Tono, saturación, valor. Son tres conceptos que a partir de este momento tenemos que tener más que asumidos y son las nomenclaturas que más vamos a utilizar para referirnos al color en pixel art. 

En algunas aplicaciones podemos ver que hay diferencias. “Value” puede ser cambiado por Brightness o Luminosity, pero a fin de cuenta siguen siendo solo un cambio de nombre.

Para hacernos una idea de como funcionan estos tres valores en cualquier aplicación de arte digital describiré uno a uno estos conceptos:

1. HUE (TONO): Se utiliza para encontrar el color que buscamos partiendo de una gama básica de ellos. En otras palabras los colores puros que podríamos encontrar en el arcoíris y sus variantes. ¡OJO! Solo de color.
2. SATURATION (Saturación): cuando hayamos conseguido un TONO que nos guste, la saturación entra en juego. Cuanta más saturación haya, más “vivo” será ese color. Cuanto menos saturación, más gris será. Esto nos sirve para encontrar tonalidades más pastel por ejemplo. La saturación no sirve para encontrar un color más oscuro o más claro, sino para que sea más vivo o más apagado. Son cosas distintas.
3. VALUE (Valor): Este último manejador nos servirá para, esta vez sí, hacer que nuestro color sea más brillante o más oscuro. No confundir con la saturación, ya que yo puedo tener por ejemplo un rojo muy vivo, pero oscuro. O un rojo muy tirando a gris y muy clarito.

Otros programas utilizan otra forma de mostrar los colores en un color picker*, como por ejemplo con tonalidades RGB. Para mi gusto es más complejo crear un color a través de los manejadores RGB que eligiendo tu tono y luego modificándolo, pero para gustos los colores. (No puedo creer que haya escrito esto). El RGB es un método de coloración por adición. Si por ejemplo mando el manejador R hacia la derecha del todo, tengo un tono rojo muy fuerte, pero si le subo por ejemplo el verde también, según en qué porcentaje conseguiré un amarillo. 

Tengo un programa que tiene manejadores RGB y no sé exactamente como crear colores solo con estos tres tonos… ¿Qué hago? Vuelve a la página 1 y lee sobre “Los colores Luz” para aprender correctamente como mezclar RGB y qué sucede cuando los mezclas.

Es muy importante que tengamos clara la teoría del color antes de seguir con esto. Crear una paleta en condiciones y que sea bonita es difícil siempre que no sepas la teoría así que asegúrate que has aprendido todo lo necesario para ello. Si no, de aquí en adelante te va a costar entender lo que explico. ¡Avisao’ quedas!

*Se le denomina Color Picker a la ventanita donde puedes elegir los tonos, colores, y resto de valores de tu paleta de color.

TÉCNICAS DE SOMBREADO E ILUMINACIÓN

HUE SHIFTING

La técnica Hue Shifting también conocida como “sombras de color” se aplica en cualquier disciplina plástica, no solo en pixel art. Esta técnica hace que tu arte se vea más vistoso y colorido que con una técnica de sombreado básica consistente en oscurecer/desaturar colores. Veamos un ejemplo:

Como podemos apreciar en la curva de color de la izquierda, hemos hecho un sombreado básico, simplemente oscureciendo y desaturando el color original (el primero de la izquierda) pero se ve una curva de color aburrida. OJO, no significa que esté mal, simplemente que puede mejorarse y darle un toque más profesional. Para eso utilizamos el Hue shifting, que puedes ver a la derecha. A medida que el color se oscurece tiende a llevarse a otro tono, en este caso el azul. Podemos apreciar un cambio significativo entre las dos paletas.

Puedes conseguir diferentes sensaciones sombreando con diferentes colores. Por ejemplo en el siguiente ejemplo podemos ver que un mismo color se puede sombrear hacia un tono o hacia otro creando paletas de sombras igualmente válidas y bonitas.

Observamos como viniendo del mismo color (el primer color de la izquierda) azul, podemos sombrear con cualquier otro color y esto delimitará nuestras sensaciones. Esta técnica la trataremos en el video correspondiente de Hue Shifting de forma más concreta y con más ejemplos. La idea es que practiquemos esta forma de sombrear e iluminar, ya que conseguiremos efectos muy curiosos. No tengas miedo de que quede mal, simplemente prueba, juega y diviértete con los colores.

El amarillo es el color más brillante del arcoíris. El purpura (morado) es el más oscuro. Por ese motivo es por lo que generalmente la gente utiliza la técnica Hue Shifting de amarillo a púrpura.

MPL (MULTIPLY PALETTE LAYER)

Esta es una técnica muy curiosa, ya que podemos sombrear e iluminar de una forma rápida sin muchos quebraderos de cabeza. Aunque por lo que a mi opinión personal respecta, Hue Shifting es mucho más preciso y versátil a la hora de crear tus propias paletas.

La técnica MPL consiste en crear sombras a partir de los colores RGB en capas separadas combinando las transparencias. Parece un poco extraño, pero veamos un ejemplo rápido y lo entenderemos.

En la imagen tenemos 6 colores elegidos al azar para hacer esta muestra. En la segunda fila hemos cogido el color ROJO y en una capa superior hemos pintado y asignado un modo de capa “Multiplicar” al 50% de opacidad. De esta forma conseguimos colores más oscuros partiendo de los nuestros base. Con el verde y el azul hemos hecho lo mismo y el resultado es totalmente distinto. A partir de aquí puedes hacer variaciones como más creas. Por ejemplo usar un azul más tirando a morado, un verde más tirando a amarillo Incluso añadiendo o quitándole valor a la cantidad de transparencia… Investiga y no tengas miedo. 

Concluyendo las dos técnicas que hemos visto en este curso, dejaré una imagen final para que veas que no solo oscureciendo el color vas a conseguir tonalidades distintas, sino que con otras modificaciones sencillas como las que hemos visto, hay grandes resultados:

Hue Shifting y MPL son solo dos de las cientos de técnicas que usan los pixelartist. En tu mano está el investigar y crear una mixtura de las técnicas disponibles. A continuación te dejo una imagen extraída de Pixelogic donde podemos ver algunas técnicas más.

Negros y complementarios

Ya hemos hablado de los colores, sus complementarios, como hacer sombras más bonitas, etc… pero aún podemos hacer más cosas con los colores y conseguir otros efectos. En definitiva mejorar nuestros sprites.

Utilizar el color negro sirve para pintar el tono más oscuro de todos los colores juntos. Un color para dominarlos a todos, que dirían… Pero en lo personal, yo y muchos otros artistas utilizamos tonos muy oscuros para crear la sensación de negro, sin llegar a utilizar el negro. Es una explicación un poco ambigua, pero siempre me ha dado la sensación de que el color negro en pixelart es un tono “noob”. No me da la sensación de ser un color profesional. 

Veréis a continuación como esto cambia cuando utilizo morados muy oscuros, marrones muy oscuros, rojos muy oscuros…

Según tengas la calibración de tu monitor verás diferencias de color entre los tonos que se exponen en la imagen. Pero a fin de cuentas todos en pequeñito van a PARECER negro. Si no ves claramente algún color, te recomiendo que utilices Photoshop o cualquier otro programa de edición, insertes la imagen y compruebes por ti mismo que ninguno de esos supuestos negros es negro… ¡MAGIA!

Grises y su uso

Los grises en pixelart son el color “comodín”. Tienen facilidad para camuflarse entre paletas con colores limitados y funcionan muy bien en ambientes oscuros por ejemplo. 

Cuando combinas dos colores complementarios obtienes un color gris casi puro. No es un gris perfecto pero sirve para fundir los colores que buscas. 

Boktai: The Sun Is In Your Hand (2003, GBA) 

Aunque no podamos apreciarlo, en esta escena de Boktai hay muchos grises. No hablamos de grises a ese color indefinido como coloquialmente lo hemos visto siempre, si no a un color desaturado tan al borde del gris puro que te hace confundir de tono. Los tocones de los árboles y las paredes tienen su tonalidad marrón oscura, pero a fin de cuentas bajo una luz nocturna. Son tonos de grises con ciertos toques de purpura o morado.

Si desaturas los colores puedes engañar al ojo humano con diferentes tonos en diferentes ambientes ya que los grises son fácilmente disimulables.

En esta imagen podemos ver que a través de grises mantenemos el tener las copas de los arboles azules/verdes y los troncos siguen pareciendo marrón a pesar de estar bajo una luz morada.

Rampas de color

Hacer paletas de color correctamente es parte de tu workflow de trabajo. No es OBLIGATORIO ni mucho menos, pero si quieres tener una guía de trabajo eficiente, deberías como mínimo tener una armonía de color en tu trabajo, crear una paleta y aprender a usarla correctamente. 

Crear una rampa de color y posteriormente generar tu propia paleta te ayudará a administrar mejor tú tiempo (preproducción), mantener el espacio de trabajo organizado y hacer que la animación sea más sencilla. Cuantas más sombras y luces tengas en tu sprite, más difícil va a ser que puedas animarlo. Eso debes tenerlo presente.

En la actualidad hay muchos programas que ya disponen de paletas de colores que simulan algunas plataformas conocidas como NES, Master System, C64… pero seguro que en algún momento querrás aprender a hacer tus propias paletas. Aún así, por comodidad otros artistas utilizan páginas como Lospec para descargar paletas que utilizan otros y ahorrar de esta manera tiempo. Total, el color no es propiedad de nadie, ¿No?

Esta es la página de Lospec: https://lospec.com/palette-list hay una increible cantidad de paletas creadas por artistas muy buenos y conocidos que ellos mismos añaden a la web para ayudar a otros creadores. Siéntete libre de probarlas, y sobretodo, de ver los colores que eligen y porqué los elijen. No te quedes en la superficie e investiga como consiguen con muchos o pocos colores, mostrar en pantalla lo que quieren.

Esta son rampas de color básicas. Hay muchos tipos de rampas de color, puedes crearlas de la forma que quieras siempre que te sientas cómodo usándola. En este ejemplo, esta rampa podemos observar como partimos de la base de color blanca y a partir de ahí decidimos hacia donde vamos. Fíjate como en los ejemplos de la derecha, parece una cola de gusano que se entremezcla, pero no es más que por ejemplo partiendo de un verde y llevándolo a azul, podemos llegar a “colisionar” otra rampa de morados que van hacia azul y convergen en ese azul más oscuro. Lo mismo pasa con los naranjas y los rojos, cada TONO va hacia un lado pero en algún punto contactan.

Siéntete libre de trastear con los colores. Practica con paletas limitadas de 16 colores, 32… ¡Es muy divertido!