A menudo, los desarrolladores independientes tienen que asumir varios roles a la vez: diseñador de juegos, programador, compositor, artista. Y, cuando se trata de la parte visual, muchos eligen el pixel art, que a primera vista parece simple. Pero para hacerlo bien se necesita mucha experiencia y ciertas habilidades. He encontrado un tutorial para quienes recién comienzan a aprender los fundamentos de este estilo: con una descripción de software específico y técnicas de dibujo a través de dos sprites.
Fondo
El pixel art es una forma de arte digital en la que las alteraciones se realizan a nivel de píxeles. Principalmente se asocia con la gráfica de los videojuegos de los años 80 y 90. En ese entonces, los artistas tenían que considerar las limitaciones de memoria y la baja resolución. Hoy en día, el pixel art sigue siendo popular en los juegos y como estilo artístico en general, a pesar de la posibilidad de crear gráficos 3D realistas. ¿Por qué? Incluso dejando de lado la nostalgia, crear una gran obra dentro de tales límites es un desafío agradable y valioso.
La barrera de entrada al pixel art es relativamente baja en comparación con el arte tradicional y la gráfica 3D, lo que atrae a los desarrolladores independientes. Pero eso no significa que sea fácil terminar un juego en este estilo. He visto a muchos desarrolladores independientes con metroidvanias de pixel art en plataformas de crowdfunding. Pensaron que terminarían todo en un año, pero en realidad, necesitaban otros seis años más.
Metal Slug 3 (Arcade). SNK, 2000
El pixel art al nivel en el que la mayoría quiere crearlo requiere mucho tiempo, y hay muy pocos tutoriales breves. Al trabajar con un modelo 3D, puedes rotarlo, deformarlo, mover partes individuales, copiar animaciones de un modelo a otro, y así sucesivamente. El pixel art de alto nivel casi siempre consume una gran cantidad de esfuerzo para colocar meticulosamente los píxeles en cada cuadro.
En resumen, lo advertí.
Ahora hablemos un poco de mi estilo: principalmente, dibujo arte en píxeles para videojuegos y en ellos encuentro inspiración. Soy fanático de Famicom/NES, consolas de 16 bits y arcades de los años 90. El arte en píxeles de mis juegos favoritos de esa época se puede describir como brillante, seguro y limpio (pero no demasiado), no se puede considerar rígido ni minimalista. En este estilo trabajo yo mismo, pero puedes aplicar fácilmente ideas y técnicas de este tutorial para crear cosas completamente diferentes. ¡Explora las obras de diferentes artistas y crea arte en píxeles que te guste!
Software
Herramientas digitales básicas para el arte en píxeles: Zoom y Lápiz para colocar píxeles. También te serán útiles Línea, Forma, Seleccionar, Mover y Cubo de pintura. Hay mucho software gratuito y de pago con este conjunto de herramientas. Hablaré de los más populares y de los que uso yo mismo.
Paint (gratis)
Si tienes Windows, el Paint que viene integrado es un programa primitivo, pero tiene todas las herramientas necesarias para el arte en píxeles.
(gratis)
Un editor de arte en píxeles sorprendentemente funcional que se ejecuta a través del navegador. Puedes exportar tu trabajo a PNG o GIF animado. Una excelente opción para principiantes.
(gratis)
GraphicsGale es el único editor entre los que he oído que fue diseñado específicamente para arte en píxeles e incluye herramientas de animación. Fue creado por la compañía japonesa HUMANBALANCE. Desde 2017 se distribuye gratuitamente y sigue siendo muy popular, a pesar del creciente uso de Aseprite. Lamentablemente, solo funciona en Windows.
($)
Tal vez el editor más popular en este momento. , un montón de características, soporte activo, versiones para Windows, Mac y Linux. Si te has tomado en serio el arte en píxeles y aún no has encontrado el editor adecuado, quizás este sea el que necesitas.
($$+)
GameMaker Studio 2 es una excelente herramienta 2D con un buen editor de sprites. Si deseas crear arte en píxeles para tus propios juegos, es muy conveniente hacerlo todo en un solo programa. Actualmente, estoy usando este software para trabajar en , una colección de 50 juegos retro: creo los sprites y animaciones en GameMaker, y los tilesets en Photoshop.
($$$+)
Photoshop es un software caro, distribuido por suscripción, que no está diseñado para pixel art. No lo recomiendo si no te dedicas a crear ilustraciones en alta resolución o si no necesitas realizar manipulaciones complejas en imágenes, como me sucede a mí. Se pueden crear sprites estáticos y trabajos en pixel art, pero es bastante complicado en comparación con software especializado (como GraphicsGale o Aseprite).
Otros
Mi kit para pixel art. Todo negro, me acabo de dar cuenta ahora.
Tableta gráfica ($$+)
Recomiendo tabletas gráficas para cualquier trabajo con ilustraciones digitales, para evitar el síndrome del túnel carpiano. Es mucho más fácil de prevenir que de tratar. Una vez que sientas dolor, solo aumentará — cuida de ti mismo desde el principio. Debido a que en su momento dibujé con el ratón, ahora me cuesta jugar a juegos que requieren pulsar teclas. Actualmente uso una Wacom Intuos Pro S.
Soporte de muñeca ($)
Si no puedes adquirir una tableta, al menos compra un soporte de muñeca. Me gusta mucho el Mueller Green Fitted Wrist Brace. Los demás son demasiado ajustados o no brindan suficiente soporte. Se pueden ordenar soportes fácilmente en línea.
96×96 píxeles
Final Fight. Capcom, 1989
¡Comencemos! Empezaremos con el sprite de un personaje de 96×96 píxeles. Para el ejemplo, dibujé un orco y lo coloqué en una captura de pantalla de Final Fight (la imagen de arriba) para que entiendas la escala. Esto es un gran sprite para la mayoría de los juegos retro, tamaño de la captura de pantalla: 384×224 píxeles.
Con un sprite tan grande es más fácil mostrar la técnica de la que quiero hablar. Además, el dibujo pixel por pixel se asemeja más a las formas tradicionales del arte (como el dibujo o la pintura), con las que quizás estés más familiarizado. Una vez que dominemos las técnicas básicas, pasaremos a sprites más pequeños.
1. Elegimos la paleta
El pixel es un concepto mucho más profundo en el pixel art que en cualquier otro ámbito digital. El pixel art se define por sus limitaciones, como los colores. Es importante elegir una paleta adecuada, ya que ayudará a definir tu estilo. Pero al comenzar, sugiero no pensar demasiado en paletas y seleccionar una de las ya existentes (o simplemente unos pocos colores aleatorios) — puedes cambiarla fácilmente en cualquier momento.
Para este tutorial, voy a utilizar una paleta de 32 colores que creamos para . Para el pixel art, a menudo se recogen en 32 o 16 colores. La nuestra está diseñada para una consola ficticia que podría haber aparecido en algún lugar entre el Famicom y el PC Engine. Puedes usarla o cualquier otra; el tutorial no depende en absoluto de la paleta elegida.
2. Contornos gruesos
Comencemos a dibujar con la herramienta Lápiz. Dibujemos un boceto igual que lo haríamos con un bolígrafo y papel. Por supuesto, el pixel art y el arte tradicional se cruzan, especialmente cuando se trata de sprites grandes. Mis observaciones muestran que los artistas fuertes de pixel art al menos dibujan bien a mano y viceversa. Así que siempre es útil desarrollar habilidades de dibujo.
3. Refinamiento de contornos
Perfeccionamos los contornos: eliminamos píxeles sobrantes y reducimos el grosor de cada línea a un píxel. Pero, ¿qué considerar exactamente como sobrante? Para responder a esta pregunta, es necesario entender las líneas de píxeles y las irregularidades.
Irregularidades
Es necesario aprender a dibujar dos líneas básicas en pixel art: rectas y curvas. Con bolígrafo y papel, todo se reduce al control muscular, pero nosotros trabajamos con pequeños bloques de color.
La clave para dibujar líneas de píxeles correctas son las irregularidades. Son píxeles individuales o pequeños segmentos que rompen la suavidad de la línea. Como he dicho, un solo píxel tiene un gran impacto en el pixel art, por lo que las irregularidades pueden arruinar toda la estética. Imagina que trazas una línea recta en papel, y de repente alguien golpea la mesa: las irregularidades en el pixel art se ven así, como un garabato aleatorio.
Ejemplos:
Rectas
Curvas
Las irregularidades aparecen en las curvas cuando la longitud de los segmentos de la línea aumenta o disminuye de manera no gradual.
Evitar por completo las irregularidades es imposible; están presentes en todos tus juegos retro favoritos (a menos que, por supuesto, el pixel art consista exclusivamente en formas simples). El objetivo es minimizar las irregularidades, mostrando todo lo necesario.
4. Aplicamos los primeros colores
Colorea a tu personaje utilizando relleno u otra herramienta adecuada. La paleta simplificará esta parte del trabajo. Si el software no permite el uso de paletas, puedes colocarla directamente en la imagen, como en el ejemplo anterior, y seleccionar colores con el cuentagotas.
En la esquina inferior izquierda dibujé a nuestro amigo, conózcanlo, es — Shar. Será más fácil entender lo que sucede en cada etapa con él.
5. Sombreado
Es hora de mostrar las sombras: simplemente añadimos colores más oscuros al sprite. Así, la imagen parecerá tridimensional. Supongamos que tenemos una fuente de luz situada sobre el orco, algo a la izquierda. Por lo tanto, estará iluminado todo lo que se encuentra arriba y frente a nuestro personaje. Añadimos sombras en la parte inferior derecha.
Forma y volumen
Si esta etapa te resulta difícil, imagina tu dibujo como formas tridimensionales en lugar de simples líneas y colores. Las formas existen en un espacio tridimensional y pueden tener volumen, que construimos con sombras. Esto ayudará a visualizar el personaje sin detalles y a imaginar que está hecho de arcilla en lugar de píxeles. El sombreado no se trata solo de añadir nuevos colores, es un proceso de construcción de forma. En un personaje bien elaborado, los detalles no ocultan las formas básicas: si entrecierras los ojos, verás varios grandes grupos de luz y sombra.
Suavizado (anti-aliasing)
Cada vez que utilizo un nuevo color, aplico suavizado (AA). Ayuda a suavizar los píxeles añadiendo colores intermedios en las esquinas, en el lugar donde dos segmentos de línea se encuentran:
Los píxeles grises suavizan los "desgarros" en la línea. Cuanto más largo sea el segmento de línea, más largo será el segmento de AA.
Así se ve el AA en el hombro del orco. Es necesario para suavizar las líneas que muestran la curvatura de sus músculos.
El suavizado no debe salir del sprite que se usará en el juego o sobre un fondo cuyo color es desconocido. Por ejemplo, si aplicas AA para un fondo claro, en un fondo oscuro el suavizado se verá mal.
6. Contorno selectivo
Antes, los contornos eran completamente negros, lo que hacía que el sprite se viera muy caricaturesco. La imagen parecía dividida en segmentos. Por ejemplo, las líneas negras en la mano contrastan demasiado con la musculatura, y el personaje parece menos cohesivo.
Si el sprite se vuelve más natural y la segmentación no es tan evidente, las formas básicas del personaje serán más fáciles de leer. Para ello, se puede utilizar un contorno selectivo: reemplazar parcialmente el contorno negro por uno más claro. En la parte iluminada del sprite se pueden usar los colores más claros o, donde el sprite toca el espacio negativo, se puede eliminar completamente el contorno. En lugar de negro, se debe usar el color elegido para la sombra, así se mantendrá la segmentación (para delimitar músculos, pelaje, etc.).
También en esta etapa añadí sombras más oscuras. Se obtuvieron tres gradaciones de verde en la piel del orco. El color verde más oscuro puede utilizarse para el contorno selectivo y el AA.
7. Toques finales
Al final, es necesario añadir reflejos (los puntos más claros en el sprite), detalles (pendientes, remaches, cicatrices) y otras mejoras, hasta que el personaje esté listo o hasta que sea necesario pasar al siguiente.
Existen varios trucos útiles que se pueden aplicar en esta etapa. Gira la imagen horizontalmente, esto ayuda a detectar errores en las proporciones y el sombreado. También se puede quitar color: establecer la saturación en cero para entender dónde es necesario modificar las sombras.
Creación de ruidos (dithering)
Hasta ahora, hemos utilizado principalmente áreas grandes y sólidas de sombras. Pero hay otra técnica: el dithering, que permite transitar de un color a otro sin añadir un tercero. Mira el ejemplo a continuación.
El gradiente superior va de oscuro a claro utilizando cientos de diferentes tonos de azul.
El gradiente medio usa solo nueve colores, pero aún tiene demasiados matices de un mismo color. Se produce lo que se llama banding, donde las franjas homogéneas gruesas hacen que el ojo se enfoque en los puntos de contacto de los colores, en lugar de los colores mismos.
En el gradiente inferior aplicamos dithering, que evita el banding y utiliza solo dos colores. Creamos ruido de diferente intensidad para simular la graduación del color. Esta técnica es muy similar al halftone utilizado en impresión; así como al stippling en ilustración y cómics.
En el arte de píxeles, apliqué disering un poco para transmitir la textura. Algunos artistas de píxeles no lo utilizan en absoluto, mientras que otros, por el contrario, no dudan en hacerlo y lo hacen con gran habilidad. Me parece que el disering se ve mejor en grandes áreas llenas de un solo color (fíjate en el cielo de la captura de pantalla de Metal Slug, que fue anterior) o en aquellas áreas que deben lucir rugosas y desiguales (como la tierra). Decide tú mismo cómo utilizarlo.
Si quieres ver un ejemplo de disering a gran escala y de calidad, estudia los juegos de The Bitmap Brothers, un estudio británico de los años 80, o juegos en PC-98. Solo ten en cuenta que todos ellos son NSFW.
Kakyusei (PC-98). Elf, año 1996
¡En esta imagen hay solo 16 colores!
8. Última mirada
Uno de los peligros del arte de píxeles es que parece fácil y sencillo (debido a su estructura y las limitaciones del estilo). Pero al final, gastarás una enorme cantidad de tiempo perfeccionando tus sprites. Es como un rompecabezas que necesitas resolver, por eso el arte de píxeles atrae a los perfeccionistas. Recuerda que un sprite no debe llevarte demasiado tiempo; es solo un pequeño fragmento de una colección extremadamente compleja de piezas. Es importante no perder de vista la imagen general.
Incluso si tu arte de píxeles no es para juegos, a veces es útil decirte: “¡Ya es lo suficientemente bueno!” y seguir adelante. La mejor manera de desarrollar habilidades es pasar por todo el proceso de principio a fin tantas veces como sea posible, utilizando tantos temas como sea posible.
Y a veces es útil dejar el sprite por un tiempo para mirarlo de nuevo con una perspectiva fresca.
32×32 píxeles
Creamos un gran sprite de 96×96 píxeles primero, porque a ese tamaño se asemeja más a la pintura o el dibujo, pero solo con píxeles. Cuanto más pequeño es el sprite, menos se asemeja a lo que debe mostrar, y más importante es cada píxel.
En Super Mario Bros., el ojo de Mario son solo dos píxeles, uno encima del otro. Y su oreja también. El creador del personaje, Shigeru Miyamoto, dijo que los bigotes eran necesarios para separar la nariz del resto de la cara. Por lo tanto, una de las principales características de la cara de Mario no es solo el diseño del personaje, sino también un truco pragmático. Lo que confirma la antigua sabiduría: "la necesidad es la madre de la invención."
Los pasos fundamentales para crear un sprite de 32×32 píxeles ya nos son conocidos: boceto, color, sombras, y posteriores mejoras. Sin embargo, en estas condiciones, elijo figuras de colores como boceto inicial en lugar de dibujar contornos debido al tamaño pequeño. El color juega un papel más importante en la definición del personaje que los contornos. Míralo de nuevo: Mario no tiene contornos en absoluto. No solo los bigotes son interesantes. Sus patillas definen la forma de las orejas, las mangas muestran las manos, y la forma general refleja más o menos claramente todo su cuerpo.
Crear sprites pequeños implica constantes compromisos. Si añades un contorno, puedes perder espacio para la sombra. Si tu personaje tiene claramente visibles los brazos y las piernas, es probable que su cabeza no deba ser muy grande. Si utilizas eficazmente el color, el contorno selectivo y el suavizado, el objeto dibujado parecerá más grande de lo que realmente es.
Para pequeños sprites, me gusta el estilo chibi: los personajes lucen muy adorables, con grandes cabezas y ojos. Es una gran manera de crear un héroe vibrante en un espacio limitado, y, en general, es un estilo muy agradable. Pero, tal vez necesites mostrar la movilidad o fuerza del personaje, entonces podrías dedicar menos espacio a la cabeza para que el cuerpo luzca más robusto. Todo depende de tus preferencias y objetivos.
¡Todo un equipo al completo!
Formato de archivos
Tal resultado podría poner nervioso a cualquier artista de pixel art
La imagen que ves es el resultado de guardar el dibujo en JPG. Parte de los datos se perdió debido a los algoritmos de compresión de archivos. El pixel art de calidad, al final, se verá mal, y recuperar su paleta original será complicado.
Para guardar imágenes estáticas sin pérdida de calidad, usa el formato PNG. Para animaciones, GIF.
Cómo compartir correctamente pixel art
Compartir pixel art en redes sociales es una gran manera de recibir retroalimentación y conocer otros artistas que trabajan en el mismo estilo. No olvides usar el hashtag #pixelart. Desafortunadamente, las redes sociales a menudo convierten PNG a JPG sin avisar, perjudicando tu trabajo. Y no siempre es claro por qué tu imagen fue convertida.
Hay varios consejos sobre cómo conservar el pixel art en la calidad necesaria para diferentes redes sociales.
Para que un archivo PNG no se modifique en Twitter, utiliza menos de 256 colores o , de que tu archivo sea menor de 900 píxeles en el lado más largo. Te recomendaría aumentar el tamaño del archivo al menos a 512×512 píxeles. Además, asegúrate de que la escala sea un múltiplo de 100 (200%, no 250%) y que los bordes se mantengan nítidos (vecino más cercano en Photoshop).
Los archivos GIF animados para publicaciones en Twitter no deben pesar más de 15 MB. La imagen debe tener al menos 800×800 píxeles, la animación cíclica debe repetirse tres veces, y el último fotograma debe durar la mitad de tiempo que los demás, según la teoría más popular. Sin embargo, no está claro cuánto de estos requisitos deben cumplirse, dado que Twitter cambia constantemente sus algoritmos de visualización de imágenes.
Hasta donde sé, no es posible publicar una imagen en Instagram sin pérdida de calidad. Pero definitivamente se verá mejor si la aumentas al menos a 512x512 píxeles.
Fuente: habr.com
