Os desenvolvedores independentes adoitan combinar varios roles á vez: deseñador de xogos, programador, compositor, artista. E cando se trata de imaxes, moitas persoas elixen pixel art; a primeira vista, parece sinxelo. Pero para facelo bonito, necesitas moita experiencia e certas habilidades. Atopei un tutorial para aqueles que acaban de comezar a comprender os conceptos básicos deste estilo: cunha descrición de programas especiais e técnicas de debuxo usando dous sprites como exemplo.
Antecedentes
Pixel art é unha forma de arte dixital na que se realizan cambios a nivel de píxeles. Asóciase principalmente con gráficos de videoxogos dos anos 80 e 90. Entón os artistas tiveron que ter en conta as limitacións da memoria e a baixa resolución. Agora o pixel art segue sendo popular nos xogos e como estilo artístico en xeral, a pesar da posibilidade de crear gráficos 3D realistas. Por que? Mesmo á parte da nostalxia, crear traballos interesantes nun marco tan ríxido é un reto agradable e gratificante.
A barreira para entrar no pixel art é relativamente baixa en comparación coa arte tradicional e os gráficos 3D, que atraen aos desenvolvedores independentes. Pero isto non significa que sexa fácil rematar xogo neste estilo. Vin moitos desenvolvedores independentes con pixel art metroidvanias en plataformas de crowdfunding. Pensaban que rematarían todo nun ano, pero de feito necesitaban outros seis anos.
Metal Slug 3 (Arcade). SNK, ano 2000
A arte de píxeles ao nivel que a maioría da xente quere crear leva moito tempo e os titoriais breves son poucos. Cando se traballa cun modelo 3D, pode rotalo, deformalo, mover as súas partes individuais, copiar animacións dun modelo a outro, etc. A arte de píxeles de alto nivel case sempre require moito esforzo para colocar meticulosamente os píxeles en cada cadro.
En xeral, avisei.
E agora un pouco sobre o meu estilo: principalmente debuxo pixel art para videoxogos e atopo inspiración neles. En particular, son fan dos Famicom/NES, das consolas de 16 bits e dos xogos arcade dos anos 90. O pixel art dos meus xogos favoritos da época pódese describir como brillante, seguro e limpo (pero non demasiado), non é difícil e minimalista. Eu mesmo traballo neste estilo, pero podes aplicar facilmente as ideas e técnicas deste tutorial para crear cousas completamente diferentes. Explora o traballo de diferentes artistas e crea a pixel art que che gusta!
Software
Ferramentas dixitais básicas para pixel art - Zoom (Zoom) e Lapis (Lapis) para colocar píxeles. Tamén necesitará Liña (Liña), Figura (Forma), Seleccionar (Seleccionar), Mover (Mover) e Encher (cubo de pintura). Hai moitos programas gratuítos e de pago con este conxunto de ferramentas. Vou falar dos máis populares e dos que eu mesmo uso.
Pintura (gratis)
Se tes Windows, Paint está integrado nel - un programa primitivo, pero ten todas as ferramentas para pixel art.
(é gratuíto)
Un editor de pixel art inesperadamente funcional que se executa a través do navegador. Podes exportar o teu traballo a PNG ou GIF animados. Gran opción para principiantes.
(é gratuíto)
GraphicsGale é o único editor do que escoitei falar especificamente deseñado para pixel art que inclúe ferramentas de animación. Foi creado pola empresa xaponesa HUMANBALANCE. Desde 2017, distribúese de xeito gratuíto e segue sendo demandado, a pesar da crecente popularidade de Aseprite. Desafortunadamente, só funciona en Windows.
($)
Quizais o editor máis popular neste momento. , toneladas de funcións, soporte activo, versións para Windows, Mac e Linux. Se che importa en serio a pixel art e aínda non atopaches o editor axeitado, este pode ser o indicado.
($$+)
GameMaker Studio 2 é unha excelente ferramenta 2D cun bo Sprite Editor. Se queres crear pixel art para os teus propios xogos, é moi cómodo facelo todo nun só programa. Agora uso este software no meu traballo , unha colección de 50 xogos retro: creo sprites e animacións en GameMaker e conxuntos de mosaicos en Photoshop.
($$$+)
Photoshop é un software caro, distribuído por subscrición, non deseñado para pixel art. Non recomendo mercar isto a menos que che gusten as ilustracións en alta resolución ou non necesites facer unha manipulación complexa de imaxes como fago eu. Podes crear sprites estáticos e pixel art nel, pero é bastante complexo en comparación co software especializado (como GraphicsGale ou Aseprite).
Outro
O meu kit de pixel art. Todo é negro, acabo de notar.
Tableta gráfica ($$+)
Recomendo tabletas gráficas para calquera traballo de ilustración dixital para evitar a síndrome do túnel carpiano. É moito máis fácil previr que curar. Un día sentirás a dor e só empeorará: coida de ti desde o principio. Debido ao feito de que antes debuxaba co rato, agora cústame xogar a xogos que requiren que premes as teclas. Actualmente uso Wacom Intuos Pro S.
Soporte de pulso ($)
Se non podes conseguir unha tableta, compra polo menos unha pinza de pulso. O meu favorito é o Mueller Green Fitted Wrist Brace. O resto son demasiado axustados ou non proporcionan apoio suficiente. As pinzas pódense pedir en liña sen ningún problema.
96 × 96 píxeles
loita final. Capcom, 1989
Imos comezar! Comecemos cun sprite de caracteres de 96 x 96 px. Como exemplo, debuxei un orco e puxeno na captura de pantalla de Final Fight (foto superior) para que obteñas a escala. Isto большой sprite para a maioría dos xogos retro, tamaño da captura de pantalla: 384 × 224 píxeles.
Nun sprite tan grande, será máis fácil mostrar a técnica da que quero falar. Ademais, a representación píxel por píxel parécese máis ás formas de arte tradicionais (como debuxar ou pintar) coas que quizais esteas máis familiarizado. Despois de dominar as técnicas básicas, pasaremos a sprites máis pequenos.
1. Escolla unha paleta
O píxel é un concepto moito máis profundo no pixel art que en calquera outro ámbito dixital. Pixel art defínese polas súas limitacións, como as cores. É importante escoller a paleta correcta, axudará a definir o teu estilo. Pero ao principio, suxiro non pensar nas paletas e escoller unha das existentes (ou só algunhas cores aleatorias): podes cambiala facilmente en calquera momento.
Para este tutorial, vou usar a paleta de 32 cores para a que creamos . Para pixel art, adoitan ensamblarse a partir de 32 ou 16 cores. O noso está deseñado para unha consola ficticia que podería aparecer nalgún lugar entre o Famicom e o PC Engine. Podes levalo ou calquera outro: o titorial non depende en absoluto da paleta escollida.
2. Contornos ásperos
Imos comezar a debuxar coa ferramenta Lapis. Imos debuxar o debuxo do mesmo xeito que o facemos cun bolígrafo e papel normal. Por suposto, a arte de píxeles e a arte tradicional se solapan, especialmente cando se trata de sprites tan grandes. As miñas observacións mostran que os artistas de pixel art son polo menos bos no debuxo a man alzada e viceversa. Polo tanto, desenvolver habilidades de debuxo sempre é útil.
3. Contorno
Finalizamos os contornos: eliminamos píxeles adicionais e reducimos o grosor de cada liña a un píxel. Pero que é exactamente redundante? Para responder a esta pregunta, cómpre comprender as liñas de píxeles e os golpes.
golpes
Debes aprender a debuxar dúas liñas básicas en pixel art: liñas rectas e curvas. Con bolígrafo e papel trátase de controlar os músculos, pero estamos a traballar con pequenos bloques de cor.
A clave para debuxar liñas de píxeles adecuadas é a rugosidade. Estes son píxeles únicos ou pequenos segmentos que destrúen a suavidade da liña. Como dixen antes, un só píxel é de gran importancia na arte do pixel, polo que as irregularidades poden estragar toda a estética. Imaxina que estás debuxando unha liña recta no papel e, de súpeto, alguén golpea a mesa: os golpes no pixel art parecen un garabato aleatorio.
Exemplos:
Liñas rectas
Curvas
As curvas aparecen irregulares cando a lonxitude dos segmentos de liña non aumenta ou diminúe gradualmente.
É imposible evitar por completo os golpes: todos os teus xogos retro favoritos téñenos (a non ser que, por suposto, a arte do pixel estea só con formas simples). Finalidade: minimizar as irregularidades, mostrando todo o que precisa.
4. Aplicando as primeiras cores
Colorea o teu personaxe cun recheo ou outra ferramenta adecuada. A paleta simplificará esta parte do traballo. Se o software non prevé o uso de paletas, pode poñelas directamente na imaxe, como no exemplo anterior, e seleccionar cores cun contagotas.
Na esquina inferior esquerda, debuxei ao noso amigo, coñeza, este é Shar. Con el, será máis fácil entender o que ocorre exactamente en cada etapa.
5. Sombreado
É hora de renderizar sombras: só engade cores máis escuras ao sprite. Polo tanto, a imaxe terá un aspecto tridimensional. Supoñamos que temos unha fonte de luz situada encima do orco á esquerda del. Isto significa que todo o que está arriba e diante do noso personaxe estará iluminado. Engade sombras na parte inferior dereita.
Forma e volume
Se este paso é difícil para ti, imaxina o teu debuxo como formas tridimensionais, e non só liñas e cor. As formas existen no espazo XNUMXD e poden ter un volume que construímos con sombras. Isto axudará a visualizar o personaxe sen detalles e fará que pareza feito de arxila en lugar de píxeles. O sombreado non consiste só en engadir novas cores, senón en construír unha forma. Nun personaxe ben detallado, os detalles non escurecen as formas básicas: se estragas os ollos, verás varios grandes grupos de luz e sombra.
Suavizado (anti-aliasing, anti-aliasing)
Cada vez que uso unha nova cor, aplico o antialiasing (AA). Axuda a suavizar os píxeles engadindo cores intermedias nas esquinas onde se atopan dous segmentos de liña:
Os píxeles grises suavizan as "rupturas" na liña. Canto máis longo sexa o segmento de liña, máis longo será o segmento AA.
Así se ve AA no ombreiro do orco. É necesario suavizar as liñas que representan a curva dos seus músculos.
O antialiasing non debe ir máis aló do sprite que se utilizará no xogo ou contra un fondo cuxa cor é descoñecida. Por exemplo, se aplicas AA a un fondo claro, o anti-aliasing parecerá feo nun fondo escuro.
6. Circuíto selectivo
Anteriormente, os contornos eran completamente negros, o que facía que o sprite pareza moi debuxado. A imaxe parecía estar dividida en segmentos. Por exemplo, as liñas negras do brazo mostran a musculatura de forma demasiado contrastante e o personaxe parece menos sólido.
Se o sprite faise máis natural e a segmentación non é tan obvia, as formas básicas do personaxe serán máis fáciles de ler. Para iso, pode usar un contorno selectivo - substituír parcialmente o contorno negro por outro máis claro. Na parte iluminada do sprite, podes usar as cores máis claras ou, onde o sprite toca o espazo negativo, podes eliminar completamente o contorno. En lugar de negro, cómpre usar a cor escollida para a sombra; deste xeito, preservarase a segmentación (para distinguir entre músculos, peles, etc.).
Tamén nesta fase engadín sombras máis escuras. Resultou tres gradacións de verde na pel dun orco. A cor verde máis escura pódese usar para o contorno selectivo e AA.
7. Remates
Ao final, paga a pena engadir destacados (os puntos máis claros do sprite), detalles (pendentes, tachuelas, cicatrices) e outras melloras ata que o personaxe estea listo ou ata que teñas que pasar ao seguinte.
Hai varios trucos útiles que se poden aplicar nesta fase. Xire o debuxo horizontalmente, isto moitas veces axuda a revelar erros nas proporcións e no sombreado. Tamén podes eliminar a cor: axusta a saturación a cero para entender onde tes que cambiar as sombras.
Creación de ruído (dithering, dithering)
Ata agora, usamos principalmente parches de sombras grandes e sólidos. Pero hai outra técnica: dithering, que che permite pasar dunha cor a outra sen engadir unha terceira. Mira o exemplo a continuación.
O degradado superior escuro a claro usa centos de tons diferentes de azul.
O degradado medio só usa nove cores, pero aínda ten demasiados tons da mesma cor. Hai unha chamada banda (do inglés band - a strip), na que, debido ás grosas franxas uniformes, o ollo céntrase nos puntos de contacto das cores, en lugar das propias cores.
No degradado inferior, aplicamos un tramado que evita as bandas e utiliza só dúas cores. Creamos ruído de intensidade variable para simular a gradación da cor. Esta técnica é moi semellante á de semitonos utilizada na impresión; así como o punteado (punteado - imaxe granulada) - na ilustración e na banda deseñada.
No orco, tramei un pouco para transmitir a textura. Algúns artistas de píxeles non o usan en absoluto, mentres que outros non son tímidos e fano con moita habilidade. Creo que o tramado parece mellor en áreas grandes cheas dunha soa cor (mira o ceo na captura de pantalla de Metal Slug anterior) ou áreas que deberían parecer ásperas e irregulares (como a terra). Decídete por ti mesmo como usalo.
Se queres ver un exemplo de dithering a gran escala e de alta calidade, mira os xogos de The Bitmap Brothers, un estudo británico dos anos 80, ou os xogos no ordenador PC-98. Só ten en conta que todos son NSFW.
Kakyusei (PC-98). Elfo, 1996
Só hai 16 cores nesta imaxe!
8. Derradeira mirada
Un dos perigos do pixel art é que parece lixeiro e sinxelo (debido ás súas limitacións de estrutura e estilo). Pero ao final, pasarás unha gran cantidade de tempo axustando os teus sprites. É como un crebacabezas que hai que resolver, polo que a pixel art atrae aos perfeccionistas. Lembra que un sprite non debería tardar moito: é só unha pequena peza dunha colección de pezas extremadamente complexa. É importante non perder de vista o panorama xeral.
Aínda que a túa pixel art non sexa para xogos, ás veces paga a pena dicirte a ti mesmo: "Xa é o suficientemente bo!" E seguir adiante. A mellor forma de desenvolver habilidades é pasar por todo o proceso de principio a fin tantas veces como sexa posible, utilizando o maior número de temas posibles.
E ás veces é útil deixar un sprite un tempo para poder miralo con ollos frescos un pouco máis tarde.
32×32 píxeles
Creamos primeiro o gran sprite de 96 x 96 píxeles, porque a ese tamaño é máis como debuxar ou pintar, pero pixelado. Canto máis pequeno é o sprite, menos se parece ao que debería mostrar e máis importante é cada píxel.
En Super Mario Bros. O ollo de Mario é só dous píxeles apilados un sobre o outro. E a súa orella tamén. O creador do personaxe Shigeru Miyamoto dixo que o bigote era necesario para separar o nariz do resto da cara. Polo tanto, unha das principais características do rostro de Mario non é só un deseño de personaxes, senón tamén un truco pragmático. O que confirma a vella sabedoría - "a necesidade é a nai do enxeño".
Xa estamos familiarizados coas principais etapas da creación dun sprite de 32 × 32 píxeles: bosquexo, cor, sombras, máis refinamento. Pero en tales condicións, como debuxo inicial, colle formas de cores en lugar de debuxar contornos debido ao pequeno tamaño. A cor xoga un papel máis importante na definición de personaxes que os contornos. Mira de novo para Mario, non ten contornos para nada. Non só os bigotes son interesantes. As súas patillas definen a forma das súas orellas, as mangas mostran os seus brazos e a forma xeral reflicte máis ou menos claramente todo o seu corpo.
Crear pequenos sprites é unha compensación constante. Se engades un trazo, podes perder espazo para a sombra. Se o teu personaxe ten brazos e pernas claramente definidos, é probable que a cabeza non sexa moi grande. Usar a cor, o trazo selectivo e o antialiasing de forma eficaz fará que o obxecto renderizado pareza máis grande do que realmente é.
Para os sprites pequenos, gústame o estilo chibi: os personaxes parecen moi bonitos, teñen cabezas e ollos grandes. Unha boa forma de crear un personaxe brillante nun espazo limitado e, en xeral, un estilo moi agradable. Pero quizais necesites mostrar a mobilidade ou a forza do personaxe, entón podes dar menos espazo á cabeza para que o corpo pareza máis poderoso. Todo depende das túas preferencias e obxectivos.
Todo o equipo está aquí!
Formatos de ficheiros
Tal resultado pode poñer nervioso a calquera artista de píxeles
A imaxe que ves é o resultado de gardar a imaxe como JPG. Perdeuse parte dos datos debido aos algoritmos de compresión de ficheiros. A arte de píxeles de alta calidade acabará tendo un mal aspecto e devolvela á súa paleta orixinal non será fácil.
Para gardar unha imaxe estática sen perder calidade, utiliza o formato PNG. Para animacións - GIF.
Como compartir pixel art do xeito correcto
Compartir pixel art nas redes sociais é unha boa forma de obter comentarios e coñecer outros artistas que traballan no mesmo estilo. Non esquezas usar o hashtag #pixelart. Desafortunadamente, as redes sociais adoitan converter PNG a JPG sen preguntar, o que empeora o teu traballo. E non sempre está claro por que se converteu a túa imaxe.
Hai algúns consellos sobre como gardar pixel art na calidade correcta para varias redes sociais.
chilro
Para manter o ficheiro PNG sen cambios en Twitter, utiliza menos de 256 cores ou que o teu ficheiro ten menos de 900 píxeles de lonxitude. Aumentaría o tamaño do ficheiro a polo menos 512x512 píxeles. E para que a escala sexa múltiplo de 100 (200 %, non 250 %) e consérvanse os bordos nítidos (Nearest Neighbor en Photoshop).
GIF animados para publicacións de Twitter pesan non máis de 15 MB. A imaxe debe ser de polo menos 800x800 píxeles, a animación en bucle debe repetirse tres veces e o último fotograma debe ser a metade do tempo que todos os demais - a teoría máis popular. Non obstante, non está claro ata que punto deben cumprirse estes requisitos, dado que Twitter está a cambiar constantemente os seus algoritmos de visualización de imaxes.
Polo que sei, non é posible publicar unha imaxe en Instagram sen perda de calidade. Pero definitivamente quedará mellor se o amplía a polo menos 512 x 512 píxeles.
Fonte: www.habr.com