Indieutvecklare mĂ„ste ofta kombinera flera roller: speldesigner, programmerare, kompositör, konstnĂ€r. Och nĂ€r det kommer till det visuella vĂ€ljer mĂ„nga pixelkonst â det verkar enkelt vid första anblicken. Men för att göra nĂ„got vackert krĂ€vs mycket erfarenhet och specifika fĂ€rdigheter. Jag har hittat en tutorial för dem som just har börjat lĂ€ra sig grunderna i denna stil: med beskrivning av specialprogramvara och ritningstekniker genom tvĂ„ sprites.
Bakgrund
Pixelkonst Ă€r en form av digitalt konstverk dĂ€r förĂ€ndringar görs pĂ„ pixelnivĂ„. Den Ă€r frĂ€mst förknippad med grafik frĂ„n videospel pĂ„ 80- och 90-talet. DĂ„ var konstnĂ€rer tvungna att ta hĂ€nsyn till minnesbegrĂ€nsningar och lĂ„g upplösning. Idag Ă€r pixelkonst fortfarande populĂ€rt i spel och som konststil överlag, trots möjligheten att skapa realistisk 3D-grafik. Varför? Ăven om man inte tar hĂ€nsyn till nostalgi Ă€r det en trevlig och vĂ€rdefull utmaning att skapa ett bra verk inom sĂ„ hĂ„rda ramar.
IntrÀdeströskeln för pixelkonst Àr relativt lÄg jÀmfört med traditionell konst och 3D-grafik, vilket lockar indieutvecklare. Men det betyder inte att det Àr enkelt att fÀrdigstÀlla ett spel i denna stil. Jag har sett mÄnga indieutvecklare med pixelkonst metroidvanias pÄ crowdfunding-plattformar. De trodde att de skulle bli klara pÄ ett Är, men i sjÀlva verket skulle de behöva ytterligare sex Är.
Metal Slug 3 (Arcade). SNK, Ă„r 2000
Pixelkonst pÄ den nivÄ som de flesta vill skapa tar mycket tid, och det finns fÄ korta tutorials. NÀr man arbetar med en 3D-modell kan man rotera den, deformera den, flytta enskilda delar, kopiera animationer frÄn en modell till en annan, och sÄ vidare. Högkvalitativ pixelkonst tar nÀstan alltid massor av kraft för att noggrant placera pixlar pÄ varje ram.
SĂ„, jag har varnat.
Och nu lite om min stil: jag ritar frÀmst pixelkonst för videospel och finner inspiration i dem. Jag Àr sÀrskilt ett fan av Famicom/NES, 16-bitars konsoler och 90-talets arkadspel. Pixelkonsten frÄn mina favoritspel frÄn den tiden kan beskrivas som fÀrgglad, sjÀlvsÀker och ren (men inte för mycket), den kan inte kallas hÄrd eller minimalistisk. I denna stil arbetar jag sjÀlv, men du kan lÀtt tillÀmpa idéer och tekniker frÄn den hÀr guiden för att skapa helt andra saker. Studera verk av olika konstnÀrer och skapa pixelkonst som du tycker om!
Programvara
GrundlĂ€ggande digitala verktyg för pixelkonst â Zoom och Pennan för att placera pixlar. Du kommer ocksĂ„ att ha nytta av Linje, Form, VĂ€lj, Flytta och Fyllning. Det finns mĂ„nga gratis och betalda program med denna verktygssats. Jag kommer att berĂ€tta om de mest populĂ€ra och de som jag sjĂ€lv anvĂ€nder.
Paint (gratis)
Om du har Windows Àr inbyggda Paint ett primitivt program, men det har alla verktyg för pixelkonst.
(gratis)
En ovÀntat funktionell pixelkonstredigerare som körs via webblÀsaren. Du kan exportera ditt arbete i PNG eller animerad GIF. Ett utmÀrkt alternativ för nybörjare.
(gratis)
GraphicsGale Àr den enda redigeraren bland dem jag har hört talas om, som Àr specifikt utvecklad för pixelkonst och inkluderar animationsverktyg. Den skapades av det japanska företaget HUMANBALANCE. Sedan 2017 distribueras den gratis och Àr fortfarande populÀr, trots den vÀxande populariteten av Aseprite. TyvÀrr fungerar den bara pÄ Windows.
($)
Förmodligen den mest populÀra redigeraren just nu. , massor av möjligheter, aktivt stöd, versioner för Windows, Mac och Linux. Om du verkligen har tagit dig an pixelkonst och fortfarande inte har hittat rÀtt redigerare, kanske detta Àr vad du behöver.
($$+)
GameMaker Studio 2 Àr ett utmÀrkt 2D-verktyg med en bra sprite-redigerare. Om du vill skapa pixelkonst för dina egna spel Àr det mycket bekvÀmt att göra allt i ett program. Just nu anvÀnder jag denna programvara för att arbeta med , en samling av 50 retrospel: jag skapar sprit och animationer i GameMaker och tilesets i Photoshop.
($$$+)
Photoshop Àr dyr mjukvara som distribueras pÄ abonnemang och inte Àr anpassad för pixelkonst. Jag rekommenderar inte att du köper den om du inte jobbar med högupplösta illustrationer, eller om du inte behöver utföra komplicerade manipulationer av bilder, som jag gör. Man kan skapa statiska spriter och pixelverk, men det Àr ganska komplicerat jÀmfört med specialiserad mjukvara (till exempel GraphicsGale eller Aseprite).
Ăvrigt
Min uppsÀttning för pixelkonst. Allt i svart, jag har just mÀrkt det.
Grafikplatta ($$+)
Jag rekommenderar grafikplattor för alla typer av arbete med digitala illustrationer, för att undvika carpaltunnelsyndrom. Det Ă€r mycket lĂ€ttare att förebygga Ă€n att bota. En gĂ„ng kommer du att kĂ€nna smĂ€rta, och den kommer bara att öka â ta hand om dig sjĂ€lv frĂ„n början. Eftersom jag en gĂ„ng ritade med mus, har jag nu svĂ„rt att spela spel dĂ€r man mĂ„ste trycka pĂ„ knappar. Nu anvĂ€nder jag Wacom Intuos Pro S.
Handledsstöd ($)
Om du inte kan köpa en platta, köp Ätminstone ett handledsstöd. Jag gillar helst Mueller Green Fitted Wrist Brace. De andra Àr antingen för tajta eller ger otillrÀckligt stöd. Stöd gÄr lÀtt att bestÀlla online.
96Ă96 pixlar
Final Fight. Capcom, 1989
LĂ„t oss börja! Vi börjar med en sprite av en karaktĂ€r pĂ„ 96Ă96 pixlar. Som exempel har jag ritat en ork och placerat den pĂ„ en skĂ€rmdump frĂ„n Final Fight (bilden ovan), sĂ„ att du förstĂ„r skalet. Det hĂ€r Ă€r stort för de flesta retrospel, skĂ€rmdumpens storlek: 384Ă224 pixlar.
PÄ en sÄ stor sprite blir det lÀttare att visa den teknik som jag vill berÀtta om. Dessutom liknar pixel för pixel-teckning mer traditionella former av konst (till exempel ritning eller mÄlning), med vilka du kanske Àr bÀttre bekant. NÀr du har bemÀstrat de grundlÀggande teknikerna gÄr vi vidare till mindre spriter.
1. VĂ€lj palett
Pixel Ă€r ett mycket djupare begrepp inom pixelkonst Ă€n i andra digitala omrĂ„den. Pixelkonst definieras av sina begrĂ€nsningar, till exempel fĂ€rger. Det Ă€r viktigt att vĂ€lja en palett pĂ„ rĂ€tt sĂ€tt, den hjĂ€lper till att definiera din stil. Men i början föreslĂ„r jag att du inte tĂ€nker pĂ„ paletter, utan vĂ€ljer en av de befintliga (eller bara nĂ„gra slumpmĂ€ssiga fĂ€rger) â du kan lĂ€tt förĂ€ndra den vid alla stadier.
För denna tutorial kommer jag att anvĂ€nda en palett med 32 fĂ€rger som vi skapade för . För pixelkonst samlas de ofta i 32 eller 16 fĂ€rger. VĂ„r Ă€r designad för en pĂ„hittad konsol som skulle kunna ha funnits nĂ„gonstans mellan Famicom och PC Engine. Du kan anvĂ€nda den eller vilken annan palett som helst â tutorialen beror inte alls pĂ„ den valda paletten.
2. Grova konturer
Vi börjar med att rita med hjÀlp av Pennverktyget. Vi skapar en skiss pÄ samma sÀtt som vi gör med en vanlig penna och papper. SjÀlvklart finns det överlappningar mellan pixelkonst och traditionell konst, sÀrskilt nÀr det gÀller större sprites. Mina observationer visar att skickliga pixelkonstnÀrer Ätminstone Àr ganska bra pÄ att rita för hand och vice versa. SÄ det Àr alltid bra att utveckla ritförmÄgan.
3. Arbeta med konturer
Vi finjusterar konturerna: tar bort överflödiga pixlar och minskar tjockleken pÄ varje linje till en pixel. Men vad rÀknas som överflödigt? För att svara pÄ denna frÄga mÄste man förstÄ pixelinjer och ojÀmnheter.
OjÀmnheter
Du behöver lÀra dig att rita tvÄ grundlÀggande linjer i pixelkonst: raka och kurviga. Med penna och papper handlar allt om muskelkontroll, men vi arbetar ju med smÄ fÀrgade block.
Nyckeln till att rita rÀtt pixelinjer Àr ojÀmnheterna. Det handlar om enskilda pixlar eller smÄ segment som stör slÀthet i linjen. Som jag redan har sagt, har enskilda pixlar en enorm betydelse i pixelkonst, sÄ ojÀmnheter kan förstöra hela estetiken. FörestÀll dig att du drar en rak linje pÄ papper, och plötsligt slÄr nÄgon pÄ bordet: ojÀmnheterna i pixelkonsten ser ut precis som en slumpmÀssig krumelur.
Exempel:
Raka
Kurviga
OjÀmnheter dyker upp pÄ kurvor nÀr lÀngden pÄ linjesegmenten ökar eller minskar plötsligt.
Det Ă€r omöjligt att helt undvika ojĂ€mnheter â i alla dina favorit retrospel finns de (om pixelkonst inte enbart bestĂ„r av enkla former). MĂ„let Ă€r att minimera ojĂ€mnheterna samtidigt som man visar allt som krĂ€vs.
4. TillÀmpa de första fÀrgerna
FÀrga din karaktÀr med hjÀlp av fyllning eller ett annat lÀmpligt verktyg. Paletten förenklar detta steg i arbetet. Om programvaran inte tillhandahÄller anvÀndning av paletter kan du placera den direkt i bilden, som i exemplet ovan, och vÀlja fÀrger med hjÀlp av pipetten.
I det nedre vÀnstra hörnet har jag ritat vÄr vÀn, lÄt mig presentera, det Àr - Shar. Med honom blir det lÀttare att förstÄ vad som hÀnder i varje steg.
5. Skuggning
Dags att visa skuggorna - vi lÀgger bara till mörkare fÀrger pÄ spriten. DÄ kommer bilden att se mer tredimensionell ut. LÄt oss förutsÀtta att vi har en ljuskÀlla som Àr placerad ovanför orken, till vÀnster om honom. Det som Àr ovanför och framför vÄr karaktÀr kommer att vara upplyst. Vi lÀgger till skuggor lÀngst ner till höger.
Form och volym
Om detta steg kÀnns utmanande, tÀnk pÄ din teckning som volymetriska former, snarare Àn bara linjer och fÀrg. Former existerar i tre-dimensionellt utrymme och kan ha volym som vi bygger upp med hjÀlp av skuggor. Det kommer att hjÀlpa till att visualisera karaktÀren utan detaljer och förestÀlla sig att den Àr gjord av lera, snarare Àn av pixlar. Skuggning Àr inte bara att lÀgga till nya fÀrger, det Àr en process av att bygga upp formen. PÄ en vÀlnoggrann karaktÀr döljer inte detaljer de grundlÀggande formerna: om du kisar ser du flera stora kluster av ljus och skugga.
Antialiasing
Varje gÄng jag anvÀnder en ny fÀrg tillÀmpar jag antialiasing (AA). Det hjÀlper till att jÀmna ut pixlar genom att lÀgga till mellanliggande fÀrger vid hörnen, dÀr tvÄ linjesegment möts:
GrÄa pixlar mjukar upp "brotten" i linjen. Ju lÀngre segment linjen har, desto lÀngre Àr AA-segmentet.
SÄ hÀr ser AA ut pÄ orkens axel. Det behövs för att jÀmna ut linjerna som visar kurvaturen av hans muskler.
Antialiasing ska inte strÀcka sig utanför spriten som kommer att anvÀndas i spelet eller mot en bakgrund vars fÀrg Àr okÀnd. Till exempel, om du tillÀmpar AA för en ljus bakgrund, kommer antialiasing pÄ en mörk bakgrund att se otrevlig ut.
6. Valt kontur
Tidigare var konturerna helt svarta, vilket gjorde att spriten sÄg mycket tecknad ut. Bilden verkade som om den var uppdelad i segment. Till exempel, de svarta linjerna pÄ armen visar muskulaturen alltför kontrasterande, och karaktÀren ser mindre sammanhÄllen ut.
Om sprite blir mer naturlig och segmenteringen mindre tydlig, kommer grundformerna av karaktĂ€ren att vara lĂ€ttare att lĂ€sa. För detta kan du anvĂ€nda ett selektivt kontur â delvis ersĂ€tta den svarta konturen med en ljusare nyans. PĂ„ den belysta delen av spriten kan du anvĂ€nda de ljusaste fĂ€rgerna eller, dĂ€r spriten rör negativt utrymme, helt ta bort konturen. IstĂ€llet för svart bör en fĂ€rg anvĂ€ndas som valts för skuggan â pĂ„ sĂ„ sĂ€tt bevaras segmenteringen (för att sĂ€rskilja muskler, pĂ€ls och sĂ„ vidare).
Ăven vid detta steg lade jag till mörkare skuggor. Det blev tre nyanser av grönt pĂ„ orkens hud. Den mörkaste gröna fĂ€rgen kan anvĂ€ndas för den selektiva konturen och AA.
7. Slutliga detaljer
I slutet Àr det vÀrt att lÀgga till reflektioner (de ljusaste flÀcken pÄ spriten), detaljer (örhÀngen, nitar, Àrr) och andra förbÀttringar tills karaktÀren Àr klar eller tills det Àr dags att gÄ vidare.
Det finns flera anvĂ€ndbara tekniker som kan tillĂ€mpas i detta skede. Vrid ritningen horisontellt, detta hjĂ€lper ofta att avslöja fel i proportioner och skuggning. Du kan ocksĂ„ ta bort fĂ€rg â sĂ€tta mĂ€ttnaden pĂ„ noll för att förstĂ„ var skuggorna behöver Ă€ndras.
Skapande av brus (dithering)
Hitintills har vi frĂ€mst anvĂ€nt stora, solida omrĂ„den av skuggor. Men det finns en annan teknik â dithering, som gör det möjligt att gĂ„ frĂ„n en fĂ€rg till en annan utan att lĂ€gga till en tredje. Titta pĂ„ exemplet nedan.
Den övre gradienten frÄn mörkt till ljust anvÀnder hundratals olika nyanser av blÄtt.
Den perfekta gradienten anvĂ€nder bara nio fĂ€rger, men den har fortfarande för mĂ„nga nyanser av en och samma fĂ€rg. Det uppstĂ„r det sĂ„ kallade banding (frĂ„n engelska band â band), dĂ€r ögonen pĂ„ grund av tjocka homogena band fokuserar pĂ„ punkterna dĂ€r fĂ€rgerna möts, istĂ€llet för pĂ„ sjĂ€lva fĂ€rgerna.
I den nedre gradienten har vi tillĂ€mpat dithering, vilket gör att vi undviker banding och endast anvĂ€nder tvĂ„ fĂ€rger. Vi skapar brus med varierande intensitet för att efterlikna fĂ€rgövergĂ„ngen. Denna teknik liknar halftone (halvtone â halvmatt bild) som anvĂ€nds vid tryck; samt stippling (stippling â prickig bild) â i illustrationer och serier.
PÄ orken anvÀnde jag dithering vÀldigt lite för att överföra textur. Vissa pixelkonstnÀrer anvÀnder det knappt, medan andra Àr mycket skickliga pÄ det. Jag tycker att dithering ser bÀst ut pÄ stora omrÄden fyllda med en fÀrg (titta pÄ himlen i skÀrmbilden av Metal Slug ovan) eller pÄ omrÄden som ska se grova och ojÀmna ut (till exempel smuts). BestÀm sjÀlv hur du vill anvÀnda det.
Om du vill se ett exempel pÄ storskalig och kvalitativ dithering, kolla in spelen av The Bitmap Brothers, det brittiska studion frÄn 80-talet, eller spel pÄ datorn PC-98. Men kom ihÄg att alla dessa Àr NSFW.
Kakyusei (PC-98). Elf, 1996
Denna bild har bara 16 fÀrger!
8. Sista titten
En av farorna med pixelkonst Ă€r att det verkar lĂ€tt och enkelt (pĂ„ grund av dess struktur och stilens begrĂ€nsningar). Men i slutĂ€ndan kommer du att lĂ€gga ner enormt mycket tid pĂ„ att finslipa dina sprites. Det Ă€r som ett pussel du mĂ„ste lösa â dĂ€rför attraherar pixelkonst perfektionister. Kom ihĂ„g att en sprite inte ska ta för mycket tid â det Ă€r bara en liten bit av en extremt komplex sammansĂ€ttning av bitar. Det Ă€r viktigt att inte förlora förstĂ„elsen för helheten.
Ăven om din pixelkonst inte Ă€r för spel, kan det ibland vara bra att sĂ€ga till sig sjĂ€lv: "Allt Ă€r redan tillrĂ€ckligt bra!" och gĂ„ vidare. Det bĂ€sta sĂ€ttet att utveckla sina fĂ€rdigheter Ă€r att sĂ„ mĂ„nga gĂ„nger som möjligt gĂ„ hela processen frĂ„n början till slut med sĂ„ mĂ„nga teman som möjligt.
Och ibland Àr det bra att lÀmna sprite ett tag för att titta pÄ det med nya ögon lite senare.
32Ă32 pixlar
Vi skapade en stor sprite pĂ„ 96Ă96 pixlar först, eftersom den i den storleken mer pĂ„minner om att mĂ„la eller rita, men bara med pixlar. Ju mindre sprite, desto mindre liknar den vad den ska visa, och desto viktigare blir varje pixel.
I Super Mario Bros. Ă€r Marios öga bara tvĂ„ pixlar, placerade pĂ„ varandra. Och hans öra ocksĂ„. KaraktĂ€rsskaparen Shigeru Miyamoto sa att mustaschen behövdes för att separera nĂ€san frĂ„n resten av ansiktet. SĂ„ en av Marios mest framtrĂ€dande drag Ă€r inte bara karaktĂ€rens design men ocksĂ„ en pragmatisk lösning. Det bekrĂ€ftar det gamla ordsprĂ„ket â "behovet Ă€r uppfinningens moder."
De grundlĂ€ggande stegen för att skapa en sprite pĂ„ 32Ă32 pixlar Ă€r vi redan bekanta med: skiss, fĂ€rg, skuggor, vidareutveckling. Men under sĂ„dana förhĂ„llanden vĂ€ljer jag fĂ€rgade former som utgĂ„ngsskisser istĂ€llet för att rita konturer pĂ„ grund av den lilla storleken. FĂ€rg spelar en viktigare roll i att definiera karaktĂ€ren Ă€n konturer. Titta pĂ„ Mario igen, han har inga konturer alls. Det Ă€r inte bara mustaschen som Ă€r intressant. Hans kindskĂ€gg definierar formen pĂ„ öronen, Ă€rmarna visar armarna, och den övergripande formen Ă„terger mer eller mindre tydligt hela hans kropp.
Att skapa smÄ sprites innebÀr stÀndiga kompromisser. Om du lÀgger till en kant kan du förlora utrymme för skuggning. Om din karaktÀr har tydligt definierade armar och ben, sÄ mÄste huvudet förmodligen vara ganska litet. Om du anvÀnder fÀrg, selektiv kant och anti-aliasing effektivt, kommer den ritade objektet att verka större Àn vad det Àr.
För smÄ sprites gillar jag chibi-stilen: karaktÀrerna ser vÀldigt söta ut, med stora huvuden och ögon. Ett utmÀrkt sÀtt att skapa en livfull hjÀlte pÄ begrÀnsat utrymme, och i allmÀnhet en mycket tilltalande stil. Men om du behöver visa karaktÀrens rörlighet eller styrka kan du ge mindre utrymme Ät huvudet sÄ att kroppen ser mer muskulös ut. Allt beror pÄ dina preferenser och mÄl.
Hela laget Àr samlat!
Filformat
Ett sÄdant resultat kan fÄ vilken pixelkonstnÀr som helst att bli nervös.
Bilden du ser Àr resultatet av att spara teckningen i JPG. En del data har gÄtt förlorad pÄ grund av filkomprimeringsalgoritmer. Kvalitativ pixelkonst kommer i slutÀndan att se dÄlig ut, och det kommer att bli svÄrt att ÄterfÄ dess ursprungliga palett.
För att spara en statisk bild utan kvalitetsförlust, anvĂ€nd PNG-format. För animationer â GIF.
Hur man korrekt delar pixelkonst
Att dela pixelkonst pÄ sociala medier Àr ett utmÀrkt sÀtt att fÄ feedback och trÀffa andra konstnÀrer som arbetar i samma stil. Glöm inte att anvÀnda hashtaggen #pixelart. TyvÀrr konverterar sociala medier ofta PNG till JPG utan att frÄga, vilket försÀmrar ditt arbete. Dessutom Àr det inte alltid klart varför din bild har konverterats.
Det finns nÄgra tips för att bevara pixelkonsten i rÀtt kvalitet för olika sociala medier.
För att PNG-filen inte ska Ă€ndras i Twitter, anvĂ€nd mindre Ă€n 256 fĂ€rger eller , att din fil Ă€r mindre Ă€n 900 pixlar pĂ„ den lĂ€ngsta sidan. Jag skulle öka filens storlek till Ă„tminstone 512Ă512 pixlar. Dessutom bör skalningen vara i multiplar av 100 (200 %, inte 250 %) och skarpa kanter bevaras (Nearest Neighbor i Photoshop).
Animerade GIF-filer för inlĂ€gg pĂ„ Twitter vĂ„ga högst 15 MB. Bilden bör vara minst 800Ă800 pixlar, cyklisk animation bör upprepas tre gĂ„nger, och den sista bilden bör vara hĂ€lften sĂ„ lĂ„ng i tid som de andra - den mest populĂ€ra teorin. Det Ă€r dock oklart hur mycket dessa krav verkligen mĂ„ste uppfyllas, med tanke pĂ„ att Twitter stĂ€ndigt Ă€ndrar sina algoritmer för visning av bilder.
SĂ„vitt jag vet, Ă€r det omöjligt att publicera en bild pĂ„ Instagram utan kvalitetsförlust. Men den kommer definitivt att se bĂ€ttre ut om du ökar den till Ă„tminstone 512Ă512 pixlar.
KĂ€lla: habr.com
