Hilo original: [Link]

TID=11299
Autor: cure
Traduccin: Nucklear

PROPSITO
Este tutorial est diseado para explicar que es pixel art, que no lo es, como empezar y como
hacer mejor pixel art. Este tutorial es un intento de juntar la informacin sacada de otros
tutoriales ms pequeos. Para informacin mas avanzada se recomienda leer esta gua., que
ofrece un anlisis mas detallado de lo que es pixel clusters, banding, anti-aliasing e informacin
ampliada de lo tratado en este tutorial.



TABLA DE CONTENIDOS

I. Qu es pixel art?
1. Por qu no todo el arte digital es pixel art
2. Por qu no todo gira en torno a las herramientas

II. Por dnde empiezo?
1. Trucos
2. Programas
3. Tipos de archivos
4. Empezando la imagen

III. Terminologa
1. Anti-aliasing (AA)
2. Dithering
3. Pixel clusters

IV. Cosas a evitar
1. Mal Anti-Aliasing
2. Bordes dentados/Jaggies
3. Dithering incorrecto
4. Banding
5. Pillow-shading
6. Ruido
7. Sel-out

V. Creando una paleta
1. Cundo debo preocuparme por los colores?
2. Cantidad de colores
3. Saturacin, matiz, luminosidad
4. Rampas de color
5. Variacin de tono
I. QU ES EL PIXEL ART?

A juzgar por el nombre podramos asumir que pixel art es todo arte compuesto por pixels. Pero
no todas las imgenes digitales concuerdan con la descripcin de pixel art. Por ejemplo, esta
fotografa est hecha de pixels, pero no es pixel art:







Bien, entonces las fotografas no lo son, pero si yo hago arte con mi ordenador, estoy
haciendo pixel art?
No. El Pixel art es una sub-categora especfica del arte digital. Ms que de que est hecho, la
pregunta sera "Cmo est hecho?".
Por ejemplo, este dibujo es arte compuesto con un ordenador, y est hecho de pixels, pero no
es pixel art:




Si el pixel art pierde el sentido de la importancia de los pixels que lo construyen, entonces no
creo que pueda ser llamado pixel art. Cuando los pixels mantienen importancia en la naturaleza
del trabajo se define pixel art.

- Alex HW
Por qu no todo el arte digital es Pixel Art

El Pixel Art se aparta de otras formas de arte digital debido a que se enfoca en el control y la
precisin. El artista tiene que tener el control de la imagen al nivel de pixels individuales, y cada
uno de ellos debe ser colocado en su lugar correspondiente. Cuando el Pixel Art es hecho
correctamente, modificar un puado de pixels puede tener un efecto dramtico en la imagen:






Otras formas de arte digital utilizan herramientas que no encontrars en pixel art. La razn por
la que los artistas del pixel art no usan esas herramientas es porque stas colocan los pixels de
manera que el artista no puede predecir. Estas son herramientas como el desenfoque, la
distorsin o la fusin. Cualquier herramienta que coloque pxels automticamente es
normalmente eliminada en Pixel Art. Recuerda, debemos tenerlo todo bajo control.



Muchas veces habrs escuchado a gente diciendo "Esto no es pixel art, tiene muchos
colores!". Esto no es porque haya una regla no escrita que dice "Solo es pixel art si tiene [X]
numero de colores", puedes utilizar tantos colores como te plazca. La principal razn por lo que
la gente se queja es que el uso de gran cantidad de colores puede ser indicativo del uso de
herramientas "no permitidas". Estas herramientas crean muchos colores nuevos para conseguir
desenfoques o efectos de transparencia.
Por qu no todo gira en torno a las herramientas


Entonces, si no utilizo desenfoques o herramientas complejas, es pixel art, no? Cualquier
cosa hecha con MS Paint ser pixel art?
No. No es el programa el que determina que es y que no es pixel art, es como est hecho. Por
ejemplo, esta imagen est hecha con MS Paint, sin herramientas complejas:






Pero no es pixel art. Esto es lo que llamamos Oekaki. Si puedes crear una imagen sin hacer
zoom sobre ella sta no es pixel art. Si estas utilizando la herramienta de lnea o el cubo de
relleno la mayor parte del tiempo, no ests prestando atencin a los pixels individuales, solo a
las lneas y formas que los pixels crean. Lo mismo para bocetos rpidos hechos con el lpiz o
el pincel de MS Paint... todos estos mtodos ignoran la importancia de la colocacin
intencionada de cada uno de los pixels.

Todas estas normas son flexibles, por lo que llevar una definicin demasiado estricta sobre lo
que es y no es o que herramientas se pueden o no utilizar. Por ejemplo:

No hay por qu colocar a mano cada pxel. El trabajo del artista no consiste en hacerlo todo a
mano y no se espera que te comportes como un robot, rellenando amplias reas a base de
clicks de ratn con el pincel. El cubo de relleno est bien, al igual que las herramientas para
lneas. Lo realmente importante es que el artista tenga el control de la imagen al nivel de pixels
individuales, sin significar esto dibujar todo pixel a pixel.
II. POR DONDE EMPIEZO?



Como hemos dicho antes el pixel art se basa en los pixels as que los siguientes consejos
tratarn de hacer que te centres en ellos.

Empieza por algo pequeo - Cuanto ms grande sea la imagen, ms tiempo y trabajo
necesitars para terminarla. Si dominas los pixels te dars cuenta de toda la informacin que
cabe en un lienzo pequeo.

Usa una paleta limitada - Si no puedes hacer un buen sprite con 4 colores, usar 40 no te va a
ayudar. Utilizar una paleta pequea es bueno para los principiantes porque te obliga a centrarte
en la colocacin de cada pixel y la relacin entre grupos. La paleta de 4 colores de GameBoy
es una buena eleccin para principiantes ya que solo te tendrs que centrar en el valor sin
importar el tono y la saturacin.

Programas - Hay una buena cantidad de programas dedicados al pixel art, muchos de los
cuales son gratuitos. Yo uso Grafx2 porque es gratuito, pero GraphicsGale, Pro Motion,
Photoshop, Pixen y MS Paint son elecciones habituales. Algunos son ms amigables que otros,
y esa es la razn por la que eleg algo con atajos de teclado como Grafx2, lo que me ha
ahorrado muchos viajes a la barra de herramientas y ayuda con la gestin de la paleta.

Formato - Un error muy comn es guardar tus imgenes en JPEG/JPG. Debido a la
compresin de este formato, la calidad de tu pixel art se puede destruir.




Por lo tanto, nunca guardes en JPG. Los formatos aconsejables son PNG o GIF. Adems
debes de tener cuidado de que el programa que utilices soporte correctamente el formato que
vas a utilizar y utilizar un conversor si es necesario (como Giffy).
Pero cmo empiezo la imagen?

Eso depende de tus gustos. Algunos artistas prefieren crear el Line Art primero y luego
profundizar en el color:




Otros artistas prefieren crear bloques de color de la mayora de las formas y ms tarde refinar
la imagen hasta lograr el resultado deseado:





Ambos mtodos estn bien, todo depende de con cual te sientas mejor, o de cada proyecto
especfico. Definir las lneas puede ayudarte cuando ests trabajando con una imagen
escaneada (Como en el caso del monstruo anterior). Sin embargo, si estas empezando una
imagen en tu programa de pixelado y no es un sprite minsculo, crear bloques de color mas
grandes puede ser til.
III. TERMINOLOGA


Anti-Aliasing

El Anti-Aliasing es un mtodo para suavizar bordes vivos. Este trmino debe ser familiar para
muchos de nosotros ya que es ampliamente utilizado en juegos o programas de edicin de
fotografa. En el caso del pixel art sin embargo cuando hablamos de anti-aliasing nos referimos
a anti-aliasing manual. El AA manual significa suavizar los bordes vivos colocando pixels de
diferente color para igualar las transiciones. Por ejemplo:



A la hora de aplicar AA manual nos encontramos con diversos obstculos, que trataremos en la
seccin de "Cosas a evitar".
Dithering

El dithering se compone de diversos patrones de pixels. Es utilizado normalmente para
normalizar la transicin entre dos colores sin aadir nuevos colores a la paleta. Tambin es
usado para crear texturas. En la poca de los monitores CRT, el dithering era especialmente
til debido a que el monitor difuminaba las reas con dithering. Ahora que los monitores de alta
definicin son ms comunes, los patrones de dithering no son fciles de ocultar, causando que
el dithering no sea tan verstil como antao. De todas formas, esta tcnica sigue teniendo su
utilidad.

La forma ms comn de dithering es un patrn 50/50, tambin conocido como 50% o patrn de
damero.




Como se muestra en el ejemplo anterior, puedes crear diferentes patrones para llenar el hueco
entre un color plano y un patrn 50%. Estos patrones son normalmente fciles de detectar as
que ten cuidado.

El dithering estilizado es otra tcnica y se caracteriza por el aadido de pequeas formas en un
patrn.


El dithering entrelazado permite unir dos reas con un dithering previo. Se llama entrelazado
porque ambos patrones se entrelazan entre ellos en los bordes. Este tipo de dithering permite
la fusin para crear degradados.




El dithering aleatorio es el tipo menos comn, y no es recomendado normalmente, ya que
aade ruido a la imagen. A pesar de que tiene algunos usos en pequeas dosis, es algo que
normalmente debers evitar.




A pesar de lo til que es el dithering, normalmente est mal usado por artistas inexpertos. El
mal dithering lo trataremos en la parte de "Cosas a evitar".
Pixel Clusters

El cluster de pixels est compuesto de pixels nicos. Sin embargo, un nico pixel es
normalmente intil y sin significado si no est en contacto con pixels del mismo color. El artista
debe tener en cuenta las formas que se crean cuando pixels similares entran en contacto y
crean formas opacas, planas o con forma. La mayora de las derrotas y posibles triunfos se dan
en el momento que el artista crea un cluster

- Ramblethread




Anteriormente se recalc la importancia de los pixels individuales, pero stos son raramente
independientes. Un nico pixel aislado es una mancha en la pantalla - es ruido -. Pero
normalmente no se encuentran solos, sino que aparecen como parte de un cluster. Los grupos
de pixels del mismo color crean reas de color solido. Mientras que un pixel es nuestra unidad
de construccin bsica, el cluster es la unidad en la que se basarn muchas de nuestras
decisiones en cuanto a colocacin de pixels. Por lo tanto de la misma manera que es
importante entender que los pxels individualmente no son independientes, es importante
entender que los clusters tampoco son independientes. Como si se tratase de piezas de
puzzle, los bordes de un cluster determinan la forma de una estructura.

Aqu un ejemplo de cmo reordenando la forma de un cluster de pixels puede tener efectos
dramticos en los clusters contiguos:




Mientras que los pixels aislados son normalmente entendidos como ruido, un pixel aislado de
un color diferente al rea que toca es entendido como parte de ese cluster, cosa que es un
problema:


IV. COSAS A EVITAR

AA Incorrecto

Demasiado AA - Solo necesitas utilizar AA para suavizar lo suficiente la imagen. Si utilizas
demasiado los bordes se pueden ver borrosos, y perders la nitidez de la lnea.




Poco AA - En este caso el artista ha utilizado un nico pixel para suavizar la transicin, pero
solamente ha conseguido normalizar el borde un poco. Podra haberlo hecho mucho ms
suave utilizando lneas ms largas para crear una transicin ms gradual:




AA banding - Cuando los segmentos del Anti-Aliasing se alinean con las lneas que estn
suavizando. Para entender mejor lo que es AA banding, lee la seccin de banding.


Dientes, bordes dentados

Los dientes se producen cuando un pixel o un grupo de pixels estn fuera de lugar,
interrumpiendo el flujo de una lnea. Los dientes pueden aparecer tambin cuando una lnea
carece de anti-aliasing, estos dientes son el resultado de cualquier tcnica de pixelado mal
aplicada. Este tema es tratado ms en profundidad en la seccin de line art.

Cmo arreglar los bordes dentados?

Modificando la longitud de las lneas.




A menudo el problema es que un segmento de la lnea es muy corto o muy largo, y eso crea un
salto feo. Usar una longitud ms uniforme para la transicin es la solucin en estos casos.
Anti-aliasing

Salvo que tu lnea sea perfectamente horizontal, vertical o de 45 grados, los bordes de tu lnea
van a ser dentados.



Esto es debido a la naturaleza cuadrada del pixel y el patrn de rejilla al que estamos
restringidos para hacer lneas con ngulos y curvas que queremos dibujar. El anti-aliasing es la
contramedida correcta en estos casos.


Ditering incorrecto

Hay muchas situaciones en las que el dithering est mal usado. El error ms comn es el sobre
uso de ste. Si el dithering cubre la mitad de tu sprite, probablemente sera mejor que
aadieses un nuevo color a tu paleta. El dithering es ideal para disminuir el final y los bordes de
un area opaca de pixels. Cuando se usa mucho dithering, el rea se convierte en un campo en
s mismo, dando una sensacin contraria a la deseada:




En este caso el dithering ya no sirve como unin entre colores y crea una textura no deseada.
Crear una textura puede ser un uso deseado del dithering, pero solo cuando es usado
correctamente. Si ests interesado en unir colores en lugar de crear una textura entonces el
ditherinf no est funcionando.


La pregunta entonces sera "Cunto dithering usar?". Bueno, depende del tamao de tu paleta
o ms concretamente del contraste entre los dos colores que ests tratando de unir. A menor
contraste menor dureza debe tener el dithering:


Banding

El Banding, se produce cuando los pixels se alinean. Cuando un pixel vecino termina en la
misma coordenada -x o y- de la rejilla subyacente, sta unin se hace ms evidente, los pixels
resaltan mas a la vista, y la resolucin se hace menos fina.

A continuacin se detallan varios tipos de banding, todas ellas se producen porque los pixels se
han alineado:

Hugging:

Aqu un rea opaca de color se ha contorneado con una fila de pixels. Est bien utilizar
contornos, pero hay que asegurarse de que el contorno y la forma interna no se alinean
provocando un efecto indeseado.




Pixels gordos:



Esto puede ocurrir en pequeos cuadrados, juntos en gruesas lneas o multiplicado en franjas
grandes.
Skip-one banding:



Incluso si hay un espacio vaco entre dos franjas, la mente llenar el espacio y el banding
seguir apareciendo.


Banding a 45 grados:



A travs de las filas de pixels alineadas hay solo 1 pixel de grosor y el banding sigue
apareciendo.
Pillow-Shading

Consiste en sombrear rodeando un rea central con franjas oscuras incrementales. El Pillow-
Shading es malo debido a que no presta atencin a la fuente de luz, y se ajusta a la forma del
rea en lugar de a la forma que creara la luz que afecta sobre el modelo. El Pillow-shading se
usa a menudo -aunque no siempre- combinado con banding debido a la alineacin de sombras
y reflejos. Para solucionarlo simplemente presta atencin a la direccin de la luz que incide
sobre el modelo.




La razn por la que est mal no es porque la luz sea frontal - desde la posicin del espectador -
. No tienes por qu poner la luz en un lateral, el problema es debido a que el sombreado acta
como si el modelo fuese una forma plana y no un modelo tridimensional. Por lo tanto es posible
utilizar luz frontal siempre y cuando prestes atencin a las formas:


Ruido

La mayor parte de las veces, los pixeles independientes son incapaces de proporcionar
suficiente informacin por si solos, y su inclusin solo crea ruido. El ruido es cualquier tipo de
informacin que no contribuye al conjunto y solamente interrumpe un rea y distrae al
espectador. En pixel art, el ruido est compuesto habitualmente de pixels sueltos. A lo largo del
tutorial, cuando hablo de "ruido" hablo de pixels independientes. La razn por la que alguien
debe ser cauteloso al utilizar dithering del 25% o aleatorio es por todo el ruido que se puede
generar.

Los pixels independientes hacen ver la rejilla sobre la que se crea la imagen y revelan la
resolucin real de la imagen. Recuerda, los pixels viajan juntos. Por este motivo, los pixels
sueltos deben usarse de manera muy especfica.

Estas situaciones son:

Uso como reflejos especulares:

Los detalles independientes llaman mucho la atencin, pero a veces eso es justamente lo que
quieres. Para los reflejos especulares, un nico pixel puede funcionar bien.

Por ejemplo, fjate en el pixel blanco usado en la nariz del monstruo en los ejemplos
posteriores.

Dibujando pequeos detalles esenciales:



Normalmente esto se aplica solo a imgenes muy pequeas, como los ojos de un sprite
pequeo, el pico de un pequeo pjaro o pequeas burbujas.


Sel-out/Rompiendo el contorno

Sel-out - diminutivo de selective outlining - consiste en aplicar anti-aliasing al contorno para
suavizarlo del color de fondo. Esto significa que el sel-out es un tipo de AA incorrecto, pero el
trmino es suficientemente popular para tratarlo en su propia seccin.




La idea es bsicamente oscurecer el contorno para aproximarse a un color ms oscuro, para
que el sprite se pueda visualizar bien en cualquier fondo, en lugar de fusionarse en fondos con
un color similar. El sel-out no consiste en sombrear el contorno de acuerdo a una fuente de luz.
Un contorno completo con variaciones de luz no crear dientes tan evidentes como el sel-out:


Quizs este sea un ejemplo ms simple. El semicrculo de la izquierda est sombreado de
acuerdo a una fuente de luz sin embargo la parte superior del semicrculo de la derecha tiene
sel-out aplicado:




El sel-out funciona si es creado para escenarios especficos, como cuando en un juego el fondo
va a ser consistentemente oscuro.


V. CREANDO UNA PALETA


Cundo debo preocuparme por los colores?

Bueno esencialmente la pregunta es, qu colores necesita tener el modelo? y a continuacin,
Como de lejos puedo llegar con estos (hasta que necesite ms tonos)?. Ah es cuando ocurre
la mezcla

- Adarias



Este es un mtodo comn para crear una paleta para un modelo. Aqu hay un ejemplo de lo
que Adarias est hablando:



Cuanta ms complejidad tenga el modelo, se crea la necesidad de aadir colores a la paleta
para conseguir una tonalidad ms avanzada, o para colorear nuevos elementos o detalles.

Otro mtodo es crear una base en escala de grises y posteriormente aadir color. Esto es
posible porque el valor relativo de color es mucho ms importante que el tono y ste puede ser
modificado a posteriori tras haber establecido las relaciones del valor del color.



Personalmente me parece ms fcil aadir el color durante el proceso de creacin, por lo que
prefiero el primer mtodo.
Cantidad de colores

Algunas veces vers que algunos artistas abogan por utilizar pocos colores. Debemos asumir
que esto se debe a una tradicin importada de los videojuegos antiguos cuando las consolas
solo podan mostrar una cantidad limitada de colores, pero para nada es una obligacin en la
actualidad.



Si los sistemas modernos pueden mostrar cientos o miles de colores, Por qu no bamos a
usarlos? Aunque a decir verdad, utilizar paletas pequeas no es una tradicin pasada de
moda, y hay unas razones lgicas en ello:

Cohesin - Cuando utilizas pocos colores, los colores aparecern en repetidas ocasiones a lo
largo del sprite ms frecuentemente. Por lo que diferentes reas compartirn color haciendo
que la paleta mantenga una consistencia que unifique el trabajo.

Control - Cuanto ms pequea sea la paleta, ms fcil ser gestionarla. Probablemente
querrs ajustar un color ms tarde. Si tienes 200 colores, te va a llevar mucho tiempo ajustar
todos los colores, porque modificando un color provoca que modifiques su valor y relacin con
los colores contiguos. Con una paleta pequea el efecto de cambiar un solo color es ms
sustancial y existen menos micro-relaciones de las que preocuparse.
Tono, Saturacin y Luminiscencia

Tono:

El tono se refiere a la identidad de un color. Si un color se define como azul, rojo, naranja, etc.
depende de su tono:



Tal y como t puedes cambiar la claridad u oscuridad de un color rodendolo de pxels claros u
oscuros, el tono percibido de un color depende de su entorno. En este caso tenemos un gris
medio completamente neutro:

En esta imagen el verde de los rboles en realidad no es verde, sino el gris de la imagen
anterior:

Debido al violeta del fondo (Que es el opuesto en la rueda de color), el gris se ve ms verde de
lo que en realidad es.

El tono va a ser un concepto importante para cuando tratemos la variacin de tono ms
adelante.

Saturacin:

La saturacin es la intensidad de un color. Cuanto ms baja sea la saturacin, ms cerca
estar ese color del gris:




El mayor problema con el que se encuentra la gente que est empezando con respecto a la
saturacin es escoger colores demasiado saturados. Cuando esto ocurre, los colores
comienzan a quemar el ojo. Esto puede ser un problema grave en pixel art ya que los colores
estn hechos de luz, en lugar de pigmentos de pintura, por lo que el potencial de que los
colores sean demasiado fuertes e irritantes es mucho ms grande. Fjate como los colores de
la segunda imagen son mucho ms amigables al ojo que los de la primera:


Luminiscencia:
La luminiscencia (tambin conocida como calor o brillo) se define con como de oscuro o claro
es un color. Cuanta ms alta sea la luminiscencia, ms parecido al blanco es el color. Si la
luminiscencia es igual a 0 el color es negro. A continuacin puedes ver una paleta con una
escala de luminiscencia:



En una paleta, te gustar tener un buen rango de valores. Si solo tienes colores del mismo
rango de luminiscencia, entonces no sers capaz de crear contrastes entre sombras, reflejos,
tonos medios, etc. La diferencia entre el brillo de dos colores es conocido como contraste. Un
problema comn para la gente nueva es no tener suficiente contraste en sus imgenes.
Puedes ver un ejemplo de poco contraste en la siguiente imagen:

Y la misma imagen, con dos valores ajustados para conseguir un mejor contraste:


El valor de un color es un nmero, pero los colores pueden aparecer ms claros u oscuros
dependiendo del fondo. Por este motivo, no debers utilizar siempre el color ms claro para los
reflejos. Un color que crea un buen efecto de reflejo en un objeto claro puede no hacerlo en
uno oscuro.
La luminiscencia es especialmente relevante en pixel art: El brillo de un pixel o una lnea
determina como de ntida aparecer esta:

El primer ejemplo es una simple lnea blanca. La nitidez de la lnea es consistente. EN el caso
de debajo la lnea vara su brillo. Date cuenta de cmo la lnea aparece ms ntida hacia el
centro en 1x.



Rampas de color
Una rampa de color es un grupo de colores que pueden ser usados de manera conjunta,
ordenados por luminosidad. Una paleta puede constar de una sola rampa de muchas rampas.

Esta es una paleta:


Y aqu est la misma paleta ordenada de acuerdo a sus rampas de color (de las cuales hay
dos):

No es necesario que crees un modelo como el de arriba (aunque algunos lo encuentran ms
cmodo). Lo que es importante es que entiendas como son tus relaciones de color, y estas son
tus rampas.

No es necesario que un color se restrinja a una nica rampa y adems las rampas compartirn
colores a menudo. Frecuentemente, el color ms oscuro y el ms claro pertenecern a la
misma paleta de rampas, como en ejemplo anterior que los colores ms claros y oscuros
comparten el mismo tono.

Tambin es posible que los tonos medios estn en mltiples rampas. En estos casos, el color
ms verstil acaba ocupando el lugar de dos o ms colores diferentes, ayudando en el
mantenimiento de la paleta. En el caso de sombras y reflejos en varias rampas, los extremos
en luminiscencia permiten al color ser ms flexible (porque se aproximan al blanco y al negro).
Los tonos medios al no poder aprovecharse de esto, son normalmente colores ms neutros,
significando esto que son ms cercanos al gris.

Aqu hay una paleta que utiliza un tono de gris para puentear los huecos en varias rampas:


Adems debes de ser cauteloso de no tener colores en una rampa que no sean apropiados. Si
un color no cuadra en una rampa, tiene el potencial de estropear la imagen que ests creando,
lo que debe convertir la eleccin de color en una prioridad. Un color incorrecto puede dar la
sensacin de que no pertenece a la imagen como se puede apreciar en el siguiente ejemplo:


Variacin de tono
Cuando hablamos de variacin de tono hablamos de la transicin tonal en una rampa de color.
Una rampa de color sin variacin de tono es una rampa recta. En las rampas rectas solamente
vara la luminiscencia, mientras que en las rampas con variacin tonal tanto el tono como la
luminiscencia varan.


La primera rampa es una rampa recta verde. La segunda imagen es una rampa verde con
variacin tonal. Cuando usemos la variacin tonal, debemos llevar los tonos ms claros hacia
cierto color (amarillo en el caso anterior), y mover los colores oscuros hacia un segundo color
(azul en el ejemplo). La variacin de color se usa debido a que las rampas de color rectas son
normalmente aburridas y no reflejan la variedad de tonos que nosotros realmente vemos, con
esta variacin podemos aadir un sutil contraste de color en la rampa.