Indie-utviklere må ofte kombinere flere roller samtidig: spilldesigner, programmerer, komponist, artist. Og når det kommer til det visuelle er det mange som velger pixel art – ved første øyekast virker det enkelt. Men for å gjøre det vakkert, trenger du mye erfaring og visse ferdigheter. Jeg fant en veiledning for de som nettopp har begynt å forstå det grunnleggende i denne stilen: med en beskrivelse av spesiell programvare og tegneteknikker med to sprites som eksempel.
bakgrunn
Pikselkunst er en form for digital kunst der endringer gjøres på pikselnivå. Det er hovedsakelig assosiert med videospillgrafikk fra 80- og 90-tallet. Den gang måtte artister ta hensyn til minnebegrensninger og lav oppløsning. I dag er pikselkunst fortsatt populært i spill og som kunststil generelt, til tross for muligheten til å lage realistisk 3D-grafikk. Hvorfor? Bortsett fra nostalgi, er det en hyggelig og givende utfordring å skape kult arbeid innenfor så stramme rammer.
Barrieren for å komme inn i pikselkunst er relativt lav sammenlignet med tradisjonell kunst og 3D-grafikk, som tiltrekker seg uavhengige utviklere. Men det betyr ikke at det blir lett bli ferdig spill i denne stilen. Jeg har sett mange indie-utviklere med pixel art metroidvanias på crowdfunding-plattformer. De trodde de skulle bli ferdige med alt på ett år, men i realiteten trengte de seks år til.
Metal Slug 3 (Arcade). SNK, 2000
Pikselkunst på det nivået folk flest ønsker å lage tar mye tid på, og det er svært få korte veiledninger. Når du arbeider med en 3D-modell, kan du rotere den, deformere den, flytte dens individuelle deler, kopiere animasjoner fra en modell til en annen, og så videre. Pikselkunst på høyt nivå tar nesten alltid mye krefter på å omhyggelig plassere piksler på hver ramme.
Generelt advarte jeg deg.
Og nå litt om stilen min: Jeg tegner hovedsakelig pixel art for videospill og finner inspirasjon i dem. Spesielt er jeg en fan av Famicom/NES, 16-bits konsoller og 90-talls arkadespill. Pikselkunsten til mine favorittspill fra tiden kan beskrives som lyssterk, selvsikker og ren (men ikke for ren), snarere enn sterk og minimalistisk. Dette er stilen jeg jobber i selv, men du kan enkelt bruke ideene og teknikkene fra denne opplæringen for å lage helt andre ting. Utforsk arbeidet til forskjellige artister og lag pikselkunst som du liker!
Soft
De grunnleggende digitale verktøyene for pikselkunst er zoom og blyant for å plassere pikslene. Du vil også finne Line, Shape, Select, Move og Paint Bucket nyttige. Det finnes mye gratis og betalt programvare med et slikt sett med verktøy. Jeg vil fortelle deg om de mest populære og de jeg bruker selv.
Maling (gratis)
Hvis du har Windows, er den innebygde Paint et primitivt program, men det har alle verktøyene for pikselkunst.
(er gratis)
En uventet funksjonell pixel art editor som kjører gjennom nettleseren. Du kan eksportere arbeidet ditt som PNG eller animert GIF. Et utmerket alternativ for nybegynnere.
(er gratis)
GraphicsGale er den eneste redaktøren jeg har hørt om som er designet spesielt for pikselkunst og inkluderer animasjonsverktøy. Den ble laget av det japanske selskapet HUMANBALANCE. Det har vært tilgjengelig gratis siden 2017 og er fortsatt etterspurt, til tross for økningen i popularitet til Aseprite. Dessverre fungerer det bare på Windows.
($)
Kanskje den mest populære redaktøren for øyeblikket. , mange funksjoner, aktiv støtte, versjoner for Windows, Mac og Linux. Hvis du er seriøs med pikselkunst og fortsatt ikke har funnet den rette editoren, kan dette være den du trenger.
($$+)
GameMaker Studio 2 er et utmerket 2D-verktøy med en god Sprite Editor. Hvis du vil lage pikselkunst for dine egne spill, er det veldig praktisk å gjøre alt i ett program. Nå bruker jeg denne programvaren mens jeg jobber med , en samling av 50 retrospill: Jeg lager sprites og animasjoner i GameMaker, og tileset i Photoshop.
($$$+)
Photoshop er dyr programvare, distribuert med abonnement, og ikke laget for pikselkunst. Jeg anbefaler ikke å kjøpe det med mindre du er involvert i å gjengi illustrasjoner i høy oppløsning, eller du ikke trenger å utføre komplekse manipulasjoner med bildet, som meg. Du kan lage statiske sprites og pikselkunst i den, men den er ganske kompleks sammenlignet med spesialisert programvare (for eksempel GraphicsGale eller Aseprite).
Andre
Mitt pixel art-sett. Alt er svart, jeg la først merke til det nå.
Grafikknettbrett ($$+)
Jeg anbefaler grafiske nettbrett for alle digitale illustrasjoner for å unngå karpaltunnelsyndrom. Det er mye lettere å forebygge enn å kurere. En dag vil du føle smerte og det vil bare øke – ta vare på deg selv helt fra begynnelsen. Fordi jeg pleide å tegne med mus, har jeg nå vanskelig for å spille spill som krever at jeg trykker på tastene. Jeg bruker for øyeblikket Wacom Intuos Pro S.
Håndleddsstøtte ($)
Får du ikke et nettbrett, få i det minste en håndleddsstøtte. Min favoritt er Mueller Green Fitted Wrist Brace. Resten er enten for stramt eller gir ikke nok støtte. Kalipere kan bestilles på nett uten problemer.
96 × 96 piksler
Siste kamp. Capcom, 1989
La oss komme i gang! La oss starte med en tegnsprite på 96 x 96 piksler. Som et eksempel tegnet jeg en orc og plasserte den på et skjermbilde fra Final Fight (bildet over) slik at du kan forstå skalaen. Dette большой sprite for de fleste retrospill, skjermbildestørrelse: 384x224 piksler.
På en så stor sprite vil det være lettere å vise teknikken jeg vil snakke om. Per-piksel-gjengivelse er også mer lik tradisjonelle former for kunst (som tegning eller maleri) som du kanskje er mer kjent med. Etter å ha mestret de grunnleggende teknikkene, vil vi gå videre til mindre sprites.
1. Velg en palett
Pixel er et mye dypere konsept innen pikselkunst enn i noe annet digitalt område. Pikselkunst er definert av dens begrensninger, for eksempel farger. Det er viktig å velge riktig palett, det vil bidra til å bestemme stilen din. Men i starten foreslår jeg at du ikke tenker på paletter og velger en av de eksisterende (eller bare noen få tilfeldige farger) - du kan enkelt endre det når som helst.
For denne opplæringen vil jeg bruke 32-fargepaletten vi laget for . For pikselkunst er de ofte satt sammen fra 32 eller 16 farger. Vår er designet for en fiktiv konsoll som vil dukke opp et sted mellom Famicom og PC-motoren. Du kan ta det eller noe annet - opplæringen avhenger ikke i det hele tatt av den valgte paletten.
2. Grove konturer
La oss begynne å tegne med blyantverktøyet. La oss tegne en skisse på samme måte som vi gjør med vanlig penn og papir. Selvfølgelig overlapper pikselkunst og tradisjonell kunst, spesielt når det kommer til så store sprites. Mine observasjoner viser at sterke pixel art-kunstnere i det minste er flinke til å tegne for hånd og omvendt. Så det er alltid nyttig å utvikle tegneferdighetene dine.
3. Utarbeidelse av konturer
Vi avgrenser konturene: fjern ekstra piksler og reduser tykkelsen på hver linje til en piksel. Men hva anses egentlig som overflødig? For å svare på dette spørsmålet må du forstå piksellinjer og uregelmessigheter.
Uregelmessigheter
Du må lære å tegne to grunnleggende linjer i pikselkunst: rett og buet. Med penn og papir handler det om muskelkontroll, men vi jobber med bittesmå fargeblokker.
Nøkkelen til å tegne riktige piksellinjer er jaggies. Dette er enkeltpiksler eller små segmenter som ødelegger jevnheten til linjen. Som jeg sa før, en enkelt piksel utgjør en enorm forskjell i pikselkunst, så ujevnheter kan ødelegge hele estetikken. Se for deg å tegne en rett linje på papir og plutselig slår noen i bordet: ujevnhetene i pikselkunsten ser akkurat ut som en tilfeldig krøll.
Eksempler:
Direkte
Kurver
Uregelmessigheter vises i kurver når lengden på linjestykkene ikke øker eller reduseres gradvis.
Det er umulig å unngå ujevnheter helt – alle retro-favorittspillene dine har dem (med mindre pikselkunsten selvfølgelig består av enkle former). Mål: Hold ujevnheter på et minimum mens du fortsatt viser alt som trengs.
4. Påfør de første fargene
Farg karakteren din med fyll eller annet passende verktøy. Paletten vil forenkle denne delen av arbeidet. Hvis programvaren ikke gir mulighet for bruk av paletter, kan du plassere den direkte i bildet, som i eksempelet ovenfor, og velge farger ved hjelp av en pipette.
I nedre venstre hjørne tegnet jeg vennen vår, møt, dette er Ball. Det vil gjøre det lettere å forstå nøyaktig hva som skjer på hvert trinn.
5. Skyggelegging
Det er på tide å vise skyggene – bare legg mørkere farger til spriten. Dette vil få bildet til å se tredimensjonalt ut. La oss anta at vi har én lyskilde plassert over orken til venstre for den. Dette betyr at alt som er over og foran karakteren vår vil bli opplyst. Legg til skygger nederst til høyre.
Form og volum
Hvis dette trinnet er utfordrende for deg, tenk på tegningen din som tredimensjonale former i stedet for bare linjer og farger. Former eksisterer i tredimensjonalt rom og kan ha volum, som vi bygger ved hjelp av skygger. Dette vil hjelpe deg å visualisere karakteren uten detaljer og forestille deg at han er laget av leire og ikke piksler. Skyggelegging er ikke bare å legge til nye farger, det er prosessen med å bygge en form. På en veldesignet karakter skjuler ikke detaljene de underliggende formene: hvis du myser, vil du se noen store klynger av lys og skygge.
Utjevning (kantutjevning)
Hver gang jeg bruker en ny farge, bruker jeg anti-aliasing (AA). Det hjelper til med å jevne ut pikslene ved å legge til mellomfarger i hjørnene der to linjesegmenter møtes:
Grå piksler myker opp "bruddene" i linjen. Jo lengre linjesegmentet er, desto lengre er AA-segmentet.
Slik ser AA ut på en orkens skulder. Det er nødvendig for å jevne ut linjene som viser kurven til musklene hans
Anti-aliasing bør ikke strekke seg utover spriten som skal brukes i spillet eller på en bakgrunn hvis farge er ukjent. Hvis du for eksempel bruker AA på en lys bakgrunn, vil anti-aliasingen se stygg ut på en mørk bakgrunn.
6. Selektiv disposisjon
Tidligere var konturene helt svarte, noe som fikk spriten til å se veldig tegneserieaktig ut. Bildet så ut til å være delt inn i segmenter. For eksempel gir svarte linjer på en arm for mye kontrast til muskulaturen, noe som gjør at karakteren ser mindre sammenhengende ut.
Hvis spriten blir mer naturlig og segmenteringen mindre tydelig, vil de grunnleggende formene til karakteren være lettere å lese. For å gjøre dette kan du bruke en selektiv kontur - delvis erstatte den svarte omrissen med en lysere. På den opplyste delen av spriten kan du bruke de lyseste fargene, eller, der spriten berører negativt mellomrom, kan du fjerne omrisset helt. I stedet for svart, må du bruke fargen som ble valgt for skyggen - på denne måten vil segmenteringen bli bevart (for å skille mellom muskler, pels og så videre).
Jeg la også til mørkere skygger på dette stadiet. Resultatet var tre graderinger av grønt på orkens hud. Den mørkeste grønne fargen kan brukes til selektiv kontur og AA.
7. Siste finpuss
Til slutt er det verdt å legge til høydepunkter (de letteste flekkene på spriten), detaljer (øreringer, studs, arr) og andre forbedringer til karakteren er klar eller til du må gå videre til neste.
Det er flere nyttige teknikker som kan brukes på dette stadiet. Roter tegningen horisontalt, dette hjelper ofte til å identifisere feil i proporsjoner og skyggelegging. Du kan også fjerne fargen - sett metningen til null for å forstå hvor du må endre skyggene.
Skaper støy (dithering, dithering)
Så langt har vi stort sett brukt store, solide skyggeområder. Men det er en annen teknikk - dithering, som lar deg gå fra en farge til en annen uten å legge til en tredje. Se på eksemplet nedenfor.
Den øverste mørk til lys gradient bruker hundrevis av forskjellige nyanser av blått.
Den gjennomsnittlige gradienten bruker bare ni farger, men det er fortsatt for mange nyanser av samme farge. En såkalt banding oppstår (fra engelsk band - stripe), der øyet på grunn av tykke ensartede striper fokuserer på fargenes kontaktpunkter, i stedet for fargene i seg selv.
På den nederste gradienten brukte vi dithering, som unngår bånd og bruker bare to farger. Vi lager støy av varierende intensitet for å simulere fargegradering. Denne teknikken er veldig lik halvtone (halvtonebilde) som brukes i utskrift; samt stipling (kornete bilde) - i illustrasjoner og tegneserier.
På orken raste jeg ganske mye for å formidle tekstur. Noen pikselartister bruker det ikke i det hele tatt, andre er tvert imot ikke sjenerte og gjør det veldig dyktig. Jeg synes at dither ser best ut på store områder fylt med en enkelt farge (se på himmelen i Metal Slug-skjermbildet ovenfor) eller på områder som skal se grove og ujevne ut (som skitt). Bestem selv hvordan du bruker den.
Hvis du vil se et eksempel på storskala og høykvalitets dithering, sjekk ut spillene til The Bitmap Brothers, et britisk studio fra 80-tallet, eller spillene på PC-98-datamaskinen. Bare husk at de alle er NSFW.
Kakyusei (PC-98). Elf, 1996
Det er bare 16 farger i dette bildet!
8. Siste titt
En av farene med pikselkunst er at det virker enkelt og enkelt (på grunn av struktur- og stilbegrensninger). Men du vil ende opp med å bruke mye tid på å raffinere sprites. Det er som et puslespill som må løses – det er derfor pixel art tiltrekker seg perfeksjonister. Husk at en sprite ikke bør ta for mye tid - det er bare en liten del av en ekstremt kompleks samling av deler. Det er viktig å ikke miste det store bildet av syne.
Selv om pikselkunsten din ikke er for spilling, er det noen ganger verdt å si til deg selv: "Det er allerede bra nok!" Og gå videre. Den beste måten å utvikle ferdighetene dine på er å gå gjennom hele prosessen fra start til slutt så mange ganger som mulig, ved å bruke så mange emner som mulig.
Og noen ganger er det nyttig å la en sprite ligge en stund, slik at du kan se på den med friske øyne litt senere.
32x32 piksler
Vi laget en stor sprite på 96 x 96 piksler først fordi den i den størrelsen er mer som å tegne eller male, men med piksler. Jo mindre spriten er, jo mindre lik den er den den skal vise, og jo viktigere er hver piksel.
I Super Mario Bros. Marios øye er bare to piksler, den ene oppå den andre. Og øret hans også. Karakterskaperen Shigeru Miyamoto sa at barten var nødvendig for å skille nesen fra resten av ansiktet. Så en av hovedtrekkene til Mario er ikke bare et karakterdesign, men et pragmatisk knep. Som bekrefter den gamle visdommen - "nødvendighet er oppfinnelsens mor."
Hovedstadiene for å lage en sprite på 32x32 piksler er allerede kjent for oss: skisse, farge, skygger, ytterligere forfining. Men under slike forhold, som en innledende skisse, velger jeg fargede former i stedet for å tegne konturer på grunn av den lille størrelsen. Farge spiller en viktigere rolle i å definere en karakter enn omriss. Se på Mario igjen, han har ingen omriss i det hele tatt. Det er ikke bare barten som er interessant. Bakkene hans definerer formen på ørene, ermene viser armene, og den generelle formen hans mer eller mindre tydelig skisserer hele kroppen.
Å lage små sprites er et konstant kompromiss. Hvis du legger til et slag, kan du miste plass til skyggen. Hvis karakteren din har godt synlige armer og ben, bør hodet sannsynligvis ikke være veldig stort. Hvis du bruker farger, selektiv strek og anti-aliasing effektivt, vil det gjengitte objektet virke større enn det faktisk er.
For små sprites liker jeg chibi-stilen: karakterene ser veldig søte ut, de har store hoder og øyne. En fin måte å skape en fargerik karakter på en begrenset plass, og totalt sett en veldig fin stil. Men kanskje du trenger å vise en karakters bevegelighet eller styrke, da kan du gi mindre plass til hodet for å få kroppen til å se kraftigere ut. Alt avhenger av dine preferanser og mål.
Hele laget er samlet!
Filformater
Dette resultatet kan gjøre enhver pixel artist nervøs
Bildet du ser er resultatet av å lagre bildet i JPG. Noen data gikk tapt på grunn av filkomprimeringsalgoritmer. Pikselkunst av høy kvalitet vil ende opp med å se dårlig ut, og det vil ikke være lett å returnere den til den opprinnelige paletten.
For å lagre et statisk bilde uten å miste kvalitet, bruk PNG-formatet. For animasjoner - GIF.
Hvordan dele pikselkunst på riktig måte
Å dele pikselkunst på sosiale nettverk er en fin måte å få tilbakemeldinger på og møte andre artister som jobber i samme stil. Ikke glem å bruke hashtaggen #pixelart. Dessverre konverterer sosiale nettverk ofte PNG til JPG uten å spørre, noe som gjør opplevelsen din verre. Dessuten er det ikke alltid klart hvorfor bildet ditt ble konvertert.
Det er flere tips om hvordan du lagrer pikselkunst i ønsket kvalitet for ulike sosiale nettverk.
For å beholde PNG-filen din uendret på Twitter, bruk færre enn 256 farger eller at filen din er mindre enn 900 piksler på den lengste siden. Jeg vil øke filstørrelsen til minst 512x512 piksler. Og slik at skaleringen er et multiplum av 100 (200 %, ikke 250 %) og skarpe kanter bevares (Nærmeste nabo i Photoshop).
Animerte GIF-er for Twitter-innlegg veie ikke mer enn 15 MB. Bildet må være minst 800x800 piksler, looping-animasjonen må gjentas tre ganger, og den siste framen må være halvparten så lang som alle de andre - den mest populære teorien. Det er imidlertid uklart i hvilken grad disse kravene må oppfylles, gitt at Twitter stadig endrer sine bildevisningsalgoritmer.
Så vidt jeg vet er det umulig å legge ut et bilde på Instagram uten å miste kvalitet. Men det vil definitivt se bedre ut hvis du forstørrer det til minst 512x512 piksler.
Kilde: www.habr.com