Neodvisni razvijalci morajo pogosto kombinirati več vlog hkrati: oblikovalec iger, programer, skladatelj, umetnik. In ko gre za vizualne podobe, veliko ljudi izbere pixel art – na prvi pogled se zdi preprosto. Toda, da bi to naredili lepo, potrebujete veliko izkušenj in določene veščine. Našel sem vadnico za tiste, ki so šele začeli razumevati osnove tega sloga: z opisom posebne programske opreme in tehnik risanja na primeru dveh spritejev.
Ozadje
Pixel art je oblika digitalne umetnosti, v kateri se spremembe izvajajo na ravni slikovnih pik. Povezuje se predvsem z grafiko video iger iz 80. in 90. let. Takrat so morali umetniki upoštevati pomnilniške omejitve in nizko ločljivost. Danes je pixel art še vedno priljubljen v igrah in kot umetniški slog na splošno, kljub zmožnosti ustvarjanja realistične 3D grafike. Zakaj? Nostalgijo na stran, ustvarjanje kul dela v tako tesnem okviru je prijeten in nagrajujoč izziv.
Ovira za vstop v umetnost slikovnih pik je razmeroma nizka v primerjavi s tradicionalno umetnostjo in 3D-grafiko, kar pritegne neodvisne razvijalce. A to ne pomeni, da bo lahko končati igra v tem stilu. Na platformah za množično financiranje sem videl veliko neodvisnih razvijalcev z metroidvaniami slikovnih pik. Mislili so, da bodo vse končali v enem letu, v resnici pa so potrebovali še šest let.
Metal Slug 3 (Arkada). SNK, 2000
Pixel art na ravni, na kateri večina ljudi želi ustvariti, vzame veliko časa in je zelo malo kratkih vadnic. Ko delate s 3D modelom, ga lahko vrtite, deformirate, premikate njegove posamezne dele, kopirate animacije iz enega modela v drugega itd. Slika slikovnih pik na visoki ravni skoraj vedno zahteva veliko truda pri natančnem postavljanju slikovnih pik na vsak okvir.
Na splošno sem vas opozoril.
In zdaj še malo o mojem slogu: v glavnem rišem pixel art za video igre in v njih najdem navdih. Predvsem sem oboževalec Famicom/NES, 16-bitnih konzol in arkadnih iger iz 90-ih. Umetnost slikovnih pik mojih najljubših iger tega obdobja lahko opišem kot svetlo, samozavestno in čisto (vendar ne preveč čisto), ne pa ostro in minimalistično. To je slog, v katerem delam sam, vendar lahko preprosto uporabite ideje in tehnike iz te vadnice, da ustvarite popolnoma drugačne stvari. Raziščite dela različnih umetnikov in ustvarite pikselsko umetnost, ki vam je všeč!
Programska oprema
Osnovni digitalni orodji za slikovne pike sta Zoom in Pencil za postavitev slikovnih pik. Prav tako se vam bodo zdeli Line, Shape, Select, Move in Paint Bucket. Obstaja veliko brezplačnih in plačljivih programov s takšnim naborom orodij. Povedal vam bom o najbolj priljubljenih in tistih, ki jih uporabljam sam.
Paint (brezplačno)
Če imate Windows, je vgrajeni Paint primitiven program, vendar ima vsa orodja za pixel art.
(je brezplačno)
Nepričakovano funkcionalen urejevalnik slikovnih pik, ki deluje prek brskalnika. Svoje delo lahko izvozite kot PNG ali animirani GIF. Odlična možnost za začetnike.
(je brezplačno)
GraphicsGale je edini urejevalnik, za katerega sem slišal, da je zasnovan posebej za slikovne pike in vključuje orodja za animacijo. Ustvarilo ga je japonsko podjetje HUMANBALANCE. Brezplačno je na voljo od leta 2017 in je še vedno v povpraševanju, kljub porastu priljubljenosti Aseprita. Na žalost deluje samo v sistemu Windows.
($)
Morda najbolj priljubljen urejevalnik v tem trenutku. , veliko funkcij, aktivna podpora, različice za Windows, Mac in Linux. Če se resno ukvarjate s slikovnimi pikami in še vedno niste našli pravega urejevalnika, je to morda tisti, ki ga potrebujete.
($$+)
GameMaker Studio 2 je odlično 2D orodje z dobrim urejevalnikom Sprite Editor. Če želite ustvarjati slikovne pike za svoje igre, je zelo priročno narediti vse v enem programu. Zdaj med delom uporabljam to programsko opremo , zbirka 50 retro iger: ustvarjam sprite in animacije v GameMakerju ter nabore ploščic v Photoshopu.
($$$+)
Photoshop je draga programska oprema, ki se distribuira z naročnino in ni zasnovana za slikovne pike. Ne priporočam nakupa, razen če se ukvarjate z upodabljanjem ilustracij v visoki ločljivosti ali če vam ni treba izvajati zapletenih manipulacij s sliko, kot jaz. V njem lahko ustvarite statične sprite in pixel art, vendar je precej zapleten v primerjavi s specializirano programsko opremo (na primer GraphicsGale ali Aseprite).
Drugo
Moj pixel art komplet. Vse je črno, šele zdaj sem opazil.
Grafična tablica ($$+)
Priporočam grafične tablice za vsa digitalna ilustracija, da se izognete sindromu karpalnega kanala. Veliko lažje je preprečiti kot zdraviti. Nekega dne boste začutili bolečino in ta se bo samo še povečala – poskrbite zase od vsega začetka. Ker sem včasih risal z miško, zdaj težko igram igre, ki zahtevajo pritiskanje na tipke. Trenutno uporabljam Wacom Intuos Pro S.
Podpora za zapestje ($)
Če ne morete dobiti tablice, si zagotovite vsaj oporo za zapestje. Moj najljubši je Mueller Green Fitted Wrist Brace. Ostali so bodisi pretesni ali pa ne zagotavljajo dovolj podpore. Čeljusti je mogoče brez težav naročiti prek spleta.
96 × 96 pik
Final Fight. Capcom, 1989
Začnimo! Začnimo s spriteom znakov 96x96 slikovnih pik. Kot primer sem narisal orka in ga postavil na posnetek zaslona iz Final Fight (slika zgoraj), da boste razumeli obseg. to большой sprite za večino retro iger, velikost posnetka zaslona: 384x224 slikovnih pik.
Na tako velikem spritu bo lažje pokazati tehniko, o kateri želim govoriti. Upodabljanje na slikovno piko je tudi bolj podobno tradicionalnim oblikam umetnosti (kot je risanje ali slikanje), ki jih morda bolj poznate. Ko smo osvojili osnovne tehnike, bomo prešli na manjše sprite.
1. Izberite paleto
Pixel je veliko globlji koncept v slikovnih pikah kot v katerem koli drugem digitalnem področju. Pixel art je opredeljen z omejitvami, kot so barve. Pomembno je izbrati pravo paleto, ki bo pomagala določiti vaš slog. Toda na začetku predlagam, da ne razmišljate o paletah in izberete eno od obstoječih (ali le nekaj naključnih barv) - zlahka jo lahko spremenite na kateri koli stopnji.
Za to vadnico bom uporabil 32 barvno paleto, za katero smo jo ustvarili . Za slikovne pike so pogosto sestavljeni iz 32 ali 16 barv. Naša je zasnovana za izmišljeno konzolo, ki bi se pojavila nekje med Famicom in PC Engine. Lahko ga vzamete ali katerega koli drugega - vadnica sploh ni odvisna od izbrane palete.
2. Grobi obrisi
Začnimo risati z orodjem Pencil. Narišimo skico na enak način kot z navadnim peresom in papirjem. Seveda se slikovna umetnost in tradicionalna umetnost prekrivata, še posebej, ko gre za tako velike sprite. Moja opažanja kažejo, da so močni umetniki slikovnih pik vsaj dobri pri risanju z roko in obratno. Zato je razvijanje vaših risarskih sposobnosti vedno koristno.
3. Izdelava kontur
Izboljšamo konture: odstranimo dodatne slikovne pike in zmanjšamo debelino vsake črte na eno slikovno piko. Toda kaj točno se šteje za odveč? Če želite odgovoriti na to vprašanje, morate razumeti črte in nepravilnosti slikovnih pik.
Nepravilnosti
Naučiti se morate risati dve osnovni črti v slikovnih pikah: ravno in ukrivljeno. Pri peresu in papirju gre le za nadzor mišic, mi pa delamo z majhnimi barvnimi bloki.
Ključ do risanja pravilnih črt slikovnih pik so nazobčane pike. To so posamezne piksle ali majhni segmenti, ki uničijo gladkost črte. Kot sem že rekel, en sam piksel naredi veliko razliko v slikovnih pikah, zato lahko neenakost uniči celotno estetiko. Predstavljajte si, da narišete ravno črto na papir in nenadoma nekdo udari po mizi: izbokline v slikovnih pikah so videti kot naključna vijuga.
Primeri:
Usmerite
Obline
Nepravilnosti se pojavijo v krivuljah, ko se dolžina odsekov ne povečuje ali zmanjšuje postopoma.
Izboklinam se je nemogoče popolnoma izogniti – imajo jih vse vaše najljubše retro igre (razen seveda, če sliko pikslov sestavljajo samo preproste oblike). Cilj: zmanjšati neenakosti na minimum, hkrati pa pokazati vse potrebno.
4. Nanesite prve barve
Pobarvaj svoj lik s polnilom ali drugim primernim orodjem. Paleta bo poenostavila ta del dela. Če programska oprema ne omogoča uporabe palet, jo lahko postavite neposredno na sliko, kot v zgornjem primeru, in izberete barve s kapalko.
V spodnjem levem kotu sem narisal našega prijatelja, srečaj se, to je Ball. Tako boste lažje razumeli, kaj točno se dogaja na vsaki stopnji.
5. Senčenje
Čas je, da prikažete sence - samo dodajte temnejše barve v sprite. Tako bo slika videti tridimenzionalna. Predpostavimo, da imamo en vir svetlobe, ki se nahaja nad orkom levo od njega. To pomeni, da bo osvetljeno vse, kar je nad in pred našim likom. Dodajte sence spodaj desno.
Oblika in prostornina
Če je ta korak za vas izziv, si risbo predstavljajte kot tridimenzionalne oblike in ne le črte in barve. Oblike obstajajo v tridimenzionalnem prostoru in imajo lahko volumen, ki ga gradimo s pomočjo senc. To vam bo pomagalo vizualizirati lik brez podrobnosti in si predstavljati, da je narejen iz gline in ne pikslov. Senčenje ni le dodajanje novih barv, je proces gradnje oblike. Na dobro oblikovanem liku podrobnosti ne skrivajo osnovnih oblik: če mežikate, boste videli nekaj velikih grozdov svetlobe in sence.
Anti-aliasing (anti-aliasing)
Vsakič, ko uporabim novo barvo, uporabim anti-aliasing (AA). Pomaga zgladiti slikovne pike z dodajanjem vmesnih barv na vogalih, kjer se srečata dva odseka črte:
Sive piksle zmehčajo "prelome" v črti. Daljši kot je segment črte, daljši je segment AA.
Takole izgleda AA na orkovi rami. Potrebno je zgladiti črte, ki kažejo krivuljo njegovih mišic
Anti-aliasing ne sme segati čez sprite, ki bo uporabljen v igri, ali na ozadje, katerega barva ni znana. Na primer, če uporabite AA na svetlem ozadju, bo izravnavanje videti grdo na temnem ozadju.
6. Izbirni oris
Prej so bili obrisi popolnoma črni, zaradi česar je bil sprite videti zelo risan. Zdelo se je, da je slika razdeljena na segmente. Na primer, črne črte na roki dajejo preveč kontrasta muskulaturi, zaradi česar je lik videti manj povezan.
Če sprite postane bolj naraven in segmentacija manj očitna, bodo osnovne oblike znaka lažje berljive. Če želite to narediti, lahko uporabite selektivni obris - delno zamenjajte črni obris s svetlejšim. Na osvetljenem delu sprite lahko uporabite najsvetlejše barve ali pa, kjer se sprite dotika negativnega prostora, lahko popolnoma odstranite obris. Namesto črne morate uporabiti barvo, ki je bila izbrana za senco - tako bo ohranjena segmentacija (za razlikovanje med mišicami, dlako itd.).
Na tej stopnji sem dodala tudi temnejše sence. Rezultat so bili trije odtenki zelene barve na orkovi koži. Najtemnejšo zeleno barvo lahko uporabite za selektivni obris in AA.
7. Končni dotiki
Nazadnje je vredno dodati poudarke (najsvetlejše lise na spriteu), podrobnosti (uhane, čepke, brazgotine) in druge izboljšave, dokler lik ni pripravljen ali dokler se ne morate premakniti na naslednjega.
Na tej stopnji je mogoče uporabiti več uporabnih tehnik. Zasukajte risbo vodoravno, to pogosto pomaga prepoznati napake v razmerjih in senčenju. Lahko tudi odstranite barvo - nastavite nasičenost na nič, da razumete, kje morate spremeniti sence.
Ustvarjanje hrupa (dithering, dithering)
Doslej smo večinoma uporabljali velika, polna senčna območja. Obstaja pa še ena tehnika - dithering, ki omogoča prehod iz ene barve v drugo, ne da bi dodali tretjo. Oglejte si spodnji primer.
Zgornji preliv iz temne v svetlo uporablja na stotine različnih odtenkov modre.
Povprečni gradient uporablja samo devet barv, vendar je še vedno preveč odtenkov iste barve. Nastane tako imenovani pas (iz angleškega band - stripe), pri katerem se zaradi debelih enakomernih trakov oko osredotoči na stične točke barv, namesto na barve same.
Na spodnjem gradientu smo uporabili dithering, ki se izogne pasovom in uporablja samo dve barvi. Ustvarjamo hrup različnih intenzivnosti za simulacijo gradacije barv. Ta tehnika je zelo podobna poltonu (poltonski sliki), ki se uporablja pri tiskanju; pa tudi pikčastost (zrnata slika) – v ilustracijah in stripih.
Na orku sem se precej pomešal, da sem prenesel teksturo. Nekateri umetniki slikovnih pik tega sploh ne uporabljajo, drugi, nasprotno, niso sramežljivi in to počnejo zelo spretno. Ugotavljam, da je mehčanje videti najbolje na velikih območjih, zapolnjenih z eno samo barvo (poglejte nebo na zgornjem posnetku zaslona Metal Slug) ali na območjih, ki naj bi bila videti groba in neenakomerna (na primer umazanija). Kako ga boste uporabili, se odločite sami.
Če želite videti primer obsežnega in kakovostnega ditheringa, si oglejte igre The Bitmap Brothers, britanskega studia iz 80-ih, ali igre na računalniku PC-98. Samo ne pozabite, da so vsi NSFW.
Kakyusei (PC-98). Vilenjak, 1996
Na tej sliki je samo 16 barv!
8. Zadnji pogled
Ena od nevarnosti slikovnih pik je, da se zdi enostavna in preprosta (zaradi svoje strukture in slogovnih omejitev). Toda na koncu boste porabili ogromno časa za izboljšanje svojih spritov. Je kot uganka, ki jo je treba rešiti – zato umetnost slikovnih pik privlači perfekcioniste. Ne pozabite, da en sprite ne bi smel vzeti preveč časa – je le majhen košček izjemno zapletene zbirke kosov. Pomembno je, da ne izgubite velike slike izpred oči.
Tudi če vaša pixel art ni za igranje iger, si je včasih vredno reči: "Je že dovolj dobra!" In pojdi naprej. Najboljši način za razvoj vaših veščin je, da greste skozi celoten proces od začetka do konca čim večkrat, pri čemer uporabite čim več tem.
In včasih je koristno pustiti sprite za nekaj časa, da ga lahko malo kasneje pogledate s svežimi očmi.
32×32 slikovnih pik
Najprej smo ustvarili velik sprite 96x96 slikovnih pik, ker je pri tej velikosti bolj podoben risanju ali slikanju, vendar s slikovnimi pikami. Manjši kot je sprite, manj je podoben tistemu, kar naj bi prikazal, in pomembnejši je vsak piksel.
V igri Super Mario Bros. Mariovo oko je samo dve slikovni piki, ena na drugi. In njegovo uho tudi. Ustvarjalec likov Shigeru Miyamoto je dejal, da so bili brki potrebni za ločevanje nosu od ostalega obraza. Ena od glavnih značilnosti Maria torej ni le oblikovanje likov, ampak pragmatična zvijača. Kar potrjuje staro modrost - "nuja je mati izuma."
Glavne faze ustvarjanja sprite 32x32 slikovnih pik so nam že znane: skica, barva, sence, nadaljnje izboljšanje. Toda v takšnih razmerah kot začetno skico zaradi majhnosti izberem barvne oblike, namesto da bi risal obrise. Barva igra pomembnejšo vlogo pri definiranju značaja kot oris. Poglej Maria še enkrat, sploh nima obrisa. Niso zanimivi samo brki. Zalizci določajo obliko njegovih ušes, rokavi kažejo roke, celotna oblika pa bolj ali manj jasno orisuje celotno telo.
Ustvarjanje majhnih spritov je stalen kompromis. Če dodate potezo, lahko izgubite prostor za senco. Če ima vaš lik jasno vidne roke in noge, glava verjetno ne bi smela biti zelo velika. Če učinkovito uporabljate barvo, selektivno potezo in izravnavanje, bo upodobljeni predmet videti večji, kot je v resnici.
Za majhne sprite mi je všeč stil chibi: liki so videti zelo srčkani, imajo velike glave in oči. Odličen način za ustvarjanje barvitega lika v omejenem prostoru in na splošno zelo lep slog. Toda morda morate pokazati mobilnost ali moč lika, potem lahko daste manj prostora glavi, da bo telo videti močnejše. Vse je odvisno od vaših želja in ciljev.
Vsa ekipa je zbrana!
Oblike datotek
Ta rezultat lahko spravi ob živce vsakega umetnika slikovnih pik
Slika, ki jo vidite, je rezultat shranjevanja slike v JPG. Nekateri podatki so bili izgubljeni zaradi algoritmov za stiskanje datotek. Visokokakovostna slika slikovnih pik bo na koncu videti slabo in vrnitev v prvotno paleto ne bo lahka.
Če želite shraniti statično sliko brez izgube kakovosti, uporabite format PNG. Za animacije - GIF.
Kako pravilno deliti pixel art
Deljenje slikovnih pik na družabnih omrežjih je odličen način za pridobivanje povratnih informacij in spoznavanje drugih umetnikov, ki delajo v istem slogu. Ne pozabite uporabiti hashtag #pixelart. Na žalost družabna omrežja pogosto pretvorijo PNG v JPG brez vprašanja, kar poslabša vašo izkušnjo. Poleg tega ni vedno jasno, zakaj je bila vaša slika pretvorjena.
Obstaja več nasvetov, kako slikovne pike shraniti v zahtevani kakovosti za različna družbena omrežja.
Če želite, da vaša datoteka PNG ostane nespremenjena na Twitterju, uporabite manj kot 256 barv oz da je vaša datoteka manjša od 900 slikovnih pik na najdaljši stranici. Velikost datoteke bi povečal na vsaj 512x512 slikovnih pik. In tako, da je skaliranje večkratnik 100 (200%, ne 250%) in ohranjeni ostri robovi (najbližji sosed v Photoshopu).
Animirani GIF-ji za objave na Twitterju ne tehtajo več kot 15 MB. Slika mora biti velika vsaj 800 x 800 slikovnih pik, zankasta animacija se mora ponoviti trikrat, zadnji okvir pa mora biti pol krajši od vseh ostalih - najbolj priljubljena teorija. Vendar pa ni jasno, v kolikšni meri je treba izpolniti te zahteve, glede na to, da Twitter nenehno spreminja svoje algoritme za prikaz slik.
Kolikor vem, je nemogoče objaviti sliko na Instagramu, ne da bi izgubila kakovost. Zagotovo pa bo videti bolje, če ga povečate na vsaj 512x512 slikovnih pik.
Vir: www.habr.com