Qué necesitas para empezar
Programas
Basta con un ordenador, una tableta o un móvil. Sirven el ratón, un lápiz digital o el dedo; usa lo que te resulte natural, porque el pixel art premia la precisión más que la velocidad.
Los programas de pixel art son de dos tipos: editores pensados para el píxel y apps de pintura generales con un pincel de un píxel. Comparten las mismas herramientas básicas (lápiz, goma, relleno, cuentagotas y cuadrícula), así que lo que aprendes en uno te sirve en el siguiente.
- Aseprite: De pago, y el programa con el que acaba quedándose la mayoría de los artistas de pixel art: capas, animación, paletas y tiles, todo pensado para trabajar con píxeles.
- LibreSprite: Un fork gratuito de una versión antigua de Aseprite.
- Pixelorama: Gratis y de código abierto, en el escritorio y en el navegador.
- Piskel: Gratis y en el navegador: una forma rápida de probar el pixel art antes de instalar nada.
- Editor de pixel art de MakeBead: Gratis y en el navegador, con fotogramas de animación y patrones imprimibles para cuando el dibujo vaya a convertirse en cuentas o puntadas. Abrir el editor.
Empieza con lo que tengas. Al final de esta página hay un lienzo de 16×16 cargado con los colores del mago, para que pruebes cada lección mientras lees.
Silueta, líneas, color, detalle
Silueta → Líneas → Color → Detalle
Una forma sencilla de dibujar pixel art es trabajar en cuatro pasadas, como se hizo con el mago: rellenar la silueta, sacar las líneas, poner el color plano y, por último, refinar. Pulsa un paso para ver el dibujo en esa fase.
Empezar por la silueta mantiene la atención en las formas grandes y en si se leen bien, y la silueta apenas cambia de la primera pasada a la última. En el fondo, el mago es un triángulo; la punta doblada del sombrero y el bastón que sobresale son lo que hace interesante ese triángulo.
Otras formas de empezar
- Líneas de construcción: Encaja la figura con círculos, triángulos y trapecios, y construye el detalle encima. Fijar pronto las proporciones ahorra mucho repintado después.
- Manchas en bruto, luego limpiar: Pon grandes manchas de color sin cuidado y ve ordenándolas sobre la marcha. Va bien para fondos, porque capta el ambiente enseguida. Cuenta con una fase intermedia caótica en la que nada parece encajar, y sigue adelante.
- Dibujar en grande y reducir: Pinta a tamaño normal en cualquier app de dibujo y redúcelo a píxeles. Es un buen punto de partida, pero cuanto más pequeño queda, más se rompe el detalle, y cada píxel sigue necesitando una limpieza a mano.
No hay un único proceso correcto. Fíjate en cómo trabajan los artistas que te gustan, prueba varios métodos y quédate con el que más disfrutes: todos llegan al mismo sitio.
Elegir el tamaño del lienzo
16×16 · 32×32 · 64×64
No hay un tamaño correcto para el pixel art. Depende de lo que dibujes, de cuánto detalle necesite y de lo que pida el proyecto. Un buen primer ejercicio es dibujar el mismo tema a varios tamaños.
Este mago podría vivir en 16×16: la silueta aguanta y el estilo tiene poco detalle que perder. Mide 32×32 porque forma parte de una serie de dibujos de ese tamaño, y las piezas que aparecen juntas deben compartir una misma escala: los tamaños mezclados parecen pegados encima.
Tamaños habituales de pixel art
| Tamaño | Uso habitual |
|---|---|
| 8×8 | Iconos, objetos diminutos, fuentes de píxeles |
| 16×16 | Objetos, tiles y personajes pequeños de juegos clásicos |
| 32×32 | Personajes con una cara legible, tiles más grandes |
| 64×64 | Retratos y personajes detallados |
| 29×29 | Una placa cuadrada grande de cuentas de planchar |
| 128×128 o más | Escenas e ilustraciones |
Si eres principiante, empieza en pequeño y aprende a sentir el peso de un solo píxel. En tamaños pequeños un píxel puede cambiar el dibujo entero, algo fácil de pasar por alto en un lienzo grande. Pruébalo con esta cara de 10×10: elige una expresión o pulsa cualquier píxel para invertirlo.
Líneas limpias: dobles y jaggies
Dobles · Jaggies
Con el tamaño decidido, marca las zonas principales con un dibujo de líneas sencillo. Al trazar líneas hay que vigilar dos cosas.
Dobles
Cuando dos píxeles se tocan en una esquina formando una L, tienes un doble. Engrosa la línea en ese punto, así que ahí se ve más oscura y más dura. En un contorno de un píxel, quita el píxel que sobra en la esquina y la línea queda más limpia y con un grosor uniforme.
Los dobles no siempre son un error. Pueden sugerir sombra, y un contorno hecho entero de líneas dobles es un estilo contundente por sí mismo.
Jaggies
Cuando los escalones de una línea o de una curva cambian de longitud sin orden, aparecen los jaggies (dientes de sierra): esquinas que no buscabas. Quita los píxeles que rompen el ritmo, o haz que la longitud de los escalones crezca y decrezca con suavidad, como 5-3-2-1-1-2-3-5 en una curva.
Los jaggies también pueden ser intencionados. La cara del mago tiene una ruptura deliberada en su línea para dar forma a la ceja.
Nada de esto va de bien o mal. Va de ser consciente: saber que el efecto existe y usarlo a propósito para conseguir el aspecto que buscas.
Matiz, saturación y valor
Matiz · Saturación · Valor
Casi todos los selectores de color se basan en HSV:
- Matiz: El color en sí: rojo, amarillo, verde, azul…
- Saturación: Lo puro que es el color. En el cuadrado del selector va del gris, a la izquierda, al tono más vivo, a la derecha.
- Valor: Lo claro u oscuro que es, aproximadamente de abajo arriba en el cuadrado. Es el que más importa.
«Aproximadamente», porque cada matiz tiene su propia luminosidad percibida. Pasa la barra de matiz a escala de grises y el amarillo es el más claro, mientras que el azul y el violeta son los más oscuros.
El valor es lo que da profundidad y forma a una imagen; la luz y la sombra están hechas de él. Si los valores fallan, ninguna elección de colores salvará el dibujo.
Una comprobación rápida de valores: añade una capa encima de todo, rellénala de negro y pon su modo de fusión en Color. No es la luminosidad exacta, pero se acerca lo suficiente para detectar un problema.
Usa la saturación con moderación
Saturación
Con demasiados colores muy saturados, se pelean entre sí y cansan la vista. Con demasiados colores apagados, la imagen se ve sucia y desvaída.
Trata los colores saturados como un condimento: un poco, y colocado a propósito, donde quieras que vaya la mirada. Algunas piezas usan colores intensos por todas partes y aun así funcionan, pero siempre tienen debajo unos valores muy sólidos. El valor va primero.
El contraste guía la mirada
Contraste
En las artes visuales hay muchos tipos de contraste: de valor, de matiz, de forma, de detalle. Un contraste alto es una gran diferencia entre dos cosas; uno bajo significa que se parecen.
Las zonas de alto contraste atraen la mirada; las de bajo contraste la dejan descansar y pueden crear ritmo y repetición. El contraste es relativo: un contraste bajo en todas partes da una imagen unificada, casi como un estampado, y un punto de alto contraste solo destaca si lo rodean zonas más tranquilas.
Mientras dibujas, pregúntate una y otra vez cómo puede el contraste señalar la parte más importante de la pieza.
Luz, sombra y sombreado
Sombreado · Iluminación
Para sombrear bien hay que saber cómo se comporta la luz, porque sombrear es usar el valor para mostrar la forma. Ilumina una bola con una sola luz y verás todas las partes de un modelo de iluminación básico:
- 1Brillo: El punto que mira más directamente a la luz
- 2Medio tono: El color principal del lado iluminado
- 3Núcleo de sombra: Donde la luz pasa a sombra; suele ser la franja más oscura
- 4Sombra propia: El lado de la bola que da la espalda a la luz
- 5Luz reflejada: Luz que rebota en el entorno y aclara la sombra
- 6Sombra de oclusión: El punto más oscuro, donde la bola toca el suelo
- 7Sombra proyectada: La sombra que la bola arroja sobre el suelo
El pixel art rara vez necesita las siete partes; en tamaños pequeños quedaría demasiado recargado, así que depende del tamaño y del estilo. El aspecto de la luz también depende de cuántas fuentes haya, de su intensidad y de lo que rodea al objeto.
Pillow shading
Un problema muy común es ignorar tanto la forma como la luz y limitarse a oscurecer desde el contorno hacia dentro, en anillos. Eso es el pillow shading («sombreado de almohada»). No describe la forma, así que el objeto se ve plano e hinchado, como una almohada.
Materiales
Cada material refleja la luz a su manera. Una bola mate reparte la luz de forma uniforme, sin un brillo definido; una bola brillante o el metal tienen brillos intensos y reflejan lo que los rodea. Para mostrar madera, oro o vidrio, piensa en cómo refleja la luz y elige los valores y su rango en consecuencia.
Cálido y frío son relativos
Temperatura de color · Entorno
Oirás a menudo que los colores son cálidos o fríos, pero que un color parezca cálido o frío depende de lo que tenga al lado.
En el primer par, los dos cuadraditos son exactamente el mismo gris. En el tercer par, la mitad izquierda es el mismo rojo que en el segundo. El color es relativo y cambia con sus vecinos.
El color de un objeto también cambia mucho con la luz, con lo que tiene cerca y con su entorno. Cambia la luz y la mesa de abajo y mira cómo cambia la misma bola amarilla:
Hue shifting
Hue shifting
El hue shifting (desplazamiento de matiz) es una técnica habitual que simplifica esos efectos del entorno y, a la vez, hace el color más interesante. Cuando oscurezcas un color para la sombra, gira también un poco su matiz: las sombras suelen tirar hacia el violeta, y las luces, hacia el amarillo.
Ninguna de las dos formas es mejor; elige la que te guste. Las rampas con hue shifting suelen verse más ricas, y las rampas rectas, más tranquilas y gráficas.
Limita tu paleta de colores
Paleta de colores
Otro hábito común de principiante es echar mano de un color nuevo cada vez. La imagen se llena de ruido, y la paleta y los valores se descontrolan. Limitar el número de colores da unidad al trabajo.
Si elegir colores te cuesta, empieza con una paleta de pixel art ya hecha. También son un atajo hacia un aspecto concreto, como los cuatro verdes de las pantallas de las primeras consolas portátiles. Lospec reúne miles, y puedes crear la tuya tomando colores de películas y juegos que te gusten.
Eso sí, una paleta no hace el trabajo por ti. Sigues teniendo que pensar en el matiz, la saturación, el valor, el contraste y el estilo que buscas.
Dithering
Dithering
El dithering (tramado) coloca los píxeles en un patrón para mezclar colores, o para sugerir más colores de los que tiene la paleta. Con solo blanco y negro, un tablero de ajedrez se ve gris a distancia.
Los patrones de dithering admiten mucha inventiva, y cada uno se ve distinto: unos son ordenados; otros, ruidosos y granulosos.
El dithering también puede fundir dos colores en uno nuevo, algo especialmente útil cuando la paleta es pequeña.
Con cuidado: el dithering añade ruido y texturas inesperadas, sobre todo en sprites pequeños. Decide para qué lo quieres antes de usarlo.
Anti-aliasing
Anti-aliasing · AA
El anti-aliasing (AA) suaviza los bordes de una forma: en cada escalón del borde colocas un color cuyo valor está entre los de los dos colores vecinos.
El tercer círculo tiene demasiado AA. Es más suave, pero los píxeles de más añaden esquinas y cambian la forma del círculo. Añade AA de forma selectiva y nunca dejes que cambie la forma.
El AA puede ir dentro de la forma (AA interno) o fuera, sobre el fondo (AA externo). El AA externo se mezcla con el fondo, así que cuando el fondo cambia, el AA externo deja de funcionar: sus valores ya no encajan. Prueba el fondo oscuro de arriba.
Como lo que cuenta es el valor, el matiz de los píxeles de AA queda libre para jugar con él. El AA también puede cambiar la sensación de una línea y hacer que partes de ella parezcan más finas.
El mago no necesita AA en absoluto. Si fuera una decisión de estilo, la barba sería el sitio para usarlo, para que se vea más suave. El AA es una técnica avanzada: úsalo con cuidado.
Banding
Banding
Cuando una sombra o el AA siguen todo el contorno con el mismo grosor, capa tras capa, con todos los escalones alineados, aparece el banding (bandas). En lugar de describir la forma, aplana la imagen o la llena de ruido. El pillow shading de más arriba tiene el mismo problema.
Estilos de contorno en pixel art
Contornos · Sel-out
Hay muchas formas de contornear el pixel art. Aquí tienes ocho sobre el mismo hongo:
- Contorno negro de un píxel: Gráfico y de dibujo animado, y funciona bien en animación.
- Contorno doble: Muy grueso; ya lo viste en la lección sobre los dobles.
- Contorno oscuro: Un contorno normal en un color oscuro en vez de negro, que baja el contraste y la dureza.
- Contorno del color de la zona: El contorno toma una versión más oscura de la zona que rodea.
- Contorno iluminado: Un contorno del color de la zona que es más claro en el lado iluminado y más oscuro en el de sombra, así que también muestra la dirección de la luz.
- Contorno selectivo (sel-out): Las líneas usan tonos al estilo del AA para describir la forma, en lugar de una sola línea continua.
- Contorno roto: Un tipo de contorno selectivo que suprime la línea por completo en algunos puntos, normalmente donde da la luz.
- Sin contorno: También es una opción perfectamente válida.
El mago usa un contorno negro de un píxel porque va con su estilo; el contorno del sombrero está un poco roto para que su forma se lea mejor.
Clusters y píxeles huérfanos
Clusters · Píxeles huérfanos
Pensar en clusters (grupos de píxeles) significa reunir los píxeles en bloques, de dos o más, y describir las zonas con esos bloques, evitando por lo general los píxeles sueltos. Un píxel solitario (un píxel huérfano) añade ruido y queda fuera de lugar entre los clusters.
Los píxeles huérfanos tienen sus usos: detalles y brillos, sobre todo en tamaños pequeños, o una textura granulosa buscada. Los ojos del mago son píxeles sueltos: el tamaño no deja otra opción, y quedan bien. Algunos artistas construyen piezas enteras con píxeles sueltos; el resultado es ruidoso y granuloso, y fiel a su estilo.
Las pantallas antiguas difuminaban los píxeles
Pantallas CRT
Ten una cosa en cuenta cuando estudies el arte de los juegos retro: muchos juegos antiguos se veían en televisores y monitores CRT, y un CRT difumina los píxeles vecinos entre sí.
Mira los píxeles en bruto de muchos juegos de 16 bits y encontrarás banding, jaggies y un dithering áspero que nadie veía en las pantallas de la época. Algunos artistas de entonces lo sabían y dibujaban pensando en ese desenfoque, con patrones de dithering para crear colores intermedios que el hardware no podía mostrar.
No todos los juegos retro se dibujaron así, pero cuando reúnas referencias, recuerda que lo que vemos hoy suelen ser los píxeles limpios en bruto, sin una pantalla de por medio.
Cuando los píxeles son cuentas
Pixel art en cuentas, puntadas y drills
El pixel art no tiene por qué quedarse en una pantalla. Una cuenta de planchar, una puntada de punto de cruz, un drill de pintura de diamantes o un punto de tejido tienen un solo color cada uno, así que un dibujo en píxeles ya es un patrón: un píxel, una cuenta. Todo lo anterior sigue valiendo, con tres diferencias.
- La paleta es lo que puedes comprar: En pantalla cualquier color está a un clic; en cuentas o en hilo tienes los colores que fabrica una marca. Limitar la paleta deja de ser una elección, así que elige primero la gama de cuentas o de hilos y dibuja con ella.
- La placa marca el tamaño: Una placa cuadrada grande tiene 29×29 pivotes, así que un sprite de 16×16 cabe con espacio de sobra y uno de 32×32 necesita cuatro placas unidas. Planifica el lienzo según las placas que tengas.
- La distancia hace la mezcla: Una pieza terminada se mira desde uno o dos pasos, y eso la suaviza de forma parecida a como lo hacía un CRT. Un dithering de tablero de ajedrez se lee como un color intermedio desde el otro lado de la habitación, mientras que una cuenta suelta de otro color sigue viéndose como una mota.
El anti-aliasing es lo que peor se traslada. Necesita tonos intermedios, y a una paleta de cuentas a menudo le falta justo el que haría falta; un escalón limpio en un color que existe suele verse mejor que un tono que casi acierta.
Cuando el dibujo está terminado, el editor de pixel art lo imprime como un patrón con el recuento de cada color, y el conversor de imagen a pixel art hace el camino inverso: lleva una imagen a una paleta de cuentas.
El pixel art dibujado a mano suele dar un patrón de cuentas mejor que una foto convertida, por las razones de este tutorial: contornos limpios, pocos colores y clusters en lugar de ruido.
Tu estilo, y a practicar
Estilo · Práctica
Combina los fundamentos del arte, las técnicas del píxel y tu propio gusto, y las posibilidades no tienen fin. Lo que a ti te gusta puede no gustarle a otra persona. No hay estilos correctos ni incorrectos, pero las decisiones tomadas a propósito y aplicadas con coherencia hacen que todo lo que dibujas se vea intencionado y encaje en el mundo que estás construyendo.
Ejercicios
- Dibuja el mago a 8×8. ¿Qué rasgos tienen que quedarse para que se siga leyendo como un mago?
- Activa Comprobar valores y vuelve a colorear el mago con solo cuatro valores; luego compáralo con la versión de cuatro verdes.
- Cambia el contorno negro del mago por uno del color de la zona, o por uno selectivo.
- Dibuja una manzana dos veces: una mate y otra brillante.
- Dibuja la misma manzana a 12×12, 16×16 y 24×24.
Dominar buena parte de esto lleva años, y los artistas de pixel art con experiencia siguen aprendiendo. Que no te desanime todo lo que hay por delante. Disfruta dibujando: es un oficio para toda la vida.
Glosario
- Silueta Silhouette
- La forma exterior en un solo color
- Doble Doubles
- Dos píxeles que forman una L en una esquina de la línea
- Dientes de sierra Jaggies
- Esquinas duras por escalones de longitud irregular
- Matiz / saturación / valor HSV
- Color, pureza, luminosidad
- Sombreado de almohada Pillow shading
- Oscurecer en anillos desde el contorno
- Desplazamiento de matiz Hue shifting
- Girar el matiz a medida que una rampa se aclara u oscurece
- Tramado Dithering
- Mezclar colores con un patrón de píxeles
- Suavizado de bordes AA
- Suavizar escalones con colores intermedios
- Bandas Banding
- Capas de sombra alineadas en paralelo
- Contorno selectivo Sel-out
- Un contorno que describe la forma con AA
- Grupo de píxeles Cluster
- Un bloque de píxeles del mismo color
- Píxel huérfano Orphan pixel
- Un píxel aislado
Preguntas sobre pixel art
¿Cómo hacer pixel art si estoy empezando?
Elige un lienzo pequeño, como 16×16 o 32×32, escoge una paleta limitada de cuatro a dieciséis colores y dibuja un objeto sencillo en cuatro pasadas: silueta, líneas, color plano y, por último, sombreado y detalle. Sirve cualquier editor de píxeles; el lienzo de práctica de esta página y el editor de pixel art gratuito funcionan los dos en el navegador.
¿De qué tamaño debe ser el pixel art?
16×16 y 32×32 son los tamaños habituales para personajes y objetos de juegos, y 64×64 para personajes detallados y retratos. Los lienzos pequeños son el mejor sitio para aprender, porque ahí cuenta cada píxel. Mantén todas las piezas de un mismo proyecto a la misma escala.
¿Qué es el dithering en pixel art?
El dithering coloca dos colores en un patrón, como un tablero de ajedrez, para que a distancia se lean como un color intermedio. Estira una paleta pequeña y suaviza los degradados, pero añade textura, así que úsalo a propósito.
¿Qué es el anti-aliasing en pixel art?
El anti-aliasing suaviza los escalones de un borde añadiendo píxeles cuyo valor está entre el de la forma y el de lo que tiene al lado. Un poco suaviza una curva; demasiado cambia la forma, y el AA colocado sobre el fondo se rompe cuando el fondo cambia.
¿Qué es el hue shifting?
El hue shifting cambia el matiz, además del valor, a lo largo de una rampa de color, normalmente llevando las sombras hacia el azul o el violeta y las luces hacia el amarillo. Da un sombreado más rico que oscurecer un único matiz.
¿Qué es el pillow shading y cómo se evita?
El pillow shading oscurece una forma en anillos desde el contorno hacia dentro, sin tener en cuenta de dónde viene la luz, así que el objeto se ve plano e hinchado. Decide primero la dirección de la luz y luego pon los brillos en el lado que la mira y la sombra en el lado contrario.
¿Puedo convertir un pixel art en un patrón de cuentas?
Sí. Cada píxel se convierte en una cuenta, una puntada o un drill. Dibuja al tamaño de tu placa (una placa cuadrada grande de Perler tiene 29×29) con los colores de tu marca de cuentas, y luego imprime el patrón y su recuento de colores desde el editor de pixel art.
Créditos
El orden de las lecciones y muchas de sus ideas vienen de The Ultimate Pixel Art Tutorial, un vídeo de Saultoons. Míralo para ver la explicación completa. Los textos de esta página están escritos con nuestras propias palabras, y cada ejemplo se dibujó para esta página: ninguno sale del vídeo.