Tutorial de PixelArt 3-3

Continuación de Tutorial de PixelArt 2-3

Parte 7: Dithering

La conservación del color es algo de lo que los spriters debemos preocuparnos mucho. Una forma de conseguir más sombras sin usar más colores es el "dithering" (punteado). Parecido al entramado en el arte tradicional, coges 2 colores y los intercalas para obtener, en todas las ocasiones, una unión a pasos de 2 colores.

Ejemplo simple

Una pequeña muestra de como usar dos colores para crear diferentes tipos de sombras haciendo dithering.

Ejemplo avanzado


Compara la imagen superior, realizada usando la herramienta de degradado de Photoshop, y la inferior, con sólo tres colores mediante dithering. Fijate en los diferentes modelos que hemos usado para crear los colores intermedios. Experimenta con otros patrones y escalas para conseguir más texturas.

Usando el Dithering

El dithering puede darle a tu sprite un carácter retro, debido a que muchos juegos viejos debían hacer dithering a fondo debido a su limitada paleta (los juegos de Sega Genesis tienen muchos ejemplos de dithering).No es algo que use muy a menudo, pero para aprender, aquí lo tenemos aplicado (muy aplicado) a nuestro sprite.


Puedes usar el dithering tanto o tan poco como quieras, pero, ciertamente es una técnica difícil de dominar y pocos lo hacen excepcionalmente bien.

Parte 8: Contorno Selectivo

El contorno selectivo o "selout", es como sombrear en el contorno. En lugar de usar el negro en toda la línea, usamos colores cercanos al interior del sprite.También, vamos variando el brillo del contorno alrededor del relleno del sprite, usando como fuente de luz la que nos dan los colores aplicados.

Hasta este punto, hemos mantenido el contorno negro. Y no hay nada malo en ello, de hecho el sprite se ve bien y mantiene bien separado las zonas del sprite de las circundantes (las que están cerca). Pero al usar el negro, sacrificamos más realismo del que realmente queremos, porque le da un estilo "dibujos animados". El selout es una buena forma de evitar eso:


Te habrás fijado en que además he usado el selout para suavizar los pliegues de los músculos. Nuestro sprite empieza a parecer un todo coherente, en vez de una masa de piezas separadas. Compáralo con el original.


Parte 9: Anti-alias

El anti-alias funciona bajo una norma: añadir colores intermedios a los finales de la línea que la suavicen hacia fuera con respecto al color de fondo. Por ejemplo, si tienes una línea negra en un fondo blanco, entonces añadirás píxeles grises a los bordes de la línea suavizandola hacia fuera. Parece raro, pero en realidad es simple.

Técnica 1: Suavizando curvas

Generalmente, añadirás tus colores intermedios en los bordes, porque es donde la línea se rompe y se ve desigual. Si sigue viendose desigual, añade otra capa de píxeles más ligera. Manten tus capas intermedias fluyendo en la dirección de la curva, de suave a fuerte.

Bueno...No creo que pueda simplificarlo más de como lo he explicado sin complicaros las cosas. Mira las imágenes y lo verás más claro


Técnica 2: Rodeando los bordes


Técnica 3: Suavizando finales de línea


Usando el anti-alias

Apliquemos la técnica al sprite. Ten en cuenta que si quieres que el sprite se vea bien en cualquier fondo, no debes usar antialias en los bordes exteriores. Si no, verás un lamentable especie de "halo" alrededor del sprite y contrario al fondo, haciendo que se vea tan feo como pegarle a tu padre con la escobilla del báter en navidades a las 7:30 mientras andas desnudo. A menos que el color de fondo no desentone mucho...

El efecto, como ves, es poco apreciable, pero marca la diferencia.

¿Por qué hacerlo a mano? ¿No es mejor con filtros?
Quizás te preguntarás ¿por qué no hemos usado simplemente un filtro de nuestro programa de dibujo para que parezca más suave? La respuesta es que ningún filtro conseguirá JAMÁS un acabado tan limpio como el que tienes al hacerlo a mano. Así tienes el control total, no solo sobre el número de colores usados, sino también donde los usas. Y tu sabes mejor que cualquier filtro que áreas deben ser suavizadas, y que áreas van a perder su calidad pixelada al hacer anti-alias.

Parte 10: Acabado

Bueno, quizás ya sea hora de que dejes un momento el ordenador y te tomes una bebida bien fría...¡pero no te relajes aún! La última parte separa a un novato entusiasta de un veterano experimentado.

Frena y fijate en tu sprite. Puede que aún sea un poco "áspero". Tomate tiempo para perfeccionarlo y afinar cada detalle. En vez de fijarte en lo cansado que puede ser, tómatelo con diversión, como si fuese un juego. Añade esos pequeños detalles que faltan para hacerlo más perfecto. Aquí, es donde se muestra tu experiencia y habilidad pixelando.


Quizás te preguntes porqué los ojos de Lucha Lawyer estaban perdidos todo este tiempo, o quizás porqué el papel estaba en blanco. Bueno, eso es porque eran pequeños detalles que he dejado para el final. Fijate también en las líneas que he añadido a sus muñequeras, las arrugas del pantalon y...bueno, ¿que es una persona sin pezones? También he oscurecido la parte baja del torso y así parece que su mano está más alejada del cuerpo

¡Ya está! Nuestro Lucha Lawyer tiene un peso lumínico de 45 colores (o más pesado, dependiendo de tu paleta) y mide aproximadamente 150x115 píxeles. ¡Ya puedes tomarte esa bebida!

Proceso al completo
Las cosas animadas son siempre divertidas, este gif te muestra la evolución del sprite.


Temas de cierre
1- Aprende los fundamentos del arte y practica con medios tradicionales. Toda la habilidad que tengas sobre dibujo y pintura afectará a tu forma de pixelar.
2- Empieza con sprites pequeños. Lo difícil es cómo meter un montón de detalles en tan pocos píxeles, no hacer sprites enormes (más complejos y trabajosos)
3- Fijate en obras de otros y no tengas miedo de ser poco original. Imitar el trabajo de otros es la mejor forma de aprender. Lleva tiempo conseguir tu propio estilo.
4- Si no tienes una tablet, hazte con una. El hacer clicks repetidamente haciendo que te lleve más tiempo y el stress que conlleva y hayas tenido que pasar no impresionará a las chicas (o los chicos, si quieres) ni a nadie, solo el resultado. Yo uso un Wacom Graphire2 pequeño, barato y viejo que me va muy bien (queda muy bien en la habitación sobre el escritorio y es muy portatil). Quizás con una tablet mayor te sientas más cómodo, ¡pero pruebalas antes de decidir!
5- Comparte tus trabajos con otros y recibe consejos y opiniones. Y quién sabe, ¡quizás conozcas nuevos amigos como tú!
6- Y si consigues dinero con esto del pixelado y el sprite...¡dame algo, que te he ayudado!

///

Y aquí acabamos. Le agrdezco a todo aquel que haya seguido este tutorial si confianza, y a todos aquellos que me han ayudado a entenderlo mejor para traducirlo bien.

Si por alguna razón algo no lo entendeis u os resulta difícil, comentad, encantado intentaré ayudaros.

¡Nos vemos!

Tutorial de PixelArt 1-3
Tutorial de PixelArt 2-3
Tutorial de PixelArt 3-3