Adobe Photoshop: Crtamo i animiramo lik Pixel tehnologija Art

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

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

I. Postavljanje dokumenta i alata

Korak 1

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

Korak 2

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

Korak 3

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

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

Korak 4

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

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

II. Stvaranje karaktera

Korak 1

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

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

Korak 2

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

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

Korak 3

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

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

Korak 4

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

Korak 5

Izgladite obris crtanjem senke duž unutrašnje ivice.

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

Korak 6

Kreirajte novi sloj za istaknute dijelove.

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

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

Korak 7

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

Lik je sada spreman za animaciju.

III. Animacija karaktera

Korak 1

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

Smanjite neprozirnost originalnog sloja za 50% kako biste mogli vidjeti prethodni okvir. To se zove “Oguljenje luka” (način množine).

Korak 2

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

● Istakni leva ruka Laso alat

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

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

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

Korak 3

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

Korak 4

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

Korak 5

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

Piksel grafika (u daljem tekstu jednostavno pixel art) postaje sve popularnija ovih dana, posebno kroz indie igre. To je razumljivo, jer na ovaj način umjetnici mogu ispuniti igru ​​velikom raznolikošću likova i ne provode stotine sati modelirajući 3D objekte i ručno crtajući složene objekte. Ako želite naučiti pikselsku umjetnost, tada ćete prije svega morati naučiti kako crtati takozvane „sprajtove“. Zatim, kada vas sprijtovi više ne plaše, možete prijeći na animaciju, pa čak i na prodaju svog rada!

Koraci

Dio 1

Prikupljamo sve što vam treba

Preuzmite dobre grafičke editore. Možete, naravno, stvarati remek-djela u Paintu, ali to je teško i nije baš zgodno. Bilo bi mnogo bolje raditi u nečemu poput:

• Photoshop
• Paint.net
• Pixen

1. Kupite grafički tablet. Ako ne volite da crtate mišem, onda su tablet i olovka ono što vam treba. Wacom tableti su, inače, najpopularniji.

   Omogućite „mrežu“ u svom grafičkom uređivaču. Zapravo, ako vaš grafički uređivač ne podržava prikaz mreže, onda biste trebali razmisliti o traženju drugog programa. Mreža će vam omogućiti da jasno vidite gdje i kako će se svaki pojedinačni piksel nalaziti. Po pravilu, brojanica se uključuje preko menija „Prikaz“.

   • Možda ćete morati malo podesiti postavke prikaza kako biste osigurali da svaki segment mreže zapravo prikazuje piksel. Svaki program to radi drugačije, pa potražite savjete u skladu s tim.

2. Crtajte olovkom i kistom veličine 1 piksel. Svaki grafički uređivač treba da ima alatku „Olovka“. Odaberite ga i postavite veličinu četkice na 1 piksel. Sada možete crtati... u pikselima.

   dio 2

   Rad na osnovama

   Kreirajte novu sliku. Budući da učite crtati u stilu piksel umjetnosti, ne biste trebali težiti epskim platnima. Ako se sjećate, u igrici Super Mario Bros. cijeli ekran je bio 256 x 224 piksela, a sam Mario se uklapao u prostor od 12 x 16 piksela!

   1. Uvećajte. Da, inače jednostavno nećete moći vidjeti pojedinačne piksele. Da, morat ćete ga jako povećati. Recimo da je 800% sasvim normalno.

      Naučite crtati ravne linije.Čini se jednostavno, ali ako iznenada drhtavom rukom nacrtate liniju debljine 2 piksela negdje u sredini, razlika će vam udariti u oči. Crtajte ravne linije sve dok ne morate aktivirati alat za prave linije. Morate naučiti crtati ravne linije rukom!

      Naučite crtati zakrivljene linije. U zakrivljenoj liniji treba da postoje, recimo, ujednačeni „prelomi linija“ (što je jasno vidljivo na slici iznad). Recimo, počevši da crtate zakrivljenu liniju, nacrtajte pravu liniju od 6 piksela, ispod nje ravnu liniju od tri, ispod nje ravnu liniju od dva, a ispod nje ravnu liniju od jednog piksela. Na drugoj strani nacrtajte istu stvar (naravno u ogledalu). Ovo je napredak koji se smatra optimalnim. Krive nacrtane u uzorku "3-1-3-1-3-1-3" ne zadovoljavaju standarde pikselske umjetnosti.

      Ne zaboravite da obrišete greške. Alat „Eraser“ treba postaviti na isti način kao i olovku, čineći veličinu četkice jednakom 1 pikselu. Što je gumica veća, to je teže ne obrisati previše, tako da je sve logično.

      dio 3

      Kreiranje prvog sprite-a

      1. Razmislite u koje svrhe će služiti sprite. Hoće li biti statična? Animirani? Statički sprite može biti zasićen detaljima do maksimuma, ali animirani je bolje učiniti jednostavnijim, tako da ne trošite sate na ponovno crtanje svih detalja na svim okvirima animacije. Usput, ako će se vaš sprite koristiti s drugima, onda bi svi trebali biti nacrtani u istom stilu.

         Saznajte postoje li posebni zahtjevi za sprite. Ako crtate za, recimo, projekat, razumno je očekivati ​​zahtjeve za boju ili veličinu datoteke. Međutim, ovo će biti važnije malo kasnije, kada počnete raditi na velikim projektima s mnogo različitih sprite-ova.

         • Objektivno govoreći, ovih dana rijetko se postavljaju zahtjevi za veličinom ili paletom sprijtova. Međutim, ako crtate grafiku za igru ​​koja će se igrati na starijim sistemima za igre, tada ćete morati uzeti u obzir sva ograničenja.

      2. Napravite skicu. Skica na papiru je osnova svakog sprite-a, srećom na ovaj način ćete moći razumjeti kako će sve izgledati i, ako je potrebno, možete nešto unaprijed ispraviti. Osim toga, možete pratiti na papirnoj skici (ako još uvijek imate tablet).

         • Ne štedite na detaljima za svoju skicu! Nacrtajte sve što želite da vidite na konačnom crtežu.

      3. Prenesite skicu u grafički uređivač. Možete iscrtati papirnu skicu na tabletu, ili možete sve precrtati ručno, piksel po piksel - nije važno, izbor je vaš.

         • Kada pratite skicu, koristite 100% crnu boju kao boju konture. Ako se nešto desi, kasnije možete to ručno promijeniti, ali za sada će vam biti lakše raditi s crnom.

      4. Pročistite obris skice. U tom kontekstu možete, naravno, reći drugačije - obrišite sve nepotrebno. U čemu je poenta - obris bi trebao biti debeo 1 piksel. Shodno tome povećajte skalu i obrišite, obrišite višak... ili popunite olovkom ono što nedostaje.

         • Kada radite na skici, nemojte da vas ometaju detalji - doći će na red.

      dio 4

      Bojanje duha

      1. Osvježite teoriju boja. Pogledajte paletu da vidite koje boje koristiti. Tu je sve jednostavno: što su boje dalje jedna od druge, to se više razlikuju jedna od druge; Što su boje bliže jedna drugoj, to su sličnije i bolje izgledaju jedna pored druge.

         • Odaberite boje koje će vaš duh učiniti lijepim i lakim za oči. I da, pastelne boje treba izbjegavati (osim ako je cijeli projekat urađen u tom stilu).

      2. Odaberite nekoliko boja.Što više boja koristite, to će vaš sprite više "odvlačiti pažnju", da tako kažem. Pogledajte neke klasike pikselske umjetnosti i pokušajte izbrojati koliko se boja tamo koristi.

         • Mario - samo tri boje (ako govorimo o klasičnoj verziji), pa čak i one se nalaze skoro jedna uz drugu na paleti.
         • Sonic - čak i ako je Sonic nacrtan sa veliki broj detaljnije nego Mario, i dalje je baziran na samo 4 boje (i sjene).
         • Skoro klasik sprite-ova kako se razumiju u borbenim igrama, Ryu je velika područja jednostavnih boja, plus neke sjene za razgraničenje. Ryu je, međutim, malo složeniji od Sonica - već ima pet boja i sjenki.

      3. Obojite sprite. Koristite alat Paint Fill da obojite svoj sprite i ne brinite da će sve izgledati ravno i beživotno - u ovoj fazi se ne očekuje drugačije. Princip Fill alata je jednostavan - ispunit će sve piksele boje na koju ste kliknuli bojom koju ste odabrali sve dok ne dosegne granice.

      dio 5

      Dodavanje senki

      Odlučite se za svoj izvor svjetlosti. Evo suštine: morate odlučiti pod kojim će uglom svjetlost pogoditi sprite. Kada se odlučite za ovo, možete napraviti sjene uvjerljivog izgleda. Da, neće biti "svetla" u doslovnom smislu, poenta je zamisliti kako će pasti na crtež.

      • Najjednostavnije rješenje je pretpostaviti da je izvor svjetlosti vrlo visoko iznad spritea, malo lijevo ili desno od njega.

      1. Počnite nanositi sjene koristeći boje koje su nešto tamnije od baze. Ako svjetlost dolazi odozgo, gdje će biti sjena? Tako je, tamo gdje direktna svjetlost ne pada. U skladu s tim, da biste dodali sjenu, jednostavno dodajte još nekoliko slojeva spriteu s pikselima odgovarajuće boje iznad ili ispod obrisa.

         • Ako smanjite postavku “Contrast” osnovne boje blagim povećanjem postavke “Brightness”, možete dobiti dobra boja da nacrtate senke.
         • Nemojte koristiti gradijente. Gradijent je zlo. Gradijent izgleda jeftino, loše i neprofesionalno. Efekat sličan onom kod gradijenata postiže se tehnikom „razrjeđivanja“ (vidi dolje).

      2. Ne zaboravite na djelomičnu sjenu. Odaberite boju između osnovna boja i boju senke. Upotrijebite ga da napravite još jedan sloj - ali ovaj put između slojeva ove dvije boje. Rezultat će biti efekat prijelaza iz tamnog područja u svijetlo.

         Nacrtajte naglaske. Vrhunac je mjesto na sprite-u gdje pada najviše svjetla. Možete nacrtati vrhunac ako uzmete boju koja je nešto svjetlija od osnovne boje. Glavna stvar je da se ne zanosite odsjajem, to odvlači pažnju.

Pixel Art (Pixel grafika) je vrlo popularan za igre čak i ovih dana i postoji nekoliko razloga za to!

Dakle, ono što osvaja Pixel Art:

1. Percepcija. Pixel Art izgleda neverovatno! Mnogo toga se može reći o svakom pojedinačnom pikselu u duhu.
2. 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!)
3. Lako se uči. Pixel Art je jedna od najlakših vrsta za učenje digitalna umjetnost, pogotovo ako ste više programer nego umjetnik;]

Dakle, želite li se okušati u Pixel Artu? Zatim pratite samnom i pokazat ću vam kako da napravite jednostavan, ali efikasan lik za igru ​​koji možete koristiti u svom vlastitu igru! 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, hajde da razjasnimo šta je Pixel Art, jer nije tako očigledno kao što mislite. Najlakši način da definišete šta je Pixel Art jeste da definišete šta nije, naime: bilo šta gde 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: Definiranje piksela i njihovo repliciranje/uređivanje da bi se napravili nova verzija prethodna slika. Opet, ne piksel art.

Glatki alat(u osnovi 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 miješanje efekata (miješanje piksela između dva sloja prema datom algoritmu). Ali budući da većina uređaja danas radi sa milionima boja, ova izjava se može zanemariti. Međutim, upotreba nije velika količina boje je dobra praksa u Pixel art-u.

Ostali alati kao npr (linija) ili alat za boju(Paint Bucket) takođe automatski generiše piksele, ali pošto ih možete postaviti da ne anti-alias piksele koje popunjavate, ovi alati se smatraju Pixel Art prijateljskim.

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

Početak

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 zumirate, sve će izgledati u redu sve dok koristite zum višestruki od dva (ali naravno neće biti oštar).

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 igra izgleda dvostruko veća na ekranu iPhone 3GS („Da, stvarno želim svojoj igri dati pikselski retro izgled!“), čija je rezolucija ekrana 480x320 piksela, tada morate raditi s pola rezolucije V u ovom slučaju biće 240x160 piksela.

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

Svaka ćelija je 32x32 piksela!

Odabrao sam 32x32 piksela ne samo zato što se savršeno uklapa u odabranu veličinu ekrana, već i zato što je 32x32 piksela također višekratnik od 2, što je zgodno za motore igračaka (veličine pločica su često višestruke od 2, teksture su poravnate 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 u konačnici rezultirati boljim performansama.

Crtanje Pixel Art lika

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 to otežava: što je vaš lik manji, to ga je teže nacrtati. Da biste bili praktičniji, odaberite najmanju karakternu osobinu. Uvijek biram oči jer su one jedan od najboljih načina da oživite lik.

U Photoshopu odaberite Alat za olovke(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). Trebat ćete samo promijeniti veličinu na 1px (možete kliknuti na traku sa opcijama alata i promijeniti joj veličinu ili samo držati pritisnut tipku [).

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

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

ey! Ja sam pikseliziran!!

Već možete početi s Lineartom, ali praktičniji način je da nacrtate siluetu lika. Dobre vijesti je da u ovoj fazi ne morate biti profesionalac, samo pokušajte zamisliti veličinu dijelova tijela (glava, trup, ruke, noge) i početnu pozu lika. Probaj ovako nešto siva:

Ne morate biti profesionalac u ovoj fazi

Imajte na umu da sam također ostavio malo bijelog prostora. 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.

Nakon što završite siluetu, vrijeme je . Sada morate biti pažljiviji s postavljanjem piksela, tako da ne brinite o odjeći, oklopu itd. Samo 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 možete olovkom. Morat ćete konfigurirati kao što je prikazano ispod:

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

Idite na panel opcija alata, na padajućoj listi Odaberite način rada alata(Način praćenja putanje) odaberite Pixel , promijenite Težina(Debljina) na 1px (ako već nije urađeno) i poništite izbor Anti-alias(Zaglađivanje). Ovako bi trebalo da ga imate:

Primijetite da nisam napravio donji obris za stopala. Ovo nije neophodno jer stopala nisu takva važan deo noge da ih istaknete i na taj način ćete sačuvati jednu liniju piksela na platnu.

Nanošenje boja i senki

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

Obojite svoj lik kao na slici ispod (ali budite kreativni i koristite svoje boje!)

Dobra, kontrastna boja poboljšava čitljivost vašeg materijala!

Napominjemo da još uvijek nisam ocrtao odjeću ili kosu. Uvijek zapamtite: sačuvajte što više piksela od nepotrebnih obrisa!

Nema potrebe da gubite vreme slikajući svaki piksel. Da biste ubrzali svoj rad, koristite linije za istu boju, ili Alat za bojenje(Paint Bucket Tool) da popunite praznine. Usput, također ćete ga morati konfigurirati. Odaberite Alat za bojenje na traci sa alatkama (ili samo pritisnite taster G) i promenite Tolerancija(Tolerancija) na 0, i također opozovite izbor Anti-alias(Zaglađivanje).

Ako ikada budete trebali koristiti Alat Magic Wand(Alat Štapić) je 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 zahtijevati određeno znanje s vaše strane, je izbjegavanje i sjenčanje. Ako nemate znanja o tome kako da pokažete svijetle i tamne strane, onda ću vam u nastavku dati neke upute. Ako nemate vremena ili sklonosti da to proučavate, možete preskočiti ovaj korak i prijeći na odjeljak "Začinite svoju paletu", jer na kraju možete jednostavno napraviti svoje sjenčanje istim kao u mom primjeru!

Koristite isti izvor svjetlosti za cijelo sredstvo

Pokušajte mu dati oblike koje želite/možete, jer nakon toga sredstvo počinje izgledati zanimljivije. Na primjer, sada možete vidjeti nos, namrštene oči, dlaku, 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, možemo ih vidjeti u mnogim igrama.

Photoshop ima veliki izbor boje u standardnoj paleti, ali se ne treba previše oslanjati na nju. Najbolji način da napravite svoje boje je da kliknete 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 (svjetlije ili tamnije).

Kada pronađete onu koju želite, kliknite OK i ponovo konfigurišite alat Paint Bucket. Ne brinite, tada možete jednostavno poništiti okvir 'Contiguous' i kada slikate novom bojom, svi novi pikseli s istom bojom pozadine također će biti popunjeni.

Ovo je još jedan razlog zašto je važno raditi sa malim brojem boja i uvijek koristiti istu boju za isti element (košulje, kosa, kaciga, oklop itd.). Ali zapamtite da koristite 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 popunite ga različite boje. Ovo je da bi se osiguralo da će vaš lik biti vidljiv na svijetloj, tamnoj, toploj i hladnoj pozadini.

Kao što već 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(Ovalni šator) 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 M) da biste odabrali područje, kliknite desnim tasterom miša 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 po obodu okvira transformacije. Da biste promijenili veličinu odabira uz zadržavanje proporcija, držite pritisnut tipku Shift i povucite jednu od ugaonih ručki.

Međutim, Photoshop automatski izglađuje sve što je uređeno pomoću Free Transform pa prije uređivanja idite na Uredi → Preference → Opšte(Ctrl + K) i promijenite Interpolacija slike(interpolacija slike) uključena Najbliži susjed(Najbliži susjed). Ukratko, kada Najbliži susjed nova pozicija i veličina izračunavaju se vrlo grubo, bez primjene novih boja ili neprozirnosti i zadržavanja boja koje ste odabrali.

Integracija Pixel Art-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 Unityju (na primjer: , ili Igra u stilu Jetpack Joyride u Unity 2D) već znate kako raditi s njima u Unityju, 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 umetnete u platno i kreirate igre pretraživača.

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

Kreiraj 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 i 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 povećati skalu piksela na umjetni način kako bi se svaki piksel uočljivo razlikovao od ostalih. Dakle, dodajte ovu novu liniju unutar metode inicijalizacije:

Hero.scale = 2.0;

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

To je zato što, prema zadanim postavkama, Cocos2d izglađuje crtež kada ga skalira. Ovo nam ne treba, pa dodajte sljedeći red:

Ova linija konfigurira Cocos2d za skaliranje slika bez anti-aliasinga, tako da naš tip 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!

Š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 na vašim elementima. Ovo je za vaše dobro, pogotovo ako ste još uvijek početnik.
• Ako ZAISTA želite oponašati retro izgled, pogledajte umjetnička djela u 8-bitnim ili 16-bitnim igrama za konzolu.
• Neki stilovi ne koriste tamne obrise, drugi ne uzimaju u obzir efekte svjetla ili sjene. Sve zavisi od stila! U našem tutorijalu nismo crtali sjene, ali to ne znači da ih ne biste trebali koristiti.

Za početnika, Pixel Art izgleda kao najlakša grafika za učenje, ali u stvarnosti nije tako jednostavna kao što se čini. Najbolji način Da biste poboljšali svoje vještine, potrebno je vježbati, vježbati, vježbati. Toplo preporučujem da objavite svoj rad na Pixel Art forumima kako bi vam drugi umjetnici mogli dati savjet - to je sjajan način da poboljšate svoju tehniku! Počnite s malim, vježbajte puno, dobijte povratne informacije i možete kreirati nevjerovatnu igru ​​koja će vam donijeti mnogo novca i radosti!

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

Korak 1

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

Korak 2

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

Korak 3

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

Korak 4

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

Korak 5

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

Korak 6

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

Korak 7

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

Korak 8

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


Dio 6: Antialiasing
Dio 7: Teksture i zamućenje
Dio 8: Svijet pločica

Predgovor

Postoje mnoge definicije piksel umjetnosti, ali ovdje ćemo koristiti ovu: slika je piksel umjetnost ako je kreirana u potpunosti ručno, i postoji kontrola nad bojom i položajem svakog piksela koji je nacrtan. Naravno, u piksel umjetnosti, uključivanje ili korištenje četkica ili alata za zamućenje ili degradiranih strojeva (nisam siguran) i druge softverske opcije koje su „moderne“ ne koristimo (zapravo stavljeno na raspolaganje znači „nam na raspolaganju“ , ali logično je ovako ispravnije). Ograničeno je na alate za olovku i popunjavanje.

Međutim, ne možete reći da su piksel art ili nepiksel art grafike manje ili više lijepe. Pravednije je reći da je pixel art drugačija i da je bolje prilagođena igrama u retro stilu (kao što su Super Nintendo ili Game Boy). Također možete kombinirati tehnike naučene ovdje s efektima iz nepikselne umjetnosti kako biste stvorili hibridni stil.

Dakle, ovdje ćete naučiti tehnički dio pixel arta. Međutim, nikada te neću učiniti umjetnikom... iz jednostavnog razloga što ni ja nisam umjetnik. Neću vas učiti ni ljudskoj anatomiji ni strukturi umjetnosti, a malo ću reći o perspektivi. U ovom vodiču možete pronaći mnogo informacija o tehnikama piksel umjetnosti. Na kraju, trebalo bi da budete u mogućnosti da kreirate likove i scenografiju za svoje igre, pod uslovom da obratite pažnju, redovno vežbate i primenjujete date savete.

- Takođe želim da istaknem da su samo neke od slika koje se koriste u ovom tutorijalu uvećane. Za slike koje nisu uvećane, dobro je ako odvojite vrijeme za kopiranje ovih slika kako biste ih mogli detaljno proučiti. Piksel art je suština piksela, proučavanje ih iz daljine je beskorisno.

Na kraju, moram se zahvaliti svim umjetnicima koji su mi se pridružili u stvaranju ovog vodiča na ovaj ili onaj način: Shinu, za njegov prljavi rad i umjetnost linija, Xenohydrogen, za njegovu genijalnost s bojama, Lunn, za njegovo poznavanje perspektive, i Panda, strogi Ahruon, Dayo i Kryon za njihove velikodušne doprinose ilustrovanju ovih stranica.

Dakle, da se vratim na stvar.

Dio 1: Pravi alati

Loše vijesti: u ovom dijelu nećete nacrtati ni jedan piksel! (I to nije razlog da to preskočite, zar ne?) Ako postoji izreka koju mrzim, to je „ne postoje loši alati, samo loši radnici“. Zapravo sam mislio da ništa ne može biti dalje od istine (osim možda "ono što te ne ubije, ojača te"), a pixel art je jako dobra potvrda. Ovaj vodič ima za cilj da vas upozna sa različitim softverom koji se koristi za kreiranje pixel arta i da vam pomogne da odaberete pravi program.

1.Neke stare stvari

Kada biraju softver za kreiranje pixel arta, ljudi često razmišljaju: „Izbor softvera? Ovo je ludo! Sve što nam treba da napravimo piksel art je boja (očigledno igra riječi, crteža i programa)” Tragična greška: govorio sam o lošim alatima, ovo je prva! Paint ima jednu prednost (i to samo jednu): već je imate ako koristite Windows. S druge strane, ima dosta nedostataka. Ovo je (nepotpuna) lista:

*Ne možete otvoriti više od jedne datoteke u isto vrijeme
* Nema kontrole palete.
*Bez slojeva ili transparentnosti
* Nema nepravokutnih odabira
* Nekoliko interventnih tastera
* Užasno nezgodno

Ukratko, možete zaboraviti na Paint. Sada ćemo pogledati pravi softver.

2. Na kraju...

Ljudi tada misle: "U redu, Paint je previše ograničen za mene, pa ću koristiti svog prijatelja Photoshop (ili Gimp ili PaintShopPro, to je ista stvar) koji ima hiljade funkcija." Ovo može biti dobro ili loše: ako već znate jedan od ovih programa, možete napraviti pixel art (sa isključenim svim opcijama za automatsko anti-aliasing i velikim dijelom napredne funkcionalnosti). Ako već ne poznajete ove programe, onda ćete potrošiti dosta vremena učeći ih iako vam ne trebaju sve njihove funkcionalnosti, što će biti gubljenje vremena. Ukratko, ako ih već dugo koristite, možete kreirati pixel art (ja lično koristim Photoshop iz navike), ali inače je puno bolje koristiti programe koji su specijalizovani za pixel art. Da, postoje.

3. Krema

Postoji mnogo više programa dizajniranih za pixel art nego što se misli, ali ovdje ćemo razmotriti samo najbolje. Svi imaju vrlo slične karakteristike (kontrola paleta, ponavljanje pregleda pločica, prozirnost, slojevi, itd.). Njihove razlike su u pogodnosti... i cijeni.

Charamaker 1999 - dobar program, ali izgleda da je distribucija zastala.

Graphics Gale je mnogo zabavniji i lakši za upotrebu, a košta oko 20 dolara, što i nije loše. Dozvolite mi da dodam da probna verzija nije vremenski ograničena i dolazi sa dovoljno kita za izradu prilično dobre grafike. Jednostavno ne radi sa .gifom, što i nije toliki problem jer je .png ionako bolji.

Softver koji češće koriste piksel umjetnici je ProMotion, koji je (očito) praktičniji i brži od Graphics Gale. O da, draga je! Možete kupiti puna verzija za skroman iznos... 50 evra (78 dolara).
Ne zaboravimo naše Mac prijatelje! Pixen je dobar program dostupan za Macintosh i besplatan je. Nažalost, ne mogu vam reći više jer nemam Mac. Napomena prevodioca (sa francuskog): Korisnici Linuxa (i drugi) bi trebali probati , i GrafX2. Pozivam vas da ih isprobate sve u demo verzijama i vidite koja vam odgovara. Na kraju, to je stvar ukusa. Samo znajte da kada počnete koristiti program, može biti vrlo teško prebaciti se na nešto drugo.

Nastavlja se…

Bilješke prevoditelja sa francuskog na engleski

Ovo je sjajan tutorijal o piksel umjetnosti, koji je napisao Phil Razorbak sa LesForges.org. Hvala vam puno Phil Razorbak što je dozvolio OpenGameArt.org da prevede ove vodiče i objavi ih ovdje. (Od prevodioca na ruski: Nisam tražio dozvolu, ako neko želi, možete pomoći, nemam dovoljno iskustva u komunikaciji na engleskom, a još manje na francuskom).

Napomena prevodioca sa engleskog na ruski

Ja sam programer, a ne umjetnik ili prevodilac, prevodim za svoje prijatelje umjetnike, ali sve što se dobro potroši, neka bude ovdje.
Original na francuskom je negdje ovdje www.lesforges.org
Prijevod s francuskog na engleski ovdje: opengameart.org/content/les-forges-pixel-art-course
Prevodio sam sa engleskog jer ne znam francuski.
I da, ovo je moja prva publikacija, tako da su prijedlozi dizajna dobrodošli. Plus, zanima me pitanje: da li preostale dijelove treba objaviti kao zasebne članke ili je bolje ovaj ažurirati i dopuniti?