Tutorial de PixelArt 1-3

Navegando por sitios dispares, me topé con el blog de Derek Yu, el cual suelo visitar de vez en cuando. Lo que no sabía es que tiempo atrás hizo un excelente tutorial sobre PixelArt, que os traduzco aquí para facilitaros problemas.

Sin más, os dejo con mi traducción. He eliminado partes innecesarias y frases hechas que no tienen ningún sentido en castellano, y he añadido ciertos retoques para entender mejor, pero el contenido está intacto.

Parte 1: Herramientas

Una de las cosas buenas del PixelArt es que no necesitas demasiadas herramientas de dibujo, incluso con el programa de dibujo de serie de tu ordenador bastaría. Para este tutorial usaré Photoshop, que es un bicho muy caro, pero sirve para todas las áreas y es perfeto para pixelar

Usando Photoshop, el principal arma será el lápiz (atajo B) ya que nos permite pintar píxeles de uno en uno y sin anti-alias.


Otras dos herramientas importantes serán el marco rectagular (atajo M) y la varita mágica (atajo W) para seleccionar y mover o copiar y pegar.
Recuerda que pulsando las teclas Shift o Alt mientras haces una selección puedes añadir o quitar elementos de tu selección actual. Esto viene bien cuando quieres seleccionar áreas que no son exactamente cuadradas.

También, con el cuentagotas (atajo I) seleccionaremos los colores. Conservar los colores en un PixelArt es muy importante por muchas razones, así que deberás coger los mismo colores y reusarlos.

Además, con el atajo X cambiaremos entre el botón primario y el secundario. Recordar los atajos es muy importante, ya que pueden ahorrarnos mucho tiempo y esfuerzo.

Parte 2: Líneas

Los píxeles son básicamente pequeños bloques de colores. Lo primero que debes aprender es como usar esos bloques correctamente para lograr el tipo de línea que desees. Veremos 2 tipos de líneas: rectas y curvas.

Líneas rectas

Se lo qe piensas, "esto es muy fácil, no necesito siquiera leerlo". Pero con píxeles hasta las líneas rectas dan problemas. Lo que tenemos que evitar son los "jaggies", pequeños cortes en la línea que la hacen extraña. Los jaggies aparecen cuando un trozo o parte de la línea es más grande que el resto.


Líneas curvas

Para curvar, asegúrate de que la declinación o la inclinación es constante todo el rato. En el siguiente ejemplo, la curva perfecta va bajando el número de píxeles 6>3>2>1, mientras que la curva con el jaggy tiene 3>1<3.


Hacer buenas líneas en píxeles es crucial para hacer pixel art. Más tarde, aprenderemos a usar anti-aliasing para hacer líneas aún más suaves.

Parte 3

Lo primero que debes tener, ¡es una buena idea! Intenta visualizar lo que quieres pixelar, ya sea en tu cabeza o en un papel. Trabajar un poco en el pre-planteamiento te puede ayudar a concentrarte en tu pixelado actual.

Piensa en esto

1. ¿Para qué será usado el sprite? ¿Es para una web o un juego? ¿Tendrá animación después o será estático? Si el sprite será animado, deberás querer hacerlo pequeño y sin demasiados detalles para más facilidad. Por el contrario, puedes hacerlo muy detallado si el sprite es estático ya que no tendrás que animar todos esos detalles. Pero piensa para que servirá tu sprite, y así todo irá mejor.

2. ¿Qué condiciones tengo? Ya os he dicho que la conservación de colores es importante. Una de las razones es que, especialmente si estás trabajando en un juego, tu paleta de colores debe ser limitada. También debes considerar las dimensiones de tu sprite y si encajará en el terreno para el, que será usado.

¡Adelante!

Para este tutorial, no pongo limitaciones, pero quería asegurarse de que el sprite era bastante grande para que pudiesemos ver claramente lo que sucede paso a paso. Para ello, he decidido utilizar a Lucha Lawyer, el abogado luchador más rompeespaldas, como mi modelo! Podría estar en un juego de lucha, o algo así, con movimientos como "Habeas Corpse Blaster" xDD

/////

Siguiente parte 2-3

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