Pixel art (pixel art): najbolji radovi i ilustratori. Šta je Pixel Art? Primjeri i kako to naučiti Pixel art najbolji rad

28.06.2020

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

Dakle, ono što osvaja Pixel Art:

Percepcija. Pixel art izgleda neverovatno! Ima mnogo toga da se kaže o svakom pojedinačnom pikselu u spriteu.
Nostalgija. Pixel Art vraća sjajan nostalgičan osjećaj za igrače koji su odrasli igrajući Nintendo, Super Nintendo ili Genesis (kao ja!)
Lakoća učenja. Pixel art je jedna od najlakših digitalnih umjetnosti za učenje, pogotovo ako ste više programer nego umjetnik ;]

Dakle, želite se okušati u Pixel Artu? Zatim pratite samnom i pokazat ću vam kako da napravite jednostavan, ali efikasan lik koji možete koristiti u svojoj igrici! Osim toga, kao bonus, pogledat ćemo kako ga integrirati u iPhone igre!

Za uspješno učenje trebat će vam Adobe Photoshop. Ako ga nemate, možete preuzeti besplatnu probnu verziju sa Adobe web stranice ili torrenta.

Šta je Pixel Art?

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

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

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

Alat za izglađivanje(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 im je potreban sloj za efekte miješanja (miješanje piksela između dva sloja prema datom algoritmu). Ali, budući da većina uređaja trenutno radi sa milionima boja, ova izjava se može zanemariti. Međutim, korištenje malog broja boja je dobra praksa u Pixel Artu.

Ostali alati poput (linija) ili alat za boju(Paint Bucket) takođe automatski generiše piksele, ali pošto ih možete podesiti da ne izglađuju krivulju ispunjenih piksela, smatra se da su ovi alati prilagođeni za Pixel Art.

Tako smo otkrili da Pixel Art zahtijeva puno pažnje prilikom postavljanja svakog piksela u sprite, najčešće ručno i sa ograničenom paletom boja. Hajdemo sada na posao!

Početak rada

Prije nego počnete praviti svoj prvi Pixel Art materijal, trebali biste znati da se Pixel Art ne može skalirati. Ako pokušate da ga smanjite, sve će izgledati mutno. Ako pokušate da ga povećate, sve će izgledati prihvatljivo sve dok koristite skaliranje koje je višestruko od dva (ali, naravno, neće biti jasnoće).

Da biste izbjegli ovaj problem, prvo morate razumjeti koliki bi vaš lik u igrici, ili element igre, trebao biti, a zatim pristupite poslu. Najčešće se to zasniva na veličini ekrana uređaja na koji ciljate i koliko "piksela" želite da vidite.

Na primjer, ako želite da vaša igra izgleda dvostruko veća na iPhone 3GS („Da, stvarno želim svojoj igri dati pikselski retro izgled!“), koji ima rezoluciju ekrana od 480x320 piksela, onda morate raditi na pola rezolucije u ovom slučaju će biti 240x160 piksela.

Otvorite novi Photoshop dokument ( Fajl → Novo…) i postavite veličinu na veličinu ekrana vaše igre, a zatim odaberite veličinu za svog lika.

Svaka ćelija je 32x32 piksela!

Odabrao sam 32x32px ne samo zato što je odlično za veličinu ekrana 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 su često višestruke od 2, teksture se poravnavaju). višestruko od 2, itd.

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

Kako nacrtati Pixel Art lik

Pixel Art je poznat kao jasna i laka za čitanje grafika: možete definirati crte lica, oči, kosu, dijelove tijela sa samo nekoliko tačaka. Međutim, veličina slike komplicira zadatak: što je vaš lik manji, teže ga je nacrtati. Da biste praktičnije pristupili zadatku, odaberite ono što će biti najmanje po veličini 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 četkicu(Brush Tool) i odmah ćete ga vidjeti (trebalo bi biti drugo na listi). Samo ćete morati da mu promenite veličinu na 1px (možete kliknuti na traku sa opcijama alata i promeniti mu veličinu, ili samo držite pritisnut taster [).

Takođe će vam trebati Alat za brisanje(Alat za brisanje), pa kliknite na njega (ili pritisnite tipku E) i promijenite njegove postavke odabirom sa padajuće liste Način rada:(Način:) Olovka(Olovka) (pošto u ovom modu nema ditheringa).

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

ey! Piksel sam!!

Već možete početi s Lineartom (gdje se crtanje radi sa 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 da uradite nešto ovako u sivoj boji:

Ne morate biti profesionalac u ovoj fazi

Imajte na umu da sam također ostavio prazan prostor. Ne morate zaista popuniti 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.

Kada završite siluetu, vrijeme je da . Sada morate biti pažljiviji sa postavljanjem piksela, tako da za sada ne brinite o odjeći, oklopu itd. Da biste bili sigurni, možete dodati novi sloj kako nikada ne biste izgubili svoju originalnu siluetu.

Ako smatrate da je alat Olovka 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:

Odaberite pritiskom i držanjem Alat pravougaonika(Alat pravougaonika)

Idite na panel opcija alata, na padajućoj listi Odaberite način rada alata(Outline Draw Mode) odaberite Pixel , promijenite Težina(Širina) za 1px (ako već nije urađeno) i poništite izbor Anti-alias(Zaglađivanje). Evo kako biste trebali biti:

Imajte na umu da nisam napravio donji obris za 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 senki

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

Obojite svoj lik kao što je prikazano u nastavku (ali budite kreativni i koristite svoje 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 boju(Paint Bucket Tool) da popunite praznine. Usput, morat će se i konfigurirati. Odaberite alat za boju na traci sa alatkama (ili samo pritisnite taster G) i promenite tolerancije(Tolerancija) na 0 i poništite izbor Anti-alias(Zaglađivanje).

Ako ikada budete trebali koristiti Alat za čarobni štapić(Magic Wand Tool) - vrlo koristan alat koji bira 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 pokazati svijetle i tamne strane, u nastavku ću vam dati malu instrukciju. Ako nemate vremena ili sklonosti da to naučite, možete preskočiti ovaj korak i otići na odjeljak Začinite svoju paletu, jer na kraju krajeva, možete jednostavno učiniti da vaše sjenčanje izgleda kao moj primjer!

Koristite isti izvor svjetlosti 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, namrštene oči, komad kose, nabore na pantalonama, itd. Možete dodati i neke svijetle mrlje, izgledat će još bolje:

Koristite isti izvor svjetlosti prilikom sjenčanja

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

Začinite svoju paletu

Mnogi ljudi koriste zadane boje palete, ali pošto mnogi ljudi koriste ove boje, vidimo ih u mnogim igrama.

Photoshop ima veliki izbor boja u standardnoj paleti, ali nemojte se previše oslanjati na njega. Najbolje je da napravite sopstvene boje klikom na glavnu paletu na dnu trake sa alatkama.

Zatim, u prozoru Color Picker, pretražite desnu bočnu traku da biste odabrali boju i glavno područje da biste odabrali željenu svjetlinu (svjetliju ili tamniju) i zasićenost (sočnije ili tamnije).

Kada pronađete pravu, kliknite OK i rekonfigurišite alat Paint Bucket. Ne brinite, tada možete jednostavno poništiti izbor u polju za potvrdu 'Contiguous' i kada slikate novom bojom, svi novi pikseli sa istom bojom pozadine također će biti obojeni.

Ovo je još jedan razlog zašto je važno raditi s malim brojem boja i uvijek koristiti istu boju za isti element (košulja, 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 izbor "Contiguous" da popunite odabrane piksele istom bojom

Promijenite boje ako želite i dobijte glamuroznije bojenje likova! Možete čak i promijeniti boju obrisa, samo pazite da se dobro stapaju s pozadinom.

Na kraju, uradite test boja pozadine: kreirajte novi sloj ispod vašeg lika i ispunite ga različitim bojama. Ovo je neophodno kako biste bili sigurni da će vaš lik biti vidljiv na svijetloj, tamnoj, toploj i hladnoj pozadini.

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

Pomoću ovih alata možete lako promijeniti veličinu odabranih dijelova ili ih čak rotirati. Da biste to učinili, koristite bilo koji alat za odabir (ili pritisnite tipku M) da biste odabrali područje, kliknite desnim klikom i odaberite Free Transform(Besplatna transformacija) ili jednostavno pritisnite Ctrl + T. Da biste promijenili veličinu odabranog područja, povucite jednu od ručki koja se nalazi duž perimetra okvira transformacije. Da biste promijenili veličinu odabira uz zadržavanje omjera, držite pritisnut tipku Shift i povucite jednu od ugaonih ručki.

Međutim, Photoshop automatski izglađuje sve što se uređuje pomoću Free Transform pa prije uređivanja idite na Uredi → Preferences → General(Ctrl + K) i promijenite interpolacija slike(interpolacija slike) uključena Najbliža četvrt(Najbliži susjed). Ukratko, at Najbliža četvrt nova pozicija i veličina se izračunavaju vrlo grubo, ne primjenjuju se nove boje ili prozirnosti, a boje koje odaberete se zadržavaju.

Integracija Pixel Art crteža u iPhone igre

U ovom odjeljku ćete naučiti kako integrirati našu pikselsku umjetnost u iPhone igricu koristeći Cocos2d okvir igre. Zašto razmišljam samo o iPhoneu? Jer, zahvaljujući nizu članaka o Unity-u, (na primjer:, ili igrici u stilu Jetpack Joyride u Unity 2D) već znate kako raditi s njima u Unity-u, te iz članaka o Craftyju (Browser games: Snake) i Impact (Uvod u kreiranje igara pretraživača na Impact-u) naučili ste kako da ih ugradite na platno i kreirate igre pretraživača.

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

Kreirajte novi projekat iOS → cocos2d v2.x → cocos2d iOS šablon, nazovite ga PixelArt i odaberite iPhone kao uređaj. Prevucite kreiranu sliku piksela, na primjer: sprite_final.png u svoj projekat, a zatim otvorite HelloWorldLayer.m i zamijenite metodu inicijalizacije sa sljedećim:

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

Postavljamo sprite na lijevu stranu ekrana i rotiramo ga tako da bude okrenut udesno. Kompajlirajte, pokrenite i tada ćete vidjeti svoj sprite na ekranu:

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

Skala heroja = 2,0;

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

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

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

Obratite pažnju na prednosti korišćenja Pixel Art grafike - možemo koristiti manju sliku od one koja je prikazana na ekranu, štedeći mnogo memorije tekstura. Ne moramo čak ni da pravimo zasebne slike za retina displeje!

I šta je sljedeće?

Nadam se da ste uživali u ovom tutorijalu i naučili ste nešto više o piksel 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š uvijek početnik.
Ako ZAISTA želite oponašati retro stil, pogledajte umjetnost u 8-bitnim ili 16-bitnim igrama za konzole.
Neki stilovi ne koriste tamne obrise, drugi ne uzimaju u obzir utjecaj svjetla ili sjene. Sve zavisi od stila! U našoj lekciji nismo crtali sjene, ali to ne znači da ih ne treba koristiti.

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

Još u 20. stoljeću kompjuterske igre su postale široko područje primjene piksel grafike, posebno 90-ih godina. Razvojem 3D grafike, piksel art je počeo da opada, ali se potom vratio u život zahvaljujući razvoju web dizajna, pojavi mobitela i mobilnih aplikacija.

Pixel art je posebna tehnika kreiranja slike u digitalnom obliku, koja se izvodi u rasterskim grafičkim uređivačima, u kojoj umjetnik radi s najmanjom jedinicom rasterske digitalne slike - pikselom. Takvu sliku karakterizira niska rezolucija, pri kojoj svaki piksel postaje jasno vidljiv. Piksel art se izvodi dugo i mukotrpno, ovisno o složenosti crteža - piksel po piksel.

Osnovna pravila pixel arta

Najvažnija komponenta pixel arta je takozvani crtanje linija - drugim riječima, njegove konture. Pixel art se radi pomoću linija - ravnih linija i krivulja.

prave linije

Pravilo za crtanje linija u pixel art-u je da se one sastoje od segmenata koji se pomiču u stranu za jedan piksel dok crtate. Izbjegnite glavnu grešku početnika piksel art umjetnika: pikseli ne bi trebali dodirivati jedan drugog, formirajući pravi ugao.

U slučaju ravnih linija, možete olakšati svoj zadatak korištenjem jednog od dobro poznatih uzoraka kosih linija:

Kao što se može vidjeti sa slike, sve ravne linije prikazane na njoj sastoje se od istih segmenata piksela, pomaknutih u stranu za razmak od jednog piksela, a najpopularniji su segmenti od jednog, dva i četiri piksela. Takve jednostavne ravne linije nazivaju se "idealnim" linijama u piksel umjetnosti.

Prave linije mogu imati drugačiji uzorak, na primjer, možete izmjenjivati segmente od dva piksela sa segmentom od jednog piksela, ali takve linije neće izgledati tako lijepo, pogotovo kada se slika uveća, iako ne krše pravila piksela art.

zakrivljene linije

Prave linije se lakše crtaju jer izbjegavaju pregibe, što nije slučaj sa zakrivljenim linijama. Njihova konstrukcija je teža, ali zakrivljene linije se moraju crtati mnogo češće nego ravne.

Pored iste zabrane formiranja pravih kutova od piksela, prilikom crtanja zakrivljenih linija potrebno je zapamtiti prirodu njihovog pomaka. Dužina segmenata piksela treba se mijenjati ravnomjerno, postepeno - glatko se dizati i padati jednako glatko. Pixel grafika ne dozvoljava pregibe.

Malo je vjerovatno da ćete moći nacrtati savršenu zakrivljenu liniju jednim pokretom ruke bez kršenja pravila, tako da možete pribjeći dvije metode: crtati linije crtajući jedan piksel za drugim ili nacrtati pravilnu krivu, a zatim je ispraviti uklanjanjem dodatnih piksela iz gotovog kadra.

dithering

U piksel umjetnosti postoji nešto kao što je dithering. To je određeni način miješanja piksela različitih boja za stvaranje efekta prijelaza boja.

Najpopularnija metoda ditheringa je raspoređivanje piksela u šahovnici:

Ova metoda svoj izgled duguje tehničkim ograničenjima u paletama boja, jer da bi se dobila, na primjer, ljubičasta boja, bilo je potrebno nacrtati crvene i plave piksele u šahovskom uzorku:

I kasnije, dithering se često koristio za prenošenje volumena zbog svjetlosti i sjene na slikama:

Da bi dithered pixel art radila dobro, područje miješanja mora biti najmanje dva piksela široko.

Pixel art softver

Da biste savladali stvaranje umjetnosti na način piksela, možete koristiti bilo koji grafički uređivač koji podržava ovu vrstu crteža. Svi umjetnici rade s različitim programima na osnovu svojih preferencija.

Do danas mnogi ljudi više vole crtati pikselima u poznatom standardnom programu Windows operativnog sistema - Microsoft Paint. Ovaj program je zaista jednostavan za učenje, ali to je i njegov minus - prilično je primitivan, na primjer, ne podržava rad sa slojevima i njihovu transparentnost.

Još jedan pixel art program koji se lako koristi, čija se demo verzija može naći na internetu potpuno besplatno, je GraphicsGale. Loša strana programa je, možda, činjenica da ne podržava spremanje pixel arta u .gif formatu.

Vlasnici Mac-a mogu isprobati besplatni program Pixen. Korisnici Linux operativnog sistema trebali bi sami testirati programe GrafX2 i JDraw.

I, naravno, odlična opcija za kreiranje pikselske umjetnosti je Adobe Photoshop, koji ima široku funkcionalnost, omogućava vam rad sa slojevima, podržava transparentnost i pruža jednostavan rad s paletom. Uz pomoć ovog programa pogledat ćemo jednostavne primjere kako sami nacrtati pixel art.

Kako nacrtati Pixel Art u Photoshopu

Kao i kod tradicionalnih likovnih umjetnosti, oblik, sjena i svjetlost su važni u piksel umjetnosti, pa prije nego što naučite kako crtati piksel art, potrudite se da se upoznate s osnovama crtanja – vježbajte crtanje olovkom na papiru.

Crtež "Balon"

Počnimo s najjednostavnijim - nacrtajte običan balon. Kreirajte novu datoteku u Photoshopu sa rezolucijom ekrana od 72 dpi. Nema smisla postavljati velike veličine slike - ovo je piksel art. Odaberite četkicu, tvrdu i neprozirnu, postavite veličinu na 1 piksel.

Nacrtajte mali zakrivljeni poluluk s lijeva na desno, vodeći ga odozdo prema gore. Zapamtite pravila pixel arta: zadržite iste proporcije segmenata, pomaknite ih u stranu za piksel, ne ostavljajući pregibe i prave kutove. Zatim preslikajte ovaj luk crtanjem vrha balona.

Po istom principu nacrtajte dno kuglice i konac. Napunite kuglicu crvenom bojom pomoću alata Fill. Sada ostaje dodati volumen - naša lopta izgleda previše ravna. Nacrtajte tamnocrvenu prugu na donjoj desnoj strani balona, a zatim nanesite dither na ovo područje. U gornjem lijevom uglu lopte nacrtajte odsjaj bijelih piksela.

Pogledajte kako je lako - lopta je spremna!

Figura "Robot"

A sada pokušajmo nacrtati sliku na tradicionalan način, a tek onda ćemo očistiti one piksele koji krše pravila piksel umjetnosti.

Otvorite novi dokument, napravite grubu skicu budućeg robota:

Sada možete očistiti sve što vam stane na put i nacrtati piksele gdje je potrebno:

Na isti način nacrtajte donji dio tijela robota. Ne propustite priliku da nacrtate "savršene" linije na pravim mjestima.

Detaljno opišite torzo robota. Mnogi iskusni umjetnici savjetuju vam da prije početka rada pripremite paletu - set boja koje ćete koristiti kada stvarate rad na piksel način. Ovo vam omogućava da postignete najveći integritet slike. Kreirajte paletu na slobodnom području Photoshop radnog prostora - na primjer, u obliku kvadrata ili mrlja u boji. Nakon toga, da odaberete željenu boju, kliknite na nju pomoću Eyedropper alata.

Možete početi ispunjavati konture. "Ukrasite" tijelo robota glavnom bojom. Naša boja je lavanda plava.

Promijenite boju obrisa - popunite ga tamnoplavom. Odlučite gdje je izvor svjetlosti na vašem crtežu. Nalazimo ga negdje iznad i desno ispred robota. Nacrtajmo grudi našeg lika, dodajući volumen:

Na desnoj strani označite najdublju sjenu na slici, koja prolazi duž konture torza. Iz ove sjene, od rubova do centra, nacrtajte svjetliju sjenu koja nestaje u predviđenim područjima osvijetljenim izvorom svjetlosti:

Dodajte istaknute dijelove robotu u svim područjima koja bi trebala reflektirati svjetlost:

Dajte robotovim nogama cilindričan izgled sa sjenama i svjetlima. Na isti način napravite rupe od krugova na grudima robota:

Sada poboljšajmo sliku dodavanjem elementa pixel arta koji smo ranije razmatrali - dithering - u sjene područja torza.

Dithering se može izostaviti na istaknutim dijelovima, kao i na nogama - one su već premale. Uz pomoć tamnih i svijetlih piksela nacrtajte red zakovica na glavi robota umjesto zuba, a također nacrtajte smiješnu antenu. Činilo nam se da ruka robota nije baš dobro nacrtana – ako naiđete na isti problem, izrežite objekt u Photoshopu i pomaknite ga dolje.

To je to - naš smiješni piksel robot je spreman!

A uz pomoć ovog videa naučit ćete kako napraviti pixel art animaciju u Photoshopu:

Uzmite, recite prijateljima!

Pročitajte i na našoj web stranici:

pokazati više

Termin "piksel grafika" nije poznat svima, niti je underground sleng. Šta je to što će Wikipedia pomoći da saznate. Glavna stvar koju treba razumjeti je to pixel art određuje način na koji je obrazac kreiran (piksel po piksel), a ne rezultati. Stoga crteži dobiveni pomoću filtera ili posebnih renderera također nisu uključeni u njega. U prvom dijelu članka, a možda i nizu članaka posvećenih ovoj umjetnosti, prikazat ću neke od radova koji su mi se svidjeli.

Neverovatne ilustracije, odlično senčenje. (Polyfonken's Pixel Art).

Tema je prilično široka. Postoje varijacije kockica.

Ilustracije Roda Hunta vrlo su živopisne i realistične. Umjetnik kombinira vektorsku grafiku s piksel umjetnošću.

Brazilsko-njemački blogeri Thiago, Pi, Jojo i Mariana predstavljaju se kao umiljati piksel likovi koji se smiju.

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

Pikseli takođe žive izvan ekrana računara. Neverovatno je koliko se dobro razumeju zapleti pikseliziranih slika.

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

Grad ludih lutaka. Ilustracija, iako nacrtana u vektoru, i dalje izgleda kao piksel art. Zanimljiv posao.

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

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

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

Primjer piksel umjetnosti. Fragment.

U ovom članku želimo govoriti o ljudima koji se bave piksel umjetnošću. Pogledajte pobliže njihova najbolja djela koja se, samo zbog složenosti izvedbe, bez preterivanja mogu nazvati djelima suvremene umjetnosti. Djela koja oduzimaju 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 četvrt. Autor:

pixel art(piše se bez crtice) ili pixel art- pravac digitalne umjetnosti, koji se sastoji u stvaranju slika na nivou piksela (tj. minimalne logičke jedinice od koje se slika sastoji). Nisu sve rasterske slike piksel art, iako su sve sastavljene od piksela. Zašto? Jer na kraju, koncept piksel umjetnosti uključuje ne 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 ispočetka - ovo će biti pravi falsifikat. Mada će sigurno biti naivnih prostaka koji će vas pohvaliti za vaš trud.

Sada se ne zna tačno kada je ova tehnika nastala, koreni su izgubljeni negde početkom 1970-ih. Međutim, tehnika sastavljanja slika od malih elemenata seže do mnogo drevnijih oblika umjetnosti, kao što su mozaici, ukrštanje, tkanje tepiha i perle. Sama fraza "pixel art" kao definicija piksel umjetnosti prvi je put korištena u članku Adele Goldberg i Roberta Flegala u časopisu Communications of the ACM (decembar 1982.).

Pixel art dobila je najširu primjenu u kompjuterskim igrama, što nije iznenađujuće - omogućila je stvaranje slika koje su nezahtjevne za resurse i istovremeno izgledaju stvarno lijepo (istovremeno oduzimaju puno vremena od umjetnika i zahtijevaju određene vještine, te stoga podrazumijevaju dobru plaću). Vrijeme procvata, najviša točka u razvoju, službeno se zove video igre na konzolama 2. i 3. generacije (početke 1990-ih). Daljnji napredak u tehnologiji, pojava najprije 8-bitne boje, a potom i True Color, razvoj trodimenzionalne grafike - sve je to vremenom potisnulo piksel art u drugi plan i treće planove, a onda se potpuno počelo činiti da je piksel umetnosti je došao kraj.

Čudno, ali gospodin Naučno-tehnološki napredak je sredinom 90-ih gurnuo pikselnu grafiku na posljednje pozicije, a kasnije je vratio u igru – otkrivši svijetu mobilne uređaje u obliku mobilnih telefona i PDA uređaja. Na kraju krajeva, bez obzira koliko je koristan novi uređaj, svi znamo da ako ne možete barem igrati pasijans na njemu, on je bezvrijedan. Pa, tamo gdje postoji ekran niske rezolucije, postoji i pixel art. Kako kažu, dobrodošli nazad.

Naravno, svoju su ulogu u povratku pikselske grafike odigrali i razni retrogradni elementi, koji vole nostalgirati nad dobrim starim igrama iz djetinjstva, govoreći: „Ma, sad to ne rade“; estete koji su u stanju da cijene ljepotu pixel arta i indie programeri koji ne percipiraju moderne grafičke ljepote (a ponekad, iako rijetko, jednostavno ne znaju kako ih implementirati u vlastite projekte), zbog čega vajaju pixel art . Ali nemojmo i dalje zanemariti čisto komercijalne projekte - aplikacije za mobilne uređaje, oglašavanje i web dizajn. Tako je sada pixel art, kako kažu, raširena u uskim krugovima i stekla je svojevrsni umjetnički status "nije za svakoga". I to uprkos činjenici da je jednostavnom laiku izuzetno dostupno, jer za rad u ovoj tehnici dovoljno je imati pri ruci kompjuter i jednostavan grafički uređivač! (sposobnost crtanja, inače, također ne škodi) Dosta riječi, prijeđite na stvar!

2. Alati.

Šta vam je potrebno za kreiranje pixel arta? Kao što sam već rekao, dovoljan je računar i bilo koji grafički uređivač koji može raditi na nivou piksela. Možete crtati bilo gdje, čak i na Game Boy-u, čak i na Nintendo DS-u, čak iu Microsoft Paint-u (druga stvar je da je crtanje u ovom drugom krajnje nezgodno). Postoji veliki broj rasterskih uređivača, mnogi od njih su besplatni i dovoljno funkcionalni, tako da svako može sam odlučiti o softveru.

Crtam u Adobe Photoshopu jer je to zgodno i jer je prošlo mnogo vremena. Neću lagati i govoriti, mrmljajući umjetnim zubima, da je “Sjećam se da je Photoshop još uvijek bio vrlo mali, bio je na Macintosh-u, i bio je sa brojem 1.0” Ovo nije bilo. Ali sećam se Photoshopa 4.0 (i takođe na Mac-u). I tako za mene pitanje izbora nikada nije stajalo. I stoga, ne, ne, ali dat ću preporuke u vezi sa Photoshopom, posebno tamo gdje će njegove mogućnosti pomoći da se uvelike pojednostavi kreativnost.

Dakle, potreban vam je bilo koji grafički uređivač koji vam omogućava 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ćava i spremanje datoteka - odlično. Bilo bi lijepo znati raditi sa slojevima, jer kada radite na prilično složenoj slici, prikladnije je razložiti njene elemente u različite slojeve, ali to je uglavnom stvar navike i pogodnosti.

Hoćemo li početi? Vjerovatno čekate listu 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 kako crtati piksel art je da nacrtate sebe, probajte, pokušajte, ne bojte se i eksperimentirajte. Slobodno kopirajte tuđe radove, ne plašite se da izgledate neoriginalno (samo nemoj da proglašavaš tuđe radove kao svoje, hehe). Pažljivo i promišljeno analiziraj rad majstora (ne moj) i crtaj, crtaj, crtaj. Nekoliko korisnih linkova čeka vas na kraju članka.

3. Opšti principi.

Međutim, postoji nekoliko općih principa koje vrijedi znati. Zaista ih je malo, ja ih zovem "principi" a ne zakoni, jer su prije savjetodavne prirode. Uostalom, ako uspijete nacrtati genijalnu piksel art zaobilazeći sva pravila - koga briga za njih?

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

Hod i općenito sve linije slike trebaju biti debljine jednog piksela (sa rijetkim izuzecima).

Nikako ne kažem da je ovo pogrešno. Ali još uvijek nije baš lijepo. A da bi bilo lijepo, zapamtite još jedno pravilo: crtajte bez pregiba, glatko zaokružite. Postoji nešto kao što su kinkovi - fragmenti koji nisu u redu, daju linijama neujednačen, nazubljen izgled (u okruženju pikselskih umjetnika na engleskom jeziku nazivaju se jaggies):

Pregibi oduzimaju crtežu prirodnu glatkoću i ljepotu. A ako su fragmenti 3, 4 i 5 očigledni i lako se ispravljaju, situacija je složenija s drugima - dužina jednog komada u lancu je tu prekinuta, čini se sitnicom, ali primjetnom sitnicom. Potrebno je malo vježbe 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 uglavljena linija sastoji od segmenata od 2 piksela. Da bih ga se riješio, ublažio sam ulazak krivulje u krivinu tako što sam proširio gornji segment na 3px i ponovo nacrtao cijelu liniju u segmentima od 2px. Prelomi 2 i 6 su identični jedan drugom - to su već fragmenti dužine 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 da se izbjegnu takvi prekidi prilikom crtanja:

Kao što vidite, ravna linija je sastavljena od segmenata iste dužine, pomaknutih za jedan piksel dok je nacrtana - samo tako se postiže efekat linearnosti. Najčešći načini konstrukcije su sa dužinom segmenta od 1, 2 i 4 piksela (postoje i drugi, ali predstavljene opcije bi trebale biti dovoljne za implementaciju gotovo svake umjetničke ideje). Od ova tri, najpopularnije se sa sigurnošću može nazvati dužinom segmenta od 2 piksela: nacrtajte segment, pomaknite olovku za 1 piksel, nacrtajte drugi segment, pomaknite olovku za 1 piksel, nacrtajte drugi segment:

Lako, zar ne? Samo je potrebna navika. Znati kako nacrtati nagnute linije u koracima od 2 piksela pomoći će kod izometrije, pa ćemo to pobliže pogledati sljedeći put. Općenito, ravne linije su odlične - ali samo dok se ne pojavi zadatak da nacrtate nešto čudesno. Ovdje su nam potrebne krive, i to mnogo različitih krivulja. I usvajamo jednostavno pravilo za zaokruživanje zakrivljenih linija: dužina elemenata krivulje treba postepeno smanjivati/povećati.

Izlaz iz ravne linije u zaokruživanje se odvija glatko, naznačio sam dužinu svakog segmenta: 5 piksela, 3, 2, 2, 1, 1, opet 2 (već okomito), 3, 5 i dalje. Nije nužno da će vaš slučaj koristiti isti redoslijed, 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 gradivo, ovdje imam skin za Winamp koji je nacrtao nepoznati autor, prazno:

Ima grubih grešaka na slici, i samo neuspješnog zaokruživanja, i pronalaze se pregibi - pokušajte ispraviti sliku na osnovu onoga što već znate. To je sve za mene sa linijama, predlažem da malo nacrtam. I neka vas jednostavnost primjera ne zavara, možete naučiti crtati samo crtajući - čak i tako jednostavne stvari.

4.1. Crtamo flašu sa živom vodom.

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

2. Crvena tečnost.

3. Promijenite boju stakla u plavu, dodajte zasjenjena područja unutar mjehurića i svijetli dio na predviđenoj površini tečnosti.

4. Dodajte bijele naglaske na balončić i tamnocrvenu sjenku širine 1 piksel na tečna područja koja graniče sa zidovima mjehurića. Izgleda dobro, zar ne?

5. Slično, crtamo bocu sa plavom tečnošću - ovde iste boje stakla, plus tri nijanse plave za tečnost.

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šku - 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 ukrstite lubenicu sa žoharima, oni će se sami raširiti.

6. Donosimo na pamet. Koristimo blijedo ružičastu boju da označimo istaknute dijelove iznad sjemenki u dijelu, a polaganjem piksela u šahovskom uzorku postižemo neku vrstu volumena iz isječenog dijela (metoda se zove dithering, o tome kasnije). Koristimo tamnocrvenu nijansu da označimo zasjenjena mjesta u dijelu lubenice, a tamnozelenu (opet, pikseli šahovnice) da damo volumen samoj lubenici.

5. Dithering.

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

Prijem je nastao zbog (ili bolje rečeno suprotno) tehničkih ograničenja - na platformama sa ograničenim paletama, dithering je omogućio da se miješanjem piksela dvije različite boje 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. Međutim, njegova pravilna upotreba može vašem radu dati karakterističan retro stil koji će prepoznati svi ljubitelji starih video igrica. Lično, volim da koristim dithering. Ne poznajem ga dobro, ali volim ga.

Još dvije opcije za dithering:

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

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

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

Pixel art se može nacrtati u bilo kojem programu rasterske grafike, stvar je ličnih preferencija i iskustva (kao i finansijskih mogućnosti, naravno). Neko 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 svidjelo - to je kao s automobilom koji prepoznaje strani automobil sa automatskim mjenjačem u Zaporozhetsu vjerojatno neće sjesti. Poslodavac mi obezbjeđuje licencirani softver, tako da imam čistu savjest pred Adobe Corporation... Iako su cijene njihovih programa nezamislive, a oni gore u paklu zbog toga.

1. Priprema za rad.

Kreirajte novi dokument sa bilo kojim postavkama (neka bude 60 piksela širok, 100 piksela visok). Glavni alat piksel umjetnika je olovka ( Alat za olovke, koju poziva interventna tipka B). Ako alatna traka ima omogućenu četkicu (i ikonu koja prikazuje četkicu), zadržite pokazivač iznad nje, pritisnite i držite LMB- pojavit će se mali padajući meni u kojem trebate odabrati olovku. Postavite veličinu olovke na 1 piksel (u gornjem panelu s lijeve strane, padajući meni Četka):