Najbolja umjetnost piksela. Pixel art: najbolja djela i ilustratori

Pixel Art danas je vrlo popularan u igrama i za to postoji nekoliko razloga!

Dakle, ono što Pixel Art osvaja:

Percepcija. Pixel Art izgleda nevjerojatno! Možete mnogo reći o svakom pojedinačnom pikselu u sprite.
Nostalgija. Pixel Art vraća sjajan nostalgičan osjećaj igračima koji su odrasli igrajući Nintendo, Super Nintendo ili Genesis (poput mene!)
Lakoća učenja. Pixel Art jedna je od digitalnih umjetnosti koju je najlakše naučiti, pogotovo ako ste više programer nego umjetnik;]

Želite li se okušati u Pixel Art -u? Zatim slijedite mene dok vam pokazujem kako napraviti jednostavan, ali učinkovit lik za igru koji možete koristiti u vlastitoj igri! Osim toga, kao bonus ćemo pogledati kako ga integrirati u igre za iPhone!

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

Što je Pixel Art?

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

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

Alat za zamućivanje: Definirajte piksele i duplicirajte ih / uredite kako biste napravili novu verziju prethodne slike. Opet, ne pixel art.

Alat za zaglađivanje(u osnovi generiranje novih piksela u različitim bojama kako bi se učinilo nešto "glatko"). Morate ih izbjegavati!

Neki će reći da čak i automatski generirane boje nisu Pixel Art, jer pretpostavljaju sloj za miješanje učinaka (miješanje piksela između dva sloja prema danom algoritmu). No budući da se većina uređaja trenutno bavi milijunima boja, ova se izjava može zanemariti. No, korištenje malog broja boja dobra je praksa u Pixel umjetnosti.

Drugi alati poput (redak) ili alat za kantu za boju(posuda s bojom) također automatski generira piksele, ali budući da ih možete postaviti da ne izglađuju rubove ispunjenih piksela, ti se alati smatraju prihvatljivima za Pixel Art.

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

Početak rada

Prije nego počnete izrađivati svoj prvi Pixel Art materijal, 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 u redu sve dok koristite višestruko skaliranje 2 (ali naravno da neće biti oštro).

Da biste izbjegli ovaj problem, prvo morate shvatiti koliki bi trebao biti vaš lik za igru ili element igre, a zatim prijeđite na posao. To se najčešće temelji na veličini zaslona uređaja na koji ciljate i koliko "piksela" želite vidjeti.

Na primjer, ako želite da igra izgleda dvostruko veće na ekranu iPhone 3GS ("Da, zaista želim svojoj igri dati pikseliran retro izgled!"), Čija je razlučivost zaslona 480x320 piksela, tada morate raditi na pola rezolucije, u ovom slučaju to će biti 240x160 piksela.

Otvorite novi dokument u Photoshopu ( Datoteka → Novo ...) i postavite veličinu na veličinu zaslona za igru, a zatim odaberite veličinu za svog lika.

Svaka ćelija ima 32x32 piksela!

Odabrao sam 32 × 32 piksela ne samo zato što je odličan za odabranu veličinu zaslona, već i zato što su 32 × 32 piksela također višekratnici 2, što je prikladno za strojeve za igračke, (veličine pločica često su više od 2, teksture su poravnate višekratnik 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 je potrebno povećati sliku, veličina će se bolje dijeliti, što će u konačnici rezultirati boljim performansama.

Kako nacrtati Pixel Art lika

Poznato je da je Pixel Art jasna i laka za čitanje grafika: možete definirati crte lica, oči, kosu, dijelove tijela sa samo nekoliko točaka. Međutim, veličina slika komplicira zadatak: što je vaš lik manji, to ih je teže nacrtati. Za praktičniji pristup zadatku odaberite ono što će biti najmanja od karakternih osobina. Uvijek biram oči jer su one jedan od najboljih načina da unesete život u lik.

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

Također će vam trebati Alat za brisanje(Alat za brisanje), pa kliknite na nju (ili pritisnite tipku E) i promijenite njene postavke odabirom s padajućeg popisa Način rada:(Način rada :) Olovka(Olovka) (jer u ovom načinu rada nema anti-aliasinga).

Sada počnimo pikselizirati! Nacrtajte obrve i oči kao što je prikazano na donjoj slici:

hej! Ja sam pikseliziran !!

Već ste mogli započeti s Lineartom (kada se crtanje vrši linijama), ali praktičniji način je nacrtati siluetu lika. Dobra vijest je da u ovoj fazi ne morate biti profesionalac, samo pokušajte zamisliti veličine dijelova tijela (glava, tijelo, ruke, noge) i početnu pozu lika. Pokušajte učiniti nešto ovako u sivoj boji:

U ovoj fazi ne morate biti profesionalac

Imajte na umu da sam ostavio i malo bijelog prostora. Zaista ne morate popuniti cijelo platno, ostavite mjesta za buduće snimke. U ovom slučaju bit će od velike pomoći zadržati istu veličinu platna za sve njih.

Kad završite siluetu, doći će vrijeme ... Sada biste trebali biti oprezniji s postavljanjem piksela, pa se još ne brinite oko odjeće, oklopa itd. Da biste bili sigurni, možete dodati novi sloj kako nikada ne biste izgubili svoju izvornu siluetu.

Ako smatrate da je alat Pencil prespor za crtanje, uvijek ga možete upotrijebiti (Alat za linije), samo zapamtite da piksele nećete moći postaviti točno onako kako biste to učinili olovkom. Morat ćete prilagoditi kao što je prikazano niže:

Molimo izaberite pritiskom i držanjem Alat za pravokutnik(Alat za pravokutnik)

Idite na ploču s opcijama alata na padajućem popisu Odaberite način rada alata(Način iscrtavanja obrisa) odaberite Piksel, promijenite Težina(Debljina) za 1px (ako već nije učinjeno) i poništite odabir Anti-alias(Zaglađivanje). Ovako biste ga trebali imati:

Imajte na umu da nisam napravio donju konturu za stopala. Ovo je izborno jer stopala nisu toliko važan dio nogu da se ističu, a time ćete uštedjeti jedan red piksela na platnu.

Nanesite boje i sjene

Sada ste spremni za početak bojenja našeg lika. Ne brinite oko odabira pravih boja, bit će ih vrlo lako kasnije promijeniti, samo pazite da svatko ima svoju boju. Koristite zadane boje na kartici Swatches(Prozor → Uzorci).

Obojite svog lika kao što je prikazano u nastavku (ali budite kreativni i upotrijebite vlastite boje!)

Lijepa, kontrastna boja poboljšava čitljivost vaše imovine!

Imajte na umu da još nisam napravio obrise odjeće ili kose. Uvijek zapamtite: sačuvajte što je moguće više piksela od nepotrebnih obrisa!

Ne gubite vrijeme slikajući svaki piksel. Koristite linije za istu boju kako biste ubrzali svoj rad, ili Alat za kantu za boju(Alat za kantu s bojom) za popunjavanje praznina. Usput, morat će se i konfigurirati. Molimo izaberite Alat za kantu za boju na alatnoj traci (ili samo pritisnite tipku G) i promijenite Tolerancija(Tolerance) na 0, a također poništite okvir Anti-alias(Zaglađivanje).

Ako ikada budete trebali koristiti Alat Čarobni štapić(Alat Magic Wand) - vrlo koristan alat koji odabire sve piksele iste boje, a zatim ga prilagođava na isti način kao i alat Paint Bucket - bez tolerancije ili uklanjanja alijansa.

Sljedeći korak, koji će od vas zahtijevati određeno znanje, je posvjetljivanje i zasjenjivanje. Ako nemate znanja o tome kako pokazati svijetle i tamne strane, u nastavku ću vam dati malu uputu. Ako nemate vremena i želje za proučavanje, možete preskočiti ovaj korak i otići na odjeljak "Začiniti svoju paletu", jer, na kraju krajeva, samo možete učiniti svoje sjenčanje istim kao u mom primjeru!

Za isti materijal upotrijebite isti izvor svjetlosti

Pokušajte dati oblik koliko želite / možete, jer nakon toga materijal počinje izgledati zanimljivije. Na primjer, sada možete vidjeti nos, namrštene oči, šok kose, nabore u hlačama itd. Na njega možete dodati i neke svijetle mrlje, izgledat će još bolje:

Prilikom zasjenjivanja koristite isti izvor svjetlosti

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

Začinite svoju paletu

Mnogi ljudi koriste zadane boje palete, ali budući da mnogi ljudi koriste te boje, možemo ih vidjeti u mnogim igrama.

Photoshop ima veliki izbor boja u svojoj standardnoj paleti, no ne biste se trebali previše oslanjati na njega. Najbolje je da sami napravite boje klikom na glavnu paletu pri dnu alatne trake.

Zatim u prozoru Alat za odabir boja pregledajte desnu bočnu traku kako biste odabrali boju, a glavno područje za odabir željene svjetline (svjetlije ili tamnije) i zasićenja (bogatije ili mutnije).

Nakon što pronađete onu koju želite, kliknite U redu i ponovno konfigurirajte alat Paint Bucket... Ne brinite, tada možete jednostavno poništiti okvir "Neprekidno", a kad obojite novom bojom, svi novi pikseli s istom bojom pozadine bit će prefarbani.

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

Uklonite oznaku "Contiguous" (Neprekidno) da biste odabrane piksele obojili istom bojom

Promijenite boje ako želite i dobijte glamuroznije bojenje likova! Možete čak i ponovno obojiti obrise, samo pazite da se dobro uklope u pozadinu.

Na kraju, napravite test boje pozadine: stvorite novi sloj ispod svog lika i ispunite ga različitim bojama. Time želite osigurati da vaš lik bude vidljiv na svijetlim, tamnim, toplim i hladnim pozadinama.

Kao što vidite, isključio sam anti-aliasing u svim alatima koje sam do sada koristio. Ne zaboravite to učiniti i u drugim alatima, na primjer, Eliptični okvir za izbor(Ovalni okvir) i Laso(Laso).

Pomoću ovih alata možete jednostavno promijeniti veličinu odabranih dijelova ili ih čak rotirati. Da biste to učinili, pomoću bilo kojeg alata za odabir (ili pritisnite tipku M) odaberite područje, kliknite desnom tipkom miša i odaberite Besplatna transformacija(Free Transform) ili samo pritisnite Ctrl + T. Za promjenu veličine odabira povucite jednu od ručica po obodu okvira za transformaciju. Da biste promijenili veličinu odabira uz zadržavanje proporcija, držite pritisnutu tipku Shift i povucite jednu od kutnih ručica.

Međutim, Photoshop automatski poravnava sve uređeno funkcijom Besplatna transformacija pa prije uređivanja idite na Uredi -> Postavke -> Općenito(Ctrl + K) i promijenite Interpolacija slike(Interpolacija slike) uključeno Najbliži susjed(Najbliži susjed). Ukratko, sa Najbliži susjed novi položaj i veličina izračunavaju se grubo, ne primjenjuju se nove boje ili prozirnice, a boje koje odaberete su sačuvane.

Integriranje Pixel Arta u iPhone igre

U ovom odjeljku naučit ćete kako integrirati našu umjetnost piksela u iPhone igru koristeći okvir igre Cocos2d. Zašto razmišljam samo o iPhoneu? Jer, zahvaljujući nizu članaka o Unityju (na primjer: ili Igranje u stilu Jetpack Joyride u Unity 2D), već znate raditi s njima u Unityju i iz članaka o Craftyju (Igre u pregledniku: Zmija) i Impact (Uvod u stvaranje Impact igara preglednika) naučili ste ih ugraditi u platno i stvoriti igre preglednika.

Ako ste tek počeli s razvojem Cocos2D ili iPhone aplikacija općenito, savjetujem vam da počnete s jednim od vodiča Cocos2d i iPhone. Ako imate instalirane Xcode i Cocos2d, čitajte dalje!

Izradite novi projekt iOS → cocos2d v2.x → cocos2d iOS predložak, dajte mu ime PixelArt i odaberite iPhone kao svoj uređaj. Povucite stvorenu sliku piksela poput: sprite_final.png u svoj projekt, a zatim je otvorite HelloWorldLayer.m i zamijenite način inicijalizacije sljedećim:

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

Sprajt postavljamo na lijevu stranu ekrana i rotiramo ga tako da gleda udesno. Kompilirajte, pokrenite i tada ćete vidjeti svoj sprite na ekranu:

Međutim, zapamtite, kao što smo ranije raspravljali u ovom vodiču, htjeli smo umjetno povećati piksele tako da se svaki piksel primjetno razlikuje od ostalih. Zato dodajte ovaj novi redak unutar metode init:

Hero.scale = 2.0;

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

To je zato što prema zadanim postavkama Cocos2d poravnava sliku kada je poveća. Ovo nam ne treba, pa dodajte sljedeći redak:

Ova linija konfigurira Cocos2d za skaliranje slika bez uklanjanja aliasinga, pa naš tip i dalje izgleda "pikselirano" Kompiliraj, pokreni i ... da, radi!

Uočite prednosti korištenja grafike Pixel Art - možemo upotrijebiti manju sliku od one koja je prikazana na zaslonu, čime se štedi puno memorije teksture. Ne moramo čak ni praviti zasebne slike za retina ekrane!

Što je sljedeće?

Nadam se da ste uživali u ovom vodiču i naučili nešto više o pixel art -u! Prije raskida želim vam dati nekoliko savjeta:

Uvijek pokušajte izbjeći korištenje anti-aliasinga, nagiba ili mnogo boja za svoju imovinu. To je za vaše dobro, pogotovo ako ste još početnik.
Ako STVARNO želite oponašati retro stil, pogledajte slike u 8-bitnim ili 16-bitnim igrama na konzoli.
Neki stilovi ne koriste tamne obrise; drugi ne uzimaju u obzir učinke svjetla ili sjene. Sve ovisi o stilu! U našem vodiču nismo crtali sjene, ali to ne znači da ih ne biste trebali koristiti.

Za početnike, Pixel Art je možda najjednostavnija grafika za učenje, ali zapravo nije tako jednostavna kako se čini. Najbolji način za nadogradnju vještina je vježba, vježba, vježba. Toplo preporučujem objavljivanje vašeg rada na forumima Pixel Art -a kako bi vam drugi umjetnici mogli dati savjet - to je sjajan način za poboljšanje vaše tehnike! Počnite s malim, puno vježbajte, dobijte povratne informacije i možete stvoriti nevjerojatnu igru koja će vam donijeti mnogo novca i radosti!

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

Pixel art posebna je tehnika za stvaranje slike u digitalnom obliku, izvedena u bitmap grafičkim uređivačima, u kojoj umjetnik radi s najmanjom jedinicom bitmape digitalne slike - pikselom. Takvu sliku karakterizira mala rezolucija, pri kojoj je svaki piksel jasno vidljiv. Pixel art izvodi se dugo i mukotrpno, ovisno o složenosti slike - piksel po piksel.

Osnovna pravila pixel arta

Najvažnija komponenta umjetnosti piksela je takozvana linija umjetnosti - drugim riječima, njeni obrisi. Pixel art izrađen je pomoću linija - ravnih i zakrivljenih.

Ravne linije

Pravilo za crtanje linija u piksel umjetnosti je da se trebaju sastojati od segmenata linija koji su tijekom crtanja pomaknuti u stranu za jedan piksel. Izbjegnite glavnu pogrešku početnika umjetnika piksela: pikseli se ne smiju dodirivati, tvoreći pravi kut.

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

Kao što možete vidjeti sa slike, sve ravne linije prikazane na njoj sastoje se od identičnih segmenata piksela pomaknutih u stranu za udaljenost od jednog piksela, a najpopularniji su segmenti od jednog, dva i četiri piksela. Takve jednostavne ravne crte u pikselu nazivaju se "idealne".

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

Zakrivljene linije

Ravne linije lakše je nacrtati jer izbjegavaju savijanje, što nije slučaj s zakrivljenim linijama. Njihova je konstrukcija teža, ali zakrivljene linije moraju se povlačiti mnogo češće od ravnih.

Osim iste zabrane stvaranja pravih kutova od piksela, pri crtanju zakrivljenih linija potrebno je zapamtiti i prirodu njihova pomaka. Duljina segmenata piksela trebala bi se mijenjati ravnomjerno, postupno - glatko rasti i jednako glatko padati. Pikselna grafika ne dopušta kinks.

Teško da ćete jednim pokretom ruke moći nacrtati savršenu zakrivljenu liniju, a da pritom ne prekršite nijedno pravilo, pa se možete poslužiti dvjema metodama: izvodite crte povlačeći jedan piksel za drugim ili nacrtajte pravilnu krivulju, a zatim ispravite to uklanjanjem dodatnih piksela iz gotovog "okvira".

Smirivanje

U pixel art -u postoji nešto poput ditheringa. To je specifičan način miješanja piksela različitih boja za stvaranje efekta prijelaza boje.

Najpopularnija tehnika ublažavanja su raspoređeni pikseli:

Ova metoda svoj izgled duguje tehničkim ograničenjima u paletama boja, jer je za dobivanje, na primjer, ljubičaste boje bilo potrebno nacrtati crvene i plave piksele u šahovnici:

Kasnije se dithering često koristio za prijenos glasnoće zbog svjetla i sjene na slikama:

Da bi umjetnost piksela s mrljama dobro funkcionirala, područje miješanja boja mora biti široko najmanje dva piksela.

Pixel art softver

Za savladavanje stvaranja umjetnosti na pikselan način možete upotrijebiti bilo koji grafički uređivač koji podržava ovu vrstu slikanja. Svi umjetnici rade s različitim programima na temelju svojih preferencija.

Mnogi ljudi do danas radije slikaju pikselima u poznatom standardnom programu operacijskog sustava Windows - Microsoft Paint. Ovaj je program doista jednostavan za učenje, ali to je i njegov nedostatak - prilično je primitivan, na primjer, ne podržava rad sa slojevima i njihovu transparentnost.

Još jedan program za umjetnost piksela jednostavan za korištenje čija se demo verzija može besplatno pronaći na internetu je GraphicsGale. Nedostatak programa je, možda, činjenica da ne podržava spremanje piksela u .gif formatu.

Korisnici Mac računala mogu isprobati besplatni program Pixen. Korisnici operacijskog sustava Linux trebali bi sami testirati programe GrafX2 i JDraw.

I, naravno, izvrsna opcija za stvaranje piksela je program Adobe Photoshop, koji ima široku funkcionalnost, omogućuje vam rad sa slojevima, podržava transparentnost i omogućuje jednostavan rad s paletom. Uz pomoć ovog programa pogledat ćemo jednostavne primjere kako sami nacrtati umjetnost piksela.

Kako crtati pixel art u Photoshopu

Kao i kod tradicionalne likovne umjetnosti, oblik, sjena i svjetlo vrlo su važni u pixel art -u, pa se prije nego naučite crtati pixel art, potrudite se upoznati s osnovama crtanja - vježbajte crtanje olovkom na papiru.

Crtež "Balon"

Krenimo od najjednostavnije stvari - nacrtajmo običan balon. Napravite novu datoteku u Photoshopu pri 72 dpi. Nema smisla postavljati velike dimenzije slike - ovo je umjetnost piksela. Odaberite četku, tvrdu i neprozirnu, postavite veličinu na 1 piksel.

Nacrtajte malu krivulju poluluka slijeva nadesno, odozdo prema gore. Zapamtite pravila pixel arta: zadržite iste omjere segmenata, pomaknite ih u stranu za piksel, ne ostavljajući zavoje ili prave kutove. Zatim zrcalite ovaj luk povlačeći vrh kugle.

Po istom principu nacrtajte dno loptice i konac. Napunite balon crvenom bojom pomoću alata Paint Bucket. Sada ostaje dodati volumen - naša lopta izgleda previše ravno. Nacrtajte tamnocrvenu prugu na donjoj desnoj strani balona, a zatim se povucite prema ovom području. U gornjem lijevom kutu balona iscrtajte bijele piksele.

Vidite kako je lako - lopta je spremna!

Crtanje "Robot"

Pokušajmo sada nacrtati sliku na tradicionalan način, pa tek onda očistiti one piksele koji krše pravila piksela.

Otvaranje novog dokumenta, gruba skica budućeg robota:

Sada možete očistiti sve što vam stoji na putu i po potrebi obojiti piksele:

Na isti način nacrtajte donje tijelo robota. Ne propustite priliku nacrtati "savršene" ravne crte na pravim mjestima.

Pojedinosti o tijelu robota. Mnogi iskusni umjetnici savjetuju vam da prije početka rada pripremite paletu - skup boja koje ćete upotrijebiti za kreiranje svog djela na pikselan način. To omogućuje najveći integritet slike. Napravite paletu u slobodnom području radnog područja Photoshopa - na primjer, u obliku kvadrata ili mrlja u boji. Zatim, za odabir željene boje, kliknite na nju alatom Kapaljka za oči.

Možete početi ispunjavati konture. "Obojite" glavnu boju na tijelu robota. Imamo ovu boju - lavanda plava.

Promijenite boju obrisa - napunite je tamnoplavom bojom. Odlučite gdje je izvor svjetlosti na vašem crtežu. Imamo ga smještenog negdje gore i desno ispred robota. Nacrtajmo škrinju našeg lika dodajući volumen:

Na desnoj strani označite najdublju sjenu na slici koja prolazi duž konture tijela. Od ove sjene, od rubova do središta, naslikajte svjetliju sjenu koja nestaje na predviđenim područjima izvora svjetlosti:

Robotu dodajte svjetla u svim područjima koja bi trebala odbijati svjetlost:

Dajte robotskim nogama cilindričan izgled sa sjenom i svjetlom. Na isti način napravite rupe od krugova na prsima robota:

Sada poboljšajmo sliku dodavanjem elementa umjetnosti piksela o kojem smo ranije govorili - ditheringa, u sjenovita područja tijela.

Pomicanje se može izbjeći na istaknutim dijelovima, kao i na nogama - već su premali. Koristite tamne i svijetle piksele za prikaz reda zakovice umjesto zuba na glavi robota, a također dodajte smiješnu antenu. Činilo nam se da ruka robota nije dobro izvučena - ako se suočite s istim problemom, izrežite objekt u Photoshopu i pomaknite ga prema dolje.

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

Uz pomoć ovog videa naučit ćete kako napraviti animaciju piksela u Photoshopu:

Uzmi to za sebe, reci svojim prijateljima!

Pročitajte i na našoj web stranici:

Prikaži više

Danas programi poput Photoshopa, Illustratora, Korela olakšavaju rad dizajnera i ilustratora. Uz njihovu pomoć možete u potpunosti raditi bez ometanja rasporedom piksela, kao što je to bilo krajem prošlog stoljeća. Sve potrebne izračune izvode softversko - grafički urednici. No, postoje ljudi koji rade u drugom smjeru, ne samo drugom, nego čak i potpuno suprotnom. Oni se, naime, bave vrlo starinskim rasporedom piksela, kako bi dobili jedinstveni rezultat i atmosferu u svojim djelima.

Primjer pixel arta. Fragment.

U ovom bismo članku htjeli govoriti o ljudima koji se bave pikselom. Pobliže pogledajte njihova najbolja djela, koja se, zbog puke složenosti izvedbe, bez pretjerivanja mogu nazvati djelima moderne umjetnosti. Djela koja će vam oduzeti dah.

Pixel Art. Najbolji radovi i ilustratori

Grad. Autor: Zoggles

Dvorac iz bajke. Autor: Tinuleaf

Srednjovjekovno selo. Autor: Docdoom

Viseći babilonski vrtovi. Autor: Pomrčina Mjeseca

Stambeni prostor. Autor:

Pixel art(napisano bez crtice) ili grafiku piksela- smjer digitalne umjetnosti koji se sastoji u stvaranju slika na razini piksela (to jest minimalna logička jedinica od koje se slika sastoji). Nisu sve rasterske slike pixel art, iako se sve sastoje od piksela. Zašto? Jer, na kraju, koncept piksela ne obuhvaća toliko rezultat koliko proces stvaranja ilustracije. Piksel po piksel, i samo to. Snimite li digitalnu fotografiju, uvelike je smanjite (tako da pikseli budu vidljivi) i tvrdite da ste je nacrtali od nule - to bi bio pravi krivotvorina. Iako će zasigurno biti naivnih prostaka koji će vas pohvaliti za vaš trud.

Sada se ne zna kada je točno ova tehnika rođena, korijeni su izgubljeni negdje početkom 1970 -ih. Međutim, tehnika sastavljanja slika od malih elemenata seže do mnogo starijih oblika umjetnosti, poput mozaika, šivanja križem, tkanja tepiha i perlica. Isti izraz "pixel art" kao definicija pixel art -a prvi je put upotrijebljen u članku Adele Goldberg i Roberta Flegala u časopisu Communications of the ACM (prosinac 1982.).

Pixel art dobio je najširu primijenjenu primjenu u računalnim igrama, što ne čudi - dopuštalo je stvaranje slika koje nisu bile zahtjevne za resurse, a istodobno izgledale zaista lijepo (dok su umjetniku oduzimale puno vremena i zahtijevale određene vještine, pa stoga podrazumijeva dobru plaću) ... Rascvat, najviša točka u razvoju, službeno se naziva videoigrama na konzolama 2. i 3. generacije (početak devedesetih). Daljnji napredak u tehnologiji, pojava prve 8-bitne boje, a zatim i True Color, razvoj trodimenzionalne grafike-sve je to na kraju potisnulo umjetnost piksela na drugi i treći plan, a onda se činilo da je piksel umjetnost došla do kraj.

Čudno, ali gospodin Scientific and Technological Progress je sredinom 90 -ih gurnuo grafiku piksela na posljednje pozicije, a kasnije je vratio igri - pokazujući svijetu mobilne uređaje u obliku mobitela i PDA uređaja. Uostalom, koliko god novonastali uređaj bio koristan, ti i ja znamo da ako na njemu ne možete ni igrati pasijans, to je bezvrijedno. Pa, tamo gdje postoji zaslon s niskom razlučivošću, postoji pixel art. Kako kažu, dobrodošli nazad.

Naravno, različiti retrogradni elementi odigrali su svoju ulogu u vraćanju grafike piksela, voljeli su nostalizirati stare dobre igre iz djetinjstva, govoreći: "Oh, oni to sada ne rade"; esteti koji su sposobni cijeniti ljepotu piksela, te nezavisni programeri koji ne percipiraju modernu grafičku ljepotu (a ponekad, iako rijetko, jednostavno ne znaju kako ih implementirati u vlastite projekte), zbog čega kipaju umjetnost piksela . No nemojmo još uvijek popustiti čisto komercijalne projekte - aplikacije za mobilne uređaje, oglašavanje i web -dizajn. Tako je sada pixel art, kako kažu, raširen u uskim krugovima i stekao je svojevrsni umjetnički status "nije za svakoga". .. I to unatoč činjenici da je jednostavnom laiku iznimno pristupačan, 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 stvaranje piksela? Kao što je gore rečeno, dovoljno je računalo i bilo koji grafički uređivač sposoban za rad na razini piksela. Možete crtati bilo gdje, čak i na Game Boyu, čak i na Nintendo DS -u ili čak u Microsoft Paintu (druga je stvar što je crtanje u potonjem izuzetno nezgodno). Postoji veliki broj uređivača bitmapa, mnogi od njih su besplatni i dovoljno funkcionalni da svatko može samostalno odlučiti o softveru.

Slikam u Adobe Photoshopu jer je zgodan i jer dugo. Neću lagati i govoriti, tresući lažnu čeljust, da je “Sjećam se da je Photoshop još bio vrlo mali, bio je na Macintosh -u i bio je broj 1.0” To nije bio slučaj. Ali sjećam se Photoshopa 4.0 (i na Macu). Stoga, za mene, pitanje izbora nikada nije bilo. I tako ne, ne, ali dat ću preporuke u vezi s Photoshopom, osobito tamo gdje će njegove mogućnosti 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 ne-kvadratni, na primjer, okrugli, ali nas trenutno ne zanimaju). Odlično, ako vaš urednik podržava bilo koji skup boja. Ako vam omogućuje i spremanje datoteka, to je sjajno. Također bi bilo lijepo raditi sa slojevima, budući da je radom na prilično složenoj slici prikladnije razgraditi njegove elemente na različite slojeve, ali to je uglavnom stvar navike i praktičnosti.

Počnimo? Čekate li vjerojatno popis nekih tajnih tehnika, preporuka koje će vas naučiti crtati pixel art? I istina je, općenito gledano, nema ništa takvo. Jedini način da naučite crtati pixel art je da nacrtate sebe, pokušate, pokušate, ne bojte se i eksperimentirajte. Ne ustručavajte se ponavljati tuđe radove, ne bojte se izgledati neoriginalno (samo nemojte tuđe djelo prenijeti kao svoje, hehe). Pažljivo i promišljeno analizirajte rad majstora (ne moj) i crtajte, slikajte, slikajte. Nekoliko korisnih veza čeka vas na kraju članka.

3. Opća načela.

Pa ipak, postoji nekoliko općih načela koja ne škodi znati. Doista ih je malo, ja ih nazivam „načelima“, a ne zakonima, jer su one prilično savjetodavne prirode. Uostalom, ako uspijete nacrtati briljantnu sliku piksela zaobilazeći sva pravila - koga briga za njih?

Najosnovnije načelo može se formulirati na sljedeći način: minimalna jedinica slike je piksel, a, ako je moguće, svi elementi kompozicije trebaju joj biti proporcionalni. Dešifrirat ću: sve što nacrtate sastoji se od piksela, a piksel bi trebao biti čitljiv u svemu. To ne znači da na slici uopće ne može biti elemenata, na primjer 2x2 piksela ili 3x3. No, ipak je bolje izgraditi sliku od pojedinačnih piksela.

Hod i općenito sve crte crteža trebaju biti debljine jednog piksela (uz rijetke iznimke).

Ne tvrdim da je to pogrešno. Ali još uvijek nije jako lijepo. A kako bi bilo lijepo, sjetimo se još jednog pravila: izvući bez savijanja, glatko zaobliti... Postoji nešto poput kinkova - fragmenata koji se izdvajaju iz općeg poretka, daju linijama neujednačen, nazubljen izgled (u engleskom govornom okruženju piksela nazivaju se jaggies):

Prijelomi lišavaju crtež njegove prirodne glatkoće i ljepote. A ako su fragmenti 3, 4 i 5 očiti i mogu se lako ispraviti, situacija s drugima je složenija - tamo je duljina jednog komada u lancu prekinuta, činilo bi se sitnica, ali zamjetna sitnica. Potrebno je malo vježbe da biste naučili vidjeti takva mjesta i izbjeći ih. Kink 1 izbačen je iz linije jer je to jedan piksel - dok se u području gdje se zaglavila linija sastoji od segmenata od 2 piksela. Kako bih ga se riješio, omekšao sam krivulju u zavoj produživši gornji segment na 3 piksela i precrtavši cijelu liniju u 2 segmenta piksela. Kinkovi 2 i 6 međusobno su identični - već su fragmenti duljine 2 piksela u područjima izgrađenim pojedinačnim pikselima.

Jednostavan skup primjera kosih linija, koji se mogu pronaći u gotovo svakom tutorialu o pikselu (moj nije iznimka), pomoći će u izbjegavanju takvih lomova pri crtanju:

Kao što vidite, ravna crta sastoji se od segmenata iste duljine, pomaknutih za jedan piksel dok se crta - to je jedini način za postizanje učinka linearnosti. Najčešći načini izgradnje s duljinom segmenta od 1, 2 i 4 piksela (postoje i drugi, ali predstavljene opcije trebale bi biti dovoljne za provedbu gotovo svake umjetničke ideje). Od ova tri, najpopularniji 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 drugi segment:

Nije teško, zar ne? Potrebna je samo navika. Sposobnost crtanja kosih linija u koracima od 2 piksela pomoći će u izometriji, pa ćemo se sljedeći put na tome detaljnije zadržati. Općenito, ravne linije su odlične - ali samo dok zadatak nije nacrtati nešto čudesno. Ovdje nam trebaju krivulje i puno različitih krivulja. Usvajamo jednostavno pravilo za zaokruživanje zakrivljenih linija: duljina elemenata krivulje trebala bi se postupno smanjivati / povećavati.

Izlaz s ravne crte na zaokruživanje odvija se glatko, označio sam duljinu svakog segmenta: 5 piksela, 3, 2, 2, 1, 1, 2 opet (već okomito), 3, 5 i tako dalje. Vaš slučaj ne mora nužno koristiti isti slijed, sve ovisi o glatkoći koja je potrebna. Još jedan zaokružujući primjer:

Ponovno, izbjegavajte zavoje koji kvare sliku. Ako postoji želja provjeriti stečeni materijal, ovdje imam kožu koju je za Winamp nacrtao nepoznati autor, prazno:

Na slici postoje velike pogreške, a pojavljuju se i samo neuspješni fileti i pregibi - pokušajte ispraviti sliku na temelju onoga što već znate. Ovo je sve što imam s linijama, predlažem da malo nacrtam. I nemojte biti zbunjeni zbog jednostavnosti primjera, crtanje možete naučiti samo crtežom - čak i takve jednostavne stvari.

4.1. Nacrtamo bocu sa živom vodom.

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

2. Crvena tekućina.

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

4. Dodajte mjehuriće bijele boje i tamnocrvenu sjenu široku 1 piksel na područja tekućine koja graniči sa stijenkama mjehurića. Izgleda dobro, ha?

5. Na isti način nacrtajte bočicu s plavom tekućinom - ovdje je ista boja 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 rez na samoj lubenici, a na kriški - granicu između kore i pulpe.

3. Ispunite. Boje s palete, srednje zelena je boja kore, srednje crvena je boja mesa.

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

5. Svjetlosne pruge na lubenici (konačno, izgleda kao ona sama). I naravno - sjemenke! Ako križate lubenicu sa žoharima, same će se raširiti.

6. Donosimo na umu. Koristimo blijedo ružičastu boju za označavanje istaknutih točaka iznad sjemena u odjeljku, a postavljanjem piksela u šahovnici postižemo iz izrezane kriške neki privid volumena (metoda se naziva dithering, više o tome kasnije) . Koristimo tamnocrvenu nijansu za označavanje zasjenjenih područja u rezu lubenice, a tamnozelenu (opet, pikseli u šahovnici) za dodavanje volumena samoj lubenici.

5. Ometanje.

Dithering ili blending je tehnika miješanja na definitivno uređen (ne uvijek) način piksela u dva granična područja različitih boja. Najjednostavniji, najčešći i učinkovitiji način je izmjena piksela u šahovnici:

Tehnika je nastala zahvaljujući (ili bolje rečeno suprotno) tehničkim ograničenjima - na platformama s ograničenim paletama, odstupanje je omogućilo, miješanjem piksela dviju različitih boja, dobivanje treće koja nije bila u paleti:

Sada, u eri beskrajnih tehničkih mogućnosti, mnogi kažu da je potreba za ublažavanjem nestala sama od sebe. Međutim, pametno korištenje može vašim umjetničkim djelima dati onaj osebujan retro izgled koji će prepoznati svi ljubitelji starih video igara. Osobno volim koristiti dithering. Ne govorim to dobro, ipak, volim.

Još dvije mogućnosti za ometanje:

Ono što trebate znati o ditheru da biste ga mogli koristiti. Minimalna širina zone miješanja mora biti najmanje 2 piksela (iste te dame). Više je moguće. Manje je bolje ne činiti.

U nastavku slijedi primjer neuspješnog posustajanja. Unatoč činjenici da se takva tehnika često može pronaći na sprajtovima iz videoigara, morate biti svjesni da je televizijski zaslon 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žbamo.

Pixel art se može nacrtati u bilo kojem programu za rad s rasterskom grafikom, to je stvar osobnih preferencija i iskustva (kao i financijskih mogućnosti, naravno). Netko koristi najjednostavniji Paint, ja to radim u Photoshopu - jer, prvo, već 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 autom, koji u Zaporožcu prepozna strano vozilo s automatskim mjenjačem vjerojatno neće sjesti. Poslodavac mi daje licencirani softver, tako da mi je savjest čista pred korporacijom Adobe ... Iako su cijene njihovih programa nezamislive, a oni zbog toga gore u paklu.

1. Priprema za rad.

Izradite novi dokument s bilo kojim postavkama (neka bude 60 piksela širine, 100 piksela visine). Glavni alat piksela umjetnika je olovka ( Alat za olovke, koji se poziva tipkom prečaca B). Ako je četka (i ikona četke) omogućena u kutiji s alatima, zadržite pokazivač iznad nje, 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):