jueves, 11 de abril de 2013

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

34 comentarios:

  1. Yo pienso que hay que valorar todas las paletas habidas y por haber. Con eso me refiero, a que muchas veces importa más el uso que le des, que no la paleta en sí.

    He visto el tutorial del chico de DA, y respecto a la colocación de los colores de la paleta... No estoy nada, pero nada de acuerdo con él. Yo me coloco la paleta de manera que está bien para mi entendimiento (al igual que uso programas que me van bien a mí en relación a mi forma de pixelar). Es decir, mis paletas suelen ser como la que pone que está mal colocada, solo que en horizontal.

    Pese a que tengo una paleta propia, la mayoría de mis trabajos están hechos con una paleta improvisada... A medida que necesito un color, me lo hago. Y así hasta terminar mi trabajo. También destaco por hacer trabajos con colores vivos que incluso podrían resultar algo saturados a ojos ajenos. Pero a mí me gusta así.


    Una cosa que es verdad, es que si quieres hacer algo junto a otros artistas, lo mínimo que habría que hacer, es compartir la misma paleta de colores, y el mismo patrón de trabajo en general.

    Las paletas de colores tienen su importancia, yo creo que solo habría que vigilar con el contraste entre color y color. Hay paletas ultra saturadas (como las paletas 8 bits) de las cuales pueden salir cosas buenísimas. Por ejemplo aquí un dibujo a pixel con 4 colores:http://www.pixeljoint.com/pixelart/12082.htm

    Interesante tutorial, Toni. Una cosa no quita la otra. Seguro que le servirá de referente a muchas personas.

    ResponderEliminar
    Respuestas
    1. Respondo un poco tarde, y lo hago desde mi experiencia (más con los lápices que con colores).

      La frase "las reglas están para romperlas" es absolutamente cierta, lo que mucha gente ignora, es que conviene tener un conocimiento MUY PROFUNDO de esas reglas para romperlas y lograr lo que se busca.

      Resumen: cada maestrillo tiene su librillo y más sabe el diablo por viejo que por diablo.

      Un saludo y mucho ánimo.

      P.D: im-prezionante la imágen en 4 colores.

      Eliminar
  2. El consejo sobre la colocación de la paleta es más un referente para los que empiezan con el tema. De esa forma se ve claro cada degradado de donde viene y a donde va, aprovechando de paso algunos tonos. Con la experiencia, como cuentas, es algo que sale solo y por lo tanto, que carece de sentido.

    Esto son algunas nociones básicas para poder empezar pero está claro, como digo más arriba, que el límite está en la imaginación de cada uno. La imagen que adjuntas es una auténtica locura derrite retinas! :D

    Hay que tomarse el tutorial como un ejercicio para comprender el funcionamiento del color. Saber que un tono más oscuro no tiene que ser siempre uno con menos brillo.

    Gracias por pasarte a comentar y compartir tus impresiones, que ya sabes que las tengo muy en cuenta! Saludos Marina

    ResponderEliminar
  3. Brutal! ¿En diseño de videojuegos se escoge una paleta para cada elemento o una para todo el juego?

    ResponderEliminar
    Respuestas
    1. No hay ninguna regla escrita y todo depende del efecto que busques. Si quieres darle un aspecto retro a tu trabajo, entonces estaría bien crear una paleta reducida y utilizar la misma para todo el juego. Si usas una paleta distinta para cada objeto, es posible que no consigas homogeneidad en tu trabajo, principalmente si no eres un experto (a esos no les hacen falta reglas xd)

      Un saludo

      Eliminar
    2. Buena respuesta, lo veo lógico xD

      Gracias!

      Eliminar
  4. La verdad es que es un tema al que no se le da la importancia suficiente y bien aprovechado ofrece unos recursos prácticamente ilimitados. Además de que un uso eficiente de las paletas de colores repercute de manera significativa en que el tamaño de un archivo sea siempre lo más comedido posible.

    Muy interesante y útil este artículo :)

    ResponderEliminar
    Respuestas
    1. Muchas gracias! Al final lo importante es conocer las bases y a raíz de ahí ya cada uno es libre de tomar su propio camino. Como dices, tiene ventajas añadidas. Un saludo!

      Eliminar
  5. Nunca me he dedicado de lleno al Pixel por tema de tiempo más que nada pero siempre me ha encantado y cuando puedo, hago mis cosillas. Sin duda dalguna esta explicación de como trabajar con las paletas es muy buena y de gran ayuda.

    Gracias por el post! Ha estado genial

    ResponderEliminar
    Respuestas
    1. Hay muchos y muy buenos tutoriales en la red sobre el tema pero pocos en nuestro idioma. Me incluyo en el saco de esos que no se fijaban en las paletas más de la cuenta. Es algo habitual al empezar ya que poco a poco vamos abarcando más cosas para poder ir mejorando. La mejor forma de forzarse a practicar es trabajar con paletas reducidas y sufrirlo en las carnes ;D

      Gracias por comentar!

      Eliminar
  6. hola, quisera saber si tienes algunas bibliotecas de paletas, las necesito para una tarea jejeje gracias

    ResponderEliminar
    Respuestas
    1. No tengo ningunas guardadas. Pero eso tiene fácil arreglo en un golpe de google o mejor todavía, una vuelta por la comunidad de Pixelart PixelJoint. No hay bibliotecas de paletas como tal pero sí que encontrarás algunas como las que adjunto arriba o siempre puedes coger una imagen que te motive, extraer los colores usados y aprender sobre ello. Saludos!

      Eliminar
    2. Como dice Javier en los comentarios, aquí tienes las que quieras y más!

      https://kuler.adobe.com/#themes/rating?time=30

      Eliminar
  7. Muy bueno, no suelo comentar pero seguid con esta calidad de publicaciones. De un subscriptor ;)

    ResponderEliminar
    Respuestas
    1. Pues me alegro de que esta vez haya sido la que te haya animado a hacerlo :D Gracias por comentar!

      Eliminar
  8. Genial por el aporte Javier, me lo apunto para echarle un vistazo ;)

    ResponderEliminar
  9. Como siempre me dejas a cuadros y me doy cuenta de lo cutre que soy yo cuando me pongo a dibujar. En fin, me apunto lo de las paletas y de hecho voy a intentar crear una que se adapte a mis necesidades, por lo que veo 16 colores es lo suyo.

    ResponderEliminar
    Respuestas
    1. No digas eso! Hay que ir avanzando poco a poco y de hecho cada vez que hago un tutorial me doy cuenta del largo camino que hay por delante. Lo importante es seguir dibujando, buscando excusas para hacerlo y no perder el interés.
      Algo que me hizo reparar en ello fue cuando me puse a dibujar la imagen final del Bubble Dream. 16 colores que tuve que cambiar una y otra vez y reutilizar en lugares en los que no había reparado. 16 colores es un número perfecto.

      Eliminar
  10. Yo no estoy mucho por el tema de desaturar, o sino todo parece Amiga y AtariST, soy más japanofilo XDD

    ResponderEliminar
    Respuestas
    1. Jajaja has dado en la clave! Como amante del sistema de Commodore, me gustan esos tonos más apagados. De todas formas, como dices, todo depende del estilo que queramos usar. Estas son algunas directrices para explorar un poco más allá, pero no significa que sea la correcta o la definitiva.

      Saludos!

      Eliminar
  11. ¡Joder! Me da rabia no tener tiempo libre para explorar todo lo que a veces cuentas aquí. Pero que sepas - a modo de curiosidad - que en el cole donde trabajo he puesto tu página en Favoritos para cuando las "profes" quieren hacer algo decente con Gimp o Potoshó.

    Al principio se quedaron un poco ralladas con eso de que siempre estoy dando la brasa con los videojuegos pero les ha solucionado algún que otro problemilla con la creación de plafones de comunicación para nuestros chavales con autismo. :)

    Un placer como siempre

    ResponderEliminar
    Respuestas
    1. Vaya Laocoont, no sabes lo que me alegra oír eso :) El simple hecho de que le sirva a alguien ya es una satisfacción para mí, pero que además sea para gente ajena del mundillo e intervenga de cualquier modo en un trabajo así, es toda una alegría.

      Te agradezco el comentario y te animo a que algún día sueltes tu ratón en un lienzo en blanco, a ver que sale!

      Eliminar
  12. Muchas gracias Toni!
    Es verdad que esto ya lo conocía, aunque no lo usaba, pero lo me mas me gusta es que citas fuentes, no intentas "apropiarte" del trabajo de otro, sino que lo mejoras y lo explicas lo mejor que puedes.
    Todos tus tutoriales me parecen muy buenos.

    Mucho ánimo!

    Fdo:un seguidor anónimo.

    ResponderEliminar
    Respuestas
    1. Gracias seguidor anónimo :D

      Hay gente que le ha dedicado mucho tiempo a ayudar a los que empezamos en esto y me parece lo justo (y lógico) nombrarlos si de algún modo los he tomado como referencia. Luego claro, procuro añadirle contenido propio y no limitarme a recortar. Gracias por animarte a comentar, un saludo!

      Eliminar
  13. No me queda claro si te refieres a la aplicación en un videojuego, de ser así hay varias opciones, siendo la más sencilla añadir un outline a tus sprites para que queden separados del fondo. Otra opción es tratar de no utilizar los mismos colores, o colores más apagados... claro, todo depende de lo que quieras conseguir visualmente.
    Mi consejo sería que procures no sobrecargar los fondos ahora que empiezas y eches un ojo a juegos clásicos de mismo estilo para comprobar como se las ingeniaban esos artistas del 2d.

    ResponderEliminar
  14. Si te parece, puedes enviármelo para que le eche un vistazo y poder darte alguna idea.

    ResponderEliminar
  15. Gracias por la ayuda a todos, espero algun dia terminar mi tarea

    ResponderEliminar
  16. Que buen material de estudio!!!

    Quisiera recibir sugerencias y/o correcciones de esta paleta que estoy creando para uno de mis proyectos RPG, muchas gracias por la colaboración de todos. PIXELSMIL MANDA!

    http://imageshack.us/a/img843/9060/z58d.png

    ResponderEliminar
    Respuestas
    1. Gracias Usuario Oculto!

      Pues la mejor manera de poner a prueba una paleta es dándole uso. Se junta que no soy un experto en la materia como para rectificarte y que bajo estas bases que propongo, no hay nada escrito. Hay quien tira por colores chillones y otros que tiran de tonos apagados.

      Como apreciación personal, reduciría el número de colores. A veces, el ponerse restricciones potencia el ingenio y el aprender nuevos usos de los distintos colores.

      Te animo a que me envíes tus resultados al correo del blog ;)

      Eliminar
  17. Muy buen tutorial, recien empiezo en el mundo de los 8 bits y el pixel art que tanto disfrute en la epoca dorada de los videojuegos, tengo una duda puesto que esto se usa para verse en pantallas hay alguna limitacion si es que quiero imprimir en este sistema hsb y no ser cmyk. saludos

    ResponderEliminar
    Respuestas
    1. Creo que te refieres a la hora de imprimir tu diseño verdad? El sistema que explico es para trabajar en el modo HSB o HSL. Si te fijas en Photoshop se puede escoger el modo de paleta en RGB y CMYK pero para pixel art es más cómodo poder ajustar luminosidad de una forma sencilla y directa.
      Si quieres imprimir tu diseño, deberías cambiar el proyecto una vez finalizado a CMYK y hacer los ajustes y pruebas necesarios.

      Eliminar
  18. Aunque es tarde, aprovecho para que quede... yo tampoco soy un experto, pero para en Art Academy de Nintendo DS he aprendido que para los colores de fondo lo que hay que hacer es desaturar los colores. Por eso son tan valiosas las paletas que tienen una gama de desaturados, podrías tener en primer plano los colores más saturados, y de fondo un difuminado natural fruto de la desaturación.

    Tios, gracias por este tuto y por el hilo de comentarios, me está siendo muy útil.

    ResponderEliminar
  19. ¡Hola Toni!

    Quisiera saber con que programa se realizan juegos como en esta imagen que has puesto: http://2.bp.blogspot.com/-qePaX90aMOk/UWbqKzorJ2I/AAAAAAAAFus/OpYQ_cRO0FU/s1600/dawnbringer+2.png

    Si se pueden hacer esos fondos en Pyxel Editor o Photoshop o si sabes cómo hacerlo puesto que es el estilo de juego que me gustaría crear y quisiera toda la información posible.

    ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. El programa, créeme, es lo de menos! Al final debes escoger el que más te guste. Siempre pongo el mismo ejemplo, pero Locomalito utiliza un programa para editar iconos (Icon Maker), un programa que en principio no está pensado para darle ese uso. Lo que quiero decir que lo importante es sentirte cómodo con la herramienta y al final da igual la que uses. Elije una y dale duro hasta que te sientas cómodo.

      Eliminar

Gracias por comentar!