Indie-udviklere skal ofte kombinere flere roller på én gang: spildesigner, programmør, komponist, kunstner. Og når det kommer til det visuelle, vælger mange mennesker pixel art – ved første øjekast virker det simpelt. Men for at gøre det smukt, har du brug for en masse erfaring og visse færdigheder. Jeg fandt en tutorial for dem, der lige er begyndt at forstå det grundlæggende i denne stil: med en beskrivelse af speciel software og tegneteknikker med to sprites som eksempel.
baggrund
Pixelkunst er en form for digital kunst, hvor der foretages ændringer på pixelniveau. Det er for det meste forbundet med videospilsgrafik fra 80'erne og 90'erne. Så måtte kunstnerne tage højde for begrænsningerne ved hukommelse og lav opløsning. Nu er pixel art stadig populær i spil og som kunststil generelt, på trods af muligheden for at skabe realistisk 3D-grafik. Hvorfor? Selv bortset fra nostalgi, er det en dejlig og givende udfordring at skabe sejt arbejde inden for så stive rammer.
Adgangsbarrieren inden for pixelkunst er relativt lav sammenlignet med traditionel kunst og 3D-grafik, som tiltrækker indie-udviklere. Men det betyder ikke, at det bliver nemt Afslut spil i denne stil. Jeg har set mange indie-udviklere med pixel art metroidvanias på crowdfunding-platforme. De troede, at de ville være færdige med alt på et år, men faktisk havde de brug for yderligere seks år.
Metal Slug 3 (Arcade). SNK, år 2000
Pixelkunst på det niveau, som de fleste ønsker at skabe, er tidskrævende, og korte tutorials er få og langt imellem. Når du arbejder med en 3D-model, kan du rotere den, deformere den, flytte dens individuelle dele, kopiere animationer fra en model til en anden, og så videre. Pixelkunst på højt niveau kræver næsten altid en stor indsats for omhyggeligt at placere pixels på hver frame.
Generelt advarede jeg.
Og nu lidt om min stil: Jeg tegner primært pixel art til videospil og finder inspiration i dem. Især er jeg fan af Famicom/NES, 16-bit konsoller og 90'er arkadespil. Pixelkunsten i mine yndlingsspil fra denne tid kan beskrives som lys, selvsikker og ren (men ikke overdrevent), den er ikke svær og minimalistisk. Jeg arbejder selv i denne stil, men du kan nemt anvende ideerne og teknikkerne fra denne tutorial til at skabe helt andre ting. Udforsk forskellige kunstneres arbejde, og skab den pixelkunst, du elsker!
Software
Grundlæggende digitale værktøjer til pixelkunst - Zoom (Zoom) og Blyant (Blyant) for at placere pixels. Du skal også bruge Linje (Linje), Figur (Form), Vælg (Vælg), Flyt (Flyt) og Fyld (Malingsspand). Der er mange gratis og betalt software med sådan et sæt værktøjer. Jeg vil tale om de mest populære og dem, som jeg selv bruger.
Maling (gratis)
Hvis du har Windows, er Paint indbygget i det – et primitivt program, men det har alle værktøjerne til pixelkunst.
(er ledig)
En uventet funktionel pixel art editor, der kører gennem browseren. Du kan eksportere dit arbejde til PNG eller animeret GIF. Fantastisk mulighed for begyndere.
(er ledig)
GraphicsGale er den eneste editor, jeg har hørt om designet specielt til pixelkunst og inkluderer animationsværktøjer. Det blev skabt af det japanske firma HUMANBALANCE. Siden 2017 er det blevet distribueret gratis og er stadig efterspurgt på trods af Aseprites voksende popularitet. Desværre virker det kun på Windows.
($)
Måske den mest populære redaktør i øjeblikket. , tonsvis af funktioner, aktiv support, versioner til Windows, Mac og Linux. Hvis du er seriøs omkring pixelkunst og stadig ikke har fundet den rigtige editor, er dette måske noget for dig.
($$+)
GameMaker Studio 2 er et fremragende 2D-værktøj med en god Sprite Editor. Hvis du vil skabe pixelkunst til dine egne spil, er det meget praktisk at gøre alt i ét program. Nu bruger jeg denne software i mit arbejde på , en samling af 50 retrospil: Jeg laver sprites og animationer i GameMaker og tilesets i Photoshop.
($$$+)
Photoshop er dyr software, distribueret via abonnement, ikke designet til pixel art. Jeg anbefaler ikke at købe dette, medmindre du er til illustrationer i høj opløsning, eller du ikke behøver at lave kompleks billedmanipulation, som jeg gør. Du kan oprette statiske sprites og pixelkunst i det, men det er ret komplekst sammenlignet med specialiseret software (som GraphicsGale eller Aseprite).
Andre
Mit pixel art kit. Alt er sort, har jeg lige bemærket.
Grafisk tablet ($$+)
Jeg anbefaler grafiske tabletter til ethvert digitalt illustrationsarbejde for at undgå karpaltunnelsyndrom. Det er meget nemmere at forebygge end at helbrede. En dag vil du mærke smerten og den bliver kun værre – pas på dig selv helt fra starten. På grund af det faktum, at jeg plejede at tegne med en mus, har jeg nu svært ved at spille spil, der kræver, at du trykker på tasterne. Jeg bruger i øjeblikket Wacom Intuos Pro S.
Håndledsstøtte ($)
Hvis du ikke kan få en tablet, så køb i det mindste en håndledscaliper. Min favorit er Mueller Green Fitted Wrist Brace. Resten er enten for stramme eller giver utilstrækkelig støtte. Kaliber kan bestilles online uden problemer.
96 × 96 pixels
sidste kamp. Capcom, 1989
Lad os komme igang! Lad os starte med en 96x96 px tegnsprite. Som et eksempel tegnede jeg en orc og placerede den på skærmbilledet fra Final Fight (billedet ovenfor), så du får skalaen. Det her большой sprite til de fleste retrospil, skærmbilledestørrelse: 384×224 pixels.
På sådan en stor sprite vil det være lettere at vise den teknik, som jeg vil tale om. Desuden er pixel-for-pixel-gengivelse mere som traditionelle former for kunst (såsom tegning eller maleri), som du måske er mere fortrolig med. Efter at have mestret de grundlæggende teknikker, vil vi gå videre til mindre sprites.
1. Vælg en palet
Pixelen er et meget dybere koncept inden for pixelkunst end i nogen anden digital verden. Pixelkunst er defineret af dets begrænsninger, såsom farver. Det er vigtigt at vælge den rigtige palette, det vil hjælpe med at definere din stil. Men i starten foreslår jeg, at du ikke tænker på paletter og vælger en af de eksisterende (eller bare et par tilfældige farver) - du kan nemt ændre det på ethvert tidspunkt.
Til denne tutorial vil jeg bruge paletten med 32 farver, vi oprettede til . Til pixelkunst er de ofte samlet fra 32 eller 16 farver. Vores er designet til en fiktiv konsol, der kunne dukke op et sted mellem Famicom og PC Engine. Du kan tage den eller en hvilken som helst anden - tutorialen afhænger slet ikke af den valgte palet.
2. Ru konturer
Lad os begynde at tegne med blyantværktøjet. Lad os tegne skitsen på samme måde, som vi gør det med en almindelig pen og papir. Selvfølgelig overlapper pixelkunst og traditionel kunst hinanden, især når det kommer til så store sprites. Mine observationer viser, at stærke pixelart-kunstnere i det mindste er gode til frihåndstegning og omvendt. Så det er altid nyttigt at udvikle tegnefærdigheder.
3. Contouring
Vi afslutter konturerne: fjern ekstra pixels og reducer tykkelsen af hver linje til en pixel. Men hvad er egentlig overflødigt? For at besvare dette spørgsmål skal du forstå pixellinjerne og bumpene.
bump
Du skal lære at tegne to grundlæggende linjer i pixelkunst: lige linjer og kurver. Med pen og papir handler det om muskelkontrol, men vi arbejder med små farveblokke.
Nøglen til at tegne korrekte pixellinjer er ruhed. Disse er enkelte pixels eller små segmenter, der ødelægger linjens glathed. Som jeg sagde før, har en enkelt pixel stor betydning i pixelkunst, så ujævnheder kan ødelægge hele æstetikken. Forestil dig, at du tegner en lige linje på papir, og pludselig rammer nogen bordet: bump i pixelkunst ligner en tilfældig krumspring.
Eksempler:
Direkte
Kurver
Skarphed vises på kurver, når længden af linjestykker ikke øges eller mindskes gradvist.
Det er umuligt helt at undgå bump - alle dine yndlings retrospil har dem (medmindre, selvfølgelig, pixelkunst kun består af simple former). Formål: at minimere uregelmæssigheder, mens du viser alt, hvad du har brug for.
4. Påfør de første farver
Farv din karakter med et fyld eller andet passende værktøj. Paletten vil forenkle denne del af arbejdet. Hvis softwaren ikke giver mulighed for brug af paletter, kan du sætte den direkte ind i billedet, som i eksemplet ovenfor, og vælge farver med en pipette.
I nederste venstre hjørne tegnede jeg vores ven, bliv bekendt, det er Shar. Med det bliver det lettere at forstå, hvad der præcist sker på hvert trin.
5. Skygge
Det er tid til at gengive skygger - bare tilføj mørkere farver til spriten. Så billedet vil se tredimensionelt ud. Lad os antage, at vi har én lyskilde placeret over orken til venstre for den. Det betyder, at alt, der er over og foran vores karakter, vil blive oplyst. Tilføj skygger nederst til højre.
Form og volumen
Hvis dette trin er svært for dig, så forestil dig din tegning som tredimensionelle former og ikke kun linjer og farver. Former findes i XNUMXD-rum og kan have volumen, som vi bygger med skygger. Dette vil hjælpe med at visualisere karakteren uden detaljer og få den til at se ud som om den er lavet af ler i stedet for pixels. Shading handler ikke kun om at tilføje nye farver, det handler om at bygge en form. På en veldetaljeret karakter skjuler detaljerne ikke de grundlæggende former: hvis du skeler, vil du se flere store klynger af lys og skygge.
Udjævning (anti-aliasing, 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 linjesegmenter mødes:
Grå pixels blødgør "brud" i linjen. Jo længere linjestykket er, jo længere AA-segment.
Sådan ser AA ud på orkens skulder. Det er nødvendigt for at udglatte de linjer, der repræsenterer kurven af hans muskler.
Anti-aliasing bør ikke gå ud over den sprite, der vil blive brugt i spillet eller mod en baggrund, hvis farve er ukendt. For eksempel, hvis du anvender AA på en lys baggrund, vil anti-aliasing se grimt ud på en mørk baggrund.
6. Selektiv kontur
Tidligere var konturerne helt sorte, hvilket fik spriten til at se meget tegneserieagtig ud. Billedet syntes at være opdelt i segmenter. For eksempel viser de sorte streger på armen muskulaturen for kontrastfuldt, og karakteren ser mindre solid ud.
Hvis spriten bliver mere naturlig, og segmenteringen ikke er så tydelig, så bliver karakterens grundlæggende former lettere at læse. For at gøre dette kan du bruge en selektiv omrids - udskift delvist den sorte omrids med en lysere. På den oplyste del af spriten kan du bruge de lyseste farver, eller, hvor spriten rører negativt mellemrum, kan du helt fjerne omridset. I stedet for sort skal du bruge den farve, der blev valgt til skyggen - på denne måde vil segmenteringen blive bevaret (for at skelne mellem muskler, pels og så videre).
Også på dette tidspunkt tilføjede jeg mørkere skygger. Det viste sig tre grader af grønt på huden af en ork. Den mørkeste grønne farve kan bruges til selektiv kontur og AA.
7. Efterbehandling
Til sidst er det værd at tilføje highlights (de letteste pletter på spriten), detaljer (øreringe, nitter, ar) og andre forbedringer, indtil karakteren er klar, eller indtil du skal videre til den næste.
Der er flere nyttige tricks, der kan anvendes på dette stadium. Roter tegningen vandret, dette hjælper ofte med at afsløre fejl i proportioner og skygge. Du kan også fjerne farven - sæt saturationen til nul for at forstå, hvor du skal ændre skyggerne.
Skaber støj (rystelse, dithering)
Indtil videre har vi for det meste brugt store, solide pletter af skygger. Men der er en anden teknik - dithering, som giver dig mulighed for at gå fra en farve til en anden uden at tilføje en tredje. Se på eksemplet nedenfor.
Den øverste mørke til lys gradient bruger hundredvis af forskellige nuancer af blå.
Den midterste gradient bruger kun ni farver, men den har stadig for mange nuancer af samme farve. Der er en såkaldt banding (af det engelske band - en strip), hvor øjet på grund af tykke ensartede striber fokuserer på farvernes berøringspunkter, i stedet for farverne selv.
På den nederste gradient anvendte vi en dither, der undgår striber og kun bruger to farver. Vi skaber støj af varierende intensitet for at simulere farvegraduering. Denne teknik minder meget om den halvtone, der bruges ved trykning; samt stipling (stippling - kornet billede) - i illustration og tegneserier.
På orc'en rystede jeg en del for at formidle teksturen. Nogle pixel artister bruger det slet ikke, mens andre ikke er generte og gør det meget dygtigt. Jeg synes, at dithering ser bedst ud på store områder fyldt med en enkelt farve (se på himlen i Metal Slug-skærmbilledet ovenfor) eller områder, der skal se ru og ujævne ud (som snavs). Bestem selv, hvordan du bruger det.
Hvis du vil se et eksempel på storstilet og højkvalitets dithering, så se på spillene fra The Bitmap Brothers, et britisk studie fra 80'erne, eller spil på PC-98-computeren. Bare husk på, at de alle er NSFW.
Kakyusei (PC-98). Elf, 1996
Der er kun 16 farver i dette billede!
8. Sidste kig
En af farerne ved pixelkunst er, at den virker let og enkel (på grund af dens struktur og stilbegrænsninger). Men i sidste ende vil du bruge enormt meget tid på at finjustere dine sprites. Det er som et puslespil, der skal løses, og derfor appellerer pixelkunst til perfektionister. Husk, at en sprite ikke bør tage for lang tid - det er bare et lille stykke af en ekstremt kompleks samling af stykker. Det er vigtigt ikke at miste det store billede af syne.
Selvom din pixelkunst ikke er til spil, kan det nogle gange betale sig at sige til dig selv: "Det er allerede godt nok!" Og gå videre. Den bedste måde at udvikle færdigheder på er at gennemgå hele processen fra start til slut så mange gange som muligt, ved at bruge så mange emner som muligt.
Og nogle gange er det nyttigt at efterlade en sprite et stykke tid, så du kan se på den med friske øjne lidt senere.
32×32 pixels
Vi skabte den store 96x96 pixel sprite først, for i den størrelse er det mere som at tegne eller male, men pixeleret. Jo mindre spriten er, jo mindre ligner den, hvad den skal vise, og jo vigtigere er hver pixel.
I Super Mario Bros. Marios øje er kun to pixels stablet over hinanden. Og også hans øre. Karakterskaberen Shigeru Miyamoto sagde, at overskægget var nødvendigt for at adskille næsen fra resten af ansigtet. Så et af hovedtrækkene i Marios ansigt er ikke bare et karakterdesign, men også et pragmatisk trick. Hvilket bekræfter den gamle visdom - "behov er opfindsomhedens moder."
Vi er allerede bekendt med hovedstadierne i at skabe en 32×32 pixel sprite: skitse, farve, skygger, yderligere forfining. Men under sådanne forhold, som en indledende skitse, henter jeg farvede former i stedet for at tegne konturer på grund af den lille størrelse. Farve spiller en vigtigere rolle i karakterdefinition end konturer. Se på Mario igen, han har ingen konturer overhovedet. Ikke kun overskæg er interessante. Hans bakkenbarter definerer formen på hans ører, ærmerne viser hans arme, og den overordnede form afspejler mere eller mindre tydeligt hele hans krop.
At skabe små sprites er en konstant afvejning. Hvis du tilføjer et streg, kan du miste plads til skyggen. Hvis din karakter har klart definerede arme og ben, er hovedet sandsynligvis ikke særlig stort. Effektiv brug af farver, selektiv streg og anti-aliasing vil få det gengivne objekt til at se større ud, end det i virkeligheden er.
For små sprites kan jeg godt lide chibi-stilen: karaktererne ser meget søde ud, de har store hoveder og øjne. En fantastisk måde at skabe en lys karakter på et begrænset rum, og generelt en meget behagelig stil. Men måske skal du vise karakterens bevægelighed eller styrke, så kan du give mindre plads til hovedet for at få kroppen til at se mere kraftfuld ud. Det hele afhænger af dine præferencer og mål.
Hele holdet er her!
Filformater
Sådan et resultat kan gøre enhver pixelkunstner nervøs
Det billede, du ser, er resultatet af at gemme billedet som en JPG. En del af dataene gik tabt på grund af filkomprimeringsalgoritmer. Pixelkunst af høj kvalitet vil ende med at se dårligt ud, og det vil ikke være let at vende tilbage til dens originale palet.
Brug PNG-formatet for at gemme et statisk billede uden at miste kvalitet. Til animationer - GIF.
Sådan deler du pixelkunst på den rigtige måde
At dele pixelkunst på sociale medier er en fantastisk måde at få feedback og møde andre kunstnere, der arbejder i samme stil. Glem ikke at bruge hashtagget #pixelart. Desværre konverterer sociale netværk ofte PNG til JPG uden at spørge, hvilket forværrer dit arbejde. Og det er ikke altid klart, hvorfor dit billede blev konverteret.
Der er nogle tips til, hvordan du gemmer pixelkunst i den rigtige kvalitet til forskellige sociale netværk.
For at holde PNG-filen uændret på Twitter skal du bruge færre end 256 farver, eller at din fil er mindre end 900 pixels lang. Jeg ville øge filstørrelsen til mindst 512x512 pixels. Og så skaleringen er et multiplum af 100 (200 %, ikke 250 %) og skarpe kanter bevares (Nærmeste nabo i Photoshop).
Animerede GIF'er til Twitter-indlæg vejer ikke mere end 15 MB. Billedet skal være mindst 800x800 pixels, looping-animationen skal gentages tre gange, og den sidste frame skal være halvdelen af tiden af alle de andre - den mest populære teori. Det er dog ikke klart, i hvilket omfang disse krav skal opfyldes, da Twitter konstant ændrer sine billedvisningsalgoritmer.
Så vidt jeg ved, er det ikke muligt at lægge et billede op på Instagram uden kvalitetstab. Men det vil helt sikkert se bedre ud, hvis du øger det til mindst 512x512 pixels.
Kilde: www.habr.com