Pixel Art Tutorial Using Hatsune Miku

Introducción
Bueno en este tutorial les voy a enseñar como tomar una imagen de Internet y convertirla en un Pixel Art.

Pixel Art es lo que se ve comunmente en juegos, los graficos llamados sprites, esencialmente toda la parte visual 2d se hace como Pixel Art.

Beneficios del Pixel Art.

Poder realizar animaciones con mas facilidad, si se realiza imágenes en un papel y luego se escanean las animaciones se verian extrañas por que los tonos de los colores se verian cambiados en cada imagen.

Permite con facilidad cambiar colores de personajes utilizando una paleta de colores, las imágenes Pixel Art tiene un mapa de bits (cantidad de colores que almacena la imagen) de 256 colores, al ser limitada esta cantidad de colores se puede sustituir un color por otro con facilidad, por ejemplo para cambiar el color de un buzo.

La imagen que vamos a utilizar para el tutorial es la siguiente:

Herramientas que vamos a utilizar es el paint.net es gratuito y lo podes conseguir aquí:

http://www.getpaint.net/

Achicando la imagen
Agarramos la imagen y le damos el resize hasta un tamaño que sea equivalente a pixel art, para nuestro ejemplo achicaremos la imagen hasta un porcentaje del 20 % (El porcentaje lo pueden definir ustedes en base a que tamaño de imagen quieren hacer).

Empezando el LineArt
El lineart es el trazado de la figura del personaje, en nuestro caso para el cuerpo del personaje que vamos a hacerle Pixel Art.
Creamos una nueva capa y empezar a trazar con negro alrededor del cuerpo.
Una tecnica para que las lineas no se quiebren de golpe es seguir como explica en este link las curvas y lineas:
http://opengameart.org/content/chapter-2-lines-and-curves

En Internet existen tutoriales de anti alias y otros temas por si quieren profundizar.
Asi nos queda el LineArt de nuestra imagen:

Imagen amplificada 300 %

Colorear el LineArt

Asi es, la linea que utilizamos para dibujar la figura del personaje se colorea, para elegir que colores conviene utilizar, lo mejor es utilizar el color de relleno que esta al lado del Pixel negro, aqui un ejemplo:

Un Tip para sustituir rápidamente el color negro de la linea por otro consiste en utilizar la herramienta color swap:

Con esta potente herramienta podes sustituir explicitamente un color por otro, para nuestro lineart nos viene bárbaro, sustituimos el negro por el color que querramos, es importante poner la tolerancia en 0 y deshabilitar el suavizado. (para que no agregue tonos de colores, solo el color que especificamos)

Seguimos asi con todo el resto del LineArt y el resultado quedara como este:

Imagen aumentada en un 300%

Colorear el personaje
Aquí vamos a rellenar en una nueva capa por color, los colores de nuestro personaje.

Para los colores como regla no utilizar mas de 3 colores basicos (rojo,azul y verde), una buena combinacion de colores es utilizar, cualquier color con blanco, amarillo con negro u otros; igual se puede experimentar un poco; una buena guia es utilizar la rueda del color al momento de elegir nuestros colores.

Dado que nuestra imagen ya esta coloreada en su tamaño original, tomaremos los colores con la herramienta de selector de color (letra "k") y vamos coloreando un color por capa, es importante separar cada color por capa de manera de mas adelante cambiarle los colores de la imagen a voluntad (la parte divertida del asunto ^-^).

Sombreado
Para el sombreado tambien conviene separar una capa por color.

Aquí vemos en la imagen como separo una capa por color, también use una capa verde de fondo para contrastar bien los colores y tener una imagen de todo el dibujo, también sirve para encontrar puntos donde haya quedado sin colorear.

Tip al dibujar la cabeza

Para la cabeza ya lo que hice fue tomar los ojos y la boca y copiarlos del dibujo redimensionado en vez de redibujarlos en una capa nueva, esto tiene ventajas y desventajes, la ventaja que tiene es que el rostro te va a quedar lindo (en serio es mas probable que quede mas lindo que si lo tratas de redibujar en una capa nueva), lo malo es que es mas dificil cambiarle los colores (porque al reducir la imagen se crean muchos tonos de colores para aproximarse al tamaño original).

Agarra con control diferentes partes, de esta manera agarras los ojos y la boca y lo pegas en el mismo lugar en una capa nueva.

Paso Extra cambiando los colores

Dado que nuestra imagen es ahora un pixelart se pueden cambiar los colores del personaje individualmente y crear diferentes versiones de colores del personaje como las imagenes continuación:

NOTA: Al terminar la imagen recuerda grabar la imagen como PNG!, de esta manera no se pierde calidad en los colores.

Hatsune Miku tamaño original

Hatsune Miku zoom 300 % (no se ve genial? ^-^).

Hatsune miku con los colores de Kasane Teto

Hatsune miku con los colores de Kasane Teto al 300%

Hastune Miku con los colores de Rin kagamine

Hastune Miku con los colores de Rin kagamine al 300%

Para ir haciendo esto utilizas dentro de una capa que tenga un color (recuerda que separamos los colores en diferentes capas), la misma técnica de Color Swap que utilizaste para cambiarle el color al Lineart.

Bueno con esto concluye este tutorial espero que le saques provecho y hagas muchos pixel art!. :)