El hilo de pixel art

[fbustamante]

El hilo del pixel art.

Hola compañeros de ambos foros. Si, dos foros, Gp32Spain y Bennu.

Se que bastantes andáis por los dos foros, pero después de estos años sólo he conseguido identificar algunos.

He decidido abrir un hilo sobre el píxel art. Lo voy a utilizar a modo de blog, de discusión sobre el tema, y para afianzar mis conocimientos.

Mi intención es, más que nada, ir recopilando todo lo que encuentro sobre el píxel art y postearlo por aquí. Nombrando siempre que se pueda las fuentes, y con el objetivo de compilarlo todo en un panfleto/libro electrónico sobre el píxel art que aglutine lo hallado, junto con mis experiencias.

Soy casi un lego en la materia. Empecé con el Screen Break Time, y me he tirado a la piscina.

¿A consecuencia de qué? Pues de que somos muchos los programadores y pocos los grafistas. Y no hablemos ya de los músicos. :D

Así que decidí pasarme al lado grafista.

A partir de ahora programaré menos y dibujaré más. Con esto pienso conseguir que salgan menos productos pero de mejor calidad, o por lo menos, que la calidad gráfica aumente.

Si alguien quiere colaborar, por favor intentad no hacer copy-paste de lo que pilléis por ahí.

Leéroslos, estudiarlo, masticarlo, tragarlo y regurgitarlo con vuestro sello.

Si sencillamente queréis postear un enlace, hacerlo. Ya lo cogeré y lo analizaré en algún articulillo.

Espero que esto no se quede en ‘sólo otro proyecto más’ y sea capaz de ir haciéndolo crecer como un globo.

Aquí se acaba la historia. Corto porque lo que viene es también ‘tocho’: Definición de píxel art.

[jduranmaster]

bien, a ver que sale. suerte . :awesome:

[dj syto]

recomiendo pues una visita a esto:

http://www.gp32spain.com/foros/blog.php?u=4104&blogcategoryid=125

[fbustamante]

recomiendo pues una visita a esto:

http://www.gp32spain.com/foros/blog.php?u=4104&blogcategoryid=125

Veis, si es que os tengo que querer. Lleva un rato el post puesto y ya me estáis ayudando.

Gracias dj syto. No lo conocía. Este foro está lleno de sorpresas. :D

[fbustamante]

¿Qué es el pixel-art? Un poco de historia.

Dudo mucho que haya una versión enteramente oficial de lo que es el pixel-art.

Este movimiento, como todos los movimientos, primero nace y luego se le pone nombre.

Pienso que hasta que no pasen un buen montón de años no entrarán las versiones oficiales de las reales academias.

Para mí no es más que la evolución tecnológica de lo que hacían nuestras abuelas con el punto de cruz.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23018&stc=1&d=1302462590
(http://www.c71123.com/princess-peach-shirt/)

Lo que hacía Van Gogh con su puntillismo.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23015&stc=1&d=1302462590

O lo que hacían los romanos con sus mosaicos.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23017&stc=1&d=1302462590


Descomponemos una imagen simplificándola en un puñado de puntos, normalmente, para que aparezca en la pantalla de algún dispositivo electrónico. Aunque también hay pixel-art en la vida real.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23019&stc=1&d=1302462590
(Pixel-art en la calle.)

http://www.gp32spain.com/foros/attachment.php?attachmentid=23016&stc=1&d=1302462590
(Figura hecha con piezas de lego.)

Y por supuesto, la definición de nuestra amiga la wikipedia:

El pixel art es una forma de arte digital, creada a través de una computadora mediante el uso de programas de edición de gráficos en raster, donde las imágenes son editadas a niveles de pixeles.

Las imágenes de la mayor parte de viejos videojuegos para ordenadores, videoconsola, y muchos juegos para teléfono móvil son consideradas obras de pixel art.

Posee similitudes con el puntillismo, difiriendo principalmente en las herramientas para la creación de estas imágenes, computadores y programas en lugar de pinceles y lienzos.

¿Hacía donde va el pixel-art?

Me da la impresión que al mismo sitio que el punto de cruz, el puntillismo y los mosaicos.

Esto es, a que una minoría se dedique a él.

Con la llegada de pantallas más potentes, con todos los bits en color que necesites y toda la resolución que haga falta, ya no será necesaria esta técnica.

Sólo queda la esperanza de que, y este pensamiento es personal, una imagen en pixel-art tiene un contraste, una asimilación por el cerebro y un no sé qué, que no creo que se pueda igualar.

¿O acaso al ver algo hecho tan artesanalmente no te causa admiración?


¿Quién puede ser pixel-artista?

Cualquiera puede dibujar. Podrás ser más bueno o más malo, pero dibujarás.

Los genios nacen, los artesanos se hacen; y la práctica hace al maestro.

Si hablas con cualquier pintor o dibujante que no empezara desde pequeño, te responderá lo mismo:

“Yo hace unos años no tenía ni idea. Pero me puse, y dibujando, dibujando ya sé hacer ‘esto’.”

Te enseñará cualquiera de sus mejores dibujos y tú te quedarás con la boca abierta.

Este señor acaba de confirmarte mi premisa. Lleva 2 años practicando. Así que tú también puedes.

Además en el pixel-art la goma no deja huella. Puedes quitar y poner el pixel cuantas veces quiera. Hasta conseguir lo que andas buscando.

Nota: Imágenes propiedad de su autor. Debido a la idiosincrasia de internet me ha sido imposible averiguar quiénes son.

[tSuKiYoMi]

recomiendo pues una visita a esto:

http://www.gp32spain.com/foros/blog.php?u=4104&blogcategoryid=125

Chincheta a eso. :awesome:

[nintiendo1]

Chincheta a eso. :awesome:

¿Los blogs tienen chincheta?

Saludos.

[kennyspirit]

No, no tienen

[neostalker]

Dios, que alguien se acuerde de mi blog, que lleva más de dos años sin nuevas entradas me emociona :llorosa:

[kennyspirit]

Y del Whispers of Mergal también nos acordamos neo, pero esperamos en silencio a ver si salen cosas nuevas xD

[jduranmaster]

.... si, porque seguias buscando programador, no?

[neostalker]

.... si, porque seguias buscando programador, no?

Me estoy planteando el programarlo yo incluso. Ya que estoy aprendiendo a manejarme con java lo suficiente como para trabajar con gráficos. Aunque va para muuuuuuy largo. Es un proyecto que retomo, abandono, retomo, abandono, ad eternum. Tengo muchos gráficos ya hechos y podría animarme en poco tiempo :)

[fbustamante]

Jua, jua, jua. Los grafistas no saben programar y los programadores dibujan de pena.

¡Quereis hacer el favor de uniros!

Neo, me ha encantado tu blog. Cuando llegue a ese punto a ver si puedo estar a tu altura. :D

[fbustamante]

Archivos y herramientas.

¿Qué herramientas uso para pixel-art?

Bueno, no es el objetivo de estos artículos ayudarte a elegir que programa vas a utilizar para el pixel-art.

Ahora enumeraré los que conozco, con un pequeño comentario totalmente subjetivo, basado sobre todo en mi experiencia. Aunque para gusto, los colores.

Si estás inquieto con algún programa, prueba otro y sopesa. Yo suelo utilizar varios. Algunos sólo para funciones específicas.

-Autodesk Animator Pro.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23036&stc=1&d=1302697153

Un dinosaurio en el arte de la animación. Para algunos el mejor.

Considerado abandonware, no es difícil de localizar.

Pegas:

Normalmente necesita de DosBox para funcionar correctamente, ya que es un programa bajo dos del año 1989.

No interactúa con el portapapeles de Windows.

Comentarios:

Lo encuentro muy completo, difícil de manejar. Mucho más difícil de encontrar sus manuales. (No los tengo. Y si alguien me los pasara en español, le estaría eternamente agradecido). Y lo desaconsejo totalmente para principiantes.

Pero si tienes cierto nivel de informática y muchas ganas, a por él. No creo que te arrepientas.
Apareció años más tarde una versión para Windows, pero pasó casi desapercibida.

- Deluxe Paint

http://www.gp32spain.com/foros/attachment.php?attachmentid=23042&stc=1&d=1302706138

Un programa proveniente de la época del Amiga, allá por el 1990 que rompió moldes y causó furor. Es también considerado abandonware, y tampoco es difícil de localizar.

No conozco ningún pixel-artista que lo use hoy en día, cosa que no me ha ocurrido con el Animator Pro, del cual si he encontrado varios videos. Pero me han dicho que este programa no podía faltar en esta lista.

Ahí queda como homenaje a este programa.

-Paint

¿Quién no conoce el Paint?

Otro preferido por muchos, sobre todo por los puristas.

Si eres un lego en la materia de manejar programas, empieza por este.

Viene en todos los Windows de serie y podrás hacer pixel-art con cualquier ordenador que te encuentres.

Yo personalmente no lo utilizo.

- PhotoShop.

La antítesis de Paint la tenemos en PhotoShop.

Posiblemente el rey de los retoques fotográficos.

Yo sólo lo utilizo cuando quiero aplicar algún filtro a la imagen que estoy realizando.

Trabajo mucho con él a través del portapapeles.

- Graphicsgale


http://www.gp32spain.com/foros/attachment.php?attachmentid=23037&stc=1&d=1302697153
http://www.humanbalance.net/gale/us/

Ahora mismo es el programa con el que más trabajo.

Está orientado tanto a edición como a animación.

Es muy completo y no muy difícil de usar.

La única pega es la falta de efectos gráficos y sobre todo del dithering.

Existen dos versiones: gratuita y de pago.

Recomiendo encarecidamente probarlo.

- GrafX2.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23038&stc=1&d=1302697153
http://code.google.com/p/grafx2/wiki/gallery

Si vienes del Amiga y te gustaba el Deluxe Paint, este es tu programa.

Es gratuito, supercompleto, totalmente orientado al pixel-art, no muy difícil de usar y con una gran comunidad detrás.

No tiene módulo de animación pero recalco que para el pixel-art es de los muy buenos.

- Home (Pro motion) de Cosmigo.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23039&stc=1&d=1302697153
http://www.cosmigo.com/promotion/index.php

Un programa que conocía pero que no había mirado hasta ahora.

Es de pago, pero se puede descargar una versión de prueba.

En lo poco que llevo visto, me está dejando un buen sabor de boca.

Es un todo integrado. Tiles, animación, diseño, etc.

Hecho a la vieja usanza dispone de todas la herramientas que se te puedan ocurrir.

Es sólo para 8 bits (256 colores) y es muy difícil de aprender a manejar, pero dispone de una extensísima ayuda.

Posiblemente sea el programa al que me pase para trabajar.

- MicroAngelo.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23040&stc=1&d=1302697153
http://www.microangelo.us/

Mi primer programa de pixel-art.

Un programa enfocado principalmente al diseño de iconos pero con muy buenas funciones y no muy difícil de usar.

Es de pago.

- Pixothello.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23041&stc=1&d=1302697153
http://teknopants.com/pixothello/

Mi último descubrimiento.

Con la misma filosofía que el Autodesk Animator Pro, encontramos Pixothello.

Un programa Homebrew muy fácil de usar y muy rápido de manejo.

Me ha dejado un buen sabor de boca y espero que su autor siga trabajando en él.

…

Una vez que has elegido con que programa vas a trabajar hay que elegir el formato.

No, no y no JPG. Es un formato superfamoso pero que no nos sirve.

Es de los llamados formatos con pérdidas, te trastoca los píxeles y en el pixel-art sería un desastre.

Recomiendo:

BMP, GIF, PNG. El PCX también vale, pero hay muchos programas que no lo soportan.

Antes de utilizar tu formato favorito, asegúrate que no es de los destructivos y que siempre obtienes la misma imagen que guardas.

EDITADO:

Splinter me ha comentado que aquí debería ir el DPII. ¡Voilá!

[dardo]

Los mosaicos no son pixel art y el punto de cruz tampoco, y el Lego tampoco, pero cualqueira dice nada a una panda de fanáticos de lo digital.

[fbustamante]

¿Y el puntillismo? :D

Yo sólo digo, que se quiera o no, la idea básica es la misma.

[enkonsierto]

¿Y el puntillismo? :D

Yo sólo digo, que se quiera o no, la idea básica es la misma.

por esa regla de tres una foto en un monitor sería pixel art porque está compuesto por unidades de color.

Por cierto, entre los formatos recomendados te has saltado el que yo considero más importante para el pixel art: el png

[fbustamante]

por esa regla de tres una foto en un monitor sería pixel art porque está compuesto por unidades de color.

Por cierto, entre los formatos recomendados te has saltado el que yo considero más importante para el pixel art: el png

No porque una foto en el monitor no la ha hecho nadie punto a punto.

Gracias por lo del png. :brindis:

[fbustamante]

Tipos de pixel-art

La mayoría de los artistas del pixel-art lo dividen en dos grupos:

-Isométricos.
Son gráficos en perspectiva isométrica.

-No isométricos.
El resto de los gráficos.

Aunque parezca una simpleza esta división es debido a la gran cantidad de personas que utilizan la vista isométrica. Posiblemente la más fácil de usar en el mundo del pixel.

Veamos algo de la vista isométrica.

El cubo.

Nuestro primer elemento en cualquier gráfico isométrico. Muy útil como ejemplo básico y a partir del cual mediante el ‘tallado’ se pueden generar el resto de los gráficos.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23068&stc=1&d=1303107926
(Cubo a tamaño natural)

http://www.gp32spain.com/foros/attachment.php?attachmentid=23069&stc=1&d=1303107926
(Cubo multiplicado X 4)

Como podéis imaginar existen varios modos de dibujar un cubo.
Particularmente he elegido este porque es el que más me gusta.

Observar que en esta perspectiva podemos ver 3 de las caras del cubo.

Si imaginamos un supuesto foco de luz en la parte superior derecha, debemos de iluminar cada cara teniendo en cuenta dicho foco. Más adelante hablaremos de la iluminación en el pixel-art.

Es por esto que tenemos la cara superior más clara, que es la que le da directamente la luz, la inferior derecha la siguiente en tonalidad, y la inferior izquierda la más oscura.

Adelanto que la elección de los colores es bastante crítica en el pixel-art y que debemos de elegirlos de acuerdo a una idea de ‘contraste’ de la figura. En un sucesivo tema estudiaremos también el contraste.

Observad como se han aclarado las aristas. Técnica con la cual conseguimos un cubo menos ‘puntiagudo’ y algo más ‘suave’.

Todo esto se analizará en profundidad más adelante.

…Sigamos con nuestro ejemplo.

Ahora que tenemos nuestro cubo preparado, una de las técnicas más sencillas es crear un mega sprite a base de cubos.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23070&stc=1&d=1303107926
(Tamaño real)

Cogemos nuestro sprite y lo ampliamos un 100% por cada pixel que mide de altura. En nuestro caso un 1000% ya que nuestro cubo mide 10 píxeles.

Conseguimos así un megasprite donde cada píxel tiene el tamaño de un cubo.

Al resultado le aplicamos una técnica que se llama ‘slope’ que consiste en ‘tumbar’ el gráfico, quedando así (está técnica la suelen tener implementada algunos programas como el GraphicsGale o el Paint):

http://www.gp32spain.com/foros/attachment.php?attachmentid=23073&stc=1&d=1303107926
(Tamaño real)

Guiándonos con el megasprite en una capa trasparente vamos poniendo los cubos:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23072&stc=1&d=1303107926

Y por último quitamos la capa de guía.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23071&stc=1&d=1303107926

Si queremos le podemos dar distintos tipos de textura al cubo, con lo que obtendremos efectos bastante buenos.

Lo adornamos un poco y nos puede quedar algo tal que así:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23074&stc=1&d=1303107926

Las sombras no son del todo correctas, pero nos valen como muestra.


Preguntas, comentarios y sugerencias son bien recibidas.

[fbustamante]

Los colores.

Salvo que estemos trabajando para un dispositivo antiguo, o por algún motivo queramos hacer sprites con paletas de 8 bits, (menos consumo de memoria y potencia de máquina), veo innecesario y engorroso limitarse sólo a 256 colores.

Para mí esos tiempos ya pasaron. Pero entonces, ¿de qué va este tema?
Pues básicamente de la elección de los colores.

Pecamos mucho de una mala elección de colores.

Veamos la famosa rueda de color.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23114&stc=1&d=1303507199

En ella tenemos colores cálidos: rojos, amarillos y naranjas, y colores fríos: azules y verdes.

Comentario especial se llevan los violetas.

Tendríamos el violeta-rojizo, que tendería a color cálido. Y el violeta-azulado que tendería a la zona de colores fríos.

Los colores cálidos se deben de usar para las zonas de luz y los fríos para las de sombra.

Esto no quita que en nuestros sprites utilicemos unos u otros colores.

Pongamos el ejemplo del paisaje árido, formado sobre todo por rojizos y el del paisaje nevado, formado por tonos azulados. Difícilmente introduciremos colores opuestos en la rueda de color en este tipo de paisajes.

Otro error es la no elección a priori de los colores que vamos a usar en el sprite, así como su mala elección si lo hacemos.

Aunque pensemos que tenemos todos los colores del mundo, en un sprite de pequeño tamaño, como suele ser lo normal, no es conveniente que lo saturemos con una amplia variación de tonos.

Al tratarse de sprites pequeños debemos incrementar el contraste lo suficiente para facilitar su fácil interpretación así como su atractivo.

Un ejemplo.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23115&stc=1&d=1303507200

(Tamaño natural)

http://www.gp32spain.com/foros/attachment.php?attachmentid=23116&stc=1&d=1303507200

(Ampliado un 300%)

En pequeños sprites los degradados se suelen hacer con pocos colores, pongamos 5 ó 6.

Tengamos en cuenta que si el degradado va de un color cálido a uno frío deberíamos pasar por los colores intermedios. Si no lo hacemos podríamos obtener el gris en alguno de ellos, afeando bastante nuestro trabajo.

Con esto obtendremos que la imagen gane sobre todo en contraste y ‘textura’ visual.

La primera bola está realizada con el degradado del PhotoShop y tenemos el típico gráfico ‘foto realista’ de ordenador.

Esto no es lo que buscamos y si aplicamos está técnica a sprites de pequeño tamaño, obtendremos una amalgama de colores difícil de interpretar por el ojo.

La siguiente es la típica mala elección de los colores.

Se han elegido una gama de colores muy difíciles de distinguir. Al estar tan próximos unos colores de otros no obtenemos contraste, y la imagen se nos asemeja ‘plana’ y sin vida.

La tercena elección de colores es la elección donde ya se siente que la imagen tiene que tener contraste, pero no se llega. El tono más claro no es lo suficientemente claro, y nos quedamos ‘cortos’.

La última es la correcta. Se diferencia claramente entre el tono más claro y el más oscuro.

En el perfilado utilizaremos el negro con precaución. En el ejemplo de la bola se ha utilizado el negro para remarcar las sombras y se ha usado el color más oscuro en la zona de luces.

Un ejemplo práctico:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23117&stc=1&d=1303507200

http://www.gp32spain.com/foros/attachment.php?attachmentid=23118&stc=1&d=1303507200

Aquí tenemos el proceso constructivo de una vasija.

Primero creamos el line-art. (Lo estudiaremos en el siguiente capítulo).

Elegimos la paleta de colores.

Damos el tono principal.

Luego vamos añadiendo sombras y luces.

Y por último añadimos detalles y perfilamos.


Comentarios a la vasija:

Como en todos los trabajos, no existe una única forma de realizarlo.

Al estar compuesto por un número tan reducidos de píxeles no queda mucho juego a la improvisación, y es altamente probable que los sprites se parezcan mucho unos a otros.

Los autores más consagrados saben reconocer si un punto está mal puesto o es susceptible de mejora. No es este mi caso.

Lo que se ha pretendido representar aquí es una vasija con sus imperfecciones en el barniz.

Si alguien quiere representarla con las sombras ‘correctas’ respecto al volumen deberá de reformatear ciertas líneas de sombras que han sido acortadas adrede.

Con esto quiero decir que a veces un posible fallo en el gráfico no es más que una mala interpretación de lo que el artista ha querido plasmar.
En resumen esta vasija no es más que ‘mi interpretación’ de una vasija.



Y aquí otro ejemplo de lo ‘interpreta’ el ProMotion con su gradiente de contorno.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23119&stc=1&d=1303507200

http://www.gp32spain.com/foros/attachment.php?attachmentid=23120&stc=1&d=1303507200

Aunque reconozco que igualmente habría que retocarla, sobre todo los detalles y el contorno, no me ha gustado nada el resultado. Pero para gustos los colores.

[fbustamante]

El line-art.

El line-art es el acto de pasar un dibujo a uno formado sólo por líneas limpias.

Es el primer paso para realizar el sprite y es la base para que este nos salga mejor o peor.

A la hora de realizar el line-art debemos intentar poner las líneas justas. Si ponemos menos puede que después la echemos en falta y si ponemos de más emborronarán demasiado el trabajo. Por supuesto, siempre podremos corregir sobre la marcha.

Para crear nuestro line-art podemos documentarnos, basarnos en, imitar e incluso copiar un trabajo original. De esta forma iremos dibujando cada vez mejor.

Jamás, repito, jamás debemos calcar.

Alguien podrá pensar, que calcar y copiar es lo mismo. Pues no.

Calcando nuestro ojo, nuestro cerebro y nuestra mano aprenden a ‘seguir caminos’. Si practicamos mucho el calco, nos volveremos maestros en ‘seguir caminos’.

Sin embargo si ‘copiamos’, el ojo, el cerebro y la mano, ‘crean el camino’. Nos volveremos hábiles ‘creando caminos’ y a la larga crearemos nuestros propios’ caminos’ y con ello aprenderemos a dibujar.

-Como debe de ser un line-art.

Las líneas que compongan un line-art deben de ser los más ‘armoniosas’ posible a la vista.

Como ejemplo de líneas armoniosas tenemos:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23151&stc=1&d=1304160267

(Tamaño original / 300 %)

Y el de no líneas armoniosas:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23152&stc=1&d=1304160267

Lo mismo ocurre con las curvas:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23153&stc=1&d=1304160267

Si no tenemos más remedio que utilizar ese tipo de punteado que ‘afea’ podemos utilizar entonces el ‘antialiasing’.

El ‘antialiasing’.

No es más que el método de dibujo que ‘engaña’ al ojo haciéndole ver suaves las líneas entremezclando colores.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23154&stc=1&d=1304160267

Como veis, la línea con el antialiasing aplicado se ve mucho más ‘lisas’.

El ‘Dithering’.

Otro método para engañar al ojo, el dithering.

Está actualmente en desuso gracias a las modernas tarjetas de vídeo que nos permite usar cualquier color. Pero nosotros seguiremos usándolo porque da esa textura al gráfico que tanto gusta.

El dithering consiste en simular colores entremezclando otros.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23155&stc=1&d=1304160267

Principalmente lo aplicaremos en degradados. Pero he de advertir que el sprite debe de ser de tamaño considerable, sino sólo conseguiremos una amalgama de puntos que ‘ensuciará’ nuestro trabajo.

Veamos cómo se hace un dithering.

Primero cogemos nuestra figura y le aplicamos los colores normalmente.

Como ejemplo pondré un rectángulo que es el más sencillo.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23156&stc=1&d=1304160562

El cuadro de la izquierda está al tamaño original y el de la derecha al 300%.

Hemos pintado el rectángulo con los 6 colores que quiero que forme el degradado.

Ahora iremos haciendo el entramado.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23157&stc=1&d=1304160562

En la frontera de cada color hacemos un tramado como el de la figura.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23158&stc=1&d=1304160562

Y continuamos con este.

Con estos dos tramados ya tenemos resuelto la mayoría de las superficies.

Pero podemos afinar un poco más, añadiendo lo que se puede llamar ‘ruido’.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23159&stc=1&d=1304160562

Somos libres de inventarnos nuestras propias texturas y densidades de puntos que más nos convengan.

[fbustamante]

Dithering (continuación).

A continuación muestro un dither realizado con el Cosmigo Pro Motion de manera automática.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23161&stc=1&d=1304161287

Si el dither es excesivamente grande es conveniente echar mano de algún programa de apoyo y luego afinar a mano. O por lo menos fijarnos en como lo hace el programa para darnos una idea.

El siguiente ejemplo también ha sido generado por el Cosmigo con la opción de ‘random’.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23162&stc=1&d=1304161287

Es interesante observar las diversas texturas que podemos aplicar al realizar el degradado. El random puede servirnos para superficies caóticas o como mínimo otra técnica más a tener en cuenta.

[fbustamante]

- Ejemplo práctico.

En este ejemplo práctico voy a plasmar mis aventuras con la creación de un dragón. Tanto los aciertos como los errores.

Aquí tenemos un dragón en el cual me he basado para realizar mi line-art.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23163&stc=1&d=1304162333

Yo lo he copiado dándole unos toques personales al dibujo, consiguiendo esto.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23164&stc=1&d=1304162333

(Dibujo a tamaño real realizado con el touchpad).

Como comprobareis es un ‘gran churro’, pero que nos sirve como base para sacar el line-art final.

Lo reducimos con la opción antialiasing activada y nos queda esto (Siempre imagen 100% / 300%):

http://www.gp32spain.com/foros/attachment.php?attachmentid=23165&stc=1&d=1304162333

Se puede comprobar que es otro ‘pequeño churro’.

Ahora si podemos calcar, poniendo cada pixel en su sitio hasta llegar al dibujo que más nos satisfaga.

Quedó al final:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23166&stc=1&d=1304162333


Este dibujo, aunque pudiera no ser perfecto, nos va a servir de base.

Advierto de entrada que no he utilizado antialiasing en ningún ejemplo.

Llegado a este punto cometí mi primer error.

Quiero dejar constancia también de los errores, porque como bien se dice, se aprende más de los errores que de los aciertos.

Tenía como objetivo enfatizar los ‘michelines’ de la barriga.

Así que elegí mi paleta de colores y me dispuse a ello. Consiguiendo esto tras muchos intentos y desaciertos:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23167&stc=1&d=1304162333

El resultado es penoso. No conseguía dar con la forma del volumen.

Me salió la barriga de una abeja.

Me puse a estudiar varios dragones de otros artistas y llegué a la siguiente conclusión: el line-art estaba mal y las sombras no se aplican de esa manera.

Para enfatizar una figura o un trozo de esta no hay nada como tener bien definido su perfil. Por lo que corregí el line-art de esta forma:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23168&stc=1&d=1304162580

Parece una tontería, pero definiendo bien el perfil conseguimos acentuar mucho más la forma del volumen del dragón.

Comento también que este line-art tiene ya el perfilado con el color más oscuro de la paleta.

Ahora aplicamos correctamente las luces siguiendo una línea de luz:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23169&stc=1&d=1304162580

Ya tenemos el color primario y su línea de luz principal.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23170&stc=1&d=1304162580

Primeras sombras con algo de dither incluido:

http://www.gp32spain.com/foros/attachment.php?attachmentid=23171&stc=1&d=1304162580

Añadiendo más dithering.

Al final sólo he utilizado 5 colores, así que reajusto mi paleta.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23172&stc=1&d=1304162580

Coloco inicialmente las luces del lomo.

[fbustamante]

Ejemplo (continuación)


Vemos también que la cola ha sufrido un adelanto. Sencillamente se aplica el mismo método a la hora de distribuir las luces. Más claro donde dé más luz, y más oscuro donde menos.

El dithering aplicado es mínimo. Necesario básicamente para crear la ‘textura’.

Se ha añadido nueva paleta para cuernos y escamas, pero más adelante será suprimida.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23173&stc=1&d=1304163520

Añadimos el dithering al lomo. Al ser una superficie bastante grande da mucho juego.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23174&stc=1&d=1304163520


Añadidas alas, escamas y patas.

http://www.gp32spain.com/foros/attachment.php?attachmentid=23175&stc=1&d=1304163520

Y por último reducimos la paleta, añadimos detalles y ajustamos el gamma para dar mayor contraste. (Lo del mayor contraste es cuestión de gustos).

Nº total de colores: 11. (Si no es así, es que se me ha escapado alguno).

- Comentarios y autocrítica.

Para ser mi primer trabajo estoy bastante satisfecho con él. Pero he de nombrar varios errores cometidos.

1- El más grande: planteamiento incorrecto de la base.
Como ya he comentado no planté adecuadamente los cimientos del gráfico y me hizo trabajar más del triple.

2- Me salto colores sin querer en los degradados.
Tengo que estar más atento.

3- No se aplicar correctamente luces y sombras.

4- Todavía no utilizo el antialiasing.

5- En general tengo que practicar más para corregir esos errores.

...


Hasta aquí la parte básica del pixel-art.

Ahora me voy a tomar un descansito y dedicarme a otros quehaceres. En próximos temas hablaremos de técnicas avanzadas.

[GameMaster]

aqui no hay karmas hehehe