Što je Pixel Art? Primjeri i kako to naučiti. Pixel Art


Pixel Art je vrlo popularan za igranje i ovih dana i postoji nekoliko razloga za to!

Dakle, ono što osvaja Pixel Art:

  1. Percepcija. Pixel art izgleda nevjerojatno! Mnogo toga se može reći o svakom pojedinačnom pikselu u spriteu.
  2. Nostalgija. Pixel Art vraća sjajan nostalgični osjećaj igračima koji su odrasli igrajući Nintendo, Super Nintendo ili Genesis (kao ja!)
  3. Jednostavnost učenja. Pixel art jedna je od digitalnih umjetnosti koju je najlakše naučiti, pogotovo ako ste više programer nego umjetnik ;]

Dakle, želite se okušati u Pixel Artu? Zatim slijedite mene i pokazat ću vam kako napraviti jednostavan, ali učinkovit lik kojeg možete koristiti u vlastitoj igri! Plus, kao bonus, pogledat ćemo kako ga integrirati u iPhone igre!

Za uspješno učenje potreban vam je Adobe Photoshop. Ako ga nemate, možete preuzeti besplatnu probnu verziju s Adobe web stranice ili torrenta.

Što je Pixel Art?

Prije nego što počnemo, razjasnimo što je Pixel Art, nije tako očito kao što možda mislite. Najlakši način da definirate što je Pixel Art je da navedete što to nije, naime: sve gdje se pikseli stvaraju automatski. Evo nekoliko primjera:

Gradijent: Odaberite dvije boje i izračunajte boju piksela između njih. Izgleda cool, ali nije Pixel Art!

Alat za zamućivanje: otkrivanje piksela i njihovo repliciranje/uređivanje kako bi se napravila nova verzija prethodne slike. Opet, nije dijagram piksela.

Alat za glačanje(uglavnom generiranje novih piksela u različitim bojama kako bi nešto bilo "glatko"). Morate ih izbjegavati!

Neki će reći da čak ni automatski generirane boje nisu Pixel Art, jer zahtijevaju sloj za efekte miješanja (miješanje piksela između dva sloja prema zadanom algoritmu). No, budući da većina uređaja trenutačno radi s milijunima boja, ovu izjavu možemo zanemariti. Međutim, korištenje malog broja boja dobra je praksa u Pixel Artu.

Ostali alati poput (linija) ili alat za kantu za boju(Paint Bucket) također automatski generira piksele, ali budući da ih možete postaviti da ne izglađuju krivulju ispunjenih piksela, ovi se alati smatraju prilagođenima Pixel Art-u.

Stoga smo otkrili da Pixel Art zahtijeva puno pažnje pri postavljanju svakog piksela u sprite, najčešće ručno i s ograničenom paletom boja. Ajmo sad na posao!

Početak rada

Prije nego počnete izrađivati ​​svoj prvi Pixel Art element, trebali biste znati da se Pixel Art ne može skalirati. Ako ga pokušate smanjiti, sve će izgledati mutno. Ako ga pokušate povećati, sve će izgledati prihvatljivo sve dok koristite skaliranje koje je višekratnik dva (ali, naravno, neće biti jasnoće).

Da biste izbjegli ovaj problem, prvo morate razumjeti koliki bi trebao biti vaš lik u igri ili element igre, a zatim se bacite na posao. Najčešće se to temelji na veličini zaslona uređaja koji ciljate i koliko "piksela" želite vidjeti.

Na primjer, ako želite da vaša igra izgleda dvostruko veća na iPhoneu 3GS ("Da, stvarno želim svojoj igri dati pikselizirani retro izgled!"), koji ima rezoluciju zaslona od 480x320 piksela, tada morate raditi na pola manje rezolucije u ovom slučaju to će biti 240x160 piksela.

Otvorite novi Photoshop dokument ( Datoteka → Novo…) i postavite veličinu na veličinu zaslona vaše igre, zatim odaberite veličinu za svoj lik.

Svaka ćelija ima 32x32 piksela!

Odabrao sam 32x32px ne samo zato što je odličan za veličinu zaslona koju sam odabrao, već i zato što je 32x32px također višekratnik 2, što je zgodno za motore igračaka (veličine pločica često su višekratnici 2, teksture su poravnate). višekratnik 2, itd.

Čak i ako mehanizam koji koristite podržava bilo koju veličinu slike, uvijek možete pokušati raditi s parnim brojem piksela. U tom slučaju, ako sliku treba skalirati, veličina će biti bolje podijeljena, što će rezultirati boljom izvedbom.

Kako nacrtati Pixel Art lik

Poznato je da je Pixel Art jasna i lako čitljiva grafika: možete definirati crte lica, oči, kosu, dijelove tijela sa samo nekoliko točkica. Međutim, veličina slike komplicira zadatak: što je vaš lik manji, to ga je teže nacrtati. Da biste praktičnije pristupili zadatku, odaberite ono što će biti najmanje veličine karakternih osobina. Uvijek biram oči jer su one jedan od najboljih načina da oživite lik.

U Photoshopu odaberite alat za olovku(Alat za olovke). Ako ga ne možete pronaći, samo pritisnite i držite alat alat za četke(Brush Tool) i odmah ćete ga vidjeti (trebao bi biti drugi na popisu). Morat ćete samo promijeniti veličinu na 1px (možete kliknuti na traku s opcijama alata i promijeniti veličinu ili jednostavno držati tipku [).

Također ćete trebati Alat za brisanje(Eraser Tool), pa kliknite na njega (ili pritisnite tipku E) i promijenite njegove postavke odabirom s padajućeg popisa Način rada:(Način:) Olovka(Olovka) (budući da u ovom načinu nema ditheringa).

Sada počnimo s pikseliziranjem! Nacrtajte obrve i oči kao što je prikazano na slici ispod:


ej! Pikselizirana sam!!

Mogli biste već početi s Lineartom (gdje se crtanje vrši linijama), ali praktičniji način je crtanje siluete lika. Dobra vijest je da u ovoj fazi ne morate biti profesionalac, samo pokušajte zamisliti dimenzije dijelova tijela (glava, tijelo, ruke, noge) i početnu pozu lika. Pokušajte napraviti nešto poput ovoga u sivoj boji:


U ovoj fazi ne morate biti profesionalac
Imajte na umu da sam ostavio i prazan prostor. Ne morate zapravo ispuniti cijelo platno, ostavite mjesta za buduće okvire. U ovom slučaju, bit će vrlo korisno zadržati istu veličinu platna za sve njih.

Nakon što ste dovršili siluetu, vrijeme je da . Sada morate biti pažljiviji s postavljanjem piksela, stoga za sada ne brinite o odjeći, oklopu itd. Radi sigurnosti, možete dodati novi sloj kako nikada ne biste izgubili svoju izvornu siluetu.


Ako smatrate da je alat Pencil presporo za crtanje, uvijek ga možete koristiti (Line Tool), samo zapamtite da nećete moći pozicionirati piksele tako precizno kao što biste to učinili s olovkom. Morat ćete postaviti kao ispod:

Odaberi pritiskom i držanjem Alat za pravokutnik(Alat za pravokutnik)

Idite na ploču s opcijama alata na padajućem popisu Odaberite način alata(Outline Draw Mode) odaberite Pixel, promijenite Težina(Širina) za 1px (ako već nije učinjeno) i poništite odabir Anti-alias(Glađenje). Evo kakav bi trebao biti:

Imajte na umu da nisam napravio donji obris stopala. Ovo nije obavezno jer stopala nisu toliko važan dio nogu da bi se istakla, a na platnu štedite jednu liniju piksela.

Nanošenje boja i sjena

Sada ste spremni za početak bojanja našeg lika. Ne brinite oko odabira pravih boja, kasnije će se vrlo lako promijeniti, samo pazite da svaka ima "svoju boju". Koristite zadane boje na kartici Swatchevi(Prozor → Swatchevi).

Obojite svoj lik kao što je prikazano ispod (ali slobodno budite kreativni i koristite vlastite boje!)


Dobra, kontrastna boja poboljšava čitljivost vašeg materijala!
Imajte na umu da još uvijek nisam napravio nikakve obrise za odjeću ili kosu. Uvijek zapamtite: sačuvajte što više piksela od nepotrebnih obrisa!

Ne gubite vrijeme slikajući svaki piksel. Da biste ubrzali stvari, koristite linije za istu boju, ili alat za kantu za boju(Paint Bucket Tool) za popunjavanje praznina. Usput, također će morati biti konfiguriran. Odaberi alat za kantu za boju na alatnoj traci (ili samo pritisnite tipku G) i promijenite tolerancija(Tolerancija) na 0 i uklonite oznaku Anti-alias(Glađenje).

Ako ikada budete trebali koristiti Alat za čarobni štapić(Magic Wand Tool) - vrlo koristan alat koji odabire sve piksele iste boje, a zatim ga postavlja na isti način kao alat "Paint Bucket" - bez tolerancije i anti-aliasinga.

Sljedeći korak, koji će od vas zahtijevati određeno znanje, je posvjetljivanje i sjenčanje. Ako nemate znanja kako prikazati svijetle i tamne strane, u nastavku ću vam dati male upute. Ako nemate vremena ili želje da to naučite, možete preskočiti ovaj korak i prijeći na odjeljak Začinite svoju paletu, jer nakon svega, jednostavno možete učiniti da vaše sjenčanje izgleda kao moj primjer!


Koristite isti izvor svjetla za cijelo sredstvo

Pokušajte dati obrise kako želite/možete, jer nakon toga sredstvo počinje izgledati zanimljivije. Na primjer, sada možete vidjeti nos, namrgođene oči, pramen kose, nabore na hlačama, itd. Također možete dodati neke svijetle točke na to, izgledat će još bolje:


Za sjenčanje koristite isti izvor svjetla

A sada, kao što sam obećao, mali vodič kroz svjetlo i sjene:

Začinite svoju paletu

Mnogi ljudi koriste zadanu paletu boja, ali budući da mnogi ljudi koriste te boje, vidimo ih u mnogim igrama.

Photoshop ima veliki izbor boja u standardnoj paleti, ali nemojte se previše oslanjati na njega. Najbolje je napraviti vlastite boje klikom na glavnu paletu na dnu alatne trake.

Zatim, u prozoru Birač boja, pregledajte desnu bočnu traku da biste odabrali boju i glavno područje da biste odabrali željenu svjetlinu (svjetliju ili tamniju) i zasićenost (sočniju ili tamniju).


Kada pronađete pravu, kliknite OK i ponovno konfigurirajte alat Paint Bucket. Ne brinite, tada možete jednostavno poništiti oznaku u polju za potvrdu 'Contiguous' i kada bojite novom bojom, svi novi pikseli s istom bojom pozadine također će biti obojani.

Ovo je još jedan razlog zašto je važno raditi s malim brojem boja i uvijek koristiti istu boju za isti element (majica, kosa, kaciga, oklop itd.). Ali ne zaboravite koristiti različite boje za druga područja, inače će naš crtež biti previše obojen!

Poništite opciju "Contiguous" da biste odabrane piksele ispunili istom bojom

Promijenite boje ako želite i dobit ćete glamurozniju boju likova! Možete čak promijeniti boju obrisa, samo pazite da se dobro stope s pozadinom.


Na kraju, napravite test boje pozadine: stvorite novi sloj ispod svog lika i ispunite ga različitim bojama. Ovo je potrebno kako biste bili sigurni da će vaš lik biti vidljiv na svijetlim, tamnim, toplim i hladnim podlogama.


Kao što vidite, isključio sam anti-aliasing u svim alatima koje sam do sada koristio. Ne zaboravite to učiniti iu drugim alatima, na primjer, Elipsasti šator(Ovalno područje odabira) i Laso(Laso).

Pomoću ovih alata možete jednostavno promijeniti veličinu odabranih dijelova ili ih čak rotirati. Da biste to učinili, upotrijebite bilo koji alat za odabir (ili pritisnite tipku M) za odabir područja, kliknite desnom tipkom miša i odaberite Slobodna transformacija(Free Transform), ili jednostavno pritisnite Ctrl + T . Da biste promijenili veličinu odabranog područja, povucite jednu od ručica duž perimetra okvira transformacije. Za promjenu veličine odabira uz zadržavanje omjera, držite tipku Shift i povucite jednu od kutnih ručica.

Međutim, Photoshop automatski izglađuje sve što se uređuje s Slobodna transformacija pa prije uređivanja idi na Uredi → Postavke → Općenito(Ctrl + K) i promijenite interpolacija slike(Interpolacija slike) uključena Najbliže susjedstvo(najbliži susjed). Ukratko, na Najbliže susjedstvo novi položaj i veličina izračunavaju se vrlo grubo, ne primjenjuju se nove boje ili prozirne folije i zadržavaju se boje koje odaberete.


Integracija Pixel Art crteža u iPhone igre

U ovom odjeljku naučit ćete kako integrirati našu pikselnu umjetnost u igru ​​za iPhone pomoću okvira igre Cocos2d. Zašto razmatram samo iPhone? Jer, zahvaljujući nizu članaka o Unityju, (na primjer:, ili Igra u stilu Jetpack Joyride u Unity 2D) već znate kako raditi s njima u Unityju, a iz članaka o Craftyju (Igre preglednika: Snake) i Impact (Uvod u stvaranje igara za preglednike na Impactu) naučili ste kako ih ugraditi na platno i stvarati igre za preglednike.

Ako ste novi u Cocos2D ili iPhone razvoju općenito, predlažem da počnete s jednim od Cocos2d i iPhone vodiča. Ako imate instaliran Xcode i Cocos2d, čitajte dalje!

Napravite novi projekt iOS → cocos2d v2.x → cocos2d iOS predložak, nazovite ga PixelArt i odaberite iPhone kao uređaj. Povucite stvorenu pikselnu umjetnost, na primjer: sprite_final.png u svoj projekt, a zatim je otvorite HelloWorldLayer.m i zamijenite metodu inicijalizacije sa sljedećim:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

Postavimo sprite na lijevu stranu ekrana i okrenemo ga tako da gleda udesno. Kompajlirajte, pokrenite i tada ćete vidjeti svoj sprite na ekranu:


Međutim, zapamtite, kao što smo raspravljali ranije u ovom vodiču, htjeli smo umjetno povećati piksele tako da se svaki piksel primjetno razlikuje od ostalih. Dakle, dodajte ovu novu liniju unutar metode inicijalizacije:

Ljestvica heroja = 2,0;

Ništa komplicirano, zar ne? Kompajlirajte, pokrenite i... čekajte, naš sprite je mutan!

To je zato što prema zadanim postavkama Cocos2d izravnava crtež kada ga skalira. Ne treba nam, pa dodajte sljedeći redak:

Ova linija konfigurira Cocos2d za skaliranje slika bez anti-aliasinga, tako da naš dječak i dalje izgleda "pikselirano" Kompajlirajte, pokrenite i... da, radi!


Obratite pozornost na prednosti korištenja Pixel Art grafike - možemo koristiti manju sliku od one koja je prikazana na zaslonu, štedeći puno memorije teksture. Ne trebamo čak ni izrađivati ​​zasebne slike za retina zaslone!

I što je sljedeće?

Nadam se da ste uživali u ovom vodiču i da ste naučili nešto više o pikselnoj umjetnosti! Prije rastanka, želim vam dati nekoliko savjeta:

  • Uvijek pokušajte izbjeći korištenje anti-aliasinga, gradijenata ili previše boja za svoje elemente. Ovo je za vaše dobro, pogotovo ako ste još početnik.
  • Ako STVARNO želite oponašati retro stil, pogledajte umjetnost u 8-bitnim ili 16-bitnim konzolnim igrama.
  • Neki stilovi ne koriste tamne obrise, drugi ne uzimaju u obzir utjecaj svjetla ili sjene. Sve ovisi o stilu! U našoj lekciji nismo nacrtali sjene, ali to ne znači da ih ne biste trebali koristiti.

Početniku se čini da je Pixel Art najlakša grafika za naučiti, ali zapravo nije tako jednostavna kao što se čini. Najbolji način da poboljšate svoje vještine je vježba, vježba i vježba. Toplo preporučujem da svoje radove objavite na forumima Pixel Arta kako bi vam drugi umjetnici dali savjet - to je sjajan način da poboljšate svoju tehniku! Počnite s malim, naporno vježbajte, dobijte povratne informacije i možete stvoriti nevjerojatnu igru ​​koja će vam donijeti mnogo novca i radosti!

"itemprop="image">

U ovom vodiču Kako crtati Pixel Art u 10 koraka, naučit ću vas kako stvoriti "sprite" (jedan 2D lik ili objekt). Sam izraz je, naravno, došao iz video igrica.

Naučio sam kako izraditi pixel art jer mi je trebao za grafiku u igri. Nakon godina treninga, navikao sam se i počeo shvaćati da je pixel art više umjetnost nego samo alat. Danas je pixel art vrlo popularan među programerima igara i ilustratorima.

Ovaj vodič je stvoren prije mnogo godina kako bi podučavao ljude jednostavnim konceptima pikselne umjetnosti, ali je mnogo puta proširen, pa se značajno razlikuje od izvorne verzije. Na webu ima mnogo tutorijala na istu temu, ali svi mi se čine previše kompliciranima ili predugačkima. Pixel art nije znanost. Ne morate izračunavati vektore dok stvarate pixel art.

Alati

Jedna od glavnih prednosti stvaranja pixel arta je ta što vam ne trebaju nikakvi napredni alati - grafički uređivač instaliran na vašem računalu prema zadanim postavkama trebao bi biti dovoljan. Vrijedno je spomenuti da postoje programi dizajnirani posebno za stvaranje pixel arta, kao što su Pro Motion ili Pixen (za Mac korisnike). Nisam ih osobno testirao, ali sam čuo puno pozitivnih povratnih informacija. U ovom vodiču koristit ću Photoshop koji, iako je skup, sadrži mnogo korisnih alata za stvaranje umjetnosti, od kojih su neki vrlo korisni za pikselizaciju.

Kako nacrtati Pixel Art u Photoshopu

Dok koristite Photoshop, vaše glavno oružje bit će Pencil Tool (tipka B), koji je alternativa Brush Toolu. Olovka vam omogućuje bojanje pojedinačnih piksela bez prepisivanja boja.

Još dva alata su korisna: odabir (tipka M) i čarobni štapić (tipka W) za odabir i povlačenje ili kopiranje i lijepljenje. Imajte na umu da držanjem tipke Alt ili Shift tijekom odabira možete dodati odabrane objekte ili ih isključiti s trenutnog popisa za odabir. Ovo je usput potrebno kada trebate odabrati neravne objekte.

Za prijenos boja možete koristiti i kapaljku. Postoji tisuću razloga zašto je važno sačuvati boje u pikselnoj umjetnosti, pa ćete morati uzeti nekoliko boja i koristiti ih uvijek iznova.

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

linije

Pikseli su isti kvadratići u boji. Prvo morate smisliti kako učinkovito rasporediti ove kvadrate da biste stvorili liniju koja vam je potrebna. Promotrit ćemo dvije najčešće vrste linija: ravne i zakrivljene.

ravne linije

Znam što ste mislili: ovdje je sve tako jednostavno da nema smisla upuštati se u nešto. Ali kada je riječ o pikselima, čak i ravne linije mogu biti problem. Moramo izbjegavati nazubljene dijelove - male dijelove crte zbog kojih ona izgleda nazubljeno. Pojavljuju se ako je jedan od dijelova linije veći ili manji od ostalih koji ga okružuju.

zakrivljene linije

Prilikom crtanja zakrivljenih linija morate paziti da pad ili uspon bude ravnomjeran duž cijele duljine. U ovom primjeru, uredna linija ima intervale 6 > 3 > 2 > 1, ali linija s intervalima 3 > 1< 3 выглядит зазубренной.

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

Konceptualizacija

Za početak potrebna vam je dobra ideja! Pokušajte vizualizirati što ćete učiniti u pixel artu – na papiru ili samo u svom umu. Imajući ideju o crtežu, možete se koncentrirati na samu pikselizaciju.

Teme za razmišljanje

  • Za što će se ovaj sprite koristiti? Je li to za web stranicu ili za igru? Hoće li ga kasnije biti potrebno animirati? Ako da, morat će biti manji i manje detaljan. Suprotno tome, ako u budućnosti ne budete radili s figurom, možete joj priložiti onoliko detalja koliko vam je potrebno. Stoga unaprijed odlučite za što je točno potreban ovaj sprite i odaberite optimalne parametre.
  • Koja su ograničenja? Ranije sam spomenuo važnost očuvanja boja. Glavni razlog je ograničena paleta boja zbog zahtjeva sustava (što je vrlo malo vjerojatno u naše vrijeme) ili zbog kompatibilnosti. Ili za preciznost, ako oponašate određeni stil C64, NES, i tako dalje. Također je vrijedno razmotriti dimenzije vašeg spritea i ističe li se previše na pozadini potrebnih objekata.

Pokušajmo!

U ovom vodiču nema ograničenja, ali htio sam biti siguran da je moj piksel art dovoljno velik da možete detaljno vidjeti što se događa u svakom od koraka. U tu svrhu odlučio sam kao model koristiti Luchu Lawyera, lika iz svijeta hrvanja. Savršeno bi se uklopio u borilačku igru ​​ili dinamičan akcijski film.

krug

Crni obris bit će dobra osnova za vaš sprite, pa ćemo odatle početi. Odabrali smo crnu jer dobro izgleda, ali i pomalo tamna. Kasnije u vodiču, pokazat ću vam kako promijeniti boju obrisa da povećate realizam.

Postoje dva pristupa stvaranju obrisa. Možete crtati putanju slobodnom rukom i zatim je malo dotjerati ili crtati sve piksel po piksel. Da, dobro ste shvatili, govorimo o tisuću klikova.

Izbor metode ovisi o veličini spritea i vašim vještinama u pikselima. Ako je sprite stvarno ogroman, onda bi bilo logičnije nacrtati ga rukom kako biste stvorili grubi oblik, a zatim ga podrezati. Vjerujte mi, puno je brže nego pokušati odmah nacrtati savršenu skicu.

U svom vodiču stvaram prilično veliki sprite, tako da će prva metoda biti prikazana ovdje. Bit će lakše ako sve vizualno prikažem i objasnim što se dogodilo.

Prvi korak: Grubi nacrt

Pomoću miša ili tableta nacrtajte grubi obris svog duha. Pazite da NE bude PREVIŠE sirovo, tj. da izgleda otprilike onako kako vidite svoj konačni proizvod.

Moja se skica gotovo u potpunosti poklopila s onim što sam planirao.

Drugi korak: ispolirajte obris

Započnite povećanjem slike 6 ili 8 puta. Morate jasno vidjeti svaki piksel. Zatim očistite obris. Posebno obratite pozornost na "zalutale piksele" (cijeli obris ne smije biti deblji od jednog piksela), riješite se nazubljenih rubova i dodajte sitne detalje koji su nam promakli u prvom koraku.

Čak i veliki spriteovi rijetko prelaze 200 x 200 piksela. Izraz "učiniti više s manje" izvrstan je način za opisivanje procesa pikselizacije. Uskoro ćete vidjeti da je i jedan piksel bitan.

Pojednostavite svoj nacrt što je više moguće. Kasnije ćemo se pozabaviti detaljima, sada morate raditi na pronalaženju velikih piksela, kao što je, na primjer, segmentacija mišića. Stvari trenutno ne izgledaju najbolje, ali imajte malo strpljenja.

Boja

Kada je obris spreman, dobivamo neku vrstu boje koju treba ispuniti bojama. Boja, ispuna i drugi alati pomoći će nam u tome. Usklađivanje boja može biti teško, ali teorija boja očito nije tema ovog članka. Bilo kako bilo, postoji nekoliko osnovnih pojmova koje ćete morati znati.

HSB model u boji

Ovo je engleska kratica sastavljena od riječi "Hue, Saturation, Brightness". To je samo jedan od mnogih računalnih modela boja (ili numeričkih prikaza boja). Vjerojatno ste čuli za druge primjere poput RGB i CMYK. Većina uređivača slika koristi HSB za odabir boja, pa ćemo se usredotočiti na njega.

Nijansa Nijansa je ono što smo nekada nazivali bojom.

Zasićenost– Saturation – određuje intenzitet boje. Ako je vrijednost 100%, to je maksimalna svjetlina. Ako ga spustite, u boji će se pojaviti tupost i ona će "postati siva".

svjetlina- svjetlost koja emitira boju. Na primjer, za crnu, ovaj pokazatelj je 0%.

Odabir boja

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

  • Nježne i nezasićene boje izgledaju realističnije od crtanih.
  • Zamislite kotač boja: što su dvije boje dalje na njemu, to se lošije stapaju. U isto vrijeme, crvena i naranč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. Sjetite se da je Super Mario svojedobno nastao isključivo od kombinacija smeđe i crvene boje.

Primjena cvijeća

Nanošenje boje je vrlo jednostavno. Ako koristite Photoshop, samo odaberite željeni fragment, odaberite ga čarobnim štapićem (tipka W), a zatim ga ispunite glavnom bojom (Alt-F) ili sekundarnom bojom Ctrl-F).

sjenčanje

Sjenčanje je jedan od najvažnijih dijelova potrage da postanete pikselizirani polubog. U ovoj fazi sprite ili počinje izgledati bolje ili se pretvara u čudnu tvar. Slijedite moje upute i sigurno ćete uspjeti.

Prvi korak: odaberite izvor svjetla

Prvo biramo izvor svjetla. Ako je vaš sprite dio većeg fragmenta koji ima vlastita svjetla, poput lampi, baklji i tako dalje. I svi oni mogu na različite načine utjecati na izgled duha. Međutim, odabir udaljenog izvora svjetlosti poput sunca odlična je ideja za većinu pikselne umjetnosti. Za igre, na primjer, morat ćete stvoriti najsvjetliji mogući sprite, koji se zatim može prilagoditi okolini.

Obično se odlučim za udaljeno svjetlo negdje gore ispred spritea, tako da je osvijetljen samo prednji i gornji dio spritea, a ostatak je zasjenjen.

Drugi korak: Izravno sjenčanje

Nakon što smo odabrali izvor svjetla, možemo početi zatamnjivati ​​područja koja su od njega najudaljenija. Naš model rasvjete predlaže da donji dio glave, ruke, noge itd. treba prekriti sjenom.

Zapamtite da ravne stvari ne mogu bacati sjenu. Uzmite komad papira, zgužvajte ga i kotrljajte po stolu. Kako znaš da više nije ravno? Samo si vidio sjene oko njega. Sjenčanjem naglasite nabore na odjeći, mišiće, krzno, boju kože i tako dalje.

Treći korak: meke sjene

Drugu nijansu, koja je svjetlija od prve, treba koristiti za stvaranje mekih sjena. Ovo je potrebno za područja koja nisu izravno osvijetljena. Također se mogu koristiti za prijelaz iz svijetlog u tamno, te na neravnim površinama.

Četvrti korak: osvijetljena mjesta

Mjesta koja primaju izravne zrake svjetlosti također moraju biti istaknuta. Vrijedno je napomenuti da bi trebalo biti manje svjetla od sjena, inače će izazvati nepotrebnu pozornost, odnosno istaknuti se.

Uštedite si glavobolju tako da zapamtite jedno jednostavno pravilo: prvo sjene, a zatim svjetla. Razlog je jednostavan: ako nema sjena, bit će izloženi preveliki fragmenti, a kada nanesete sjene, morat će se smanjiti.

Neka korisna pravila

Sjene su uvijek teške za početnike, pa evo nekoliko pravila kojih se trebate pridržavati prilikom sjenčanja.

  1. Nemojte koristiti gradijente. Najčešća pogreška početnika. Gradijenti izgledaju užasno i ni približno ne pokazuju kako se svjetlost igra na površinama.
  2. Nemojte koristiti "blago sjenčanje". Govorim o situaciji kada je sjena predaleko od obrisa, jer tada izgleda jako mutno i onemogućuje otkrivanje izvora svjetla.
  3. Nemojte koristiti previše sjena. Lako je misliti da "što više boja - to je slika realnija." Bilo kako bilo, u stvarnom životu navikli smo vidjeti stvari u tamnom ili svijetlom spektru, a naš će mozak filtrirati sve između. Koristite samo dvije tamne boje (tamnu i vrlo tamnu) i dvije svijetle boje (svijetlu i vrlo svijetlu) i naslažite ih na osnovnu boju, a ne jednu na drugu.
  4. Nemojte koristiti previše slične boje. Zaista nema potrebe za korištenjem gotovo identičnih boja, osim kada želite napraviti stvarno mutan sprite.

podrhtavanje

Očuvanje boja ono je na što kreatori pikselne umjetnosti trebaju obratiti pozornost. Drugi način da dobijete više sjena bez korištenja više boja zove se "dithering". Kao iu tradicionalnom slikanju, koristi se "šrafura" i "crosshatching", odnosno dobivate u doslovnom smislu nešto između dvije boje.

Jednostavan primjer

Evo jednostavnog primjera kako se dvije boje mogu miješati da bi se stvorile četiri opcije sjenčanja.

Napredni primjer

Usporedite gornju sliku (stvorenu gradijentom u Photoshopu) sa slikom stvorenom sa samo tri boje korištenjem ditheringa. Imajte na umu da se za stvaranje "susjednih boja" mogu koristiti različiti uzorci. Bit će vam lakše razumjeti princip ako sami izradite nekoliko uzoraka.

Primjena

Dithering može dati vašem spriteu onaj lijepi retro izgled, budući da je mnogo ranih videoigara uvelike koristilo ovu tehniku ​​zbog malog broja dostupnih paleta boja (ako želite vidjeti mnogo primjera ditheringa, pogledajte igre razvijene za Sega Genesis). Ja osobno ne koristim ovu metodu često, ali u obrazovne svrhe, pokazat ću vam kako se može primijeniti na naš sprite.

Možete koristiti dither do mile volje, ali vrijedi napomenuti da ga samo nekoliko ljudi zapravo uspješno koristi.

Selektivno konturiranje

Selektivno konturiranje, koje se također naziva selout (od engleskog selected outlining), podvrsta je konturnog sjenčanja. Umjesto crne linije, biramo boju koja će skladnije izgledati na vašem spriteu. Također mijenjamo svjetlinu ove putanje prema rubovima lika, dopuštajući izvoru boje da odredi koje boje trebamo koristiti.

Do ove točke koristili smo crni obris. Nema ništa loše u ovome: crna izgleda sjajno, a također vam omogućuje da kvalitativno razlikujete sprite od pozadine okolnih objekata. Ali upotrebom ove metode žrtvujemo malo realizma koji bi nam mogao biti potreban u nekim slučajevima, jer naš sprite i dalje izgleda crtano. Selektivno oblikovanje omogućuje vam da se toga riješite.

Primijetit ćete da sam upotrijebio seult da mu omekšam mišiće. Konačno, naš sprite počinje izgledati kao cjelina, a ne kao ogroman broj zasebnih fragmenata.

Usporedite ovo s originalom:

  1. Zaglađivanje

Načelo anti-aliasinga je jednostavno: dodavanje srednjih boja na pregibe kako bi izgledali glatkije. Na primjer, ako imate crnu liniju na bijeloj pozadini, tada će se mali sivi pikseli dodati njezinim pregibima duž ruba.

Tehnika 1: izglađivanje krivulja

Općenito, trebate dodati srednje boje tamo gdje postoje prekidi, inače će linija izgledati nazubljeno. Ako i dalje izgleda neravnomjerno, dodajte još jedan sloj svjetlijih piksela. Smjer nanošenja međusloja mora odgovarati smjeru krivulje.

Mislim da to ne mogu bolje objasniti, a da ne kompliciram. Samo pogledajte sliku i shvatit ćete što mislim.

Tehnika 2: zaokruživanje neravnina

Tehnika 3: Prepisivanje krajeva retka

Primjena

Sada, primijenimo anti-aliasing na naš ispis. Imajte na umu da ako želite da vaš duh izgleda dobro u odnosu na bilo koju boju pozadine, nemojte izravnati vanjsku stranu linije. U suprotnom, vaš sprite je okružen vrlo neprikladnom aureolom na spoju s pozadinom i stoga će se previše jasno isticati na bilo kojoj pozadini.

Učinak je vrlo suptilan, ali je od velike važnosti.

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

Možda se pitate: "Zašto jednostavno ne primijenimo filtar grafičkog uređivača na naš sprite ako želimo da izgleda glatko?" Odgovor je također jednostavan - nijedan filtar neće učiniti vaš sprite oštrim i čistim kao ručno izrađen. Imat ćete potpunu kontrolu ne samo nad korištenim bojama, već i nad time gdje ih koristiti. Osim toga, znate bolje od bilo kojeg filtera gdje će anti-aliasing biti prikladan, a gdje postoje područja u kojima će pikseli jednostavno izgubiti svoju kvalitetu.

Završna obrada

Wow, prilično smo blizu mogućnosti isključiti vaše računalo i uzeti hladno pivo iz hladnjaka. Ali još nije stigao! Posljednji dio govori o tome što odvaja energičnog amatera od iskusnog profesionalca.

Napravite korak unatrag i dobro pogledajte svoj duh. Postoji mogućnost da još uvijek izgleda “sirovo”. Odvojite malo vremena za poboljšanje i provjerite je li sve savršeno. Koliko god bili umorni, najzabavniji dio je pred vama. Dodajte detalje kako bi vaš sprite izgledao zanimljivije. Ovdje vaše vještine i iskustvo u pikselima dolaze na scenu.

Mogla bi vas iznenaditi činjenica da naš odvjetnik Lucha sve ovo vrijeme nije imao oči ili da je paket koji drži prazan. Zapravo, razlog leži u tome što sam htio pričekati s malim detaljima. Obratite pažnju i na ukrase koje sam dodao na njegove narukvice, letvicu na njegovim hlačama... pa, što bi muškarac bio bez svojih bradavica? Također sam mu malo potamnio donji dio torza tako da ruka više strši u pozadini tijela.

Konačno ste gotovi! Lucha Lawyer natječe se u Laganoj kategoriji jer ima samo 45 boja (možda je teška, ovisno o ograničenjima vaše palete), a rezolucija mu je oko 150 x 115 piksela. Sada možete otvoriti pivo!

Cijeli napredak:

Uvijek je smiješno. Evo gifa 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 u pikseliranju.
  2. Počnite s malim spriteovima. Najteži dio je naučiti kako smjestiti puno detalja koristeći što je moguće manje piksela, a da ne napravite spriteove velike poput mojih.
  3. Proučavajte radove umjetnika kojima se divite i nemojte se bojati biti neoriginalni. Najbolji način učenja je ponavljanje fragmenata tuđih radova. Za razvoj vlastitog stila potrebno je puno vremena.
  4. Ako nemate tablet, kupite ga. Konstantni živčani slomovi i stres uzrokovani stalnim klikanjem lijevom tipkom miša nisu smiješni i teško da će impresionirati predstavnike suprotnog spola. Koristim mali Wacom Graphire2 - sviđa mi se njegova kompaktnost i prenosivost. Možda bi vam se svidio veći tablet. Prije kupnje napravite malu probnu vožnju.
  5. Podijelite svoj rad s drugima kako biste dobili njihovo mišljenje. Ovo bi također mogao biti dobar način da steknete nove štreberske prijatelje.

p.s.

Izvorni članak se nalazi. Ako imate poveznice na super tutorijale koje treba prevesti, pošaljite ih u našu sobu za zabavu. Ili pišite izravno u poruke grupe

pikselna umjetnost(napisano bez crtice) ili pikselna umjetnost- smjer digitalne umjetnosti, koji se sastoji u stvaranju slika na razini piksela (tj. minimalne logičke jedinice od koje se slika sastoji). Nisu sve rasterske slike pikselna umjetnost, iako se sve sastoje od piksela. Zašto? Jer na kraju, koncept pixel arta ne uključuje toliko rezultat koliko proces stvaranja ilustracije. Piksel po piksel i to je to. Ako snimite digitalnu fotografiju, jako je smanjite (tako da pikseli postanu vidljivi) i tvrdite da ste je nacrtali od nule - to će biti prava krivotvorina. Iako će sigurno biti naivnih prostaka koji će vas pohvaliti za vaš trud.

Sada se ne zna točno kada je ova tehnika nastala, korijeni se gube negdje u ranim 1970-ima. Međutim, tehnika sastavljanja slika od malih elemenata seže do mnogo starijih oblika umjetnosti, poput mozaika, križnog šivanja, tkanja tepiha i perlanja. Sama fraza "pixel art" kao definicija pixel arta prvi put je korištena u članku Adele Goldberg i Roberta Flegala u časopisu Communications of the ACM (prosinac 1982.).

Pixel art je dobio najširu primjenu u računalnim igrama, što nije iznenađujuće - omogućio je stvaranje slika koje su nezahtjevne za resurse i istovremeno izgledaju stvarno lijepo (istodobno, oduzimaju puno vremena od umjetnik i zahtijevaju određene vještine, a time i dobru plaću) . Vrhunac, najviša točka razvoja, službeno se nazivaju video igre na konzolama 2. i 3. generacije (rane 1990-e). Daljnji napredak u tehnologiji, pojava najprije 8-bitne boje, a potom i True Colora, razvoj trodimenzionalne grafike - sve je to s vremenom potisnulo pixel art u drugi plan i treći plan, a onda se potpuno počelo činiti da je piksel umjetnosti je došao kraj.

Čudno, ali upravo je g. Znanstveno-tehnološki napredak sredinom 90-ih gurnuo pikselsku grafiku na posljednje pozicije, a kasnije je vratio u igru ​​– otkrivši svijetu mobilne uređaje u obliku mobitela i dlanovnika. Naposljetku, koliko god novi uređaj bio koristan, svi znamo da je bezvrijedan ako ne možete barem igrati pasijans na njemu. Pa, gdje je ekran niske rezolucije, tu je i pixel art. Kako kažu, dobrodošli nazad.

Naravno, svoju ulogu u povratku pikselske grafike odigrali su i razni retrogradno nastrojeni elementi koji vole nostalgirati nad dobrim starim igrama iz djetinjstva, govoreći: “Ma, sad to više ne rade”; estete koji znaju cijeniti ljepotu pixel arta i indie programere koji ne percipiraju moderne grafičke ljepote (a ponekad, iako rijetko, jednostavno ih ne znaju implementirati u vlastite projekte), zbog čega klešu pixel art . Ali nemojmo još uvijek zanemariti čisto komercijalne projekte - aplikacije za mobilne uređaje, oglašavanje i web dizajn. Dakle, sada je pikselna umjetnost, kako kažu, raširena u uskim krugovima i stekla je svojevrsni umjetnički status "nije za svakoga" . I to unatoč činjenici da je za jednostavnog laika izuzetno dostupno, jer za rad u ovoj tehnici dovoljno je imati pri ruci računalo i jednostavan grafički uređivač! (sposobnost crtanja, usput, također ne boli) Dosta riječi, prijeđite na stvar!

2. Alati.

Što vam je potrebno za izradu pixel arta? Kao što sam već rekao, dovoljno je računalo i bilo koji grafički uređivač koji može raditi na razini piksela. Možete crtati bilo gdje, čak i na Game Boyu, čak i na Nintendo DS-u, čak iu Microsoft Paint-u (druga stvar je da je crtanje u potonjem krajnje nezgodno). Postoji jako puno rasterskih editora, mnogi od njih su besplatni i dovoljno funkcionalni, tako da svatko može sam odlučiti o softveru.

Crtam u Adobe Photoshopu jer mi je zgodno i jer je prošlo dosta vremena. Neću lagati i reći, mrmljajući lažnim zubima, da "Sjećam se da je Photoshop još uvijek bio vrlo malen, bio je na Macintoshu, i bio je s brojem 1.0" Ovo nije. Ali sjećam se Photoshopa 4.0 (i također na Macu). I tako za mene pitanje izbora nikada nije stajalo. I stoga, ne, ne, ali dat ću preporuke u vezi s Photoshopom, posebno tamo gdje će njegove mogućnosti pomoći uvelike pojednostaviti kreativnost.

Dakle, potreban vam je bilo koji grafički uređivač koji vam omogućuje crtanje alatom u jednom kvadratnom pikselu (pikseli mogu biti i nekvadratni, na primjer okrugli, ali nas trenutno ne zanimaju). Ako vaš uređivač podržava bilo koji skup boja, odlično. Ako vam omogućuje i spremanje datoteka - super. Bilo bi lijepo znati raditi sa slojevima, jer kada radite na prilično složenoj slici, prikladnije je rastaviti njezine elemente na različite slojeve, ali uglavnom je to stvar navike i pogodnosti.

Hoćemo li početi? Vjerojatno čekate popis nekih tajnih trikova, preporuka koje će vas naučiti kako crtati pixel art? A istina je da toga nema puno. Jedini način da naučite crtati pixel art je da crtate sami, pokušavajte, pokušavajte, ne bojte se i eksperimentirajte. Slobodno kopirajte tuđe radove, nemojte se bojati ispasti neoriginalni (samo nemojte tuđi rad predstavljati kao svoj, hehe). Pažljivo i promišljeno analizirati rad majstora (ne moj) i crtati, crtati, crtati. Na kraju članka čeka vas nekoliko korisnih poveznica.

3. Opća načela.

Međutim, postoji nekoliko općih načela koja vrijedi znati. Ima ih doista malo, ja ih zovem "načela", a ne zakoni, jer su više savjetodavne naravi. Uostalom, ako uspijete nacrtati genijalni pixel art mimo svih pravila – koga briga za njih?

Najosnovnije načelo može se formulirati na sljedeći način: najmanja jedinica slike je piksel, a ako je moguće, svi elementi kompozicije trebaju biti proporcionalni tome. Ja ću dešifrirati: sve što nacrtate sastoji se od piksela, a piksel treba čitati u svemu. To ne znači da na slici uopće ne mogu biti elementi, na primjer, 2x2 piksela ili 3x3. No ipak je poželjno sliku sastaviti od pojedinačnih piksela.

Potez i općenito sve linije slike trebaju biti debljine jednog piksela (uz rijetke iznimke).

Nipošto ne kažem da je to pogrešno. Ali još uvijek nije baš lijepo. A da bi bilo lijepo, zapamtite još jedno pravilo: crtati bez pregiba, glatko okrugli. Postoji takva stvar kao što su kinks - fragmenti koji nisu u redu, daju linijama neravnomjeran, nazubljen izgled (u engleskom govornom okruženju umjetnika piksela nazivaju se jaggies):

Kinks lišava crtež prirodne glatkoće i ljepote. I ako su fragmenti 3, 4 i 5 očiti i lako se ispravljaju, s ostalima je situacija kompliciranija - tu je prekinuta duljina jednog komada u lancu, čini se sitnica, ali uočljiva sitnica. Potrebno je malo prakse da naučite vidjeti i izbjegavati takva mjesta. Kink 1 je izbačen iz linije jer je jedan piksel - dok se u području gdje je zaglavljen linija sastoji od segmenata od 2 piksela. Kako bih se toga riješio, ublažio sam ulazak krivulje u zavoj tako što sam produžio gornji segment na 3 px i ponovno nacrtao cijelu liniju u segmentima od 2 px. Prijelomi 2 i 6 međusobno su identični - to su već fragmenti duljine 2 piksela u područjima izgrađenim od pojedinačnih piksela.

Elementarni skup primjera kosih linija, koji se mogu naći u gotovo svakom priručniku za pixel art (moj nije iznimka), pomoći će u izbjegavanju takvih prekida prilikom crtanja:

Kao što vidite, ravna linija se sastoji od segmenata iste duljine, pomaknutih za jedan piksel dok se crta - samo tako se postiže učinak linearnosti. Najčešće metode konstrukcije su s duljinom segmenta od 1, 2 i 4 piksela (postoje i druge, ali predstavljene opcije trebale bi biti dovoljne za provedbu gotovo svake umjetničke ideje). Od ova tri, najpopularnija se sa sigurnošću može nazvati duljinom segmenta od 2 piksela: nacrtajte segment, pomaknite olovku za 1 piksel, nacrtajte drugi segment, pomaknite olovku za 1 piksel, nacrtajte još jedan segment:

Lako, zar ne? Potrebna je samo navika. Poznavanje crtanja kosih linija u koracima od 2 piksela pomoći će u izometriji, pa ćemo je sljedeći put pobliže pogledati. Općenito, ravne linije su sjajne - ali samo dok se ne pojavi zadatak crtanja nečeg čudesnog. Ovdje su nam potrebne krivulje, i to puno različitih krivulja. I usvajamo jednostavno pravilo za zaokruživanje zakrivljenih linija: duljina elemenata krivulje trebala bi se postupno smanjivati/povećati.

Izlaz iz ravne linije u zaokruživanje izvodi se glatko, označio sam duljinu svakog segmenta: 5 piksela, 3, 2, 2, 1, 1, opet 2 (već okomito), 3, 5 i više. Nije nužno da će vaš slučaj koristiti isti slijed, sve ovisi o glatkoći koja je potrebna. Još jedan primjer zaokruživanja:

Opet, izbjegavamo pregibe koji toliko kvare sliku. Ako želite provjeriti naučeno, evo imam skin za Winamp koji je nacrtao nepoznati autor, prazan:

Na slici postoje grube pogreške i samo neuspješno zaokruživanje, a nalaze se i pregibi - pokušajte ispraviti sliku na temelju onoga što već znate. To je sve za mene s linijama, predlažem da malo nacrtam. I neka vas jednostavnost primjera ne zavara, možete naučiti crtati samo crtanjem - čak i tako jednostavne stvari.

4.1. Crtamo bocu sa živom vodom.

1. Oblik predmeta, dok ne možete koristiti boju.

2. Crvena tekućina.

3. Promijenite boju stakla u plavu, dodajte osjenčana područja unutar mjehurića i svijetlo područje na predviđenoj površini tekućine.

4. Dodajte bijele odsjaje na mjehurić i tamnocrvenu sjenu širine 1 piksela na područja tekućine koja obrubljuju stijenke mjehurića. Izgleda dobro, zar ne?

5. Slično, nacrtamo bocu s plavom tekućinom - ovdje iste boje stakla, plus tri nijanse plave za tekućinu.

4.2. Crtamo lubenicu.

Nacrtajmo krug i polukrug - to će biti lubenica i izrezana kriška.

2. Označimo izrez na samoj lubenici, a na kriški - granicu između kore i pulpe.

3. Napunite. Boje iz palete, prosječna nijansa zelene je boja kore, prosječna crvena je boja pulpe.

4. Označite prijelazno područje od kore do pulpe.

5. Svijetle pruge na lubenici (konačno liči na sebe). I naravno, sjemenke! Ako križate lubenicu sa žoharima, oni će se sami raširiti.

6. Donosimo na pamet. Koristimo blijedo ružičastu boju za označavanje istaknutih dijelova iznad sjemenki u odjeljku, a postavljanjem piksela u šahovnici postižemo neku vrstu volumena iz izrezane kriške (metoda se zove dithering, o tome kasnije). Koristimo tamnocrvenu nijansu da označimo osjenčana mjesta u dijelu lubenice, a tamnozelenu (opet pikseli šahovnice) da damo volumen samoj lubenici.

5. Dithering.

Dithering ili miješanje tehnika je miješanja piksela u jasno uređenom (ne uvijek) uzorku u dva rubna područja različitih boja. Najjednostavniji, najčešći i učinkovit način je izmjenjivanje piksela u šahovnici:

Recepcija je nastala zbog (ili bolje rečeno suprotno) tehničkih ograničenja - na platformama s ograničenim paletama dithering je omogućio da se miješanjem piksela dviju različitih boja dobije treći koji nije bio u paleti:

Sada, u eri neograničenih tehničkih mogućnosti, mnogi kažu da je potreba za ditheringom nestala sama od sebe. No, njegova pravilna uporaba vašem radu može dati karakterističan retro stil koji će prepoznati svi ljubitelji starih video igrica. Osobno volim koristiti dithering. Ne poznajem ga dobro, ali volim ga.

Još dvije opcije za dithering:

Što trebate znati o ditheringu da biste ga mogli koristiti. Minimalna širina zone miješanja mora biti najmanje 2 piksela (te iste kockice). Više je moguće. Bolje je ne činiti manje.

Ispod je primjer lošeg ditheringa. Unatoč činjenici da se takva tehnika često može naći na spriteovima iz videoigara, morate biti svjesni da je TV ekran značajno izgladio sliku, a takav češalj, čak ni u pokretu, nije bio fiksiran okom:

Pa dosta teorije. Predlažem da vježbate još malo.

Pixel art se može crtati u bilo kojem programu za rastersku grafiku, to je stvar osobnih preferencija i iskustva (kao i financijskih mogućnosti, naravno). Netko koristi najjednostavniji Paint, ja to radim u Photoshopu - jer, prvo, dugo radim u njemu, a drugo, tamo mi je ugodnije. Nekako sam odlučio isprobati besplatni Paint.NET, nije mi se svidio - to je kao da automobil koji prepoznaje strani automobil s automatskim mjenjačem u Zaporozhetsu vjerojatno neće sjesti. Poslodavac mi osigurava licencirani softver, tako da imam čistu savjest pred Adobe Corporation... Iako su cijene njihovih programa nezamislive, a oni zbog toga gore u paklu.

1. Priprema za rad.

Napravite novi dokument s bilo kojim postavkama (neka bude 60 piksela širine, 100 piksela visine). Glavni alat pixel artista je olovka ( Alat za olovke, poziva se prečacom B). Ako je na alatnoj traci omogućen kist (i ikona koja prikazuje kist), zadržite pokazivač iznad njega, pritisnite i držite LMB- pojavit će se mali padajući izbornik u kojem trebate odabrati olovku. Postavite veličinu olovke na 1 piksel (na gornjoj ploči s lijeve strane, padajući izbornik Četka):

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Još nekoliko korisnih kombinacija. " ctrl+" i " ctrl-» povećavanje i smanjivanje slike. Također je korisno znati da prešanje ctrl i " (navodnici-božićna drvca, ili ruski ključ " E”) uključuje i isključuje rešetku, što je velika pomoć pri crtanju pixel arta. Korak rešetke također treba prilagoditi sebi, nekome je zgodnije kada je 1 piksel, ja sam navikao da je širina ćelije 2 piksela. Klik Ctrl+K(ili idite na Uredi->Postavke), prijeđite na stvar Vodilice, rešetka i kriške i instalirati Rešetka svaki 1 piksel(meni je, ponovit ću, prikladnije 2).

2. Crtanje.

Konačno, počnimo crtati. Zašto stvoriti novi sloj ( Ctrl+Shift+N), prebacite na crnu boju olovke (pritiskom D postavlja zadane boje, crnu i bijelu) i nacrtajte glavu lika, u mom slučaju to je takva simetrična elipsa:

Pixel art za početnike. | Uvod.


Pixel art za početnike. | Uvod.

Njegova donja i gornja baza duge su 10 piksela, zatim slijede segmenti od 4 piksela, tri, tri, jedan, jedan i okomita linija visoka 4 piksela. Prikladno je crtati ravne linije u Photoshopu sa stegnutom Shift, iako je skala slike u pikselnoj umjetnosti minimalna, ipak ova tehnika ponekad štedi puno vremena. Ako ste pogriješili i nacrtali previše, popeli se negdje u prošlosti - nemojte se obeshrabriti, prebacite se na alat za brisanje ( Gumica Također l ili ključ " E") i izbrišite ono što vam ne treba. Da, svakako postavite gumicu da također postavi veličinu olovke na 1 piksel tako da briše piksel po piksel i način rada olovke ( Način rada: olovka), inače neće izbrisati ono što je potrebno. Vraćam se na olovku, podsjećam vas, kroz " B»

Općenito, ova elipsa nije nacrtana striktno prema pravilima pixel arta, ali to zahtijeva umjetnički koncept. Budući da je ovo buduća glava, imat će oči, nos, usta – dovoljno detalja koji će na kraju skrenuti pozornost gledatelja na sebe i obeshrabriti želju da se pita zašto je glava tako nepravilnog oblika.

Nastavljamo crtati, dodamo nos, antene i usta:

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Sada oči:

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Imajte na umu da u tako malom mjerilu oči ne moraju biti okrugle - u mom slučaju to su kvadrati sa stranicom od 5 piksela, koji nemaju ucrtane kutne točke. Kada se vrate na izvornu ljestvicu, izgledat će prilično okruglo, plus dojam sferičnosti može se poboljšati uz pomoć sjena (više o tome kasnije, pogledajte 3. odjeljak lekcije). U međuvremenu ću malo korigirati oblik glave tako da obrišem par piksela na jednom mjestu i slikam ih na drugom:

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Crtamo obrve (ništa što vise u zraku - ja imam takav stil) i oponašamo nabore u uglovima usta, čineći osmijeh izražajnijim:

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Kutovi još ne izgledaju dobro, jedno od pravila pikselske umjetnosti je da svaki piksel poteza i elemenata ne smije dodirivati ​​više od dva susjedna piksela. Ali ako pažljivo proučite spriteove iz igara kasnih 80-ih - ranih 90-ih, ova se pogreška tamo može naći prilično često. Zaključak - ako ne možete, ali stvarno želite, onda možete. Ovaj detalj se može igrati sa sjenama kasnije tijekom ispune, tako da za sada crtamo dalje. Torzo:

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Ne obraćajte pažnju na gležnjeve za sada, izgleda nespretno, to ćemo popraviti kad dođemo do punjenja. Mala korekcija: dodajmo remen i nabore u području prepona, a također odaberimo zglobove koljena (koristeći male fragmente od 2 px koji strše iz linije nogu):

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

3. Napunite.

Za svaki element lika za sada će nam biti dovoljne tri boje - glavna boja ispune, boja sjene i poteza. Općenito, prema teoriji boja u pikselnoj umjetnosti, možete savjetovati puno stvari, u početnoj fazi, nemojte se ustručavati špijunirati rad majstora i analizirati kako točno odabiru boje. Potez svakog elementa može, naravno, ostati crn, ali u ovom slučaju elementi će se sigurno spojiti, radije koristim neovisne boje koje su bliske glavnoj boji elementa, ali s niskom zasićenošću. Najprikladnije je nacrtati malu paletu negdje u blizini vašeg lika i zatim uzeti boje iz nje pomoću alata za kapaljku ( Alat za kapaljke, I):

Nakon odabira željene boje, aktivirajte bucket tool ( Kanta za boju, G). Također svakako isključite funkciju Anti-alias u postavkama, potrebno nam je da ispuna radi jasno unutar nacrtanih kontura i da ne ide izvan njih:

Pixel art za početnike. | Uvod.


Pixel art za početnike. | Uvod.

Ispunjavamo svoj lik koji se ne može ispuniti - crtamo ga ručno olovkom.

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Obratite pozornost na gležnjeve - zbog činjenice da su ta područja debela samo 2 piksela, morao sam odustati od poteza s obje strane i nacrtao sam ga samo s namjeravane strane sjene, ostavljajući liniju glavne boje debljine od jednog piksela. Također imajte na umu da sam obrve ostavila crne, iako to nije bitno.

Photoshop ima praktičnu značajku odabira boja ( Odaberite->Raspon boja, bockanjem željene boje kapaljkom, dobit ćemo izbor svih područja slične boje i mogućnost da ih trenutno ispunite, ali to zahtijeva da elementi vašeg lika budu na različitim slojevima, pa ćemo za sada razmotriti ova funkcija korisna za napredne korisnike Photoshopa):

Pixel art za početnike. | Uvod.


Pixel art za početnike. | Uvod.

4. Sjena i dithering.

Sada odaberite boje sjene i, prebacujući se na olovku ( B) pažljivo rasporedite sjenovita mjesta. U mom slučaju, izvor svjetla je negdje lijevo i gore, ispred lika - dakle, desne strane označavamo sjenom s naglaskom na dnu. Lice će postati najbogatije sjenom, jer postoji mnogo sitnih elemenata koji se reljefno ističu uz pomoć sjene s jedne strane, a s druge strane sami bacaju sjenu (oči, nos, mimički nabori):

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Sjena je vrlo moćan vizualni alat, dobro osmišljena sjena povoljno će utjecati na izgled lika - i dojam koji će ostaviti na gledatelja. U piksel artu jedan piksel, pogrešno postavljen, može uništiti cijeli rad, dok bi se u isto vrijeme činilo da takve sitne korekcije mogu učiniti sliku puno ljepšom.

Što se tiče podrhtavanje'ah, na slici tako minijaturne veličine, po mom mišljenju, potpuno je suvišan. Sama metoda se sastoji u "gnječenju" dvije susjedne boje, što se postiže raspoređivanjem piksela. Međutim, kako bih vam dao ideju o tehnici, ipak ću predstaviti mala područja stapanja, na hlačama, na košulji i malo na licu:

Pixel art za početnike. | Uvod.

Pixel art za početnike. | Uvod.

Općenito, kao što vidite, ništa posebno komplicirano. pikselna umjetnost atraktivan je jer, nakon što je naučio neke uzorke, svatko može sam dobro crtati - samo pažljivo proučavajući rad majstora. Iako da, nešto znanja o osnovama crtanja i teorije boja ipak ne škodi. Usudite se!

Hodajući ujutro internetom, htio sam napisati post o Pixel Artu, u potrazi za materijalom pronašao sam ova dva članka.

U današnje vrijeme programi kao što su Photoshop, Illustrator, Corel olakšavaju posao dizajnera i ilustratora. Uz njihovu pomoć možete u potpunosti raditi bez da vas ometa raspored piksela, kao što je to bio slučaj krajem prošlog stoljeća. Sve potrebne izračune izrađuju softverski - grafički urednici. Ali postoje ljudi koji rade u drugom smjeru, ne samo drugačijem, nego čak potpuno suprotnom. Naime, bave se istim old-school rasporedom piksela, kako bi dobili jedinstven rezultat i atmosferu u svom radu.

Primjer pixel arta. Fragment.

U ovom članku željeli bismo govoriti o ljudima koji se bave piksel umjetnošću. Razmotrite pobliže njihova najbolja djela koja se, samo zbog složenosti izvedbe, bez pretjerivanja mogu nazvati djelima suvremene umjetnosti. Radovi od kojih zastaje dah kad 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: Pomrčina Mjeseca


Stambena četvrt. Autor:

Pojam "pikselna grafika" nije svima poznat, niti je to underground sleng. Što je to što će Wikipedia pomoći da saznate. Glavno je razumjeti da pikselna umjetnost određuje način na koji je uzorak stvoren (piksel po piksel), a ne rezultati. Stoga crteži dobiveni pomoću filtara ili posebnih renderera također nisu uključeni u njega. U prvom dijelu članka, a možda čak i nizu članaka posvećenih ovoj umjetnosti, prikazat ću neke od radova koji su mi se svidjeli.

Nevjerojatne ilustracije, sjajno sjenčanje. (Polyfonkenova Pixel Art).

Tema je dosta široka. Postoje varijacije kockica.


Ilustracije Roda Hunta vrlo su šarene i realistične. Umjetnik kombinira vektorsku grafiku s pikselnom umjetnošću.


Brazilsko-njemački blogeri Thiago, Pi, Jojo i Mariana predstavljaju se kao umiljati nasmijani pikselski likovi.

Ovu sliku je napravio Juan Manuel Daporta koristeći samo MS Paint! Radovi su trajali 8 mjeseci. Impresivan.

Pikseli žive i izvan računalnih ekrana. Nevjerojatno je koliko se dobro razumiju zapleti pikseliziranih slika.

Svemirski ratovi u stilu Super Robot Wars. U svijetu pikselne umjetnosti, Roberson ima svoj jedinstveni stil.


Grad ludih lutaka. Ilustracija, iako nacrtana u vektoru, još uvijek izgleda kao pixel art. Zanimljiv posao.

Ovaj smjer pixel arta me posebno zanima. Ove slike nisu nacrtane na ekranu, već na platnu akrilnim bojama. Ovo remek djelo napravila je Ashley Anderson.

Pixel gradovi su posebna velika tema. Obično ima puno detalja i priča. Na ovoj slici je nasip i šareni baloni i sushi bar pa čak i prosvjednici.

Izbor urednika
Teško je pronaći dio piletine od kojeg je nemoguće napraviti pileću juhu. Juha od pilećih prsa, pileća juha...

Da biste pripremili punjene zelene rajčice za zimu, trebate uzeti luk, mrkvu i začine. Mogućnosti za pripremu marinada od povrća ...

Rajčica i češnjak su najukusnija kombinacija. Za ovo konzerviranje trebate uzeti male guste crvene rajčice šljive ...

Grissini su hrskavi štapići iz Italije. Peku se uglavnom od podloge od kvasca, posipane sjemenkama ili solju. Elegantan...
Raf kava je vruća mješavina espressa, vrhnja i vanilin šećera, umućena pomoću otvora za paru aparata za espresso u vrču. Njegova glavna karakteristika...
Hladni zalogaji na svečanom stolu igraju ključnu ulogu. Uostalom, ne samo da omogućuju gostima lagani zalogaj, već i lijep...
Sanjate li naučiti kako ukusno kuhati i impresionirati goste i domaća gurmanska jela? Da biste to učinili, uopće nije potrebno provoditi na ...
Pozdrav prijatelji! Predmet naše današnje analize je vegetarijanska majoneza. Mnogi poznati kulinarski stručnjaci vjeruju da je umak ...
Pita od jabuka pecivo je koje je svaka djevojčica naučila kuhati na satovima tehnologije. Upravo će pita s jabukama uvijek biti vrlo...