Indie programeri često moraju kombinirati nekoliko uloga odjednom: dizajner igara, programer, kompozitor, umjetnik. A kada je riječ o vizualima, mnogi ljudi biraju pixel art – na prvi pogled izgleda jednostavno. Ali da bi bilo lijepo, potrebno vam je puno iskustva i određene vještine. Našao sam tutorijal za one koji su tek počeli da shvaćaju osnove ovog stila: sa opisom posebnog softvera i tehnikama crtanja koristeći dva spritea kao primjer.
Pozadina
Piksel umjetnost je oblik digitalne umjetnosti u kojoj se promjene vrše na nivou piksela. Uglavnom se povezuje sa grafikom video igara iz 80-ih i 90-ih. Tada su umjetnici morali uzeti u obzir ograničenja memorije i nisku rezoluciju. Sada je piksel art i dalje popularan u igrama i kao umjetnički stil općenito, uprkos mogućnosti stvaranja realistične 3D grafike. Zašto? Čak i pored nostalgije, stvaranje kul rada unutar tako krutog okvira je lijep i nagrađujući izazov.
Barijera za ulazak u pixel art je relativno niska u poređenju sa tradicionalnom umjetnošću i 3D grafikom, što privlači indie programere. Ali to ne znači da će biti lako završiti igra u ovom stilu. Vidio sam mnoge indie programere sa meteroidvanijama piksela u umjetnosti na platformama za crowdfunding. Mislili su da će sve završiti za godinu dana, a u stvari im je trebalo još šest godina.
Metal Slug 3 (arkada). SNK, 2000. godina
Pixel art na nivou koji većina ljudi želi da kreira oduzima mnogo vremena, a kratki tutorijali su rijetki. Kada radite s 3D modelom, možete ga rotirati, deformirati, pomicati njegove pojedinačne dijelove, kopirati animacije s jednog modela na drugi itd. Pikselska umjetnost na visokom nivou gotovo uvijek zahtijeva mnogo truda da bi se pikseli precizno postavili na svaki kadar.
Generalno, upozorio sam.
A sada malo o mom stilu: uglavnom crtam piksel art za video igrice i pronalazim inspiraciju u njima. Posebno sam obožavatelj Famicom/NES-a, 16-bitnih konzola i arkadnih igara iz 90-ih. Piksel umjetnost mojih omiljenih igara tog doba može se opisati kao svijetla, samouvjerena i čista (ali ne pretjerano), nije teška i minimalistička. I sama radim u ovom stilu, ali možete lako primijeniti ideje i tehnike iz ovog tutorijala da kreirate potpuno različite stvari. Istražite rad različitih umjetnika i kreirajte piksel umjetnost koju volite!
Softver
Osnovni digitalni alati za pixel art - Zoom (Zumiranje) i Pencil (Pencil) za postavljanje piksela. Također će vam trebati Line (Line), Figure (Oblik), Select (Select), Move (Move) i Fill (Paint Bucket). Postoji mnogo besplatnih i plaćenih softvera s takvim skupom alata. Govorit ću o najpopularnijim i onima koje i sam koristim.
Boja (besplatno)
Ako imate Windows, u njega je ugrađen Paint - primitivan program, ali ima sve alate za pixel art.
(besplatno)
Neočekivano funkcionalan uređivač pixel arta koji radi kroz pretraživač. Svoj rad možete izvesti u PNG ili animirani GIF. Odlična opcija za početnike.
(besplatno)
GraphicsGale je jedini uređivač za koji sam čuo da je dizajniran posebno za pixel art i uključuje alate za animaciju. Kreirala ga je japanska kompanija HUMANBALANCE. Od 2017. distribuira se besplatno i još uvijek je tražen, uprkos rastućoj popularnosti Aseprite-a. Nažalost, radi samo na Windows-u.
($)
Možda najpopularniji urednik u ovom trenutku. , mnoštvo funkcija, aktivna podrška, verzije za Windows, Mac i Linux. Ako se ozbiljno bavite piksel artom, a još uvijek niste pronašli pravi uređivač, ovo bi moglo biti ono za vas.
($$+)
GameMaker Studio 2 je odličan 2D alat sa dobrim Sprite Editorom. Ako želite da kreirate pixel art za sopstvene igre, veoma je zgodno da sve radite u jednom programu. Sada koristim ovaj softver u svom radu na , kolekcija od 50 retro igara: pravim spriteove i animacije u GameMakeru i skupove pločica u Photoshopu.
($$$+)
Photoshop je skup softver, distribuiran putem pretplate, nije dizajniran za piksel art. Ne preporučujem kupovinu ovoga osim ako volite ilustracije visoke rezolucije ili ako ne morate raditi složene manipulacije slikama kao ja. U njemu možete kreirati statične sprite i piksel art, ali je prilično složen u poređenju sa specijalizovanim softverom (poput GraphicsGale ili Aseprite).
Ostali
Moj komplet za piksel art. Sve je crno, upravo sam primetio.
Grafički tablet ($$+)
Preporučujem grafičke tablete za bilo koji rad na digitalnoj ilustraciji kako bi se izbjegao sindrom karpalnog tunela. Mnogo je lakše spriječiti nego liječiti. Jednog dana ćete osjetiti bol i ona će se samo pogoršavati - vodite računa o sebi od samog početka. Zbog činjenice da sam ranije crtao mišem, sada mi je teško igrati igrice koje zahtijevaju da pritisnete tipke. Trenutno koristim Wacom Intuos Pro S.
Podrška za zglob ($)
Ako ne možete nabaviti tablet, barem kupite čeljust za zglob. Moj favorit je Mueller Green Fitted proteza za zapešće. Ostali su ili preuski ili ne pružaju dovoljnu podršku. Čeljusti se mogu naručiti online bez ikakvih problema.
96 × 96 piksela
finalna borba. Capcom, 1989
Hajde da počnemo! Počnimo sa karakternim spriteom veličine 96x96 px. Kao primjer, nacrtao sam orka i stavio ga na screenshot iz Final Fight-a (slika iznad) tako da dobijete razmjer. Ovo большой sprite za većinu retro igrica, veličina snimka ekrana: 384×224 piksela.
Na tako velikom spriteu bit će lakše pokazati tehniku o kojoj želim govoriti. Takođe, prikaz piksel po piksel više liči na tradicionalne oblike umjetnosti (kao što su crtanje ili slikanje) s kojima ste možda bolje upoznati. Nakon što smo savladali osnovne tehnike, preći ćemo na manje spriteove.
1. Odaberite paletu
Piksel je mnogo dublji koncept u piksel umjetnosti nego u bilo kojem drugom digitalnom području. Pixel art je definisan svojim ograničenjima, kao što su boje. Važno je odabrati pravu paletu, ona će vam pomoći da definirate svoj stil. Ali 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 tutorijal koristit ću paletu od 32 boje za koju smo kreirali . Za piksel art, često se sastavljaju od 32 ili 16 boja. Naš je dizajniran za izmišljenu konzolu koja bi se mogla pojaviti negdje između Famicoma i PC Engine-a. Možete uzeti nju ili bilo koju drugu - tutorial uopće ne ovisi o odabranoj paleti.
2. Grube konture
Počnimo crtati alatom Pencil. Nacrtajmo skicu na isti način kao što to radimo običnom olovkom i papirom. Naravno, piksel umjetnost i tradicionalna umjetnost se preklapaju, posebno kada su u pitanju tako veliki sprijtovi. Moja zapažanja pokazuju da su jaki umjetnici pikselske umjetnosti barem dobri u crtanju slobodnom rukom i obrnuto. Stoga je razvijanje vještina crtanja uvijek korisno.
3. Konturiranje
Finaliziramo konture: uklanjamo dodatne piksele i smanjujemo debljinu svake linije na jedan piksel. Ali šta je zapravo suvišno? Da biste odgovorili na ovo pitanje, morate razumjeti linije piksela i izbočine.
izbočine
Morate naučiti kako nacrtati dvije osnovne linije u piksel umjetnosti: ravne i krive. Kod olovke i papira sve je u kontroli mišića, ali mi radimo sa sićušnim blokovima boja.
Ključ za crtanje pravih linija piksela je hrapavost. To su pojedinačni pikseli ili mali segmenti koji uništavaju glatkoću linije. Kao što sam već rekao, jedan piksel je od velike važnosti u pixel art-u, tako da neravnine mogu pokvariti cijelu estetiku. Zamislite da crtate ravnu liniju na papiru i odjednom neko udari o sto: neravnine u piksel artu izgledaju baš kao nasumični zvižduk.
primjeri:
Prave linije
Curves
Neravnina se pojavljuje na krivuljama kada se dužina segmenata linija ne povećava ili smanjuje postepeno.
Nemoguće je u potpunosti izbjeći neravnine – imaju ih sve vaše omiljene retro igre (osim ako, naravno, pikselska umjetnost nije sastavljena u potpunosti od jednostavnih oblika). Svrha: minimizirati nepravilnosti, a prikazati sve što vam je potrebno.
4. Nanošenje prvih boja
Obojite svoj lik ispunom ili drugim odgovarajućim alatom. Paleta će pojednostaviti ovaj dio posla. Ako softver ne predviđa korištenje paleta, možete ga staviti direktno u sliku, kao u gornjem primjeru, i odabrati boje kapaljkom.
U donjem levom uglu sam nacrtao našeg prijatelja, upoznajte se, ovo je Šar. Sa njim će biti lakše razumjeti šta se tačno dešava u svakoj fazi.
5. Sjenčanje
Vrijeme je za renderiranje sjena - samo dodajte tamnije boje spriteu. 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 senke donjem desnom uglu.
Oblik i obim
Ako vam je ovaj korak težak, zamislite svoj crtež kao trodimenzionalne oblike, a ne samo linije i boje. Oblici postoje u XNUMXD prostoru i mogu imati volumen koji gradimo sjenama. Ovo će vam pomoći da vizualizirate lik bez detalja i učinite da izgleda kao da je napravljen od gline umjesto piksela. Sjenčanje nije samo dodavanje novih boja, već i građenje oblika. Na dobro detaljno razrađenom liku, detalji ne prikrivaju osnovne oblike: ako zaškiljite, vidjet ćete nekoliko velikih skupina svjetla i sjene.
Izglađivanje (anti-aliasing, anti-aliasing)
Svaki put kada koristim novu boju, nanosim anti-aliasing (AA). Pomaže u izglađivanju piksela dodavanjem srednjih boja na uglovima gdje se spajaju dva segmenta linije:
Sivi pikseli ublažavaju "prelome" u liniji. Što je duži segment linije, duži je AA segment.
Ovako AA izgleda na ramenu orka. Potrebno je izgladiti linije koje predstavljaju krivinu njegovih mišića.
Anti-aliasing ne bi trebao ići dalje od sprite-a koji će se koristiti u igri ili na pozadini čija je boja nepoznata. Na primjer, ako primijenite AA na svijetlu pozadinu, anti-aliasing će izgledati ružno na tamnoj pozadini.
6. Selektivna kontura
Ranije su obrisi bili potpuno crni, zbog čega je sprite izgledao vrlo crtano. Činilo se da je slika podijeljena na segmente. Na primjer, crne linije na ruci prikazuju muskulaturu previše kontrastno, a lik izgleda manje čvrst.
Ako sprite postane prirodniji, a segmentacija nije toliko očigledna, tada će se osnovni oblici lika lakše čitati. Da biste to učinili, možete koristiti selektivni obris - djelomično zamijenite crni obris svjetlijim. Na osvijetljenom dijelu sprite-a možete koristiti najsvjetlije boje ili, gdje je sprite u kontaktu sa negativnim prostorom, možete potpuno ukloniti obris. Umjesto crne, trebate koristiti boju koja je odabrana za sjenu - na taj način će se sačuvati segmentacija (da biste razlikovali mišiće, krzno i tako dalje).
Također u ovoj fazi sam dodala tamnije sjene. Ispostavilo se tri gradacije zelene boje na koži orka. Najtamnija zelena boja se može koristiti za selektivnu konturu i AA.
7. Završni detalji
Na kraju, vrijedi dodati naglaske (najsvjetlije tačke na spriteu), detalje (naušnice, klinove, ožiljci) i druga poboljšanja dok lik ne bude spreman ili dok ne morate prijeći na sljedeći.
Postoji nekoliko korisnih trikova koji se mogu primijeniti u ovoj fazi. Rotirajte crtež vodoravno, to često pomaže da se otkriju greške u proporcijama i senčenju. 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 velike, čvrste mrlje senki. Ali postoji još jedna tehnika - dithering, koja vam omogućava da prelazite s jedne boje na drugu bez dodavanja treće. Pogledajte primjer ispod.
Gornji tamni prema svijetli gradijent koristi stotine različitih nijansi plave.
Srednji gradijent koristi samo devet boja, ali i dalje ima previše nijansi iste boje. Postoji takozvani banding (od engleskog band - traka), u kojem se, zbog debelih jednolikih pruga, oko fokusira na dodirne tačke boja, umjesto na same boje.
Na donjem gradijentu smo primijenili dither koji izbjegava trake i koristi samo dvije boje. Stvaramo šum različitog intenziteta kako bismo simulirali gradaciju boja. Ova tehnika je vrlo slična polutonu koji se koristi u štampi; kao i šaranje (stippling - zrnasta slika) - u ilustracijama i stripovima.
Na orku sam se poprilično povukao da prenesem teksturu. Neki piksel umjetnici to uopće ne koriste, dok drugi nisu stidljivi i rade to vrlo vješto. Smatram da dithering izgleda najbolje na velikim površinama ispunjenim jednom bojom (pogledajte nebo na slici Metal Slug iznad) ili područjima koja bi trebala izgledati grubo i neravno (poput prljavštine). Odlučite sami kako ćete ga koristiti.
Ako želite vidjeti primjer velikog i kvalitetnog ditheringa, pogledajte igre The Bitmap Brothers, britanskog studija iz 80-ih, ili igrice na PC-98 računaru. Samo imajte na umu da su svi oni NSFW.
Kakyusei (PC-98). Elf, 1996
Na ovoj slici ima samo 16 boja!
8. Poslednji pogled
Jedna od opasnosti piksel umjetnosti je da djeluje lagano i jednostavno (zbog svoje strukture i stilskih ograničenja). Ali na kraju ćete potrošiti ogromnu količinu vremena na fino podešavanje svojih sprijtova. To je poput zagonetke koju treba riješiti, zbog čega je piksel umjetnost privlačna perfekcionistima. Upamtite da jedan sprite ne bi trebalo da traje predugo – to je samo mali komad izuzetno složene kolekcije komada. Važno je ne izgubiti iz vida veliku sliku.
Čak i ako vaša pixel art nije za igranje igara, ponekad se isplati reći sebi: "Već je dovoljno dobro!" I kreni dalje. Najbolji način za razvijanje vještina je proći kroz cijeli proces od početka do kraja što je više moguće, koristeći što više tema.
A ponekad je korisno ostaviti duh na neko vrijeme kako biste ga malo kasnije mogli pogledati svježim očima.
32×32 piksela
Prvo smo kreirali veliki sprite veličine 96x96 piksela, jer u toj veličini više liči na crtanje ili slikanje, ali pikseliziran. Što je sprite manji, to manje izgleda kao ono što bi trebao prikazati, a svaki piksel je važniji.
U Super Mario Bros. Marijevo oko je samo dva piksela naslagana jedan iznad drugog. I njegovo uvo takođe. Kreator lika Shigeru Miyamoto rekao je da su brkovi bili potrebni da bi se nos odvojio od ostatka lica. Dakle, jedna od glavnih karakteristika Mariovog lica nije samo dizajn karaktera, već i pragmatičan trik. Što potvrđuje staru mudrost - "potreba je majka domišljatosti".
Već smo upoznati sa glavnim fazama kreiranja 32×32 piksela sprite-a: skica, boja, senke, dalje usavršavanje. Ali u takvim uslovima, kao početnu skicu, uzimam obojene oblike umjesto da crtam obrise zbog male veličine. Boja igra važniju ulogu u definiciji karaktera nego obrisi. Pogledaj ponovo Marija, on nema nikakve konture. Nisu samo brkovi zanimljivi. Njegovi zalisci određuju oblik njegovih ušiju, rukavi pokazuju ruke, a cjelokupni oblik manje-više jasno odražava cijelo tijelo.
Stvaranje malih sprijtova je stalni kompromis. Ako dodate potez, možete izgubiti prostor za sjenu. Ako vaš lik ima jasno definirane ruke i noge, glava vjerovatno neće biti velika. Efikasno korištenje boje, selektivnog poteza i anti-aliasinga učinit će da se prikazani objekt čini većim nego što stvarno jeste.
Za male duhove volim chibi stil: likovi izgledaju veoma slatko, imaju velike glave i oči. Odličan način za stvaranje svijetlog karaktera u ograničenom prostoru, i općenito, vrlo ugodan stil. Ali možda trebate pokazati pokretljivost ili snagu karaktera, tada možete dati manje prostora glavi kako bi tijelo izgledalo moćnije. Sve ovisi o vašim željama i ciljevima.
Cijeli tim je ovdje!
Formati datoteka
Takav rezultat može učiniti nervoznim svakog umjetnika piksela
Slika koju vidite je rezultat spremanja slike kao JPG. Dio podataka je izgubljen zbog algoritama kompresije datoteka. Visokokvalitetna pixel art će na kraju izgledati loše, a vraćanje u originalnu paletu neće biti lako.
Da biste sačuvali statičnu sliku bez gubitka kvaliteta, koristite PNG format. Za animacije - GIF.
Kako podijeliti pixel art na pravi način
Dijeljenje piksel umjetnosti na društvenim mrežama odličan je način da dobijete povratne informacije i upoznate druge umjetnike koji rade u istom stilu. Ne zaboravite koristiti hashtag #pixelart. Nažalost, društvene mreže često pretvaraju PNG u JPG bez traženja, što pogoršava vaš rad. I nije uvijek jasno zašto je vaša slika konvertirana.
Postoji nekoliko savjeta kako sačuvati pixel art u pravom kvalitetu za različite društvene mreže.
cvrkut
Da bi PNG datoteka ostala nepromijenjena na Twitteru, koristite manje od 256 boja ili da je vaša datoteka manja od 900 piksela. Povećao bih veličinu datoteke na najmanje 512x512 piksela. I tako da skaliranje bude višestruko od 100 (200%, a ne 250%) i da se očuvaju oštre ivice (Nearest Neighbor in Photoshop).
Animirani GIF-ovi za objave na Twitteru ne teži više od 15 MB. Slika mora biti najmanje 800x800 piksela, animacija petlje mora se ponoviti tri puta, a posljednji kadar mora biti upola kraći od svih ostalih - najpopularnija teorija. Međutim, nije jasno u kojoj mjeri bi ovi zahtjevi trebali biti ispunjeni, s obzirom na to da Twitter stalno mijenja algoritme za prikazivanje slika.
Koliko ja znam, nije moguće postaviti sliku na Instagram bez gubitka kvaliteta. Ali definitivno će izgledati bolje ako je povećate na barem 512x512 piksela.
izvor: www.habr.com