Indie-udviklere må ofte kombinere flere roller: spildesigner, programmør, komponist, kunstner. Og når det kommer til visuelle elementer, vælger mange pixelart — det virker simpelt ved første øjekast. Men for at skabe noget smukt kræves der meget erfaring og specifikke færdigheder. Jeg fandt en tutorial til dem, der lige er begyndt at lære det grundlæggende i denne stil: med beskrivelse af speciel software og tegneteknikker baseret på to sprites.
Baggrund
Pixelart er en form for digital kunst, hvor ændringer foretages på pixelniveau. Det forbindes primært med grafik fra videospil i 80'erne og 90'erne. Dengang måtte kunstnere tage hensyn til hukommelsesbegrænsninger og lav opløsning. I dag er pixelart stadig populært i spil og som kunstnerisk stil generelt, på trods af muligheden for at skabe realistisk 3D-grafik. Hvorfor? Selv uden at tage nostalgi i betragtning, er det en behagelig og værdifuld udfordring at skabe et fedt værk inden for så stramme rammer.
Indgangsbarrieren til pixelart er relativt lav sammenlignet med traditionel kunst og 3D-grafik, hvilket tiltrækker indie-udviklere. Men det betyder slet ikke, at det bliver nemt at færdiggøre et spil i denne stil. Jeg har set mange indie-udviklere med pixelart metroidvanias på crowdfunding-platforme. De troede, at de ville være færdige på et år, men i virkeligheden havde de brug for yderligere seks år.
Metal Slug 3 (Arcade). SNK, 2000
Pixelart på det niveau, som de fleste ønsker at skabe, kræver meget tid, og der er meget få korte tutorials. Når du arbejder med en 3D-model, kan du rotere den, deformere den, flytte enkelte dele af den, kopiere animationer fra en model til en anden og så videre. Høj-niveau pixelart kræver næsten altid en masse energi på omhyggelig placering af pixels på hvert enkelt frame.
Generelt har jeg advaret.
Og nu lidt om min stil: jeg tegner primært pixelkunst til videospil, og det er også her, jeg finder min inspiration. Jeg er især fan af Famicom/NES, 16-bit konsoller og arkadespil fra 90'erne. Pixelkunsten fra mine yndlingsspil fra den tid kan beskrives som farverig, sikker og ren (men ikke for meget), den kan ikke kaldes hård og minimalistisch. Jeg arbejder selv i denne stil, men du kan nemt anvende ideer og teknikker fra denne tutorial til at skabe helt andre ting. Udforsk værker af forskellige kunstnere og skab pixelkunst, som du kan lide!
Software
Grundlæggende digitale værktøjer til pixelkunst – Zoom (Zoom) og Blyant (Pencil), til at placere pixels. Du vil også få brug for Linje (Line), Figur (Shape), Vælg (Select), Flyt (Move) og Malebøtte (Paint Bucket). Der findes mange gratis og betalte programmer med dette værktøjsæt. Jeg vil fortælle dig om de mest populære og dem, jeg selv bruger.
Paint (gratis)
Hvis du har Windows, er det indbyggede Paint et primitivt program, men det har alle værktøjerne til pixelkunst.
(gratis)
En overraskende funktionel pixelkunstreder, der kører i din browser. Du kan eksportere dit arbejde som PNG eller en animeret GIF. Et glimrende valg for begyndere.
(gratis)
GraphicsGale er den eneste editor blandt dem, jeg har hørt om, der er udviklet specifikt til pixelkunst og inkluderer animationsværktøjer. Den blev skabt af det japanske firma HUMANBALANCE. Siden 2017 har den været gratis at downloade og er stadig populær, på trods af Aseprites stigende popularitet. Desværre fungerer den kun på Windows.
($)
Måske den mest populære editor lige nu. , masser af muligheder, aktiv support, tilgængelig på Windows, Mac og Linux. Hvis du seriøst arbejder med pixelkunst og stadig ikke har fundet den rette editor, kan dette være det, du har brug for.
($$+)
GameMaker Studio 2 er et fremragende 2D-værktøj med en fantastisk sprite-editor. Hvis du vil lave pixelkunst til dine egne spil, er det meget praktisk at gøre alt i et program. Lige nu bruger jeg denne software til at arbejde på , en samling af 50 retro-spil: jeg skaber sprites og animationer i GameMaker og tilesets i Photoshop.
($$$+)
Photoshop er dyr software, som distribueres via abonnement og ikke er optimeret til pixel-art. Jeg anbefaler ikke at købe det, medmindre du arbejder med illustrationer i høj opløsning eller har brug for at udføre komplekse manipulationer med billeder, som jeg. Du kan skabe statiske sprites og pixelværker i det, men det er ret kompliceret sammenlignet med specialiseret software (som GraphicsGale eller Aseprite).
Andet
Mit sæt til pixel-art. Alt er sort, jeg bemærkede det først nu.
Grafisk tablet ($$+)
Jeg anbefaler grafiske tablets til ethvert arbejde med digitale illustrationer for at undgå karpaltunnelsyndrom. Det er meget lettere at forebygge end at heles. En dag vil du mærke smerte, og den vil kun blive værre — tag vare på dig selv fra starten. Fordi jeg engang tegnede med musen, har jeg nu svært ved at spille spil, hvor man skal trykke på taster. Jeg bruger nu Wacom Intuos Pro S.
Handsupport ($)
Hvis du ikke kan få fat i en tablet, så køb i det mindste en handsupport. Jeg kan bedst lide Mueller Green Fitted Wrist Brace. De andre er enten for stramme eller giver utilstrækkelig støtte. Supports kan nemt bestilles online.
96×96 pixels
Final Fight. Capcom, 1989.
Lad os komme i gang! Vi starter med en karakter sprite på 96×96 pixels. Som eksempel har jeg tegnet en ork og placeret den på et screenshot fra Final Fight (billedet ovenfor), så du kan forstå størrelsesforholdet. Dette er en stor sprite for de fleste retro-spil, screenshot størrelse: 384×224 pixels.
På en så stor sprite er det lettere at vise den teknik, jeg vil tale om. Derudover minder pixel-for-pixel tegning mere om traditionelle kunstformer (som tegning eller maleri), som du måske er bedre bekendt med. Når du har mestret de grundlæggende teknikker, vil vi gå videre til mindre sprites.
1. Vælg en palette
Pixel er et meget dybere begreb inden for pixel-art end i nogen andre digitale sfærer. Pixel-art defineres af sine begrænsninger, som for eksempel farver. Det er vigtigt at vælge en palette korrekt, da den hjælper med at fastlægge din stil. Men i starten foreslår jeg ikke at tænke på paletter og bare vælge en af de eksisterende (eller bare et par tilfældige farver) — du kan nemt ændre den på ethvert tidspunkt.
I denne tutorial vil jeg bruge en palet med 32 farver, som vi har skabt til . Til pixelkunst samles de ofte i 32 eller 16 farver. Vores er udviklet til en fiktiv konsol, som kunne have været skabt et sted mellem Famicom og PC Engine. Du kan tage den eller en anden — tutorialen afhænger slet ikke af den valgte palet.
2. Grovere konturer
Lad os starte med at tegne ved hjælp af værktøjet Blyant. Vi vil lave et skitser, ligesom vi gør med en almindelig pen og papir. Selvfølgelig overlapper pixelkunst og traditionel kunst, især når det kommer til store sprites. Mine observationer viser, at dygtige pixelkunstnere som regel også kan tegne godt i hånden og omvendt. Så det er altid nyttigt at udvikle tegnefærdigheder.
3. Arbejde med konturer
Vi finpudser konturerne: fjerner overskydende pixels og reducerer tykkelsen af hver linje til én pixel. Men hvad skal man betragte som overskydende? For at besvare dette spørgsmål skal vi forstå pixel linjer og ujævnheder.
Ujævnheder
Du skal lære at tegne to grundlæggende linjer i pixelkunst: lige og buede. Med en pen og papir handler det om muskelkontrol, men vi arbejder med små farvede blokke.
Nøglen til at tegne de rigtige pixel linjer er ujævnheder. Det er enkeltpixels eller små segmenter, der bryder glathed af linjen. Som jeg allerede har nævnt, har et enkelt pixel enorm betydning i pixelkunst, så ujævnheder kan ødelægge hele æstetikken. Forestil dig, at du tegner en lige linje på papir, og pludselig støder nogen til bordet: ujævnheder i pixelkunst ser ligesådan ud som en tilfældig krusedulle.
Eksempler:
Lige
Buede
Ujævnheder opstår på buede linjer, når længden af linjesegmenterne øges eller mindskes ikke gradvist.
Det er umuligt helt at undgå ujævnheder — de findes i alle dine yndlings retrospil (medmindre selvfølgelig pixelkunst kun består af enkle former). Målet: at minimere ujævnheder, samtidig med at man viser alt det nødvendige.
4. Anvend de første farver
Farv din karakter med fyld eller et andet passende værktøj. Paletten vil gøre denne del af arbejdet lettere. Hvis softwaren ikke understøtter brug af paletter, kan du placere den direkte i billedet som i eksemplet ovenfor og vælge farver med pipetten.
I nederste venstre hjørne har jeg tegnet vores ven, mød — Sharik. Det vil være lettere at forstå, hvad der sker på hvert trin med ham.
5. Skyggelegning
Nu er det tid til at tilføje skygger — vi tilføjer blot mørkere farver til sprite. Det vil få billedet til at se mere tredimensionelt ud. Lad os antage, at vi har en lyskilde, der er placeret ovenfor og til venstre for orken. Så alt, der er over og foran vores karakter, vil blive belyst. Vi tilføjer skygger nederst til højre.
Form og volumen
Hvis dette trin er svært for dig, så forestil dig dit billede som tredimensionelle former snarere end blot linjer og farver. Former eksisterer i et tredimensionelt rum og kan have volumen, som vi opbygger med skygger. Dette hjælper med at visualisere karakteren uden detaljer og forestille sig, at den er lavet af ler snarere end af pixels. Skyggelegning er ikke blot at tilføje nye farver, men en proces til opbygning af form. På en veludført karakter skjuler detaljerne ikke de grundlæggende former: hvis du kigger nøje, vil du se flere store klynger af lys og skygge.
Anti-aliasing
Hver gang jeg bruger en ny farve, anvender jeg anti-aliasing (AA). Det hjælper med at udjævne pixels ved at tilføje mellemfarver i hjørnerne, hvor to segmenter af en linje mødes:
Grå pixels blødgør "brud" i linjen. Jo længere segmentet af linjen er, desto længere er AA-segmentet.
Sådan ser AA ud på orkens skulder. Det er nødvendigt for at glatte linjerne, der viser kurven af hans muskler.
Anti-aliasing bør ikke strække sig ud over sprite, der vil blive brugt i spillet eller på en baggrund, hvis farve er ukendt. For eksempel, hvis du anvender AA til en lys baggrund, vil det se dårligt ud på en mørk baggrund.
6. Valgt kontur
Tidligere var konturerne helt sorte, hvilket gjorde, at sprite så meget tegnet ud. Billedet var nærmest delt op i segmenter. For eksempel viser de sorte linjer på armen for stærkt muskulaturen, og karakteren ser mindre sammenhængende ud.
Hvis sprite'en bliver mere naturlig, og segmenteringen ikke så markant, vil de grundlæggende former for figuren være lettere at læse. Til dette kan man bruge en selektiv kontur — delvist erstatte den sorte kontur med en lysere farve. På den oplyste del af sprite'en kan de lyseste farver bruges, eller der hvor sprite'en berører det negative rum, kan konturen helt fjernes. I stedet for sort bør man bruge farven valgt til skyggen — således bevares segmenteringen (til adskillelse af muskler, pels osv.).
Desuden har jeg på dette trin tilføjet mørkere skygger. Der er opnået tre nuancer af grøn på orkens hud. Den mørkeste grønne farve kan bruges til den selektive kontur og AA.
7. Endelige detaljer
Til sidst bør man tilføje højlys (de lyseste pletter på sprite'en), detaljer (øreringe, nitter, ar) og andre forbedringer, indtil figuren er klar, eller indtil man skal videre til næste.
Der er flere nyttige teknikker, man kan anvende på dette trin. Vend tegningen vandret, det hjælper ofte med at afsløre fejl i proportioner og skygger. Man kan også fjerne farven — sætte mætningen til nul for at forstå, hvor skyggerne skal ændres.
Skabelse af støj (dithering)
Indtil nu har vi primært brugt store, solide områder med skygger. Men der er også en anden teknik — dithering, der muliggør overgangen fra én farve til en anden uden at tilføje en tredje. Se eksemplet nedenfor.
Den øverste gradient fra mørk til lys bruger hundreder af forskellige nuancer af blå.
Den mellemste gradient bruger kun ni farver, men der er stadig for mange nuancer af én farve. Der opstår såkaldt banding, hvor øjet fokuserer på farvernes berøringspunkter snarere end selve farverne på grund af tykke, ensartede striber.
I den nederste gradient har vi anvendt dithering, hvilket hjælper med at undgå banding og bruger kun to farver. Vi skaber støj i forskellige intensiteter for at efterligne farvegradering. Denne teknik ligner meget halftone, der anvendes i trykning; samt stippling — i illustrationer og tegneserier.
På orken anvendte jeg dithering meget lidt for at overføre teksturen. Nogle pixelkunstnere bruger slet ikke det, mens andre tværtimod ikke er bange for det og gør det meget dygtigt. Jeg synes, dithering ser bedst ud på store områder fyldt med én farve (kig på himlen i skærmbilledet fra Metal Slug, som blev vist før) eller på de områder, der skal se ru og ujævne ud (for eksempel mudder). Beslut selv, hvordan du vil bruge det.
Hvis du vil se et eksempel på omfattende og kvalitetssikret dithering, så undersøg spillene fra The Bitmap Brothers, det britiske studie fra 80'erne, eller spil på PC-98. Bare husk, at alle de er NSFW.
Kakyusei (PC-98). Elf, 1996
Der er kun 16 farver på dette billede!
8. Sidste blik
En af farerne ved pixelkunst er, at det virker let og simpelt (på grund af dets struktur og stilens begrænsninger). Men til sidst bruger du en enorm mængde tid på at forfine dine sprites. Det ligner et puslespil, der skal løses — det er derfor, pixelkunst tiltrækker perfektionister. Husk, at én sprite ikke skal tage for meget tid — det er kun et lille stykke af en meget kompleks samling af stykker. Det er vigtigt ikke at miste fokus på det samlede billede.
Selv hvis din pixelkunst ikke er til spil, er det nogle gange værd at sige til dig selv: "Det er allerede godt nok!" Og komme videre. Den bedste måde at udvikle færdigheder på er at gennemføre hele processen fra start til slut så mange gange som muligt, med så mange emner som muligt.
Og det kan nogle gange være nyttigt at træde væk fra din sprite i kort tid for senere at se den med friske øjne.
32×32 pixels
Vi lavede en stor sprite på 96×96 pixels først, fordi denne størrelse mere ligner maleri eller kunst, men kun med pixels. Jo mindre sprite, jo mindre ligner det, hvad det skal vise, og jo vigtigere er hver pixel.
I Super Mario Bros. er Marios øje kun to pixels, der er placeret oven på hinanden. Og hans øre også. Karakterens skaber, Shigeru Miyamoto, sagde, at overskægget var nødvendigt for at adskille næsen fra resten af ansigtet. Så en af de vigtigste træk ved Marios ansigt er ikke kun designet for karakteren, men også en pragmatisk kneb. Dette bekræfter den gamle visdom — "nød lærer naken kvinde at spinde."
De grundlæggende trin til at skabe en sprite på 32×32 pixels er allerede velforstået for os: skitse, farve, skygger og videre bearbejdning. Men under disse forhold vælger jeg farvede figurer som startskitse i stedet for at tegne konturer på grund af den lille størrelse. Farven spiller en vigtigere rolle i at definere karakteren end konturerne. Se på Mario igen, han har slet ingen konturer. Det er ikke kun overskægget, hans små side-diller definerer formen på ørerne, ærmerne viser hænderne, og den samlede form viser mere eller mindre tydeligt hele hans krop.
At skabe små sprites er konstant en balancegang. Hvis du tilføjer en omrids, kan du miste plads til skygger. Hvis din karakter har klart definerede arme og ben, skal hovedet nok ikke være for stort. Hvis farven, selektiv omrids og anti-aliasing bruges effektivt, vil den tegnede genstand se større ud, end den reelt er.
For små sprites kan jeg godt lide chibi-stilen: karaktererne ser meget søde ud, de har store hoveder og øjne. En fremragende måde at skabe en farverig helt på i begrænset rum, og generelt en meget behagelig stil. Men hvis du måske skal vise karakterens bevægelighed eller styrke, så kan du give mindre plads til hovedet, så kroppen ser mere muskuløs ud. Det hele afhænger af dine præferencer og mål.
Hele holdet er samlet!
Filformater
Sådan et resultat kan få enhver pixelkunstner til at blive nervøs
Billedet, du ser, er resultatet af at gemme tegningen som JPG. Nogle data gik tabt på grund af filkomprimeringsalgoritmer. Kvalitets pixelart vil til sidst se dårligt ud, og det vil ikke være nemt at genskabe den oprindelige palet.
For at gemme et statisk billede uden tab af kvalitet, brug PNG-formatet. For animationer — GIF.
Sådan deler man pixelart korrekt
At dele pixelart på sociale medier er en fremragende måde at få feedback og møde andre kunstnere, der arbejder i samme stil. Glem ikke at tilføje hashtagget #pixelart. Desværre konverterer sociale medier ofte PNG til JPG uden varsel, hvilket forringer dit arbejde. Det er desuden ikke altid klart, hvorfor dit billede blev konverteret.
Der er flere tips til, hvordan man bevarer pixelart i den rigtige kvalitet til forskellige sociale medier.
For a PNG file to remain unchanged on Twitter, use fewer than 256 colors, or , your file is less than 900 pixels on the longer side. I would increase the file size to at least 512×512 pixels, ensuring that the scaling is in multiples of 100 (200%, not 250%) and that sharp edges are maintained (Nearest Neighbor in Photoshop).
Animated GIF files for Twitter posts should not exceed 15 MB. The image must be at least 800×800 pixels, the looping animation should repeat three times, and the last frame should be half as long as the others — this is the most popular theory. However, it is unclear how strictly these requirements need to be followed, as Twitter continuously changes its image display algorithms.
As far as I know, it is impossible to post an image on Instagram without losing quality. But it will certainly look better if you increase it to at least 512×512 pixels.
Kilde: habr.com
