Los desarrolladores independientes a menudo tienen que combinar varios roles a la vez: diseñador de juegos, programador, compositor, artista. Y cuando se trata de imágenes, muchas personas eligen pixel art; a primera vista, parece simple. Pero para hacerlo hermoso, necesitas mucha experiencia y ciertas habilidades. Encontré un tutorial para aquellos que acaban de empezar a comprender los conceptos básicos de este estilo: con una descripción de un software especial y técnicas de dibujo usando dos sprites como ejemplo.
fondo
El pixel art es una forma de arte digital en la que se realizan cambios a nivel de píxel. Se asocia principalmente con gráficos de videojuegos de los años 80 y 90. Entonces los artistas tuvieron que tener en cuenta las limitaciones de memoria y baja resolución. Ahora, 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 aparte de la nostalgia, crear un trabajo genial dentro de un marco tan rígido es un desafío agradable y gratificante.
La barrera de entrada en el arte de píxeles es relativamente baja en comparación con el arte tradicional y los gráficos en 3D, lo que atrae a los desarrolladores independientes. Pero esto no significa que será fácil. finalizar 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.
Metal Slug 3 (Arcade). SNK, año 2000
El arte de píxeles al nivel que la mayoría de la gente quiere crear requiere mucho tiempo, y los tutoriales breves son pocos y esporádicos. Al trabajar con un modelo 3D, puede girarlo, deformarlo, mover sus partes individuales, copiar animaciones de un modelo a otro, etc. El arte de píxeles de alto nivel casi siempre requiere mucho esfuerzo para colocar meticulosamente los píxeles en cada cuadro.
En general, advertí.
Y ahora un poco sobre mi estilo: Principalmente dibujo pixel art para videojuegos y encuentro inspiración en ellos. En particular, soy fanático de Famicom/NES, consolas de 16 bits y juegos de arcade de los 90. El pixel art de mis juegos favoritos de la época se puede describir como brillante, seguro y limpio (pero no demasiado), no es difícil y minimalista. Yo mismo trabajo con este estilo, pero puedes aplicar fácilmente las ideas y técnicas de este tutorial para crear cosas completamente diferentes. ¡Explora el trabajo de diferentes artistas y crea el pixel art que amas!
Suave
Herramientas digitales básicas para pixel art - Zoom (Zoom) y Lápiz (Pencil) para colocar píxeles. También necesitará Línea (Línea), Figura (Forma), Seleccionar (Seleccionar), Mover (Mover) y Rellenar (Cubo de pintura). Hay muchos programas gratuitos y de pago con este conjunto de herramientas. Hablaré de los más populares y de los que yo mismo uso.
Pintura (Gratis)
Si tiene Windows, Paint está integrado en él, un programa primitivo, pero tiene todas las herramientas para pixel art.
(está libre)
Un editor de pixel art inesperadamente funcional que se ejecuta a través del navegador. Puede exportar su trabajo a PNG o GIF animado. Gran opción para principiantes.
(está libre)
GraphicsGale es el único editor del que he oído hablar diseñado específicamente para pixel art que incluye herramientas de animación. Fue creado por la empresa japonesa HUMANBALANCE. Desde 2017, se distribuye de forma gratuita y todavía tiene demanda, a pesar de la creciente popularidad de Aseprite. Desafortunadamente, solo funciona en Windows.
($)
Quizás el editor más popular en este momento. , toneladas de funciones, soporte activo, versiones para Windows, Mac y Linux. Si te tomas en serio el pixel art y aún no has encontrado el editor adecuado, este podría ser el indicado para ti.
($$+)
GameMaker Studio 2 es una excelente herramienta 2D con un buen Sprite Editor. Si desea crear pixel art para sus propios juegos, es muy conveniente hacerlo todo en un solo programa. Ahora uso este software en mi trabajo en , una colección de 50 juegos retro: creo sprites y animaciones en GameMaker y mosaicos en Photoshop.
($$$+)
Photoshop es un software costoso, distribuido por suscripción, no diseñado para pixel art. No recomiendo comprar esto a menos que te gusten las ilustraciones de alta resolución o no necesites manipular imágenes complejas como yo. Puede crear sprites estáticos y arte de píxeles en él, pero es bastante complejo en comparación con el software especializado (como GraphicsGale o Aseprite).
otro
Mi kit de pixel art. Todo es negro, me acabo de dar cuenta.
Tableta gráfica ($$+)
Recomiendo tabletas gráficas para cualquier trabajo de ilustración digital para evitar el síndrome del túnel carpiano. Es mucho más fácil prevenir que curar. Un día sentirás el dolor y solo empeorará. Cuídate desde el principio. Debido al hecho de que solía dibujar con un mouse, ahora tengo dificultades para jugar juegos que requieren que presiones teclas. Actualmente uso Wacom Intuos Pro S.
Muñequera ($)
Si no puede obtener una tableta, al menos compre un calibrador de muñeca. Mi favorita es la muñequera ajustada verde de Mueller. El resto están demasiado ajustados o no proporcionan un apoyo suficiente. Los calibradores se pueden pedir en línea sin ningún problema.
96 × 96 píxeles
lucha final. Capcom, 1989
¡Empecemos! Comencemos con un sprite de personaje de 96x96 px. Como ejemplo, dibujé un orco y lo coloqué en la captura de pantalla de Final Fight (imagen de arriba) para que obtengas la escala. Este gran sprite para la mayoría de los juegos retro, tamaño de captura de pantalla: 384 × 224 píxeles.
En un sprite tan grande, será más fácil mostrar la técnica de la que quiero hablar. Además, la representación píxel por píxel se parece más a las formas de arte tradicionales (como dibujar o pintar) con las que puede estar más familiarizado. Habiendo dominado las técnicas básicas, pasaremos a los sprites más pequeños.
1. Elige una paleta
El píxel es un concepto mucho más profundo en el arte de píxeles que en cualquier otro ámbito digital. El pixel art se define por sus limitaciones, como los colores. Es importante elegir la paleta adecuada, ayudará a definir tu estilo. Pero al principio, sugiero no pensar en paletas y elegir una de las existentes (o solo algunos colores aleatorios); puede cambiarla fácilmente en cualquier etapa.
Para este tutorial, usaré la paleta de 32 colores que creamos para . Para el arte de píxeles, a menudo se ensamblan a partir de 32 o 16 colores. El nuestro está diseñado para una consola ficticia que podría aparecer en algún lugar entre Famicom y PC Engine. Puede tomarlo o cualquier otro: el tutorial no depende en absoluto de la paleta elegida.
2. Contornos rugosos
Comencemos a dibujar con la herramienta Lápiz. Dibujemos el boceto de la misma manera que lo hacemos con un lápiz y papel normales. Por supuesto, el pixel art y el arte tradicional se superponen, especialmente cuando se trata de sprites tan grandes. Mis observaciones muestran que los artistas de pixel art fuertes son al menos buenos para dibujar a mano alzada y viceversa. Entonces, desarrollar habilidades de dibujo siempre es útil.
3. Contorneado
Finalizamos los contornos: eliminamos los píxeles extra y reducimos el grosor de cada línea a un píxel. Pero, ¿qué es exactamente redundante? Para responder a esta pregunta, debe comprender las líneas de píxeles y las protuberancias.
golpes
Necesitas aprender a dibujar dos líneas básicas en pixel art: líneas rectas y curvas. Con lápiz y papel se trata de controlar los músculos, pero estamos trabajando con pequeños bloques de color.
La clave para dibujar líneas de píxeles adecuadas es la aspereza. Estos son píxeles individuales o pequeños segmentos que destruyen la suavidad de la línea. Como decía antes, un solo píxel es de gran importancia en el pixel art, por lo que los desniveles pueden arruinar toda la estética. Imagina que estás dibujando una línea recta en un papel y, de repente, alguien golpea la mesa: las protuberancias en el arte de píxeles parecen garabatos aleatorios.
Ejemplos:
Dirigir
Las curvas
La irregularidad aparece en las curvas cuando la longitud de los segmentos de línea no aumenta o disminuye gradualmente.
Es imposible evitar los baches por completo: todos tus juegos retro favoritos los tienen (a menos, por supuesto, que el pixel art esté compuesto completamente de formas simples). Propósito: minimizar las irregularidades, mientras muestra todo lo que necesita.
4. Aplicar los primeros colores
Colorea tu personaje con un relleno u otra herramienta adecuada. La paleta simplificará esta parte del trabajo. Si el software no permite el uso de paletas, puede colocarlo directamente en la imagen, como en el ejemplo anterior, y seleccionar colores con un cuentagotas.
En la esquina inferior izquierda, dibujé a nuestro amigo, familiarícese, este es Shar. Con él, será más fácil entender qué sucede exactamente en cada etapa.
5. Sombreado
Es hora de renderizar las sombras: solo agregue colores más oscuros al sprite. Entonces la imagen se verá tridimensional. Supongamos que tenemos una fuente de luz ubicada sobre el orco a la izquierda. Esto quiere decir que todo lo que se encuentre por encima y por delante de nuestro personaje estará iluminado. Añade sombras en la parte inferior derecha.
Forma y volumen
Si este paso le resulta difícil, imagine su dibujo como formas tridimensionales, y no solo como líneas y colores. Las formas existen en el espacio XNUMXD y pueden tener un volumen que construimos con sombras. Esto ayudará a visualizar el personaje sin detalles y hará que parezca que está hecho de arcilla en lugar de píxeles. El sombreado no se trata solo de agregar nuevos colores, se trata de construir una forma. En un personaje bien detallado, los detalles no oscurecen las formas básicas: si entrecierras los ojos, verás varios grupos grandes de luces y sombras.
Suavizado (anti-aliasing, anti-aliasing)
Cada vez que uso un nuevo color, aplico suavizado (AA). Ayuda a suavizar los píxeles agregando colores intermedios en las esquinas donde se encuentran dos segmentos de línea:
Los píxeles grises suavizan las "rupturas" en la línea. Cuanto más largo sea el segmento de línea, más largo será el segmento AA.
Así se ve AA en el hombro del orco. Es necesario suavizar las líneas que representan la curva de sus músculos.
El suavizado no debe ir más allá del sprite que se utilizará en el juego o contra un fondo cuyo color se desconoce. Por ejemplo, si aplica AA a un fondo claro, el suavizado se verá feo en un fondo oscuro.
6. Circuito selectivo
Anteriormente, los contornos eran completamente negros, lo que hacía que el sprite pareciera muy caricaturesco. La imagen parecía estar dividida en segmentos. Por ejemplo, las líneas negras en el brazo muestran la musculatura de manera demasiado contrastante y el personaje parece menos sólido.
Si el sprite se vuelve más natural y la segmentación no es tan obvia, las formas básicas del personaje serán más fáciles de leer. Para hacer esto, puede usar un contorno selectivo: reemplace parcialmente el contorno negro por uno más claro. En la parte iluminada del sprite, puede usar los colores más claros o, donde el sprite toca el espacio negativo, puede eliminar completamente el contorno. En lugar de negro, debe usar el color que se eligió para la sombra; de esta manera, se conservará la segmentación (para distinguir entre músculos, pelaje, etc.).
También en esta etapa agregué sombras más oscuras. Resultó tres gradaciones de verde en la piel de un orco. El color verde más oscuro se puede utilizar para contorno selectivo y AA.
7. Toques finales
Al final, vale la pena agregar luces (los puntos más claros del sprite), detalles (aretes, tachuelas, cicatrices) y otras mejoras hasta que el personaje esté listo o hasta que tengas que pasar al siguiente.
Hay varios trucos útiles que se pueden aplicar en esta etapa. Gire el dibujo horizontalmente, esto a menudo ayuda a revelar errores en las proporciones y el sombreado. También puede eliminar el color: establezca la saturación en cero para comprender dónde necesita cambiar las sombras.
Creación de ruido (difuminado, difuminado)
Hasta ahora, hemos usado principalmente parches de sombras grandes y sólidos. Pero existe otra técnica, el tramado, que le permite pasar de un color a otro sin agregar un tercero. Mira el ejemplo de abajo.
El degradado superior de oscuro a claro utiliza cientos de diferentes tonos de azul.
El degradado medio solo usa nueve colores, pero todavía tiene demasiados tonos del mismo color. Existe el llamado banding (del inglés band - a strip), en el que, debido a las gruesas rayas uniformes, el ojo se enfoca en los puntos de contacto de los colores, en lugar de los colores mismos.
En el degradado inferior, aplicamos un tramado que evita las bandas y usa solo dos colores. Creamos ruido de intensidad variable para simular la gradación de color. Esta técnica es muy similar a los medios tonos que se utilizan en la impresión; así como punteado (punteado - imagen granulada) - en ilustración y cómics.
En el orco, me titubeé un poco para transmitir la textura. Algunos artistas de píxeles no lo usan en absoluto, mientras que otros no son tímidos y lo hacen con mucha habilidad. Encuentro que el difuminado se ve mejor en áreas grandes llenas de un solo color (mira el cielo en la captura de pantalla de Metal Slug arriba) o áreas que deberían verse ásperas y desiguales (como tierra). Decide por ti mismo cómo usarlo.
Si quieres ver un ejemplo de tramado a gran escala y de alta calidad, mira los juegos de The Bitmap Brothers, un estudio británico de los años 80, o juegos en la computadora PC-98. Solo tenga en cuenta que todos son NSFW.
Kakyusei (PC-98). Elfo, 1996
¡Solo hay 16 colores en esta imagen!
8. Última mirada
Uno de los peligros del pixel art es que parece ligero y simple (debido a sus limitaciones de estructura y estilo). Pero al final, pasarás una gran cantidad de tiempo afinando tus sprites. Es como un rompecabezas que necesita ser resuelto, razón por la cual el pixel art atrae a los perfeccionistas. Recuerda que un sprite no debería tomar mucho tiempo, es solo una pequeña pieza de una colección de piezas extremadamente compleja. Es importante no perder de vista el panorama general.
Incluso si su arte de píxeles no es para jugar, a veces vale la pena decirse a sí mismo: "¡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, usando tantos temas como sea posible.
Y a veces es útil dejar un sprite por un tiempo para que puedas mirarlo con nuevos ojos un poco más tarde.
32×32 píxeles
Primero creamos el sprite grande de 96x96 píxeles, porque con ese tamaño es más como dibujar o pintar, pero pixelado. Cuanto más pequeño es el sprite, menos se parece a lo que debería mostrar y más importante es cada píxel.
En Super Mario Bros. El ojo de Mario son solo dos píxeles apilados uno encima del otro. Y su oído también. El creador del personaje, Shigeru Miyamoto, dijo que se necesitaba el bigote para separar la nariz del resto de la cara. Entonces, una de las características principales de la cara de Mario no es solo un diseño de personajes, sino también un truco pragmático. Lo que confirma la antigua sabiduría: "la necesidad es la madre del ingenio".
Ya estamos familiarizados con las etapas principales de la creación de un sprite de 32×32 píxeles: boceto, color, sombras, mayor refinamiento. Pero en tales condiciones, como boceto inicial, tomo formas coloreadas en lugar de dibujar contornos debido al pequeño tamaño. El color juega un papel más importante en la definición de los personajes que los contornos. Mira a Mario de nuevo, no tiene contornos en absoluto. No solo los bigotes son interesantes. Sus patillas definen la forma de sus orejas, las mangas muestran sus brazos y la forma general refleja más o menos claramente todo su cuerpo.
La creación de pequeños sprites es una compensación constante. Si agrega un trazo, puede perder espacio para la sombra. Si tu personaje tiene brazos y piernas claramente definidos, es probable que la cabeza no sea muy grande. El uso efectivo de color, trazos selectivos y suavizado hará que el objeto renderizado parezca más grande de lo que realmente es.
Para los sprites pequeños, me gusta el estilo chibi: los personajes se ven muy lindos, tienen cabezas y ojos grandes. Una excelente manera de crear un personaje brillante en un espacio limitado y, en general, un estilo muy agradable. Pero quizás necesites mostrar la movilidad o la fuerza del personaje, entonces puedes darle menos espacio a la cabeza para que el cuerpo se vea más poderoso. Todo depende de tus preferencias y objetivos.
¡Todo el equipo está aquí!
Formatos de archivo
Tal resultado puede poner nervioso a cualquier artista de píxeles.
La imagen que ve es el resultado de guardar la imagen como JPG. Parte de los datos se perdió debido a los algoritmos de compresión de archivos. El arte de píxeles de alta calidad terminará luciendo mal, y devolverlo a su paleta original no será fácil.
Para guardar una imagen estática sin perder calidad, utilice el formato PNG. Para animaciones - GIF.
Cómo compartir pixel art de la manera correcta
Compartir arte de píxeles en las redes sociales es una excelente manera de obtener comentarios y conocer a 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 preguntar, lo que empeora su trabajo. Y no siempre está claro por qué se convirtió su imagen.
Hay algunos consejos sobre cómo guardar pixel art en la calidad adecuada para varias redes sociales.
Para mantener el archivo PNG sin cambios en Twitter, use menos de 256 colores o que su archivo tiene menos de 900 píxeles de largo. Aumentaría el tamaño del archivo a por lo menos 512x512 píxeles. Y para que la escala sea un múltiplo de 100 (200%, no 250%) y se conserven los bordes nítidos (Vecino más cercano en Photoshop).
GIF animados para publicaciones de Twitter no pese más de 15 MB. La imagen debe tener al menos 800x800 píxeles, la animación en bucle debe repetirse tres veces y el último cuadro debe durar la mitad del tiempo de todos los demás: la teoría más popular. Sin embargo, no está claro hasta qué punto se deben cumplir estos requisitos, dado que Twitter cambia constantemente sus algoritmos de visualización de imágenes.
Hasta donde yo sé, no es posible publicar una imagen en Instagram sin pérdida de calidad. Pero definitivamente se verá mejor si lo amplía al menos a 512x512 píxeles.
Fuente: habr.com