Cool pixel art. Priprema za posao

Crtanje na nivou piksela ima svoju nišu likovne umjetnosti. Uz pomoć jednostavnih piksela stvaraju se prava remek-djela. Naravno, takve crteže možete kreirati na listu papira, ali mnogo je lakše i ispravnije kreirati slike pomoću grafičkih uređivača. U ovom članku ćemo detaljno analizirati svakog predstavnika takvog softvera.

Najpopularniji grafički uređivač na svijetu koji može raditi na nivou piksela. Da biste kreirali takve slike u ovom uređivaču, potrebno je samo izvršiti nekoliko preliminarnih koraka podešavanja. Ovdje je sve potrebno umjetniku da stvori umjetnost.

No, s druge strane, takvo obilje funkcionalnosti nije potrebno za crtanje pixel arta, tako da nema smisla preplaćivati ​​program ako ćete ga koristiti samo za određenu funkciju. Ako ste jedan od takvih korisnika, savjetujemo vam da obratite pažnju na druge predstavnike koji su posebno fokusirani na grafiku piksela.

PyxelEdit

Ovaj program ima sve što vam je potrebno za stvaranje takvih slika i nije prezasićen funkcijama koje umjetniku nikada neće trebati. Podešavanje je prilično jednostavno, paleta boja vam omogućava da promijenite bilo koju boju u željeni ton, a slobodno kretanje prozora pomoći će vam da prilagodite program za sebe.

PyxelEdit ima funkciju za postavljanje pločica na platnu, što može biti korisno pri kreiranju objekata sličnog sadržaja. Probna verzija je dostupna za preuzimanje na službenoj web stranici i nema ograničenja u korištenju, tako da možete isprobati proizvod prije kupovine.

Pixelformer

Po izgledu i funkcionalnosti, ovo je najobičniji grafički uređivač, ima samo nekoliko dodatnih mogućnosti za kreiranje slika piksela. Ovo je jedan od rijetkih programa koji se distribuiraju potpuno besplatno.

Programeri ne pozicioniraju svoj proizvod kao prikladan za kreiranje pixel arta, oni ga nazivaju odličnim načinom za crtanje logotipa i ikona.

GraphicsGale

U skoro svim takvim softverima pokušavaju da uvedu sistem za animaciju slika, koji se najčešće pokaže jednostavno neupotrebljivim zbog ograničene funkcije i pogrešnu implementaciju. GraphicsGale ni sa ovim nije tako dobar, ali barem ova funkcija može normalno raditi.

Što se tiče crtanja, sve je potpuno isto kao i kod većine urednika: osnovne funkcije, velika paleta boja, mogućnost kreiranja nekoliko slojeva i ništa dodatno što bi moglo ometati rad.

Charamaker

Character Maker 1999 je jedan od najstarijih takvih programa. Stvoren je za kreiranje pojedinačnih likova ili elemenata, koji bi se zatim koristili u drugim programima za animaciju ili implementirali u kompjuterske igrice. Stoga nije baš pogodan za stvaranje slika.

Interfejs nije baš dobar. Gotovo nijedan prozor se ne može pomjeriti ili promijeniti veličinu, a zadani izgled nije baš dobar. Međutim, možete se naviknuti na to.

Pro Motion NG

Ovaj program je idealan u gotovo svemu, počevši od dobro osmišljenog sučelja, gdje je moguće premjestiti prozore neovisno o glavnom u bilo koju tačku i promijeniti njihovu veličinu, a završava se automatskim prebacivanjem s kapaljke na olovku , što je jednostavno neverovatno zgodna karakteristika.

Inače, Pro Motion NG je samo dobar softver za kreiranje pikselske grafike bilo kojeg nivoa. Probna verzija se može preuzeti sa službene web stranice i testirati kako bi se odlučilo hoće li dalje kupovati punu verziju.

Aseprite

S pravom se može smatrati najprikladnijim i prelep program za stvaranje pixel arta. Sam dizajn interfejsa je vrijedan toga, ali to nisu sve prednosti Aseprite-a. Postoji mogućnost animiranja slike, ali za razliku od prethodnih predstavnika, implementirana je kompetentno i pogodna za korištenje. Postoji sve što vam je potrebno za kreiranje prekrasnih GIF animacija.

U ovom vodiču ćete naučiti kako pretvoriti fotografiju osobe u pixel art kao izmišljeni lik arkadna igra od ranih 90-ih.
James May - aka Smudgethis - razvio je ovaj stil 2011. godine za muzički video za dubstep rock nastup. Neronov prvi hit, Ja i ti - gdje je napravio animaciju za prikazivanje stara igra sa Neronovim članovima, igra je bila 2D ritam platformer sa 16-bitnom grafikom sličnom Double Dragon-u, ali daleko boljom od 8-bitnih retro klasika kao što je Super Mario Bros.
Da bi se stvorio ovaj stil, likovi i dalje moraju biti blokovi, ali složeniji od starijih igara. I iako morate koristiti ograničenu paletu boja da biste to postigli izgled, zapamtite da su ove igre još uvijek imale 65.536 boja.
Ovdje vam James pokazuje kako da kreirate lik iz fotografije koristeći jednostavnu paletu boja i alat Olovka.
Baš kao i vodič za animaciju, trebat će vam i fotografija osobe. James je za ovaj tutorijal koristio fotografiju pankera koja je uključena u projektne datoteke.
Kada završite, pogledajte ovaj 16-bitni After Effects vodič za animaciju gdje vam James pokazuje kako da uzmete ovog lika u AE, animirate ga i primijenite efekte retro igre.

Korak 1

Otvorite Vodič za animaciju (16 bit).psd i 18888111.jpg (ili fotografiju po vašem izboru) da biste ga koristili kao osnovu za lik. Fotografija profila u punoj dužini će najbolje funkcionirati i pomoći će vam da dobijete paletu boja i stilove za vašu 16-bitnu figuru.
Tutorijal za animaciju ima nekoliko poza na pojedinačnim slojevima. Izaberite onaj koji na najbolji mogući način odgovara pozi na tvojoj fotografiji - pošto nemamo noge u kadru, ja sam išao sa standardnom pozom na nivou 1.

Korak 2

Koristeći Rectangular Marquee Tool (M), odaberite glavu sa svoje fotografije i kopirajte (Cmd /Ctrl + C) i zalijepite je (Cmd /Ctrl + V) u Vodič za animaciju (16 bit).psd.
Skalirajte sliku tako da stane, proporcionalno. Primijetit ćete da kako su PSD dimenzije vrlo male, slika će odmah početi crtati piksel.

Korak 3

Kreiraj novi sloj i nacrtajte obris jednom pikseliziranom crnom olovkom (B), koristeći vodič za animaciju koji se nalazi u njoj i fotografiju kao osnovu. \n
Priloženi vodič pomaže u razvoju niza likova od većih šefova ili vitkijih ženskih likova. Ovo je grubi vodič za komponovanje i animaciju mojih likova u pixel artu.

Korak 4

Koristeći Eyedropper Tool (I), uzorkovajte najtamnije područje boje kože na fotografiji i kreirajte mali kvadrat boje. Uradite ovo još tri puta da biste kreirali paletu boja kože u četiri boje.
Napravite još jedan sloj ispod sloja obrisa i koristite kist od jednog piksela i paletu boja od četiri boje da zasjenite sliku (opet, koristeći fotografiju kao vodič). \n
Najbolje je pohraniti sve elemente svog umjetničkog djela ili različite slojeve jer ih na taj način lako možete ponovno koristiti na drugim oblicima. Ovo je posebno korisno za negativce, jer većina 16-bitnih igara koristi vrlo slični brojevi. Na primjer, jedan drug može imati crvenu košulju i nož, dok je drugi identičan osim plave košulje i pištolja.

Korak 5

Ponovite ovaj postupak za ostale dijelove figure, zasjenjujući tkaninu kako bi odgovarala ostalim elementima na originalnoj fotografiji. Obavezno nastavite sa uzorkovanjem pomoću alata Eyedropper da biste prvo kreirali palete boja, jer to pruža konzistentan skup boja koji izgleda sjajno i uklapa se u relativno ograničenu paletu boja 16-bitnih igara.

Korak 6

Dodajte podatke da poboljšate svoj lik nijansama, tetovažama, naušnicama itd. Večerajte ovdje i razmislite o tome kako želite da se vaš lik pojavi u okruženju igranja. Možda bi mogli koristiti sjekiru ili robotsku ruku?

Korak 7

Da biste animirali svog lika, ponovite prethodne korake koristeći ostalih pet slojeva vodiča za animaciju. Ovaj proces može potrajati neko vrijeme za savladavanje i stvaranje besprijekornih rezultata, ali prečice se mogu napraviti ponovnim korištenjem elemenata iz prethodnih okvira. Na primjer, u ovoj sekvenci od šest kadrova, glava ostaje nepromijenjena.

Korak 8

Da biste provjerili je li redoslijed animacije u redu, otvorite panel Animacija u Photoshopu i uvjerite se da je to trenutno samo prvi kadar animacije. Možete dodati nove okvire i uključiti i isključiti slojeve kako biste napravili svoju animaciju, ali većinu na brz način je da koristite komandu “Make Frames from Layers” u iskačućem meniju panela (gore desno).
Prvi okvir je prazna pozadina, pa ga odaberite i kliknite na ikonu za smeće na ploči (na dnu) da biste ga izbrisali.

Adobe Photoshop: Crtamo i animiramo lik Pixel tehnologija Art

U ovoj lekciji ćete naučiti kako crtati i animirati likove koristeći ovu tehniku Pixel Art. Da biste to učinili, potreban vam je samo Adobe Photoshop. Rezultat će biti GIF sa astronautom koji trči.

Program: Adobe Photoshop Težina: početnici, srednji nivo Potrebno vrijeme: 30 min – sat

I. Postavljanje dokumenta i alata

Korak 1

Odaberite Olovka sa alatne trake - ovo će biti glavni alat za našu lekciju. U postavkama odaberite tip Hard Round četkice i postavite preostale vrijednosti kao na slici. Naš cilj je da vrh olovke bude što oštriji.

Korak 2

U postavkama alata za brisanje (brisač) odaberite Režim olovke i postavite preostale vrijednosti kao što je prikazano na slici.

Korak 3

Uključite Pixel Grid (Prikaz > Prikaži > Mreža piksela). Ako u meniju nema takve stavke, idite na podešavanja i omogućite grafičko ubrzanje Preferences > Performance > Graphic acceleration.

Imajte na umu: mreža će biti vidljiva na novokreiranom platnu samo kada je uvećana na 600% ili više.

Korak 4

U Preferences > General (Control-K), promenite režim interpolacije slike u režim Nearest Neighbor. Ovo će omogućiti da granice objekata ostanu što jasnije.

U postavkama jedinica i ravnala, postavite jedinice ravnala na piksele Preference > Jedinice i ravnala > Pikseli.

II. Stvaranje karaktera

Korak 1

I sada kada je sve postavljeno, možemo preći direktno na crtanje lika.

Skicirajte svoj lik jasnim obrisom, pazeći da ga ne preopterećujete. sitnih detalja. U ovoj fazi boja uopće nije bitna, glavna stvar je da je obris jasno nacrtan i da razumijete kako će lik izgledati. Ova skica je pripremljena posebno za ovu lekciju.

Korak 2

Smanjite skalu skice na 60 piksela u visinu koristeći prečicu na tastaturi Control+T ili Uredi > Slobodna transformacija.

Veličina objekta je prikazana na informativnoj tabli. Imajte na umu da su postavke interpolacije iste kao što smo uradili u koraku 4.

Korak 3

Uvećajte skicu za 300-400% da biste olakšali rad i smanjili neprozirnost sloja. Zatim kreirajte novi sloj i nacrtajte obrise skice pomoću alata Pencil Tool. Ako je lik simetričan, kao u našem slučaju, možete ocrtati samo polovinu, a zatim ga duplirati i okrenuti kao ogledalo (Edit > Transform > Flip Horizontal).

ritam: Da crtam složeni elementi razbiti ih na komade. Kada pikseli (tačke) u liniji formiraju "ritam" kao što je 1-2-3 ili 1-1-2-2-3-3, skica izgleda glatko za ljudsko oko. Ali, ako forma to zahtijeva, ovaj ritam može biti poremećen.

Korak 4

Kada je obris spreman, možete odabrati glavne boje i boje velike forme. Uradite to na posebnom sloju ispod obrisa.

Korak 5

Izgladite obris crtanjem senke duž unutrašnje ivice.

Nastavite sa dodavanjem senki. Kao što ste možda primijetili dok crtate, neki oblici se mogu ispraviti.

Korak 6

Kreirajte novi sloj za istaknute dijelove.

Izaberite režim mešanja Overlay sa padajuće liste na panelu Slojevi. Draw svijetle boje preko oblasti koje želite da istaknete. Zatim izgladite svjetla pomoću Filter > Blur > Blur.

Dovršite sliku, zatim kopirajte i preslikajte gotovu polovinu slike, a zatim spojite slojeve sa polovicama da napravite cijelu sliku.

Korak 7

Sada astronaut treba da doda kontrast. Upotrijebite postavke Nivoa (Slika > Prilagodbe > Nivoi) da biste ga učinili svjetlijim, a zatim prilagodite nijansu pomoću opcije Balans boje (Slika > Prilagodbe > Balans boja).

Lik je sada spreman za animaciju.

III. Animacija karaktera

Korak 1

Napravite kopiju sloja (Layer > New > Layer Via Copy) i pomaknite je za 1 piksel gore i 2 piksela udesno. Ovo je ključna tačka u animaciji likova.

Smanjite neprozirnost originalnog sloja za 50% tako da možete vidjeti prethodni okvir. To se zove “Oguljenje luka” (način množine).

Korak 2

Sada savijte ruke i noge svog lika kao da trči.

● Istakni leva ruka Laso alat

● Koristeći FreeTransformTool (Edit > FreeTransform) i držeći pritisnut Control taster, pomerite ivice kontejnera tako da se ruka pomeri unazad.

● Prvo odaberite jednu nogu i malo je istegnite. Zatim drugu nogu stisnite naprotiv, tako da imate osjećaj kao da lik hoda.

● Koristite olovku i gumicu da ispravite dio desna ruka ispod lakta.

Korak 3

Sada morate potpuno ponovo nacrtati novi položaj ruku i nogu kao što je prikazano u drugom dijelu ove lekcije. Ovo je neophodno kako bi se osiguralo da slika izgleda jasno, jer transformacija uvelike izobličuje linije piksela.

Korak 4

Napravite kopiju drugog sloja i okrenite ga vodoravno. Sada imate 1 osnovnu pozu i 2 u pokretu. Vratite neprozirnost svih slojeva na 100%.

Korak 5

Idite na Window > Timeline za prikaz panela Timeline i kliknite na Kreiraj animaciju okvira.

Danas, programi kao što su Photoshop, Illustrator, Corel olakšavaju rad dizajnera i ilustratora. Uz njihovu pomoć možete raditi u potpunosti, a da vas ne ometa raspored piksela, kao što je bio slučaj krajem prošlog stoljeća. Sve potrebne kalkulacije obavezuje softver- grafički urednici. Ali postoje ljudi koji rade u drugom pravcu, ne samo drugačijem, već čak i potpuno suprotnom. Naime, oni se bave istim old-school rasporedom piksela kako bi dobili jedinstven rezultat i atmosferu u svojim radovima.

Primjer piksel umjetnosti. Fragment.

U ovom članku želimo govoriti o ljudima koji se bave piksel artom. Pogledajte pobliže njihova najbolja djela koja se, samo zbog složenosti implementacije, mogu bez pretjerivanja nazvati djelima savremena umetnost. Djela od kojih će vam zastati dah kada ih pogledate.

Pixel Art. Najbolji radovi i ilustratori


Grad. Autor: Zoggles


Dvorac iz bajke. Autor: Tinuleaf


Srednjovjekovno selo. Autor: Docdoom


Viseći vrtovi Babilona. Autor: Lunar Eclipse


Stambena zona. Autor:

U ovom vodiču u 10 koraka Kako nacrtati Pixel Art, naučit ću vas kako da kreirate "sprite" (jedan 2D lik ili objekat). Sam termin, naravno, dolazi iz video igrica.

Naučio sam kako da kreiram pixel art jer mi je bio potreban za grafiku u mojoj igrici. Nakon godina treninga, shvatio sam da je piksel umjetnost više umjetnost nego samo alat. Danas je pixel art vrlo popularna među programerima i ilustratorima.

Ovaj vodič je kreiran prije mnogo godina kako bi naučio ljude jednostavnim konceptima stvaranja piksel umjetnosti, ali je mnogo puta ažuriran tako da se značajno razlikuje od originalne verzije. Na internetu postoji mnogo tutorijala na istu temu, ali svi mi se čine previše komplikovanim ili predugačkim. pixel art nije nauka. Ne biste trebali računati vektore kada kreirate pixel art.

Alati

Jedna od glavnih prednosti kreiranja pixel arta je ta što vam nisu potrebni nikakvi napredni alati - grafički editor, podrazumevano instaliran na vašem računaru bi trebao biti dovoljan. Vrijedi napomenuti da postoje programi dizajnirani posebno za kreiranje pixel arta, kao što su Pro Motion ili Pixen (za Mac korisnike). Nisam ih lično testirao, ali čuo sam dosta toga pozitivne povratne informacije. U ovom tutorijalu koristiću Photoshop, koji, iako skup, sadrži mnogo korisnih alata za kreiranje umjetnosti, od kojih su neki vrlo korisni za pikselizaciju.


Kako nacrtati pixel art u Photoshopu

Kada koristite Photoshop, vaše glavno oružje će biti alat Pencil (B ključ), koji je alternativa alatu Brush. Olovka vam omogućava da bojite pojedinačne piksele bez preklapanja boja.

Trebat će nam još dva alata: “Izbor” (tipka M) i “Čarobni štapić” (tipka W) da bismo odabrali i prevukli, ili kopirali i zalijepili. Zapamtite da ako držite pritisnutu tipku Alt ili Shift dok pravite selekciju, možete dodati ili isključiti odabrane objekte iz selekcije. trenutna lista dodijeljeno. Ovo je korisno kada trebate odabrati neravne objekte.

Možete koristiti i kapaljku za prijenos boja. Postoji hiljadu razloga zašto je očuvanje boja u piksel artu važno, pa ćete poželjeti da zgrabite nekoliko boja i koristite ih iznova i iznova.

Na kraju, pobrinite se da zapamtite sve prečice, jer vam to može uštedjeti mnogo vremena. Obratite pažnju na "X" koji se prebacuje između primarne i sekundarne boje.

Linije

Pikseli su isti mali kvadrati u boji. Prvo morate razumjeti kako efikasno rasporediti ove kvadrate da biste stvorili liniju koju želite. Pogledat ćemo dvije najčešće vrste linija: ravne i zakrivljene.

Prave linije

Znam šta mislite: ovdje je sve tako jednostavno da nema smisla ulaziti u bilo šta. Ali kada su u pitanju pikseli, čak i ravne linije mogu postati problem. Moramo izbjegavati nazubljene dijelove - male dijelove linije zbog kojih izgleda neravno. Pojavljuju se ako je jedan dio linije veći ili manji od ostalih koji ga okružuju.

Zakrivljene linije

Crtanje zakrivljene linije, morate osigurati da pad ili porast bude ujednačen po cijeloj dužini. U ovom primjeru, uredna linija ima intervale 6 > 3 > 2 > 1, ali linija s intervalima 3 > 1< 3 выглядит зазубренной.

Sposobnost crtanja linija je ključni element piksel umjetnosti. Malo dalje ću vam reći o anti-aliasingu.

Konceptualizacija

Za početak će vam trebati dobra ideja! Pokušajte vizualizirati ono što ćete raditi u piksel umjetnosti - na papiru ili samo u mislima. Kada steknete ideju o crtežu, možete se koncentrirati na samu pikselizaciju.

Teme za razmišljanje

  • Za šta će se koristiti ovaj sprite? Je li za web stranicu ili za igru? Hoće li ga kasnije biti potrebno napraviti animiranim? Ako je tako, onda će ga morati učiniti manjim i manje detaljnim. Suprotno tome, ako ne budete radili sa spriteom u budućnosti, možete na njega pričvrstiti onoliko dijelova koliko vam je potrebno. Stoga unaprijed odlučite za što je točno ovaj sprite potreban i odaberite optimalne parametre.
  • Koja su ograničenja? Ranije sam spomenuo važnost očuvanja cvijeća. Glavni razlog je ograničena paleta boja zbog sistemski zahtjevi(što je krajnje malo vjerovatno u naše vrijeme) ili zbog kompatibilnosti. Ili zbog tačnosti ako oponašate poseban stil C64, NES i tako dalje. Također je vrijedno razmotriti dimenzije vašeg spritea i da li se previše izdvaja od pozadinskih objekata koji su vam potrebni.

Hajde da probamo!


U ovom tutorijalu nema ograničenja, ali sam želio da budem siguran da će moja slika piksela biti dovoljno velika tako da možete detaljno vidjeti šta se dešava u svakom od koraka. U tu svrhu odlučio sam da kao model koristim Lucha Lawyera, lika iz svijeta rvanja. Savršeno bi se uklopio u borbenu igru ​​ili brzu akcijsku igru.

Circuit

Crni obris će biti dobra osnova za vaš sprite, tako da ćemo od toga početi. Odabrali smo crnu jer izgleda dobro, ali je i malo tamna. Kasnije u tutorijalu reći ću vam kako promijeniti boju konture kako biste povećali realizam.

Postoje dva pristupa kreiranju konture. Možete nacrtati obris rukom, a zatim ga malo prilagoditi, ili možete crtati sve jedan po jedan piksel. Da, sve ste dobro shvatili, govorimo o hiljadu klikova.

Metoda koju odaberete ovisi o veličini sprite-a i vašim vještinama pikseliranja. Ako je sprite zaista ogroman, onda bi bilo logičnije nacrtati ga rukom kako biste stvorili grubi oblik, a zatim ga obrezali. Vjerujte mi, to je mnogo brže od pokušaja da odmah nacrtate savršenu skicu.

U svom tutorijalu kreiram prilično veliki sprite, tako da će prvi metod biti prikazan ovdje. Biće lakše ako sve jasno pokažem i objasnim šta se desilo.

Prvi korak: grubi nacrt

Koristeći miš ili tablet, nacrtajte grubi obris svog spritea. Pazite da NIJE previše sirov, što znači da izgleda otprilike onako kako vidite svoj konačni proizvod.

Moja skica se skoro u potpunosti poklopila sa onim što sam planirao.

Drugi korak: Polirajte obris

Započnite povećanjem slike za 6 ili 8 puta. Trebali biste jasno vidjeti svaki piksel. I onda, očistite obris. Posebno je vrijedno obratiti pažnju na "zalutale piksele" (cijeli obris ne bi trebao biti deblji od jednog piksela), riješite se nazubljenih rubova i dodajte male detalje koje smo propustili u prvom koraku.

Čak i veliki sprajtovi vrlo rijetko prelaze 200 x 200 piksela. Izraz „uradi više sa manje“ je odličan način da se opiše proces pikselizacije. Uskoro ćete vidjeti da je čak i jedan piksel bitan.

Pojednostavite svoj nacrt što je više moguće. Kasnije ćemo ući u detalje, sada morate poraditi na pronalaženju velikih piksela, kao što je, na primjer, segmentacija mišića. Stvari trenutno ne izgledaju sjajno, ali budite strpljivi.

Boja

Kada je kontura gotova, dobijamo neku vrstu bojenja koju treba popuniti bojama. Boja, zalivanje i drugi alati će nam pomoći u tome. Biranje boja može biti teško, ali teorija boja očigledno nije tema ovog članka. Bilo kako bilo, postoji nekoliko osnovnih pojmova koje ćete morati znati.

HSB model u boji


Ovo Engleska skraćenica, sastavljeno od riječi "Nijansa, zasićenost, svjetlina." To je samo jedan od mnogih kompjuterskih modela boja (ili numeričkih prikaza boje). Vjerovatno ste čuli za druge primjere kao što su RGB i CMYK. Većina uređivača slika koristi HSB za odabir boja, pa ćemo se fokusirati na to.

Hue– Nijansa je ono što smo nekada nazivali bojom.

Saturation– Saturation – određuje intenzitet boje. Ako je vrijednost 100%, onda je ovo maksimalna svjetlina. Ako ga spustite, pojavit će se zatamnjenost u boji i ona će “siviti”.

Osvetljenost– svetlost koja emituje boju. Na primjer, za crnu osobu ovaj pokazatelj je 0%.

Odabir boja

Na vama je da odlučite koje boje ćete odabrati, ali morate imati na umu nekoliko stvari:

  • Mutne i nezasićene boje izgledaju realnije od crtanih.
  • Razmislite o krugu boja: što su dvije boje udaljenije na točku, to se gore slažu. Istovremeno, crvena i narandžasta, koje su u neposrednoj blizini jedna drugoj, izgledaju sjajno zajedno.

  • Što više boja koristite, to će vaš crtež izgledati mutnije. Stoga, odaberite nekoliko osnovnih boja i koristite ih. Podsjetimo da je Super Mario, svojevremeno, nastao isključivo od kombinacija smeđe i crvene.

Primjena boja

Nanošenje boje je vrlo jednostavno. Ako koristite Photoshop, jednostavno odaberite željeni fragment i odaberite ga sa čarobnim štapićem(taster W), a zatim ga ispunite bojom prednjeg plana (Alt-F) ili dodatna boja Ctrl-F).

Sjenčanje

Sjenčanje je jedno od najvažniji delovi potraga za dobijanjem statusa polubogove pikselacije. U ovoj fazi duh ili počinje da izgleda bolje ili se pretvara u čudnu supstancu. Slijedite moje upute i sigurno ćete uspjeti.

Prvi korak: odaberite izvor svjetlosti

Prvo biramo izvor svjetlosti. Ako je vaš sprite dio većeg fragmenta koji sadrži sopstveni izvori osvetljenje, kao što su lampe, baklje i tako dalje. I svi oni mogu imati različite efekte na to kako duh izgleda. Međutim, odabir udaljenog izvora svjetlosti kao što je sunce odlična je ideja za većinu piksela umjetnosti. Za igre, na primjer, morat ćete stvoriti najsvjetliji mogući sprite, koji se zatim može prilagoditi okruženju.

Obično se odlučim za udaljeno svjetlo negdje gore ispred sprite-a, tako da su samo prednji i gornji dio sprite-a osvijetljeni, a ostatak zasjenjen.

Drugi korak: direktno sjenčanje

Nakon što smo odabrali izvor svjetlosti, možemo početi zatamnjivati ​​područja koja su najudaljenija od njega. Naš model rasvjete nalaže da donji dio glave, ruku, nogu itd. treba biti prekriven sjenom.

Setimo se da ravne stvari ne mogu bacati senke. Uzmite komad papira, zgužvajte ga i okrenite preko stola. Kako ste shvatili da više nije ravno? Upravo si vidio senke oko njega. Koristite sjenčanje kako biste naglasili nabore na odjeći, mišiće, krzno, boju kože i tako dalje.

Treći korak: Meke senke

Drugu nijansu, koja je svjetlija od prve, treba koristiti za stvaranje mekih sjenki. Ovo je neophodno za područja koja nisu direktno osvijetljena. Mogu se koristiti i za prelazak sa svijetlih na tamne površine, te na neravnim površinama.

Četvrti korak: osvijetljena područja

Mjesta koja primaju direktne zrake svjetlosti također moraju biti istaknuta. Vrijedi napomenuti da bi trebalo biti manje svjetla nego sjenki, inače će izazvati nepotrebnu pažnju, odnosno isticati se.

Uštedite se glavobolje tako što ćete zapamtiti jedno jednostavno pravilo: prvo sjene, a zatim svjetline. Razlog je jednostavan: ako nema sjenki, preveliki fragmenti će se ispuhati, a kada nanesete sjene, morat ćete ih smanjiti.

Nekoliko korisnih pravila

Sjene su uvijek izazov za početnike, pa evo nekoliko pravila kojih se morate pridržavati prilikom sjenčanja.

  1. Nemojte koristiti gradijente. Najčešća greška početnika. Gradijenci izgledaju užasno i ne pokazuju ni približno kako se svjetlost igra na površinama.
  2. Nemojte koristiti meko sjenčanje. Govorim o situaciji u kojoj je sjena predaleko od konture, jer tada izgleda jako zamućeno i sprečava da se izvor svjetlosti prepozna.
  3. Nemojte koristiti previše senki. Lako je pomisliti da „što je više boja, slika je realnija“. Bilo kako bilo, u pravi život Navikli smo vidjeti stvari u tamnom ili svijetlom spektru, a naš mozak će filtrirati sve između. Koristite samo dvije tamne (tamne i vrlo tamne) i dvije svijetle (svijetle i vrlo svijetle) i nanesite ih preko osnovne boje, a ne jedno na drugo.
  4. Nemojte koristiti previše slične boje. Nema stvarne potrebe za korištenjem gotovo identičnih boja osim ako ne želite napraviti stvarno zamućen sprite.

Dithering

Očuvanje boja je nešto na šta kreatori piksel arta zaista moraju da obrate pažnju. Još jedan način da dobijete više senki bez upotrebe više boje se naziva "dithering". Baš kao u tradicionalno slikarstvo Koriste se "šrafiranje" i "unakrsno šrafiranje", odnosno bukvalno dobijete nešto između dvije boje.

Jednostavan primjer

Evo jednostavnog primjera kako pomoću ditheringa možete kreirati četiri opcije sjenčanja od dvije boje.

Napredni primjer

Uporedite gornju sliku (napravljenu pomoću gradijenta u Photoshopu) sa slikom kreiranom od just tri boje koristeći dithering. Imajte na umu da se različiti uzorci mogu koristiti za stvaranje "susjednih boja". Bit će vam lakše razumjeti princip ako sami kreirate nekoliko uzoraka.


Aplikacija

Dithering može vašem duhu dati predivan retro izgled, budući da su mnoge rane video igre intenzivno koristile ovu tehniku ​​zbog malog broja dostupnih paleta boja (ako želite vidjeti puno primjera ditheringa, pogledajte igre razvijene za Sega Postanak). I sam ne koristim često ovu metodu, ali u edukativne svrhe pokazaću kako se može primijeniti na našem spriteu.

Dither možete koristiti do mile volje, ali vrijedi napomenuti da ga samo nekoliko ljudi koristi zaista dobro.

Selektivno konturiranje

Selektivno konturiranje, koje se još naziva i odabrani obris, je podvrsta sjenčanja konture. Umjesto crne linije, biramo boju koja će izgledati skladnije na vašem duhu. Osim toga, mijenjamo svjetlinu ovog obrisa bliže rubovima spritea, omogućavajući izvoru boje da odredi koje boje trebamo koristiti.

Do sada smo koristili crni obris. U tome nema ništa loše: crna izgleda sjajno, a također omogućava da se duh izdvoji od okolnih objekata. Ali korištenjem ove metode žrtvujemo realizam, koji bi nam u nekim slučajevima mogao biti koristan, budući da naš duh i dalje izgleda crtano. Selektivnim konturiranjem se to rješava.

Primijetit ćete da sam koristio selaute da ublažim definiciju njegovih mišića. Konačno, naš sprite počinje izgledati kao jedan komad, a ne ogromna količina odvojeni fragmenti.

Uporedite ovo sa originalom:

  1. Smoothing

Način na koji zaglađivanje funkcioniše je jednostavan: dodavanje srednjih boja na ivice kako bi izgledale glađe. Na primjer, ako imate crnu liniju na bijeloj pozadini, tada će se mali sivi pikseli dodati njenim prekidima duž ruba.

Tehnika 1: Izglađivanje pregiba

Općenito, trebate dodati srednje boje tamo gdje ima nabora, inače će linija izgledati nazubljeno. Ako i dalje izgleda neujednačeno, dodajte još jedan sloj svjetlijih piksela. Smjer nanošenja međusloja mora se poklapati sa smjerom krivulje.

Mislim da to ne mogu bolje objasniti a da ne zakomplikujem. Samo pogledajte sliku i shvatićete na šta mislim.

Tehnika 2: Zaokruživanje izbočina

Tehnika 3: brisanje završetaka linija

Aplikacija

Sada, hajde da primenimo anti-aliasing na naš otisak. Imajte na umu da ako želite da vaš sprite izgleda dobro na bilo kojoj boji pozadine, ne biste trebali izgladiti vanjsku stranu linije. U suprotnom, vaš sprite će imati vrlo neprikladan oreol oko sebe gdje se susreće s pozadinom, te će se stoga previše isticati na bilo kojoj pozadini.

Efekat je veoma suptilan, ali je od velike važnosti.

Zašto to morate učiniti ručno?

Možda ćete se zapitati: "Zašto jednostavno ne primijeniti filter grafičkog uređivača na naš sprite ako želimo da izgleda glatko?" Odgovor je također jednostavan - niti jedan filter neće učiniti vaš sprite tako jasnim i čistim kao ručni rad. Imat ćete potpunu kontrolu ne samo nad bojama koje koristite, već i gdje ih koristiti. Osim toga, vi znate bolje od bilo kojeg filtera gdje će anti-aliasing biti prikladan i gdje postoje područja u kojima će pikseli jednostavno izgubiti svoj kvalitet.

Finishing

Vau, približavamo se trenutku kada možete isključiti računar i uzeti hladnu flašu piva iz frižidera. Ali još nije stigao! Posljednji dio govori o tome šta razlikuje strastvenog amatera od iskusnog profesionalca.

Napravite korak unazad i dobro pogledajte svoj duh. Postoji mogućnost da i dalje izgleda "vlažno". Provedite malo vremena usavršavajući se i uvjerite se da je sve savršeno. Bez obzira koliko ste već umorni, pred vama je zabavni dio. Dodajte detalje kako bi vaš sprite izgledao zanimljivije. Ovdje dolaze u obzir vaše vještine i iskustvo pikseliranja.

Možda ćete biti iznenađeni činjenicom da sve ovo vrijeme naš Lucha advokat nije imao oči, ili da je paket koji je držao bio prazan. Zapravo, razlog leži u činjenici da sam htio zadržati male detalje. Obratite pažnju i na ukrase koje sam dodala njegovim trakama za glavu, mušicu na pantalonama... a ko bi bio bez bradavica? Također sam mu malo potamnio donji dio torza kako bi mu ruka više isticala uz tijelo.

Konačno ste gotovi! Lucha Lawyer je lagan, jer ima samo 45 boja (ili može biti super težak - sve zavisi od ograničenja vaše palete) i njegova rezolucija je približno 150 x 115 piksela. Sada možete otvoriti svoje pivo!

Potpuni napredak:

Uvek je smešno. Evo GIF-a koji prikazuje evoluciju našeg duha.

  1. Naučite osnove umjetnosti i vježbajte tradicionalne tehnike. Sva znanja i vještine potrebne za crtanje i crtanje mogu se primijeniti na pikselizaciju.
  2. Počnite s malim sprijtovima. Najteži dio je naučiti kako postaviti mnogo detalja koristeći minimalan broj piksela kako ne bi napravili sprite velike kao moj.
  3. Proučavajte radove umjetnika kojima se divite i ne bojte se biti neoriginalni. Najbolji način učenje – ponavljanje fragmenata tuđeg rada. Za proizvodnju sopstveni stil potrebno je mnogo vremena.
  4. Ako nemate tablet, kupite ga. Konstantni nervni slomovi i stres uzrokovani kontinuiranim klikom lijevom tipkom miša nisu zabavni i nije vjerovatno da će impresionirati pripadnike suprotnog spola. Koristim mali Wacom Graphire2 - sviđa mi se koliko je kompaktan i prenosiv. Možda biste više voljeli veći tablet. Prije kupovine napravite kratku probnu vožnju.
  5. Podijelite svoj rad s drugima kako biste saznali njihovo mišljenje. Ovo bi takođe mogao biti dobar način da steknete nove geek prijatelje.

P.S.

Originalni članak se nalazi. Ako imate linkove do cool tutorijala koje je potrebno prevesti, pošaljite ih našoj zabavi. Ili pišite direktno u grupne poruke