Els desenvolupadors independents sovint han de combinar diversos rols alhora: dissenyador de jocs, programador, compositor, artista. I quan es tracta d'imatges visuals, molta gent tria pixel art: a primera vista, sembla senzill. Però per fer-lo bonic, necessites molta experiència i certes habilitats. He trobat un tutorial per a aquells que acaben de començar a comprendre els fonaments bàsics d'aquest estil: amb una descripció de programari especial i tècniques de dibuix utilitzant dos sprites com a exemple.
Antecedents
Pixel art és una forma d'art digital en què es fan canvis a nivell de píxels. S'associa principalment amb gràfics de videojocs dels anys 80 i 90. Aleshores els artistes havien de tenir en compte les limitacions de la memòria i la baixa resolució. Ara, el pixel art segueix sent popular als jocs i com a estil artístic en general, malgrat la possibilitat de crear gràfics en 3D realistes. Per què? Fins i tot, a part de la nostàlgia, crear treballs genials dins d'un marc tan rígid és un repte agradable i gratificant.
La barrera d'entrada en pixel art és relativament baixa en comparació amb l'art tradicional i els gràfics en 3D, que atrauen desenvolupadors independents. Però això no vol dir que serà fàcil acabar joc en aquest estil. He vist molts desenvolupadors independents amb pixel art metroidvanies a plataformes de crowdfunding. Pensaven que ho acabarien tot en un any, però de fet necessitaven sis anys més.
Metal Slug 3 (Arcade). SNK, any 2000
L'art de píxels al nivell que la majoria de la gent vol crear requereix molt de temps i els tutorials breus són pocs i distants. Quan es treballa amb un model 3D, podeu girar-lo, deformar-lo, moure les seves parts individuals, copiar animacions d'un model a un altre, etc. L'art de píxels d'alt nivell gairebé sempre requereix molt d'esforç per col·locar minuciosament els píxels a cada fotograma.
En general, vaig advertir.
I ara una mica sobre el meu estil: dibuixo principalment pixel art per a videojocs i hi trobo inspiració. En particular, sóc un fan de Famicom/NES, de les consoles de 16 bits i dels jocs arcade dels anys 90. El pixel art dels meus jocs preferits de l'època es pot descriure com a brillant, segur i net (però no massa), no és difícil i minimalista. Jo mateix treballo amb aquest estil, però podeu aplicar fàcilment les idees i les tècniques d'aquest tutorial per crear coses completament diferents. Explora el treball de diferents artistes i crea l'art de píxels que t'agrada!
Suau
Eines digitals bàsiques per a pixel art - Zoom (zoom) i llapis (llapis) per col·locar píxels. També necessitareu Línia (Línia), Figura (Forma), Seleccionar (Seleccionar), Moure (Moure) i Omplir (cubeta de pintura). Hi ha molts programes gratuïts i de pagament amb aquest conjunt d'eines. Parlaré dels més populars i dels que faig servir jo mateix.
Pintura (gratuïta)
Si teniu Windows, Paint hi està integrat, un programa primitiu, però té totes les eines per a pixel art.
(és gratis)
Un editor d'art de píxels inesperadament funcional que s'executa pel navegador. Podeu exportar el vostre treball a PNG o GIF animat. Gran opció per a principiants.
(és gratis)
GraphicsGale és l'únic editor del qual he sentit parlar específicament dissenyat per a pixel art que inclou eines d'animació. Va ser creat per l'empresa japonesa HUMANBALANCE. Des del 2017, es distribueix de manera gratuïta i encara té una demanda, malgrat la creixent popularitat d'Aseprite. Malauradament, només funciona a Windows.
($)
Potser l'editor més popular del moment. , tones de funcions, suport actiu, versions per a Windows, Mac i Linux. Si et prens seriosament l'art de píxels i encara no has trobat l'editor adequat, aquest podria ser el teu.
($$+)
GameMaker Studio 2 és una excel·lent eina 2D amb un bon editor de sprites. Si voleu crear pixel art per als vostres propis jocs, és molt convenient fer-ho tot en un sol programa. Ara faig servir aquest programari en el meu treball , una col·lecció de 50 jocs retro: Creo sprites i animacions a GameMaker i tilesets a Photoshop.
($$$+)
Photoshop és un programari car, distribuït per subscripció, no dissenyat per a pixel art. No us recomano comprar això tret que us agradin les il·lustracions d'alta resolució o no necessiteu manipular imatges complexes com jo. Podeu crear-hi sprites estàtics i pixel art, però és bastant complex en comparació amb el programari especialitzat (com GraphicsGale o Aseprite).
Un altre
El meu kit d'art de píxels. Tot és negre, acabo de notar-ho.
Tauleta gràfica ($$+)
Recomano tauletes gràfiques per a qualsevol treball d'il·lustració digital per evitar la síndrome del túnel carpià. És molt més fàcil prevenir que curar. Un dia sentiràs el dolor i només empitjorarà: cuida't des del principi. A causa del fet que abans dibuixava amb un ratolí, ara em costa jugar a jocs que requereixen que premeu tecles. Actualment faig servir Wacom Intuos Pro S.
Suport de canell ($)
Si no pots aconseguir una tauleta, com a mínim compra una pinça de canell. El meu preferit és el braç de canell ajustat de Mueller Green. La resta són massa ajustades o no ofereixen suport suficient. Les pinces es poden demanar en línia sense cap problema.
96 × 96 píxels
lluita final. Capcom, 1989
Comencem! Comencem amb un sprite de caràcters de 96 x 96 px. Com a exemple, vaig dibuixar un orc i el vaig col·locar a la captura de pantalla de Final Fight (imatge de dalt) perquè obtingueu l'escala. Això большой sprite per a la majoria de jocs retro, mida de la captura de pantalla: 384 × 224 píxels.
En un sprite tan gran, serà més fàcil mostrar la tècnica de la qual vull parlar. A més, la representació píxel a píxel s'assembla més a formes d'art tradicionals (com ara dibuixar o pintar) amb les quals potser esteu més familiaritzats. Un cop dominades les tècniques bàsiques, passarem a sprites més petits.
1. Trieu una paleta
El píxel és un concepte molt més profund en pixel art que en qualsevol altre àmbit digital. L'art de píxels es defineix per les seves limitacions, com ara els colors. És important triar la paleta adequada, us ajudarà a definir el vostre estil. Però al principi, suggereixo no pensar en les paletes i triar una de les existents (o només uns quants colors aleatoris): podeu canviar-la fàcilment en qualsevol moment.
Per a aquest tutorial, faré servir la paleta de 32 colors per a la qual hem creat . Per a l'art de píxels, sovint es munten a partir de 32 o 16 colors. El nostre està dissenyat per a una consola de ficció que podria aparèixer entre Famicom i PC Engine. Podeu agafar-lo o qualsevol altre: el tutorial no depèn en absolut de la paleta escollida.
2. Contorns aspres
Comencem a dibuixar amb l'eina Llapis. Dibuixem l'esbós de la mateixa manera que ho fem amb un bolígraf i paper normals. Per descomptat, l'art de píxels i l'art tradicional es superposen, sobretot quan es tracta d'esprits tan grans. Les meves observacions mostren que els artistes de pixel art forts són almenys bons per dibuixar a mà alçada i viceversa. Per tant, desenvolupar habilitats de dibuix sempre és útil.
3. Contorn
Finalitzem els contorns: eliminem els píxels addicionals i reduïm el gruix de cada línia a un píxel. Però què és exactament redundant? Per respondre a aquesta pregunta, heu d'entendre les línies de píxels i els cops.
cops
Heu d'aprendre a dibuixar dues línies bàsiques en pixel art: línies rectes i corbes. Amb llapis i paper es tracta de controlar els músculs, però estem treballant amb petits blocs de color.
La clau per dibuixar línies de píxels adequades és la rugositat. Es tracta de píxels individuals o petits segments que destrueixen la suavitat de la línia. Com he dit abans, un únic píxel té una gran importància en el pixel art, de manera que els desnivells poden arruïnar tota l'estètica. Imagineu-vos que esteu dibuixant una línia recta sobre un paper i de sobte algú toca la taula: els cops en pixel art semblen un gargot aleatori.
Exemples:
Línies rectes
Corbes
A les corbes apareixen irregularitats quan la longitud dels segments de línia no augmenta ni disminueix gradualment.
És impossible evitar per complet els cops: tots els vostres jocs retro preferits en tenen (tret que, per descomptat, l'art de píxels estigui format completament per formes simples). Finalitat: minimitzar les irregularitats, tot mostrant tot el que necessiteu.
4. Aplicació dels primers colors
Acoloreix el teu personatge amb un farciment o una altra eina adequada. La paleta simplificarà aquesta part del treball. Si el programari no preveu l'ús de paletes, podeu posar-lo directament a la imatge, com a l'exemple anterior, i seleccionar colors amb un comptagotes.
A la cantonada inferior esquerra, vaig dibuixar el nostre amic, coneixeu-vos, aquest és Shar. Amb ell, serà més fàcil entendre què passa exactament en cada etapa.
5. Ombrejat
És hora de representar les ombres; només cal que afegiu colors més foscos al sprite. Així, la imatge es veurà tridimensional. Suposem que tenim una font de llum situada a sobre de l'orc a l'esquerra. Això vol dir que s'il·luminarà tot el que hi ha a sobre i davant del nostre personatge. Afegeix ombres a la part inferior dreta.
Forma i volum
Si aquest pas us resulta difícil, imagina el teu dibuix com a formes tridimensionals, i no només línies i color. Les formes existeixen a l'espai XNUMXD i poden tenir un volum que construïm amb ombres. Això ajudarà a visualitzar el personatge sense detalls i farà que sembli que està fet d'argila en lloc de píxels. L'ombrejat no és només afegir nous colors, sinó crear una forma. En un personatge ben detallat, els detalls no enfosquien les formes bàsiques: si entrebleu els ulls, veureu diversos grans grups de llum i ombra.
Suavització (anti-aliasing, anti-aliasing)
Cada vegada que faig servir un color nou, aplico anti-aliasing (AA). Ajuda a suavitzar els píxels afegint colors intermedis a les cantonades on es troben dos segments de línia:
Els píxels grisos suavitzen les "ruptures" a la línia. Com més llarg sigui el segment de línia, més llarg serà el segment AA.
Així es veu AA a l'espatlla de l'orc. Cal suavitzar les línies que representen la corba dels seus músculs.
L'antialiasing no hauria d'anar més enllà de l'esprit que s'utilitzarà al joc o contra un fons del qual es desconeix el color. Per exemple, si apliqueu AA a un fons clar, l'anti-aliasing es veurà lleig en un fons fosc.
6. Contorn selectiu
Anteriorment, els contorns eren completament negres, cosa que feia que l'esprit semblés molt dibuixant. La imatge semblava dividida en segments. Per exemple, les línies negres del braç mostren la musculatura de manera massa contrastada i el personatge sembla menys sòlid.
Si el sprite es torna més natural i la segmentació no és tan òbvia, les formes bàsiques del personatge seran més fàcils de llegir. Per fer-ho, podeu utilitzar un contorn selectiu: substituïu parcialment el contorn negre per un de més clar. A la part il·luminada del sprite, podeu utilitzar els colors més clars o, quan el sprite estigui en contacte amb l'espai negatiu, podeu eliminar completament el contorn. En comptes de negre, heu d'utilitzar el color escollit per a l'ombra; d'aquesta manera es conservarà la segmentació (per distingir entre músculs, pell, etc.).
També en aquesta etapa he afegit ombres més fosques. Van resultar tres gradacions de verd a la pell d'un orc. El color verd més fosc es pot utilitzar per al contorn selectiu i AA.
7. Acabats
Al final, val la pena afegir-hi aspectes destacats (els punts més clars del sprite), detalls (arracades, tacs, cicatrius) i altres millores fins que el personatge estigui a punt o fins que hagis de passar al següent.
Hi ha diversos trucs útils que es poden aplicar en aquesta etapa. Gireu el dibuix horitzontalment, això sovint ajuda a revelar errors en les proporcions i l'ombrejat. També podeu eliminar el color: establiu la saturació a zero per entendre on heu de canviar les ombres.
Creació de soroll (dithering, dithering)
Fins ara, hem utilitzat majoritàriament taques grans i sòlides d'ombres. Però hi ha una altra tècnica: el dithering, que permet passar d'un color a un altre sense afegir-ne un tercer. Mireu l'exemple següent.
El degradat superior fosc a clar utilitza centenars de tons diferents de blau.
El degradat mitjà només utilitza nou colors, però encara té massa tons del mateix color. Hi ha l'anomenada banda (de l'anglès band - a strip), en què, a causa de les ratlles uniformes gruixudes, l'ull se centra en els punts de contacte dels colors, en lloc dels mateixos colors.
Al degradat inferior, hem aplicat un tramatge que evita les bandes i només utilitza dos colors. Creem sorolls d'intensitat variable per simular la gradació del color. Aquesta tècnica és molt semblant a les mitges tintes utilitzades en la impressió; així com el puntejat (puntejat - imatge granulada) - en il·lustració i còmics.
A l'orc, vaig variar una mica per transmetre la textura. Alguns artistes de píxels no l'utilitzen en absolut, mentre que d'altres no són tímids i ho fan amb molta habilitat. Trobo que el dithering es veu millor en àrees grans plenes d'un sol color (mireu el cel a la captura de pantalla de Metal Slug anterior) o zones que haurien de semblar aspres i desiguals (com la brutícia). Decideix tu mateix com utilitzar-lo.
Si voleu veure un exemple de dithering a gran escala i d'alta qualitat, mireu els jocs de The Bitmap Brothers, un estudi britànic dels anys 80, o els jocs a l'ordinador PC-98. Només tingueu en compte que tots són NSFW.
Kakyusei (PC-98). Elf, 1996
Només hi ha 16 colors en aquesta imatge!
8. Última mirada
Un dels perills del pixel art és que sembla lleuger i senzill (a causa de la seva estructura i limitacions d'estil). Però al final, passareu una gran quantitat de temps ajustant els vostres sprites. És com un trencaclosques que s'ha de resoldre, i és per això que el pixel art atrau els perfeccionistes. Recordeu que un sprite no hauria de trigar massa: és només una petita peça d'una col·lecció de peces extremadament complexa. És important no perdre de vista el panorama general.
Fins i tot si el vostre pixel art no és per a jocs, de vegades val la pena dir-vos: "Ja és prou bo!" I seguir endavant. La millor manera de desenvolupar habilitats és recórrer tot el procés de principi a fi tantes vegades com sigui possible, utilitzant el màxim de temes possibles.
I de vegades és útil deixar un sprite una estona per poder mirar-lo amb ulls frescos una mica més tard.
32×32 píxels
Primer vam crear el gran sprite de 96 x 96 píxels, perquè a aquesta mida s'assembla més a dibuixar o pintar, però pixelat. Com més petit sigui el sprite, menys sembla el que hauria de mostrar i més important és cada píxel.
A Super Mario Bros. L'ull de Mario és només dos píxels apilats un sobre l'altre. I la seva orella també. El creador del personatge Shigeru Miyamoto va dir que el bigoti era necessari per separar el nas de la resta de la cara. Així que una de les característiques principals de la cara de Mario no és només un disseny de personatges, sinó també un truc pragmàtic. El que confirma la vella saviesa: "la necessitat és la mare de l'enginy".
Ja estem familiaritzats amb les principals etapes de la creació d'un sprite de 32 × 32 píxels: esbós, color, ombres, més perfeccionament. Però en aquestes condicions, com a esbós inicial, agafo formes de colors en lloc de dibuixar contorns a causa de la petita mida. El color té un paper més important en la definició dels personatges que els contorns. Mireu de nou en Mario, no té cap contorn. No només els bigotis són interessants. Les patilles defineixen la forma de les orelles, les mànigues mostren els seus braços i la forma general reflecteix més o menys clarament tot el seu cos.
Crear petits sprites és una compensació constant. Si afegiu un traç, podeu perdre espai per a l'ombra. Si el vostre personatge té braços i cames clarament definits, és probable que el cap no sigui molt gran. Si feu servir el color, el traçat selectiu i l'anti-aliasing de manera eficaç, l'objecte renderitzat sembla més gran del que és realment.
Per als sprites petits, m'agrada l'estil chibi: els personatges semblen molt macos, tenen el cap i els ulls grans. Una bona manera de crear un personatge brillant en un espai limitat i, en general, un estil molt agradable. Però potser necessiteu mostrar la mobilitat o la força del personatge, llavors podeu donar menys espai al cap per fer que el cos sembli més potent. Tot depèn de les teves preferències i objectius.
Tot l'equip és aquí!
Formats de fitxer
Aquest resultat pot posar nerviós qualsevol artista de píxels
La imatge que veus és el resultat de desar la imatge com a JPG. Part de les dades es van perdre a causa dels algorismes de compressió de fitxers. L'art de píxels d'alta qualitat acabarà semblant malament i tornar-lo a la seva paleta original no serà fàcil.
Per desar una imatge estàtica sense perdre qualitat, utilitzeu el format PNG. Per a animacions - GIF.
Com compartir pixel art de la manera correcta
Compartir pixel art a les xarxes socials és una manera fantàstica d'obtenir comentaris i conèixer altres artistes que treballen amb el mateix estil. No oblideu utilitzar l'etiqueta #pixelart. Malauradament, les xarxes socials solen convertir PNG a JPG sense demanar-ho, empitjorant el vostre treball. I no sempre està clar per què es va convertir la teva imatge.
Hi ha alguns consells sobre com desar pixel art amb la qualitat adequada per a diverses xarxes socials.
Per mantenir el fitxer PNG sense canvis a Twitter, utilitzeu menys de 256 colors, o bé que el vostre fitxer tingui menys de 900 píxels de llarg. Augmentaria la mida del fitxer com a mínim a 512x512 píxels. I perquè l'escala sigui múltiple de 100 (200%, no 250%) i es conserven les vores nítides (Nearest Neighbor a Photoshop).
GIF animats per a publicacions de Twitter pesen no més de 15 MB. La imatge ha de tenir almenys 800 x 800 píxels, l'animació en bucle s'ha de repetir tres vegades i l'últim fotograma ha de ser la meitat del temps que tots els altres, la teoria més popular. Tanmateix, no està clar fins a quin punt s'han de complir aquests requisits, atès que Twitter canvia constantment els seus algorismes de visualització d'imatges.
Pel que jo sé, no és possible publicar una imatge a Instagram sense pèrdua de qualitat. Però definitivament es veurà millor si l'augmenteu a almenys 512 x 512 píxels.
Font: www.habr.com