Indie programeri često moraju kombinirati nekoliko uloga odjednom: dizajner igara, programer, skladatelj, umjetnik. A što se vizuala tiče, mnogi biraju pixel art – na prvi pogled djeluje jednostavno. Ali da biste to učinili lijepo, potrebno vam je puno iskustva i određene vještine. Pronašao sam poduku za one koji su tek počeli shvaćati osnove ovog stila: s opisom posebnog softvera i tehnika crtanja na primjeru dva spritea.
pozadina
Pixel art oblik je digitalne umjetnosti u kojem se promjene vrše na razini piksela. Uglavnom se povezuje s grafikom videoigara iz 80-ih i 90-ih. Tada su umjetnici morali voditi računa o ograničenjima memorije i niskoj razlučivosti. Danas je pixel art još uvijek popularan u igrama i kao umjetnički stil općenito, unatoč mogućnosti stvaranja realistične 3D grafike. Zašto? Nostalgiju na stranu, stvaranje cool rada unutar tako tijesnog okvira ugodan je i isplativ izazov.
Barijera za ulazak u pikselnu umjetnost relativno je niska u usporedbi s tradicionalnom umjetnošću i 3D grafikom, što privlači indie programere. Ali to ne znači da će biti lako Završi igra u ovom stilu. Vidio sam mnogo nezavisnih programera s piksel art metroidvanijama na platformama za grupno financiranje. Mislili su da će sve završiti u godinu dana, a u stvarnosti im je trebalo još šest godina.
Metal Slug 3 (Arkada). SNK, 2000. (enciklopedijska natuknica).
Pikselna umjetnost na razini na kojoj je većina ljudi želi stvarati oduzima puno vremena, a ima vrlo malo kratkih tutorijala. Kada radite s 3D modelom, možete ga rotirati, deformirati, pomicati njegove pojedinačne dijelove, kopirati animacije s jednog modela na drugi itd. Pikselna umjetnost visoke razine gotovo uvijek zahtijeva puno truda u preciznom postavljanju piksela na svaki okvir.
Općenito, upozorio sam te.
A sada malo o mom stilu: uglavnom crtam pixel art za video igrice i u njima nalazim inspiraciju. Konkretno, obožavatelj sam Famicoma/NES-a, 16-bitnih konzola i arkadnih igara iz 90-ih. Pikselna umjetnost mojih omiljenih igara tog doba može se opisati kao svijetla, samouvjerena i čista (ali ne previše čista), a ne oštra i minimalistička. Ovo je stil u kojem ja radim, ali možete lako primijeniti ideje i tehnike iz ovog vodiča za stvaranje potpuno različitih stvari. Istražite radove različitih umjetnika i stvorite pikselnu umjetnost koja vam se sviđa!
mekan
Osnovni digitalni alati za pikselnu umjetnost su Zoom i Pencil za postavljanje piksela. Također će vam biti korisne Line, Shape, Select, Move i Paint Bucket. Postoji mnogo besplatnih i plaćenih softvera s takvim skupom alata. Reći ću vam o najpopularnijima i onima koje sam koristim.
Boja (besplatno)
Ako imate Windows, ugrađeni Paint je primitivan program, ali ima sve alate za pixel art.
(besplatno je)
Neočekivano funkcionalan uređivač pikselne umjetnosti koji se pokreće kroz preglednik. Svoj rad možete izvesti kao PNG ili animirani GIF. Izvrsna opcija za početnike.
(besplatno je)
GraphicsGale je jedini uređivač za koji sam čuo da je dizajniran posebno za pikselnu umjetnost i uključuje alate za animaciju. Kreirala ga je japanska tvrtka HUMANBALANCE. Dostupan je besplatno od 2017. i još uvijek je tražen, unatoč porastu popularnosti Asepritea. Nažalost, radi samo na Windowsima.
($)
Možda najpopularniji urednik u ovom trenutku. , puno mogućnosti, aktivna podrška, verzije za Windows, Mac i Linux. Ako se ozbiljno bavite pikselnom umjetnošću i još uvijek niste pronašli pravi uređivač, ovo bi mogao biti onaj koji vam treba.
($$+)
GameMaker Studio 2 izvrstan je 2D alat s dobrim Sprite Editorom. Ako želite stvoriti pikselnu umjetnost za vlastite igre, vrlo je zgodno učiniti sve u jednom programu. Sada koristim ovaj softver dok radim , kolekcija od 50 retro igara: stvaram spriteove i animacije u GameMakeru, a skupove pločica u Photoshopu.
($$$+)
Photoshop je skup softver, distribuiran putem pretplate i nije dizajniran za pikselnu umjetnost. Ne preporučam kupnju osim ako se ne bavite renderiranjem ilustracija u visokoj razlučivosti ili ako ne trebate izvoditi složene manipulacije slikom, poput mene. U njemu možete stvarati statične spriteove i pikselnu umjetnost, ali je prilično složen u usporedbi sa specijaliziranim softverom (na primjer, GraphicsGale ili Aseprite).
Drugi
Moj pribor za pikselnu umjetnost. Sve je crno, tek sad sam primijetio.
Grafički tablet ($$+)
Preporučujem grafičke tablete za sve digitalne ilustracije kako biste izbjegli sindrom karpalnog tunela. Mnogo je lakše spriječiti nego liječiti. Jednog dana ćete osjetiti bol i ona će se samo pojačavati – pobrinite se za sebe od samog početka. Budući da sam prije crtao mišem, sada mi je teško igrati igrice koje zahtijevaju pritiskanje tipki. Trenutno koristim Wacom Intuos Pro S.
Potpora za zglob ($)
Ako ne možete nabaviti tablet, nabavite barem potporu za zglob. Moj favorit je Mueller Green Fitted Wrist Brace. Ostali su ili pretijesni ili ne pružaju dovoljnu potporu. Čeljusti se bez problema mogu naručiti online.
96 × 96 piksela
Konačna borba. Capcom, 1989
Započnimo! Počnimo s likovima veličine 96x96 piksela. Kao primjer, nacrtao sam orka i stavio ga na screenshot iz Final Fight (slika gore) tako da možete razumjeti razmjere. Ovaj большой sprite za većinu retro igara, veličina snimke zaslona: 384x224 piksela.
Na tako velikom spriteu bit će lakše prikazati tehniku o kojoj želim govoriti. Renderiranje po pikselu također je sličnije tradicionalnim oblicima umjetnosti (poput crtanja ili slikanja) s kojima ste možda više upoznati. Nakon što smo savladali osnovne tehnike, prijeći ćemo na manje spriteove.
1. Odaberite paletu
Pixel je puno dublji koncept u pikselnoj umjetnosti nego u bilo kojem drugom digitalnom području. Pixel art definiran je svojim ograničenjima, poput boja. Važno je odabrati pravu paletu; ona će vam pomoći odrediti stil. No, na početku predlažem da ne razmišljate o paletama i da odaberete jednu od postojećih (ili samo nekoliko nasumičnih boja) - lako je možete promijeniti u bilo kojoj fazi.
Za ovaj vodič koristit ću paletu od 32 boje za koju smo kreirali . Za pikselnu umjetnost često se sastavljaju od 32 ili 16 boja. Naša je dizajnirana za izmišljenu konzolu koja bi se pojavila negdje između Famicoma i PC Enginea. Možete ga uzeti ili bilo koji drugi - tutorijal uopće ne ovisi o odabranoj paleti.
2. Grubi obrisi
Počnimo crtati pomoću alata Pencil. Nacrtajmo skicu na isti način kao što to radimo običnom olovkom i papirom. Naravno, pikselna umjetnost i tradicionalna umjetnost preklapaju se, pogotovo kada je riječ o tako velikim spriteovima. Moja zapažanja pokazuju da su jaki pixel art umjetnici barem dobri u crtanju rukom i obrnuto. Stoga je razvijanje vaših crtačkih vještina uvijek korisno.
3. Razrada kontura
Pročišćavamo konture: uklanjamo dodatne piksele i smanjujemo debljinu svake linije na jedan piksel. Ali što se točno smatra suvišnim? Da biste odgovorili na ovo pitanje morate razumjeti linije i nepravilnosti piksela.
Nepravilnosti
Morate naučiti kako nacrtati dvije osnovne linije u pixel artu: ravne i zakrivljene. Kod olovke i papira sve je u kontroli mišića, ali mi radimo sa sitnim blokovima boje.
Ključ za crtanje ispravnih linija piksela su neravnine. To su pojedinačni pikseli ili mali segmenti koji uništavaju glatkoću linije. Kao što sam već rekao, jedan piksel čini veliku razliku u pikselnoj umjetnosti, tako da neravnine mogu uništiti cjelokupnu estetiku. Zamislite da nacrtate ravnu crtu na papiru i odjednom netko udari o stol: izbočine u pikselnoj umjetnosti izgledaju poput nasumičnog vijuganja.
Primjeri:
Usmjerite
Krivulje
Nepravilnosti se pojavljuju u krivuljama kada se duljina segmenata linije ne povećava ili smanjuje postupno.
Nemoguće je potpuno izbjeći neravnine - sve vaše omiljene retro igre ih imaju (osim, naravno, ako se pikselna umjetnost ne sastoji samo od jednostavnih oblika). Cilj: Svesti neravnine na najmanju moguću mjeru, a pritom pokazati sve što je potrebno.
4. Nanesite prve boje
Obojite svoj lik ispunom ili drugim prikladnim alatom. Paleta će pojednostaviti ovaj dio posla. Ako softver ne omogućuje korištenje paleta, možete ga postaviti izravno na sliku, kao u gornjem primjeru, i odabrati boje pomoću kapaljke.
U donjem lijevom kutu nacrtao sam našeg prijatelja, upoznajte se, ovo je Ball. To će olakšati razumijevanje što se točno događa u svakoj fazi.
5. Sjenčanje
Vrijeme je za prikaz sjena - samo dodajte tamnije boje na sprite. Tako će slika izgledati trodimenzionalno. Pretpostavimo da imamo jedan izvor svjetlosti koji se nalazi iznad orka lijevo od njega. To znači da će sve što je iznad i ispred našeg lika biti osvijetljeno. Dodajte sjene dolje desno.
Obrazac i volumen
Ako vam je ovaj korak izazovan, zamislite svoj crtež kao trodimenzionalne oblike, a ne samo linije i boju. Oblici postoje u trodimenzionalnom prostoru i mogu imati volumen, koji gradimo uz pomoć sjena. To će vam pomoći vizualizirati lik bez detalja i zamisliti da je napravljen od gline, a ne od piksela. Sjenčanje nije samo dodavanje novih boja, to je proces izgradnje oblika. Na dobro dizajniranom liku, detalji ne skrivaju temeljne oblike: ako zaškiljite, vidjet ćete neke velike skupine svjetla i sjene.
Anti-aliasing (anti-aliasing)
Svaki put kad koristim novu boju, primjenjujem anti-aliasing (AA). Pomaže izgladiti piksele dodavanjem srednjih boja u kutovima gdje se sastaju dva segmenta linije:
Sivi pikseli omekšavaju "prekide" u liniji. Što je dulji segment linije, duži je segment AA.
Ovako izgleda AA na ramenu orka. Potrebno je izravnati linije koje pokazuju krivulju njegovih mišića
Anti-aliasing ne bi trebao prelaziti sprite koji će se koristiti u igri ili na pozadini čija je boja nepoznata. Na primjer, ako AA primijenite na svijetlu pozadinu, anti-aliasing će izgledati ružno na tamnoj pozadini.
6. Selektivni pregled
Prethodno su obrisi bili potpuno crni, zbog čega je sprite izgledao vrlo crtano. Slika kao da je podijeljena u segmente. Na primjer, crne linije na ruci daju previše kontrasta muskulaturi, zbog čega lik izgleda manje kohezivno.
Ako lik postane prirodniji, a segmentacija manje očita, lakše će se čitati osnovne oblike lika. Da biste to učinili, možete koristiti selektivni obris - djelomično zamijenite crni obris svjetlijim. Na osvijetljenom dijelu spritea možete koristiti najsvjetlije boje ili, gdje sprite dodiruje negativni prostor, možete potpuno ukloniti obris. Umjesto crne, trebate koristiti boju koja je odabrana za sjenu - na taj način će se sačuvati segmentacija (radi razlikovanja mišića, krzna i sl.).
Dodala sam i tamnije sjene u ovoj fazi. Rezultat su tri gradacije zelene boje na orkovoj koži. Najtamnija zelena boja može se koristiti za selektivni obris i AA.
7. Završni dodaci
Na kraju, vrijedi dodati istaknute dijelove (najsvjetlije točke na figuri), detalje (naušnice, nitne, ožiljke) i druga poboljšanja dok lik ne bude spreman ili dok ne morate prijeći na sljedeći.
Postoji nekoliko korisnih tehnika koje se mogu primijeniti u ovoj fazi. Rotirajte crtež vodoravno, to često pomaže u prepoznavanju pogrešaka u proporcijama i sjenčanju. Također možete ukloniti boju - postavite zasićenost na nulu da biste razumjeli gdje trebate promijeniti sjene.
Stvaranje buke (dithering, dithering)
Do sada smo uglavnom koristili velika, čvrsta područja sjene. Ali postoji još jedna tehnika - dithering, koja vam omogućuje prijelaz iz jedne boje u drugu bez dodavanja treće. Pogledajte primjer u nastavku.
Gornji gradijent od tamne do svijetle koristi stotine različitih nijansi plave.
Prosječni gradijent koristi samo devet boja, ali još uvijek postoji previše nijansi iste boje. Nastaje takozvani banding (od engleske band - pruga), kod kojeg se, zbog debelih jednolikih pruga, oko fokusira na dodirne točke boja, umjesto na same boje.
Na donji gradijent primijenili smo dithering, koji izbjegava trake i koristi samo dvije boje. Stvaramo šum različitog intenziteta kako bismo simulirali gradaciju boja. Ova je tehnika vrlo slična polutonu (polutonska slika) koja se koristi u tiskanju; kao i šaranje (zrnata slika) – u ilustracijama i stripovima.
Na orcu sam se prilično dizerirao da prenesem teksturu. Neki ga umjetnici piksela uopće ne koriste, drugi, naprotiv, nisu sramežljivi i to rade vrlo vješto. Smatram da dither najbolje izgleda na velikim površinama ispunjenim jednom bojom (pogledajte nebo na gornjoj snimci zaslona Metal Sluga) ili na područjima koja bi trebala izgledati grubo i neravnomjerno (poput prljavštine). Sami odlučite kako ćete ga koristiti.
Želite li vidjeti primjer velikog i kvalitetnog ditheringa, pogledajte igrice The Bitmap Brothers, britanskog studija iz 80-ih, ili igre na računalu PC-98. Samo imajte na umu da su svi oni NSFW.
Kakyusei (PC-98). Vilenjak, 1996
Na ovoj slici postoji samo 16 boja!
8. Posljednji pogled
Jedna od opasnosti pixel arta je to što izgleda lako i jednostavno (zbog svoje strukture i stilskih ograničenja). Ali na kraju ćete potrošiti ogromnu količinu vremena usavršavajući svoje spriteove. To je poput zagonetke koju treba riješiti – zbog čega pixel art privlači perfekcioniste. Upamtite da jedan sprite ne bi trebao oduzeti previše vremena - to je samo maleni djelić iznimno složene zbirke dijelova. Važno je ne izgubiti iz vida širu sliku.
Čak i ako vaša pikselna umjetnost nije za igranje, ponekad je vrijedno reći sebi: "Već je dovoljno dobra!" I kreni dalje. Najbolji način da razvijete svoje vještine je proći kroz cijeli proces od početka do kraja što je moguće više puta, koristeći što više tema.
A ponekad je korisno ostaviti sprite neko vrijeme kako biste ga malo kasnije mogli pogledati svježim očima.
32×32 piksela
Prvo smo stvorili veliki sprite od 96x96 piksela jer je u toj veličini više poput crtanja ili slikanja, ali s pikselima. Što je sprite manji, to je manje sličan onome što bi trebao prikazati i svaki piksel je važniji.
U Super Mario Bros. Mariovo oko je samo dva piksela, jedan na vrhu drugog. I njegovo uho također. Tvorac lika Shigeru Miyamoto rekao je da su brkovi potrebni kako bi se nos odvojio od ostatka lica. Dakle, jedna od glavnih karakteristika Maria nije samo dizajn lika, već pragmatičan trik. Što potvrđuje staru mudrost - "nužda je majka izuma."
Glavne faze stvaranja spritea veličine 32x32 piksela već su nam poznate: skica, boja, sjene, daljnje usavršavanje. Ali u takvim uvjetima kao početnu skicu biram obojene oblike umjesto crtanja obrisa zbog male veličine. Boja ima važniju ulogu u definiranju lika od obrisa. Pogledaj opet Marija, on uopće nema obrisa. Nisu samo brkovi zanimljivi. Njegovi zalisci određuju oblik njegovih ušiju, rukavi pokazuju ruke, a cjelokupni oblik više-manje jasno pokazuje cijelo tijelo.
Stvaranje malih spriteova stalni je kompromis. Ako dodate potez, možete izgubiti prostor za sjenu. Ako vaš lik ima jasno vidljive ruke i noge, glava vjerojatno ne bi trebala biti velika. Ako učinkovito koristite boju, selektivni potez i anti-aliasing, prikazani će objekt izgledati veći nego što zapravo jest.
Za male sprite volim chibi stil: likovi izgledaju vrlo slatko, imaju velike glave i oči. Sjajan način za stvaranje šarenog lika u ograničenom prostoru, i općenito vrlo lijepog stila. Ali možda trebate pokazati pokretljivost ili snagu lika, tada možete dati manje prostora glavi kako bi tijelo izgledalo snažnije. Sve ovisi o vašim željama i ciljevima.
Cijela ekipa je na okupu!
Formati datoteka
Ovaj rezultat svakog umjetnika piksela može učiniti nervoznim
Slika koju vidite rezultat je spremanja slike u JPG. Neki su podaci izgubljeni zbog algoritama za kompresiju datoteke. Pikselna umjetnost visoke kvalitete na kraju će izgledati loše, a vraćanje u originalnu paletu neće biti lako.
Za spremanje statične slike bez gubitka kvalitete upotrijebite PNG format. Za animacije - GIF.
Kako pravilno dijeliti pixel art
Dijeljenje pikselne umjetnosti na društvenim mrežama izvrstan je način za dobivanje povratnih informacija i upoznavanje drugih umjetnika koji rade u istom stilu. Ne zaboravite koristiti hashtag #pixelart. Nažalost, društvene mreže često pretvaraju PNG u JPG bez pitanja, što pogoršava vaše iskustvo. Štoviše, nije uvijek jasno zašto je vaša slika pretvorena.
Postoji nekoliko savjeta kako sačuvati pixel art u potrebnoj kvaliteti za razne društvene mreže.
X / Twitter
Kako bi vaša PNG datoteka ostala nepromijenjena na Twitteru, koristite manje od 256 boja ili da je vaša datoteka manja od 900 piksela na najdužoj strani. Povećao bih veličinu datoteke na najmanje 512x512 piksela. I tako da skaliranje bude višekratnik 100 (200%, ne 250%) i da su očuvani oštri rubovi (najbliži susjed u Photoshopu).
Animirani GIF-ovi za objave na Twitteru težiti ne više od 15 MB. Slika mora imati najmanje 800x800 piksela, animacija koja se ponavlja tri puta, a zadnji kadar mora biti upola kraći od svih ostalih - najpopularnija je teorija. Međutim, nejasno je u kojoj mjeri ti zahtjevi moraju biti ispunjeni, s obzirom na to da Twitter stalno mijenja svoje algoritme prikaza slike.
Koliko ja znam, nemoguće je postaviti sliku na Instagram, a da se ne izgubi kvaliteta. No svakako će bolje izgledati ako ga povećate na barem 512x512 piksela.
Izvor: www.habr.com