Indie devovi često moraju kombinirati više uloga: dizajnera igara, programera, kompozitora, umjetnika. Kada je riječ o vizualima, mnogi biraju pixel art — na prvi pogled izgleda jednostavno. No, da bi se to napravilo lijepo, potrebno je puno iskustva i određene vještine. Našao sam tutorial za one koji tek počinju učiti osnove ovog stila: s opisom specijalnog softvera i tehnika slikanja kroz dva spritea.
Pozadina
Pixel art je oblik digitalne umjetničke forme u kojem se promjene unose na razini piksela. Uglavnom se povezuje s grafikom video igara iz 80-ih i 90-ih. Tada su umjetnici morali uzeti u obzir ograničenja memorije i nisku razlučivost. Danas je pixel art još uvijek popularan u igrama i kao umjetnički stil u cjelini, unatoč mogućnosti stvaranja realistične 3D grafike. Zašto? Čak i ne računajući nostalgiju, stvaranje odličnog djela unutar tako strogih okvira je ugodan i vrijedan izazov.
Prag ulaska u pixel art je relativno nizak u usporedbi s tradicionalnom umjetnošću i 3D grafikom, što privlači indie devove. No, to ne znači da će biti lako dovršiti igru u ovom stilu. Vidio sam mnogo indie developera s pixel art metroidvaniama na crowdfunding platformama. Mislili su da će sve završiti za godinu dana, ali u stvarnosti im je trebalo još šest godina.
Metal Slug 3 (Arkadna). SNK, 2000. godina
Pixel art na razini na kojoj većina želi raditi oduzima puno vremena, a kratkih vodiča ima vrlo malo. Rad s 3D modelima omogućuje vam da ih povećavate, deformirate, premještate njihove dijelove, kopirate animacije s jednog modela na drugi itd. Pixel art visoke razine gotovo uvijek zahtijeva puno truda na pomnom postavljanju piksela na svakom okviru.
U svakom slučaju, upozorio sam.
A sada malo o mom stilu: uglavnom radim pixel art za videoigre i u njima pronalazim inspiraciju. Konkretno, obožavam Famicom/NES, 16-bitne konzole i arkadne igre iz 90-ih. Pixel art mojih omiljenih igara iz tog vremena može se opisati kao živopisan, samouvjeren i čist (ali ne previše), ne može se nazvati krutim i minimalnim. U ovom stilu radim sam, ali lako možete primijeniti ideje i tehnike iz ovog vodiča za stvaranje potpuno drugih stvari. Istražujte radove raznih umjetnika i stvarajte pixel art koji vam se sviđa!
Softver
Osnovni digitalni alati za pixel art su Zoom i Olovka, kako biste postavljali piksele. Također će vam biti korisne Linija, Oblik, Odabir, Premjesti i Kanta za boju. Postoji mnogo besplatnog i plaćenog softvera s tim skupom alata. Govorit ću o najpopularnijima i onima koje ja osobno koristim.
Paint (besplatno)
Ako koristite Windows, ugrađeni Paint je primitivni program, ali ima sve alate za pixel art.
(besplatno)
Iznenađujuće funkcionalan editor pixel arta, koji se pokreće putem preglednika. Možete izvesti rad u PNG ili animirani GIF. Izvrsna opcija za početnike.
(besplatno)
GraphicsGale je jedini editor od onih koje sam čuo, razvijen isključivo za pixel art i uključuje alate za animaciju. Razvila ga je japanska tvrtka HUMANBALANCE. Od 2017. godine se besplatno distribuira i još uvijek je popularan, unatoč rastu popularnosti Aseprite-a. Nažalost, radi samo na Windows-u.
($)
Možda najpopularniji editor u ovom trenutku. , puno mogućnosti, aktivna podrška, verzije za Windows, Mac i Linux. Ako ste ozbiljno shvatili pixel art i još niste pronašli pravi editor, možda je to ono što vam treba.
($$+)
GameMaker Studio 2 je izvrstan 2D alat s dobrim editorom sprite-ova. Ako želite stvarati pixel art za vlastite igre, vrlo je praktično sve raditi u jednom programu. Trenutno koristim ovaj softver na radu na , kolekciji od 50 retro igara: sprite-ove i animacije radim u GameMaker-u, a tile setove u Photoshop-u.
($$$+)
Photoshop — skup softver, koji se distribuira putem pretplate, nije prilagođen za piksel-art. Ne preporučujem kupnju ako se ne bavite izradom ilustracija visoke razlučivosti ili vam nisu potrebne složene manipulacije slikama, poput onih koje ja radim. U njemu se mogu stvarati statični spriteovi i pikselni radovi, ali je prilično složen u usporedbi sa specijaliziranim softverom (poput GraphicsGale ili Aseprite).
Ostalo
Moj set za piksel-art. Sve je crno, tek sada sam to primijetio.
Grafički tablet ($$+)
Preporučujem grafičke tablete za sve radove s digitalnim ilustracijama, kako biste izbjegli sindrom karpalnog tunela. Lakše ga je spriječiti nego liječiti. Jednom kada osjetite bol, ona će se samo pogoršati — brinite o sebi od samog početka. Zbog toga što sam nekoć crtao mišem, sada mi je teško igrati igre u kojima treba pritiskati tipke. Trenutno koristim Wacom Intuos Pro S.
Podrška za zapešće ($)
Ako ne možete priuštiti tablet, kupite barem podršku za zapešće. Najviše mi se sviđa Mueller Green Fitted Wrist Brace. Ostale su ili previše uske ili pružaju nedovoljnu podršku. Podrške se bez problema mogu naručiti online.
96×96 piksela
Final Fight. Capcom, 1989.
Počnimo! Započet ćemo s spriteom lika od 96×96 piksela. Kao primjer, nacrtao sam orka i stavio ga na snimku ekrana iz Final Fight-a (slika iznad), kako biste razumjeli razmjere. To je velik sprite za većinu retro igara, veličina snimke: 384×224 piksela.
Na tako velikom spriteu bit će lakše prikazati tehniku koju želim objasniti. Također, pikselizirano crtanje više nalikuje tradicionalnim oblicima umjetnosti (npr. slikanje ili crtanje), s kojima ste možda bolje upoznati. Kada savladamo osnovne tehnike, prijeći ćemo na manje spriteove.
1. Biramo paletu
Piksel je mnogo dublja koncepcija u piksel-artu nego u bilo kojoj drugoj digitalnoj sferi. Piksel-art definiraju njegova ograničenja, poput boja. Važno je pravilno odabrati paletu, ona će pomoći u određivanju vašeg stila. Ali na početku predlažem da ne razmišljate o paletama i odaberete jednu od postojećih (ili jednostavno nekoliko nasumičnih boja) — lako je možete promijeniti u bilo kojem trenutku.
Za ovaj tutorijal ću koristiti paletu od 32 boje koju smo stvorili za . Za pixel art često se sastavljaju od 32 ili 16 boja. Naša je dizajnirana za izmišljenu konzolu koja bi mogla postojati negdje između Famicom-a i PC Engine-a. Možete uzeti nju ili bilo koju drugu – tutorijal se ne oslanja na odabranu paletu.
2. Grubi konturi
Počet ćemo crtati s alatom olovka. Nacrtat ćemo skicu onako kako to radimo s običnom olovkom i papirom. Naravno, pixel art i tradicionalna umjetnost se preklapaju, posebno kada su u pitanju veliki sprite-ovi. Moja zapažanja pokazuju da snažni pixel art umjetnici barem solidno crtaju ručno i obrnuto. Tako da je korisno razvijati vještine crtanja.
3. Razrada kontura
Nadograđujemo konture: uklanjamo suvišne piksele i smanjujemo debljinu svake linije na jedan piksel. No, što točno smatrati suvišnim? Da bismo odgovorili na ovo pitanje, potrebno je razumjeti pikselne linije i neravnomjernosti.
Neravnomjernosti
Mora se naučiti crtati dvije osnovne linije u pixel art-u: ravne i zakrivljene. S olovkom i papirom sve se svodi na kontrolu mišića, ali mi radimo s malim obojenim blokovima.
Ključ za crtanje pravih pikselnih linija su neravnomjernosti. To su pojedinačni pikseli ili mali segmenti koji razbijaju glatkoću linije. Kao što sam već spomenuo, pojedinačni piksel ima ogroman značaj u pixel art-u, tako da neravnomjernosti mogu uništiti cijelu estetiku. Zamislite da crtate ravnu liniju na papiru, a iznenada vas netko udari po stolu: neravnomjernosti u pixel art-u izgledaju kao slučajna škrabavost.
Primjeri:
Ravne
Zakrivljene
Neravnomjernosti se pojavljuju na zakrivljenim linijama kada se duljina segmenata linije naglo mijenja.
Potpuno izbjegavanje neravnomjernosti je nemoguće — u svim vašim omiljenim retro igrama one postoje (ako pixel art ne sastoji isključivo od jednostavnih oblika). Cilj: minimizirati neravnomjernosti, a pritom prikazati sve što je potrebno.
4. Primjena prvih boja
Obojite svog lika pomoću alata za punjenje ili drugog prikladnog alata. Paleta će olakšati ovaj dio posla. Ako softver ne omogućuje korištenje paleta, možete je smjestiti izravno u sliku, kao na prethodnom primjeru, i birati boje pomoću pipete.
U donjem lijevom kutu nacrtao sam našeg prijatelja, upoznajte, to je - Šar. S njim će biti lakše razumjeti što se točno događa u svakom koraku.
5. Sijenjenje
Vrijeme je da prikazujemo sjene - jednostavno dodajemo tamnije boje na sprite. Tako će slika izgledati trodimenzionalno. Pretpostavimo da imamo jedan izvor svjetlosti, smješten iznad iliča s lijeve strane. To znači da će biti osvijetljeno sve što se nalazi iznad i ispred našeg lika. Dodajemo sjene dolje desno.
Oblik i volumen
Ako vam ovaj korak stvara poteškoće, zamislite crtež kao trodimenzionalne oblike, a ne samo linije i boje. Oblici postoje u trodimenzionalnom prostoru i mogu imati volumen koji gradimo pomoću sjena. To će pomoći vizualizirati lika bez detalja i zamisliti da je napravljen od gline, a ne od piksela. Sijenjenje nije samo dodavanje novih boja, to je proces izgradnje oblika. Na dobro izrađenom liku, detalji ne skrivaju osnovne oblike: ako zažmirite, vidjet ćete nekoliko velikih skupina svjetlosti i sjene.
Antialiasing
Svaki put kada koristim novu boju, primjenjujem antialiasing (AA). Pomaže u glađenju piksela dodavanjem međubojica na rubovima, na mjestu dodira dviju segmenata linije:
Sivi pikseli ublažuju 'pukotine' u liniji. Što je segment linije duži, duži je i AA-segment.
Tako izgleda AA na ramenu orci. Potreban je za glađenje linija koje prikazuju zakrivljenost njegovih mišića.
Antialiasing ne smije izlaziti izvan sprita koji će se koristiti u igri ili na pozadini, čija boja nije poznata. Na primjer, ako primijenite AA za svijetlu pozadinu, na tamnoj pozadini, glađenje će izgledati neuredno.
6. Odabrani kontur
Prije su konture bile potpuno crne, zbog čega je sprite izgledao vrlo crtački. Slika je izgledala kao da je podijeljena na segmente. Na primjer, crne linije na ruci previše kontrastno prikazuju mišićnu strukturu, a lik izgleda manje cjelovito.
Ako će sprite postati prirodniji, a segmentacija manje očita, osnovne forme lika će biti lakše čitati. Za to se može koristiti odabirni kontur — djelomično zamijeniti crni kontur svjetlijim. Na osvijetljenoj dijelu spritea mogu se koristiti najsvjetlije boje ili, tamo gdje se sprite dodiruje s negativnim prostorom, može se potpuno ukloniti kontur. Umjesto crnog, treba koristiti boju koja je odabrana za sjenu — tako će se zadržati segmentacija (za razlikovanje mišića, krzna itd.).
Također, u ovoj fazi sam dodao tamnije sjene. Dobio sam tri gradacije zelene na koži orkova. Najtamnije zelena boja može se koristiti za odabirni kontur i AA.
7. Završni dodiri
Na kraju bi trebalo dodati odsjaje (najsvjetlije točke na spriteu), detalje (naušnice, zakovice, ožiljke) i druge poboljšanja, dok lik ne bude spreman ili dok ne budemo morali prijeći na sljedeće.
Postoji nekoliko korisnih tehnika koje se mogu primijeniti u ovoj fazi. Okrenite crtež horizontalno, to često pomaže u otkrivanju grešaka u proporcijama i sjenčanju. Također možete ukloniti boju — postaviti zasićenje na nulu, da biste shvatili gdje treba promijeniti sjene.
Stvaranje šuma (dithering, disering)
Za sada smo uglavnom primjenjivali velike, cjelovite dijelove sjena. No postoji i druga tehnika — disering, koja omogućava prijelaz s jedne boje na drugu bez dodavanja treće. Pogledajte primjer u nastavku.
Gornji gradient od tamnog do svijetlog koristi stotine različitih nijansi plave.
Srednji gradient koristi samo devet boja, ali još uvijek sadrži previše nijansi jedne boje. Javlja se tzv. banding (od eng. band — trak), gdje zbog debelih homogena traka oko očiju fokusira na točke dodira boja, umjesto na same boje.
Na donjem gradientu primijenili smo disering, koji omogućava izbjegavanje bandinga i koristi samo dvije boje. Stvaramo šum različitih intenziteta kako bismo oponašali gradaciju boje. Ova tehnika je vrlo slična halftone (halftonska slika), koja se koristi u tisku; kao i stippling (stipling — zrnasta slika) — u ilustracijama i stripovima.
Na orku sam primijenio dezeringanje samo malo kako bih prenio teksturu. Neki umjetnici piksela ga uopće ne koriste, dok ga drugi vrlo vješto i bez zadrške primjenjuju. Čini mi se da dezeringanje najbolje izgleda na velikim područjima ispunjenim jednom bojom (pogledajte nebo na snimci Metal Slug, koja je bila iznad) ili na dijelovima koji trebaju izgledati hrapavo i neravnomjerno (na primjer, blato). Odlučite sami kako ga koristiti.
Ako želite vidjeti primjer s opsežnim i kvalitetnim dezeringanjem, proučite igre The Bitmap Brothers, britanske studije iz 80-ih, ili igre na računalu PC-98. Samo imajte na umu da su sve one NSFW.
Kakyusei (PC-98). Elf, 1996. godina
Na ovoj slici ima samo 16 boja!
8. Posljednji pogled
Jedna od opasnosti pikselske umjetnosti je što se čini jednostavnom i lakom (zbog svoje strukture i stilskih ograničenja). No, na kraju ćete potrošiti ogromnu količinu vremena na doradu svojih spritova. To je poput zagonetke koju treba riješiti — zbog toga pikselska umjetnost privlači perfekcioniste. Zapamtite, jedan sprite ne bi trebao oduzeti previše vremena — to je samo mali komadić u izuzetno složenoj zbirci dijelova. Važno je ne izgubiti iz vida cjelokupnu sliku.
Čak i ako vaša pikselska umjetnost nije za igre, ponekad bi trebali reći sebi: 'Sve je već dovoljno dobro!' i krenuti dalje. Najbolji način za razvoj vještina je proći kroz cijeli proces od početka do kraja što više puta, koristeći što više tema.
I ponekad je korisno na trenutak ostaviti sprite kako bi mu kasnije mogli pogledati svježim očima.
32×32 piksela
Krenuli smo s velikim spriteom od 96×96 piksela, jer ta veličina više nalikuje slikanju ili crtanju, ali pikselima. Što je sprite manji, to se manje uklapa u ono što bi trebao prikazivati, a svaki piksel postaje važniji.
U Super Mario Bros. Mario očima ima samo dva piksela, jednog iznad drugog. I njegovo uho također. Autor lika Shigeru Miyamoto rekao je da su brkovi bili potrebni da odvoje nos od ostatka lica. Tako da jedna od glavnih karakteristika lica Marija nije samo dizajn lika, već i pragmatičan trik. Što potvrđuje staru mudrost — 'potreba je majka izumiteljstva.'
Glavni koraci za izradu spritea 32×32 piksela su nam već poznati: skica, boja, sjene, daljnje dorade. U ovim uvjetima, kao početnu skicu biram šarene oblike umjesto crtanja kontura zbog male veličine. Boja igra važniju ulogu u definiranju lika od kontura. Pogledajte opet Maria, on uopće nema konture. Nisu zanimljive samo brkove. Njegove brade definiraju oblik ušiju, rukavi pokazuju ruke, a opći oblik više-manje jasno prikazuje cijelo njegovo tijelo.
Izrada malih spriteova je stalni kompromis. Ako dodate obrub, možete izgubiti prostor za sjenu. Ako su ruke i noge vašeg lika jasno prikazane, glava najvjerojatnije ne bi trebala biti prevelika. Ako učinkovito koristite boje, selektivne obrube i antialiasing, tada će prikazani objekt izgledati veći nego što zapravo jest.
Za male spriteove sviđa mi se chibi stil: likovi izgledaju jako slatko, imaju velike glave i oči. Sjajan način za stvaranje živopisnog junaka u ograničenom prostoru, a i u cjelini, vrlo prijatan stil. Ali, možda ćete trebati pokazati mobilnost ili snagu lika, tada možete posvetiti manje prostora glavi da bi tijelo izgledalo moćnije. Sve ovisi o vašim željama i ciljevima.
Cijela ekipa je tu!
Formati datoteka
Takav rezultat može uznemiriti svakog pixel umjetnika
Slika koju vidite je rezultat spremanja crteža u JPG. Dio podataka je izgubljen zbog algoritama kompresije datoteke. Kvalitetna pixel umjetnost na kraju će izgledati loše, a vraćanje izvorne palete bit će teško.
Za spremanje statične slike bez gubitka kvalitete koristite PNG format. Za animacije — GIF.
Kako ispravno dijeliti pixel umjetnost
Dijeljenje pixel umjetnosti na društvenim mrežama odličan je način za dobivanje povratnih informacija i upoznavanje s drugim umjetnicima koji rade u istom stilu. Ne zaboravite dodati hešteg #pixelart. Nažalost, društvene mreže često konvertiraju PNG u JPG bez pitanja, pogoršavajući vašu rad. Pri tome nije uvijek jasno zašto je vaša slika konvertirana.
Postoji nekoliko savjeta kako sačuvati pixel umjetnost u potrebnoj kvaliteti za razne društvene mreže.
Da PNG datoteka ne bi bila promijenjena na Twitteru, koristite manje od 256 boja ili , da je vaša datoteka manja od 900 piksela na dužoj strani. Povećao bih veličinu datoteke barem na 512×512 piksela. Također, skaliranje bi trebalo biti u omjeru 100 (200%, a ne 250%) i oštri rubovi bi se trebali zadržati (Nearest Neighbor u Photoshopu).
Animirane GIF datoteke za objave na Twitteru ne smiju biti veće od 15 MB. Slika bi trebala biti barem 800×800 piksela, ciklična animacija trebala bi se ponoviti tri puta, a posljednji kadar trebao bi biti upola kraći po vremenu od svih ostalih — to je najpopularnija teorija. Ipak, nejasno je koliko je potrebno ispuniti te zahtjeve, s obzirom na to da Twitter stalno mijenja svoje algoritme za prikaz slika.
Koliko znam, nije moguće objaviti sliku na Instagramu bez gubitka kvalitete. No, sigurno će izgledati bolje ako je povećate barem na 512x512 piksela.
Izvor: habr.com
