neostalker

Buenas tardes queridos alumnos!

Hoy voy a enseñaros un truco de pixelado muy fácil de hacer y que os será muy útil para conseguir unos diseños más vistosos y suaves: El dithering.

Esta técnica consiste en crear degradados de color usando una paleta muy limitada de colores, como las que solemos usar haciendo pixel art. Hoy en día está muy en desuso, debido a que los gráficos que se suelen usar para videojuegos son a muy alta resolución basándose en paletas de millones de colores, por lo que usar el dithering es poco útil ya que no se necesita escatimar en colores. No obstante, en este arte que nosotros trabajamos sí es útil, pues si estás haciendo gráficos para un juego que será desarrollado para GP32 o GP2X por ejemplo, ahorrar potencia al procesador de la consola utilizando una paleta reducida suele ser una buena idea.

En la Wikipedia (en inglés) teneis una explicación muy detallada sobre el dithering, con muchos ejemplos muy ilustrativos

Este tutorial va a tener dos partes:
- La primera nos enseñará a utilizar esta técnica en un lienzo plano.
- La segunda nos enseñará a aplicarla en figuras complejas.

PASO 1

NOTA PREVIA: Salvo la última y la penúltima, todas las imágenes de este paso están duplicadas en tamaño para que podais ver el pixelado con mayor precisión. Así que 1 píxel será representado con 4 píxeles del mismo color (2 de ancho y 2 de alto).

Lo primero que vamos a necesitar es tener unos cuantos colores. No es necesario que sean demasiados, pero sí que exista cierto parecido entre uno y otro, es decir. Si tenemos el color amarillo y el color rojo, necesitaríamos una o dos variantes de naranja entre ellos (si son dos uno sería un naranja claro y otro un naranja fuerte). A continuación veremos como se aplicaría el dithering a una serie de azules, desde uno muy oscuro hasta el blanco.



5 azules diferentes y el blanco.

Ahora lo que tenemos que hacer es intercalar píxeles de un color con los los del color contiguo. De esta manera nos quedarán líneas de píxeles alternos 1 y 1, aunque podría ser de 2 y 1, o 3 y 1, dependiendo de la tonalidad que queramos crear.

Recordad que lo que se busca usando esta técnica es crear un efecto óptico. Dar la sensación de que existen más colores de los que realmente hay.



Y seguimos intercalando una línea más.



Podemos incluso añadir una línea más, pero saltándonos otra, para que haga un degradado más suave todavía.



Ya está, tenemos ahora un perfecto degradado usando solo 6 colores. Vereis como no hay tanta diferencia con uno hecho con una paleta mucho más amplia.



El segundo degradado está hecho con 64 colores. A tamaño real vereis como la diferencia no se nota tanto.



No está mal para solo usar la décima parte de colores, ¿no? Y si os parece que todavía hay demasiada diferencia siempre podeis aumentar el número de colores a los que aplicar el dithering. Mientras os ahorreis por lo menos la mitad, estará bien

PASO 2

Finalmente solo queda aplicarlo a un dibujo con figuras complejas. Básicamente es el mismo concepto, solo que en ocasiones tendremos que hacer el dithering en curvas o diagonales, que da un poquito más de trabajo, pero tampoco es difícil. Usaremos el antiguo logo de Antena 3, que es fácil de pintar:

1) Aplicamos colores planos, como cuando empezamos a pintar un dibujo siguiendo los anteriores tutoriales:



2) Creamos una serie de colores escalonados de manera coherente (de más claro a más oscuro, por ejemplo):



Fijaos en que aplicamos los colores de forma que parezca que hay un foco de luz en la parte superior del logo, por lo que los bordes inferiores los rellenaremos con las variantes más oscuras.

3) Y aplicamos el dithering con cuidado. Tened en cuanta que al aplicarlo en curva es fácil que nos dé la sensación de que dejamos algunos píxeles muy alejados de otros. Para ir corrigiéndolo lo mejor es pintar usando un zoom sobre la imagen y alejarlo de vez en cuando para ir comprobando como queda el degradado viendo el dibujo por completo y a tamaño real.



Et voilà! ¿A que no queda mal? Pues solo hemos usado 16 colores ^^

¡Que lo disfruteis!

NOTA IMPORTANTE: En estos dos casos esta técnica nos viene que ni pintada, porque usamos imágenes de tamaño medio o grande, pero no es conveniente abusar de este sistema en gráficos pequeños, pues lo único que conseguiremos es tener un conglomerado de píxeles mezclados que no dejan lugar a incluír otros detalles en e dibujo y que quedarán bastante mal.