Če ste se kot otrok radi igrali z lego kocko Lego (ali se z njo še naprej igrate tudi kot odrasli), vas bo verjetno zanimala izometrična pikslovna umetnost. Lahko je tehnična in bolj podobna znanosti kot ilustraciji. Toda v takšni umetnosti ni 3D perspektive, ki bi lahko premikala elemente okolju z maksimalno preprostostjo.

Ustvarili bomo lik kot logično izhodišče za sliko slikovnih pik, saj bo pomagal določiti razmerja za večino drugih elementov, ki bi jih lahko ustvarili. Vendar se morate najprej naučiti nekaj osnov izometrične slikovne pike in nato nadaljevati z ustvarjanjem lika; če se ne želite naučiti osnov in narisati kocke, preskočite na 3. korak. Zdaj pa začnimo.

1. Linije slikovnih pik

Te črte so osnova za najpogostejši (in zanimiv) slog izometrične slikovne pike, slog, ki ga bomo uporabili v tej vadnici:

Predstavljajo dve slikovni piki za vsako slikovno piko navzdol. Te črte so videti relativno mehke in se uporabljajo za kvadratne površine:

Najpogosteje uporabljene črtne strukture (kot je spodnja) bodo delovale dobro, vendar bo risba postala bolj kotna in groba z vsakim korakom, ki ga povečate:

Za kontrast je tukaj nekaj neenakomerno strukturiranih vrstic:

Zelo oglato in ni videti

lepa Izogibajte se njihovi uporabi.

2. Zvezki

Naš lik ne bo natančno sledil zakonom izometrije, zato najprej ustvarimo preprosto kocko, da se odločimo za razmerja.

Ustvarite nov dokument v Photoshopu z ločljivostjo 400 x 400 px.

Z uporabo menija rad odprem dodatno okno za isto datoteko Okno > Razporedi > Novo okno/lekcije.(Okno > Razporedi > Novo okno ...). To omogoča delo s povečavo 600% spremljajte rezultate v oknu za povečavo 100% . Uporaba mreže je odvisna od vas, a včasih se mi zdi bolj vsiljiva kot koristna.

Povečajmo dokument in ustvarimo eno od vrstic 2:1

Raje uporabljam 5% siva namesto črne, da potem lahko dodajaš sence (črna in nizka motnost) in s čarobno paličico izbiraš vsako barvo posebej.

Obstaja več načinov za risanje črte:

1. Uporaba Orodje za črte(Line Tool) z načinom Piksli(Piksli), neoznačeno Glajenje(Anti-alias) in debelina 1px. Med risanjem se mora prikazati kotni opis orodja 26,6°. Pravzaprav orodja Line ni mogoče imenovati priročno; ravne črte, če kot ni natančen.

2. Ustvariti morate izbor 20 x 40 px, nato izberite K svinčnik(Svinčnik) debelina 1px in narišite piko v spodnjem levem kotu izbora, nato držite tipko Shift kliknite v zgornjem desnem kotu. Photoshop bo samodejno ustvaril nova vrstica med dvema točkama. Če vadite, lahko na ta način ustvarite ravne črte brez poudarjanja.

3. S svinčnikom morate narisati dve slikovni piki, ju izbrati in klikniti Ctrl + Alt, nato povlecite izbor na novo lokacijo, tako da se slikovne pike srečajo v vogalih. Izbiro lahko premikate tudi s puščičnimi tipkami na tipkovnici, medtem ko držite pritisnjeno Alt. Ta metoda se imenuje Alt-odmik(Alt-Drcaj).

Tako smo ustvarili prvo vrstico. Izberite ga in premaknite kot v 3. koraku ali samo kopirajte in prilepite ter premaknite novo plast navzdol. Po tem obrnite drugo vrstico vodoravno skozi meni Urejanje > Preoblikovanje > Obrni vodoravno(Urejanje > Preoblikovanje > Obrni vodoravno). To funkcijo uporabljam tako pogosto, da sem celo ustvaril bližnjico na tipkovnici!

Zdaj pa združimo naše vrstice:

Nato znova pritisnite Alt-Offset, obrnite kopijo navpično in združite obe polovici, da dokončate našo površino:

Čas je, da dodamo "tretjo dimenzijo". Alt zamakni kvadratno površino in jo premakni na 44 slikovnih pik dol:

Nasvet: Če med premikanjem držite puščične tipke Shift, se bo izbor premaknil na 10 slikovnih pik namesto ene.

Da bi bila kocka bolj čista, zmehčajmo vogale tako, da s kvadratov odstranimo skrajno levo in skrajno desno slikovno piko. Nato dodajte navpične črte:

Zdaj odstranite nepotrebne črte na dnu kocke. Za začetek barvanja naše figure izberite katero koli barvo (po možnosti svetlega odtenka) in z njo napolnite zgornji kvadrat.

Zdaj povečajte svetlost izbrane barve za 10% (Priporočam uporabo drsnikov HSB na nadzorni plošči) za barvanje svetlejših vogalov vzdolž sprednje strani našega barvnega kvadrata. Ker smo kocko malo obrezali, bodo te svetle črte lepše videti nad črnimi robovi (namesto da bi jih zamenjale), kot je na spodnji sliki:

Zdaj moramo odstraniti črne robove. Uporabite trik iz druge metode risanja črte za radirko (ki mora biti nastavljena na normalno). Orodje za brisanje(Orodje za radirko), način Svinčnik(Način svinčnika), debelina 1px).

Izberite barvo zgornjega kvadrata z Pipete(Orodje za kapalko). Če želite hitro izbrati to orodje, medtem ko rišete s svinčnikom ali polnilom, pritisnite Alt. Z dobljeno barvo kapalke zapolnite navpično črto po sredini kocke. Nato zmanjšajte svetlost barve za 15% in z dobljeno barvo napolnite levo stran kocke. Dodatno zmanjšajte svetlost 10% za desno stran:

Naša kocka je končana. Pri povečavi mora biti videti čisto in razmeroma gladko 100% . Lahko nadaljujemo.

3. Dodajte znak

Slog lika je lahko povsem drugačen, razmerja ali elemente lahko spreminjate po želji. Običajno se odločim za tanko telo in nekoliko večjo glavo. Tanko telo lika pomaga ohranjati linije ravne in preproste.

Logično bi bilo začeti z očmi. Če bi bili strogi pri izometričnih kotih, bi moralo biti na obrazu eno oko nižje, v majhnem merilu pa lahko to lastnost zanemarimo, da bi bili obrazi likov bolj prijetni. Tako bo risba kljub velikosti urejena.

Lik naredimo majhnega, ker mu boste čez nekaj časa morda želeli dodati avto, hišo, cel trg ali celo mesto. Zato mora biti lik eden najbolj majhni elementi v ilustraciji. Prav tako je vredno razmisliti o grafični učinkovitosti; poskušajte narediti lik čim bolj privlačen z minimalna količina slikovnih pik (dovolj velikih, da prikažejo poteze obraza). Poleg tega je majhne predmete veliko lažje narisati. Izjema je, ko želite pokazati samo lik, njegova čustva ali podobnost nekomu.

Ustvarimo novo plast. Oči potrebujejo samo dve slikovni piki - eno za vsako oko, s prazno slikovno piko vmes. Preskočite eno slikovno piko levo od oči in dodajte navpično črto:

Zdaj dodajte še eno plast in narišite vodoravni trak dveh slikovnih pik, to bodo usta. Za premikanje uporabite puščične tipke na tipkovnici in ko najdete popoln položaj, premaknite plast navzdol. Enako naredite z brado, le da mora biti daljša črta:

Narišite lase in zgornji del glave, nato pa zmehčajte vogale. Moral bi dobiti nekaj podobnega temu:

Zdaj pustite prazen piksel poleg drugega očesa, dodajte zalizce (ki bodo tudi pomagali narisati ušesa lika) in še nekaj pikslov nad njimi vse do linije las. Nato pustite še en prazen piksel, tu se bo začelo uho in črta, ki označuje konec glave. Nadaljujte in zmehčajte kote, kjer se črte srečajo:

Dodajte slikovno piko za zgornji del ušesa in spremenite obliko glave, če želite; glave so običajno narisane že v predelu vratu:

Narišite črto od brade - to bodo prsi. Začetek vratu bo v predelu ušesa, nekaj slikovnih pik navzdol in nekaj slikovnih pik diagonalno, tako da so vidna ramena našega lika:

Zdaj, na mestu, kjer se končajo ramena, dodajte navpično črto dolžine 12 slikovnih pik, da naredite zunanjo stran roke, notranja stran pa bo dve slikovni piki levo. Povežite črte na dnu z nekaj slikovnimi pikami, da naredite roko/pest (v tem primeru ni podrobnosti, zato prezrite ta element) in tik nad mestom, kjer se roka konča, dodajte črto 2:1 , ki bo deloval kot pas, nato narišite linijo prsi in dobite zaključen zgornji del telesa. Druga roka lika ni vidna, vendar bo videti normalno, saj jo pokriva trup.

Na koncu bi morali dobiti nekaj takega:

Seveda lahko uporabite poljubna razmerja; Najraje rišem različne možnosti naslednji, preden se odločite, kateri je najboljši.

Zdaj bomo za spodnji del trupa dodali še nekaj navpičnih črt. rad odidem 12 slikovnih pik med podplati in pasom. Noge je zelo enostavno narisati, le eno nogo morate narediti nekoliko daljšo, kar bo omogočilo, da bo lik videti bolj voluminozen:

Zdaj bomo dodali barvo. Najti dobro barvo kože je vedno težko, zato, če želite uporabiti isto barvo kot v tej vadnici, njeno kodo #FFCCA5. Izbira barv za preostale elemente ne bi smela biti težava. Po tem določite dolžino rokavov, položaj kroja majice in njen stil. Zdaj dodajte temen trak, da ločite majico od telesa. Raje imam vse okrasne elemente svetlejše od črne (še posebej, če je veliko elementov na istem nivoju, na primer od srajce do usnja ali hlač). To vam omogoča, da dobite potreben kontrast, ne da bi bila slika pregroba.

Skoraj vsaki barvni coni lahko dodate svetlobne učinke. Izogibajte se tudi velika količina sence ali uporaba prelivov. Več slikovnih pik ( 10% oz 25% ) svetla ali temna barva je dovolj, da elementi izgledajo tridimenzionalno in odstranijo ploskost ilustracije. Če želite območju, ki ga že ima, dodati kanček barve 100% svetlost, poskusite zmanjšati njeno nasičenost. V nekaterih primerih (na primer pri risanju las) lahko to postane na dober način spreminjanje odtenkov.

Obstaja veliko možnosti za lase, ki jih lahko preizkusite. Tukaj je nekaj idej:

Ko nadaljujete z ustvarjanjem likov, vam bodo zaradi raznolikosti prav prišle malenkosti, kot so slog oblačil, dolžina rokavov, dolžina hlač, dodatki, oblačila in barva kože.

Zdaj je vse, kar je treba narediti, to, da oba elementa postavimo skupaj in ocenimo, kako sta videti v eni nastavitvi:

Če želite izvoziti svoje ustvarjanje, je PNG idealen format.

To je to, delo opravljeno!

Upam, da ta lekcija ni bila preveč zmedena. Mislim, da sem govoril o največja količina nasveti in estetske tehnike. Svoj izometrični svet slikovnih pik lahko poljubno razširite – zgradbe, avtomobili, notranjost, zunanjost. Vse to je mogoče in celo zanimivo, čeprav ne tako enostavno.

Prevajalec:Šapoval Aleksej

V tej vadnici se boste naučili, kako spremeniti fotografijo osebe v pixel art kot izmišljen lik arkadna igra od zgodnjih 90-ih.
James May - alias Smudgethis - je razvil ta slog leta 2011 za glasbeni video za dubstep rock nastop. Neronova prva uspešnica Jaz in ti – kjer je ustvaril animacijo za prikaz stara igra z dvema članoma Nero je bila 2D ritmična igra s 16-bitno grafiko, ki je bila podobna 8-bitni retro klasiki, kot je Super Mario Bros.
Za ustvarjanje tega sloga morajo biti liki še vedno kockasti, vendar bolj zapleteni kot v starejših igrah. In čeprav boste morali uporabiti omejeno barvno paleto, da bi dosegli videz, ne pozabite, da so imele te igre še vedno 65.536 barv.
Tukaj vam James pokaže, kako ustvarite lik iz fotografije z uporabo preproste barvne palete in orodja Svinčnik.
Tako kot vodič po animaciji boste potrebovali tudi fotografijo osebe. James je za to vadnico uporabil fotografijo pankerja, ki je vključena v projektne datoteke.
Ko končate, si oglejte to 16-bitno vadnico za animacijo After Effects, kjer vam James pokaže, kako vzeti ta lik v AE, ga animirati in uporabiti učinke retro igre.

1. korak

Odprite Animation Guide (16 bit).psd in 18888111.jpg (ali fotografijo po vaši izbiri), ki ju uporabite kot osnovo za lik. Profilna fotografija v polni dolžini bo delovala najbolje in vam bo pomagala pri pridobivanju barvnih palet in slogov za vašo 16-bitno postavo.
Vadnica za animacijo ima več poz na posameznih slojih. Izberite tistega, ki se najbolje ujema s pozo na vaši fotografiji – ker v okvirju nimamo nog, sem izbral standardno pozo na ravni 1.

2. korak

Z orodjem Rectangular Marquee Tool (M) izberite glavo s svoje fotografije in jo kopirajte (Cmd /Ctrl + C) ter jo prilepite (Cmd /Ctrl + V) v Animation Guide (16 bit).psd.
Prilagodite sliko, da se prilega, sorazmerno. Opazili boste, da ker so dimenzije PSD zelo majhne, ​​bo slika takoj začela risati slikovno piko.

3. korak

Ustvarite novo plast in narišite obris s črnim svinčnikom z eno slikovno piko (B), pri čemer uporabite vodnik za animacijo, ki je v njej, in fotografijo kot osnovo. \n
Priložen vodnik pomaga razviti vrsto likov od večjih šefov do vitkejših ženskih likov. To je približen vodnik za sestavljanje in animiranje mojih likov slikovnih pik.

4. korak

Z orodjem Eyedropper Tool (I) vzorčite najtemnejši del tona kože na fotografiji in ustvarite majhen barvni kvadrat. To naredite še trikrat, da ustvarite štiribarvno paleto odtenkov kože.
Ustvarite drugo plast pod orisno plastjo in uporabite čopič z eno slikovno piko in štiribarvno barvno paleto, da zasenčite sliko (spet uporabite fotografijo kot vodilo). \n
Najbolje je, da shranite vse elemente svojega umetniškega dela ali različnih plasti, saj jih boste tako zlahka ponovno uporabili na drugih oblikah. To je še posebej uporabno za negativce, saj večina 16-bitnih iger uporablja zelo podobne številke. Na primer, en prijatelj ima lahko rdečo srajco in nož, medtem ko je drugi enak, razen modre srajce in pištole.

5. korak

Ta postopek ponovite za druge dele figure in osenčite tkanino, da se ujema z drugimi elementi na izvirni fotografiji. Bodite prepričani, da nadaljujete z vzorčenjem z orodjem Eyedropper, da najprej ustvarite barvne palete, saj to zagotavlja dosleden nabor barv, ki izgleda odlično in se prilega razmeroma omejeni barvni paleti 16-bitnih iger.

6. korak

Dodajte podatke, da izboljšate svoj lik s senčniki, tetovažami, uhani itd. Jejte tukaj in razmislite o tem, kako želite, da se vaš lik prikaže v igralnem okolju. Morda bi lahko uporabili sekiro ali robotsko roko?

korak 7

Če želite animirati svoj lik, ponovite prejšnje korake z drugimi petimi plastmi vodnika za animacijo. Ta postopek lahko traja nekaj časa, da ga obvladate in ustvarite brezhibne rezultate, vendar je mogoče narediti bližnjice s ponovno uporabo elementov iz prejšnjih okvirjev. Na primer, v tem zaporedju šestih sličic glava ostane nespremenjena.

8. korak

Če želite preveriti, ali je zaporedje animacij v redu, odprite ploščo Animacija v Photoshopu in se prepričajte, da je trenutno v teku samo prvi okvir animacije. Dodate lahko nove okvirje ter vklopite in izklopite plasti, da ustvarite svojo animacijo, vendar večina na hiter način je uporaba ukaza »Izdelaj okvirje iz plasti« v pojavnem meniju plošče (zgoraj desno).
Prvi okvir je prazno ozadje, zato ga izberite in kliknite ikono koša na plošči (spodaj), da ga izbrišete.

Risanje na ravni slikovnih pik ima svojo nišo likovna umetnost. S pomočjo preprostih slikovnih pik nastanejo prave mojstrovine. Seveda lahko takšne risbe ustvarite na listu papirja, vendar je veliko lažje in pravilneje ustvariti slike z uporabo grafičnih urejevalnikov. V tem članku bomo podrobno analizirali vsakega predstavnika takšne programske opreme.

Najbolj priljubljen grafični urejevalnik na svetu, ki lahko deluje na ravni slikovnih pik. Če želite ustvariti takšne slike v tem urejevalniku, morate opraviti le nekaj korakov predhodne nastavitve. Tukaj je vse, kar umetnik potrebuje za ustvarjanje umetnosti.

Po drugi strani pa tako obilje funkcionalnosti ni potrebno za risanje slikovnih pik, zato nima smisla preplačevati programa, če ga boste uporabljali samo za določeno funkcijo. Če ste eden izmed takšnih uporabnikov, potem vam svetujemo, da ste pozorni na druge predstavnike, ki se osredotočajo posebej na pikslovno grafiko.

PyxelEdit

Ta program ima vse, kar potrebujete za ustvarjanje takšnih slik, in ni prenasičen s funkcijami, ki jih umetnik nikoli ne bo potreboval. Nastavitev je precej preprosta; barvna paleta vam omogoča, da spremenite katero koli barvo v želeni ton, prosto premikanje oken pa vam bo pomagalo prilagoditi program zase.

PyxelEdit ima funkcijo za nastavitev ploščic na platnu, kar je lahko uporabno pri ustvarjanju predmetov s podobno vsebino. Preizkusna različica je na voljo za prenos na uradni spletni strani in nima omejitev pri uporabi, zato lahko izdelek preizkusite pred nakupom.

Pixelformer

Po videzu in funkcionalnosti je to najbolj običajen grafični urejevalnik, le da jih je več dodatne funkcije za ustvarjanje slikovnih pik. To je eden redkih programov, ki se distribuirajo popolnoma brezplačno.

Razvijalci svojega izdelka ne pozicionirajo kot primernega za ustvarjanje slikovnih pikslov, temveč ga imenujejo odličen način za risanje logotipov in ikon.

GraphicsGale

Skoraj vse tovrstne programske opreme poskušajo vpeljati sistem slikovne animacije, ki se največkrat izkaže za preprosto neuporaben zaradi omejene funkcije in nepravilna izvedba. Tudi GraphicsGale s tem ni tako dober, vendar lahko vsaj ta funkcija deluje normalno.

Kar zadeva risanje, je tukaj vse popolnoma enako kot v večini urejevalnikov: osnovne funkcije, velike barvna paleta, možnost ustvarjanja več plasti in nič dodatnega, kar bi lahko motilo vaše delo.

Charamaker

Character Maker 1999 je eden najstarejših tovrstnih programov. Ustvarjen je bil za ustvarjanje posameznih likov ali elementov, ki bi jih nato uporabili v drugih programih za animacijo ali implementirali vanje računalniške igre. Zato ni zelo primeren za ustvarjanje slik.

Vmesnik ni zelo dober. Skoraj nobenega okna ni mogoče premakniti ali spremeniti velikosti, privzeta postavitev pa ni zelo dobra. Vendar se lahko navadiš.

Pro Motion NG

Ta program je idealen v skoraj vsem, začenši z dobro premišljenim vmesnikom, kjer je mogoče premakniti okna neodvisno od glavnega na katero koli točko in spremeniti njihovo velikost ter končati s samodejnim preklopom s kapalke na svinčnik , kar je preprosto neverjetno priročna funkcija.

V nasprotnem primeru je Pro Motion NG dobra programska oprema za ustvarjanje slikovnih pik katere koli ravni. Preizkusno različico lahko prenesete z uradnega spletnega mesta in jo preizkusite, da se odločite, ali želite nadaljevati s polno različico.

Aseprit

Lahko se upravičeno šteje za najbolj priročno in lep program za ustvarjanje slikovnih pik. Že sama zasnova vmesnika je vredna, a to še niso vse prednosti Aseprita. Obstaja možnost animiranja slike, vendar je za razliko od prejšnjih predstavnikov izvedena kompetentno in priročno za uporabo. Obstaja vse, kar potrebujete za ustvarjanje čudovitih animacij GIF.

Pixel art(Pixel grafika) je še danes zelo priljubljena za igranje iger in za to obstaja več razlogov!

Torej, kaj dela Pixel Art očarljivo:

1. Zaznavanje. Pixel Art izgleda čudovito! Veliko je mogoče povedati o vsakem posameznem pikslu v spritu.
2. Nostalgija. Pixel Art vrne velik nostalgičen občutek za igralce, ki so odraščali ob igranju Nintendo, Super Nintendo ali Genesis (kot jaz!)
3. Enostaven za učenje. Pixel Art je ena najlažjih oblik digitalne umetnosti za učenje, še posebej, če ste bolj programer kot umetnik ;]

Torej, se želite preizkusiti v Pixel Art? Potem sledite meni, ko vam pokažem, kako narediti preprost, a učinkovit igralni lik, ki ga lahko uporabite v svoji igri! Poleg tega si bomo kot bonus ogledali, kako ga integrirati v igre za iPhone!

Za uspešno učenje potrebujete Adobe Photoshop. Če ga nimate, lahko brezplačno preskusno različico prenesete s spletnega mesta Adobe ali torrenta.

Kaj je Pixel Art?

Preden začnemo, razjasnimo, kaj je Pixel Art, ker ni tako očitno, kot si mislite. Najlažji način, da definirate, kaj je Pixel Art, je, da definirate, kaj to ni, in sicer: karkoli, kjer se slikovne pike ustvarijo samodejno. Tukaj je nekaj primerov:

Gradient: izberite dve barvi in ​​izračunajte barvo pikslov vmes. Videti je kul, vendar ni Pixel Art!

Orodje za zameglitev: Definiranje slikovnih pik in njihovo kopiranje/urejanje nova različica prejšnja slika. Še enkrat, ne slikovnih pik.

Orodje za glajenje(v bistvu ustvarja nove slikovne pike v različnih barvah, da naredi nekaj "gladkega"). Morate se jih izogibati!

Nekateri bodo rekli, da tudi samodejno ustvarjene barve niso Pixel Art, saj zahtevajo sloj za mešanje učinkov (mešanje pikslov med dvema slojema po danem algoritmu). A ker ima večina naprav dandanes opravka z milijoni barv, lahko to trditev prezremo. Vendar pa je uporaba malo barv dobra praksa v Pixel Art.

Druga orodja, kot npr (linija) oz orodje za vedro barve(Paint Bucket) prav tako samodejno generira slikovne pike, a ker jih lahko nastavite tako, da ne izravnajo slikovnih pik, ki jih zapolnite, veljajo ta orodja za Pixel Art prijazna.

Tako smo ugotovili, da Pixel Art zahteva veliko pozornosti pri postavljanju vsakega piksla v sprite, največkrat ročno in z omejeno paleto barv. Zdaj pa se lotimo dela!

Začetek

Preden začnete izdelovati svoje prvo sredstvo Pixel Art, morate vedeti, da Pixel Art ni mogoče spreminjati. Če ga poskušate zmanjšati, bo vse videti zamegljeno. Če ga poskušate povečati, bo vse videti v redu, dokler uporabljate dvakratni zoom (vendar seveda ne bo oster).

Da bi se izognili tej težavi, morate najprej razumeti, kako velik mora biti vaš igralni lik ali element igre, nato pa se lotiti dela. Najpogosteje to temelji na velikosti zaslona naprave, na katero ciljate, in na tem, koliko "pikslov" želite videti.

Na primer, če želite, da je igra videti dvakrat večja na zaslonu iPhona 3GS (»Da, res želim svoji igri dati slikovit retro videz!«), katerega ločljivost zaslona je 480 x 320 slikovnih pik, potem morate delo s polovično ločljivostjo V v tem primeru bo 240x160 slikovnih pik.

Odprite nov dokument Photoshop ( Datoteka → Novo…) in nastavite velikost na ne glede na velikost vašega igralnega zaslona, ​​nato pa izberite velikost za svoj lik.

Vsaka celica je velika 32x32 slikovnih pik!

32x32 slikovnih pik sem izbral ne le zato, ker se popolnoma prilega izbrani velikosti zaslona, ​​ampak tudi zato, ker je 32x32 slikovnih pik tudi večkratnik 2, kar je priročno za motorje igrač (velikosti ploščic so pogosto večkratniki 2, teksture so poravnane večkratnik 2, itd.

Tudi če mehanizem, ki ga uporabljate, podpira poljubno velikost slike, lahko vedno poskusite delati s sodim številom slikovnih pik. V tem primeru, če je treba sliko povečati, bo velikost bolje razdeljena, kar bo na koncu prineslo boljšo zmogljivost.

Risanje lika Pixel Art

Znano je, da je Pixel Art jasna in lahko berljiva grafika: z le nekaj pikami lahko določite poteze obraza, oči, lase, dele telesa. Vendar velikost slike otežuje: manjši kot je vaš lik, težje ga je narisati. Če želite biti bolj praktični, izberite najmanjšo lastnost značaja. Vedno izberem oči, ker so eden najboljših načinov, kako oživiti lik.

V Photoshopu izberite Orodje za svinčnik(Orodje za svinčnike). Če ga ne najdete, preprosto pritisnite in držite orodje Čopič(Brush Tool) in takoj ga boste videli (moralo bi biti drugo na seznamu). Samo spremeniti ga boste morali na 1 slikovno sliko (lahko kliknete v vrstici z možnostmi orodja in spremenite velikost ali pa samo držite tipko [).

Potrebovali boste tudi Orodje za brisanje(Eraser Tool), zato kliknite nanj (ali pritisnite E) in spremenite njegove nastavitve tako, da izberete s spustnega seznama način:(Način:) Svinčnik(Svinčnik) (ker v tem načinu ni izravnave).

Zdaj pa začnimo pikselirati! Narišite obrvi in ​​oči, kot je prikazano na spodnji sliki:

ej! pikseliran sem!!

Lahko bi že začeli z Lineartom, vendar je bolj praktičen način, da narišete silhueto lika. Dobra novica je, da vam na tej stopnji ni treba biti profesionalec, le poskusite si predstavljati velikost delov telesa (glava, trup, roke, noge) in začetno pozo lika. Poskusite nekaj takega v sivi barvi:

Na tej stopnji vam ni treba biti profesionalec

Upoštevajte, da sem pustil tudi nekaj praznega prostora. Pravzaprav vam ni treba zapolniti celotnega platna, pustite prostor za prihodnje okvirje. V tem primeru bo zelo koristno ohraniti enako velikost platna za vse.

Ko končate s silhueto, je čas . Zdaj moraš biti bolj previden pri postavitvi slikovnih pik, zato naj te ne skrbi glede oblačil, oklepov itd. Za varnost lahko dodaš novo plast, da nikoli ne izgubiš prvotne silhuete.

Če menite, da je orodje Pencil prepočasi za risanje, ga lahko vedno uporabite (Orodje za črte), samo zapomnite si, da slikovnih pik ne boste mogli postaviti tako natančno kot s svinčnikom. Morali boste konfigurirati kot je prikazano spodaj:

Izberite , pritisnite in držite Orodje za pravokotnik(Orodje za pravokotnik)

Na spustnem seznamu pojdite na ploščo z možnostmi orodja Izberite način orodja(Način sledenja poti) izberite Pixel, spremenite Teža(Debelina) na 1px (če še ni narejeno) in počistite polje Anti-alias(Glajenje). Tako bi ga morali imeti:

Upoštevajte, da nisem naredil spodnjega obrisa stopal. To ni obvezno, saj stopala niso tako pomemben del nog, da bi ga poudarjali, in s tem boste prihranili eno vrstico slikovnih pik na platnu.

Nanašanje barv in senc

Zdaj ste pripravljeni, da začnete barvati naš lik. Ne obremenjujte se z izbiro pravih barv, kasneje jih bo zelo enostavno zamenjati, le pazite, da ima vsaka »svojo barvo«. Na zavihku uporabite privzete barve Swatchi(Okno → Vzorci).

Obarvajte svoj lik kot na spodnji sliki (vendar bodite ustvarjalni in uporabite svoje barve!)

Dobra, kontrastna barva izboljša berljivost vašega sredstva!

Upoštevajte, da še vedno nisem začrtal oblačil ali las. Vedno si zapomnite: rešite čim več slikovnih pik pred nepotrebnimi obrisi!

Ni vam treba izgubljati časa s slikanjem vsakega piksla. Za pospešitev dela uporabite črte za isto barvo oz Orodje za vedro za barvanje(Paint Bucket Tool), da zapolnite vrzeli. Mimogrede, morali ga boste tudi konfigurirati. Izberite Orodje za vedro za barvanje v orodni vrstici (ali samo pritisnite tipko G) in spremenite Strpnost(Toleranca) na 0 in tudi počistite polje Anti-alias(Glajenje).

Če boste kdaj morali uporabiti Orodje Magic Wand(Magic Wand Tool) - zelo uporabno orodje, ki izbere vse slikovne pike z isto barvo, nato pa ga nastavite na enak način kot orodje »Paint Bucket« - brez tolerance in brez izravnave.

Naslednji korak, ki od vas zahteva nekaj znanja, je izmikanje in senčenje. Če nimate znanja o tem, kako prikazati svetle in temne plati, potem vam bom spodaj dal nekaj navodil. Če nimate časa ali volje, da bi ga preučevali, lahko preskočite ta korak in se premaknete na razdelek "Začinite svojo paleto", saj lahko na koncu naredite svoje senčenje enako kot v mojem primeru!

Uporabite isti vir svetlobe za celotno sredstvo

Poskusite mu dati oblike, ki jih želite/zmorete, ker po tem postane sredstvo videti bolj zanimivo. Na primer, zdaj lahko vidite nos, namrščene oči, čopič las, gube na hlačah itd. Dodate lahko tudi nekaj svetlih lis, izgledalo bo še bolje:

Pri senčenju uporabite isti vir svetlobe

In zdaj, kot sem obljubil, majhen vodnik po svetlobi in sencah:

Popestrite svojo paleto

Veliko ljudi uporablja privzete barve palete, a ker veliko ljudi uporablja te barve, jih lahko vidimo v številnih igrah.

Photoshop ima v svoji standardni paleti velik izbor barv, vendar se nanj ne smete preveč zanašati. Najboljši način za ustvarjanje lastnih barv je s klikom na glavno paleto na dnu orodne vrstice.

Nato v oknu izbirnika barv pobrskajte po desni stranski vrstici, da izberete barvo, in po glavnem območju, da izberete želeno svetlost (svetlejšo ali temnejšo) in nasičenost (svetlejšo ali dolgočasnejšo).

Ko najdete želenega, kliknite V redu in znova konfigurirajte orodje Paint Bucket. Ne skrbite, nato lahko preprosto počistite polje »Sosednje« in ko barvate z novo barvo, bodo zapolnjene tudi vse nove slikovne pike z isto barvo ozadja.

Tudi zato je pomembno delati z majhnim številom barv in vedno uporabljati isto barvo za isti element (majice, lasje, čelada, oklep itd.). Vendar ne pozabite uporabiti različnih barv za druga področja, sicer bo naša risba preveč obarvana!

Počistite polje »Contiguous«, če želite izbrane slikovne pike zapolniti z isto barvo

Če želite, spremenite barve in pridobite bolj glamurozno barvo likov! Obrise lahko celo prebarvate, le poskrbite, da se dobro zlijejo z ozadjem.

Končno naredite barvni test Ozadje: Ustvarite novo plast pod svojim likom in jo napolnite z različnimi barvami. To zagotavlja, da bo vaš lik viden na svetlem, temnem, toplem in hladnem ozadju.

Kot že vidite, sem v vseh orodjih, ki sem jih do sedaj uporabljal, izklopil anti-aliasing. Ne pozabite tega narediti tudi v drugih orodjih, npr. Eliptični šotor(Ovalni šotor) in Laso(laso).

S temi orodji lahko preprosto spremenite velikost izbranih delov ali jih celo zasukate. Če želite to narediti, uporabite katero koli orodje za izbiro (ali pritisnite M), da izberete območje, z desno miškino tipko kliknite in izberite Prosta transformacija(Free Transform) ali samo pritisnite Ctrl + T. Če želite spremeniti velikost izbranega območja, povlecite eno od ročic, ki se nahajajo po obodu transformacijskega okvirja. Če želite spremeniti velikost izbora in ohraniti razmerja, držite tipko Shift in povlecite eno od kotnih ročic.

Vendar Photoshop samodejno zgladi vse, kar je urejeno z Prosta transformacija zato pred urejanjem pojdite na Uredi → Nastavitve → Splošno(Ctrl + K) in spremenite Interpolacija slike(Interpolacija slike) vklopljena Najbližji sosed(Najbližji sosed). Na kratko, kdaj Najbližji sosed nov položaj in velikost sta izračunana zelo grobo, brez uporabe novih barv ali motnosti in ohranitev barv, ki ste jih izbrali.

Integracija Pixel Art v igre za iPhone

V tem razdelku se boste naučili, kako našo sliko slikovnih pik integrirati v igro za iPhone z uporabo ogrodja igre Cocos2d. Zakaj razmišljam samo o iPhoneu? Ker po zaslugi serije člankov o Unity (na primer: , ali Igra v slogu Jetpack Joyride v Unity 2D) že veste, kako delati z njimi v Unity, in iz člankov o Crafty (igre v brskalniku: Snake) in Impact (Uvod v ustvarjanje iger za brskalniške igre na Impactu) ste se naučili, kako jih vstaviti v platno in ustvariti brskalniške igre.

Če ste novi v Cocos2D ali razvoju aplikacij za iPhone na splošno, predlagam, da začnete z eno od vadnic za Cocos2d in iPhone. Če imate nameščen Xcode in Cocos2d, berite naprej!

Ustvari nov projekt iOS → cocos2d v2.x → cocos2d iOS predloga, poimenujte ga PixelArt in kot napravo izberite iPhone. Povlecite ustvarjeno sliko slikovnih pik, na primer: sprite_final.png, v svoj projekt in jo nato odprite HelloWorldLayer.m in zamenjajte metodo inicializacije z naslednjim:

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

Sprite postavimo na levo stran zaslona in ga zavrtimo tako, da je obrnjen v desno. Prevedite, zaženite in na zaslonu boste videli svoj sprite:

Vendar ne pozabite, kot smo razpravljali prej v tej vadnici, smo želeli povečati obseg slikovnih pik na umeten način, tako da bi se vsaka slikovna pika opazno razlikovala od drugih. Dodajte to novo vrstico znotraj inicializacijske metode:

Hero.scale = 2,0;

Nič zapletenega, kajne? Prevedi, zaženi in ... počakaj, naš sprite je zamegljen!

To je zato, ker Cocos2d privzeto zgladi risbo, ko jo poveča. Tega ne potrebujemo, zato dodajte naslednjo vrstico:

Ta vrstica konfigurira Cocos2d za spreminjanje velikosti slik brez izravnave, tako da je naš tip še vedno videti "pikseliziran". Prevedi, zaženi in ... ja, deluje!

Oglejte si prednosti uporabe Pixela Umetniška grafika- lahko uporabimo manjšo sliko od tiste, ki je prikazana na zaslonu, s čimer prihranimo veliko pomnilnika teksture. Sploh nam ni treba narediti ločenih slik za zaslone mrežnice!

kaj sledi

Upam, da ste uživali v tej vadnici in ste izvedeli nekaj več o slikovnih pikah! Preden se ločim, vam želim dati nekaj nasvetov:

• Vedno se izogibajte uporabi izravnave, prelivov ali preveč barv na svojih sredstvih. To je za vaše dobro, še posebej, če ste še začetnik.
• Če RES želite posnemati retro slog, poglejte umetniško delo v 8-bitnih ali 16-bitnih konzolnih igrah.
• Nekateri slogi ne uporabljajo temnih obrisov, drugi ne upoštevajo učinkov svetlobe ali sence. Vse je odvisno od stila! V naši vadnici nismo narisali senc, vendar to ne pomeni, da jih ne bi smeli uporabiti.

Za začetnika se Pixel Art zdi najlažja grafika za učenje, vendar v resnici ni tako preprosta, kot se zdi. Najboljši način za izboljšanje vaših veščin je praksa, praksa in praksa. Toplo priporočam, da objavite svoje delo na forumih Pixel Art, da vam lahko drugi umetniki svetujejo – to je odličen način za izboljšanje vaše tehnike! Začnite z majhnim, veliko vadite, pridobite povratne informacije in lahko ustvarite čudovito igro, ki vam bo prinesla veliko denarja in veselja!

Adobe Photoshop: Narišite in animirajte lik Pixel tehnologija Art

V tej lekciji se boste naučili risati in animirati like s tehniko Pixel Art. Za to potrebujete samo Adobe Photoshop. Rezultat bo GIF s tečečim astronavtom.

Program: Adobe Photoshop Zahtevnost: začetniki, srednja stopnja Potreben čas: 30 min – ura

I. Nastavitev dokumenta in orodij

1. korak

V orodni vrstici izberite svinčnik - to bo glavno orodje naše lekcije. V nastavitvah izberite vrsto čopiča Hard Round in nastavite preostale vrednosti kot na sliki. Naš cilj je, da je konica svinčnika čim bolj ostra.

2. korak

V nastavitvah Eraser Tool (radirka) izberite Pencil Mode in nastavite preostale vrednosti, kot je prikazano na sliki.

3. korak

Vklopite Pixel Grid (Pogled > Prikaži > Pixel Grid). Če v meniju ni takega elementa, pojdite v nastavitve in omogočite grafično pospeševanje Preferences > Performance > Graphic pospešek.

Prosimo, upoštevajte: Mreža bo vidna samo na novo ustvarjenem platnu, če je povečana za 600 % ali več.

4. korak

V Preferences > General (Control-K) spremenite način interpolacije slike v način Nearest Neighbor. To bo omogočilo, da bodo meje predmetov čim bolj jasne.

V nastavitvah enot in ravnil nastavite enote ravnila na slikovne pike Preferences > Units & Rulers > Pixels.

II. Ustvarjanje znakov

1. korak

In zdaj, ko je vse nastavljeno, lahko nadaljujemo neposredno z risanjem lika.

Skicirajte svoj lik z jasnim obrisom in pazite, da ga ne preobremenite z majhnimi detajli. Na tej stopnji barva sploh ni pomembna, glavna stvar je, da je obris jasno narisan in razumete, kako bo lik izgledal. Ta skica je bila pripravljena posebej za to lekcijo.

2. korak

Zmanjšajte obseg skice na 60 slikovnih pik v višino z uporabo bližnjice na tipkovnici Control+T ali Uredi > Prosta transformacija.

Velikost predmeta je prikazana na informacijski plošči. Upoštevajte, da so nastavitve interpolacije enake kot v 4. koraku.

3. korak

Povečajte skico za 300-400 %, da olajšate delo in zmanjšate motnost plasti. Nato ustvarite novo plast in z orodjem Pencil Tool narišite obrise skice. Če je lik simetričen, kot v našem primeru, lahko obrišete samo polovico, nato pa ga podvojite in obrnete kot ogledalo (Urejanje > Preoblikovanje > Obrni vodoravno).

Ritem:Če želite narisati kompleksne elemente, jih razdelite na dele. Ko slikovne pike (pike) v črti tvorijo "ritem", kot je 1-2-3 ali 1-1-2-2-3-3, je skica videti bolj gladka za človeško oko. Če pa forma to zahteva, se lahko ta ritem poruši.

4. korak

Ko je oris pripravljen, lahko izberete glavne barve in pobarvate velike oblike. Naredite to na ločeni plasti pod obrisom.

5. korak

Zgladite obris tako, da narišete senco vzdolž notranjega roba.

Nadaljujte z dodajanjem senc. Kot ste morda opazili med risanjem, je mogoče nekatere oblike popraviti.

6. korak

Ustvarite novo plast za poudarke.

Na spustnem seznamu na plošči Sloji izberite način mešanja Prekrivanje. S svetlo barvo pobarvajte področja, ki jih želite poudariti. Nato zgladite poudarke z uporabo Filter > Blur > Blur.

Dokončajte sliko, nato kopirajte in zrcalite dokončano polovico slike, nato združite plasti s polovicami, da naredite celotno sliko.

korak 7

Zdaj mora astronavt dodati kontrast. Uporabite nastavitve Ravni (Slika > Prilagoditve > Ravni), da bo svetlejši, nato pa prilagodite odtenek z možnostjo Ravnovesje barv (Slika > Prilagoditve > Ravnovesje barv).

Lik je zdaj pripravljen za animacijo.

III. Animacija znakov

1. korak

Ustvarite kopijo plasti (Layer > New > Layer Via Copy) in jo premaknite 1 piksel navzgor in 2 piksli v desno. To je ključna točka pri animaciji likov.

Zmanjšajte motnost prvotne plasti za 50 %, da boste lahko videli prejšnji okvir. To se imenuje "lupljenje čebule" (način v množini).

2. korak

Zdaj upognite roke in noge svojega lika, kot da bi tekel.

● Označite leva roka Orodje za laso

● Z orodjem FreeTransformTool (Edit > FreeTransform) in držite tipko Control, premaknite robove vsebnika, tako da se roka premakne nazaj.

● Najprej izberite eno nogo in jo malo raztegnite. Nato nasprotno stisnite drugo nogo, tako da se zdi, kot da lik hodi.

● S svinčnikom in radirko prilagodite del desne roke pod komolcem.

3. korak

Zdaj morate popolnoma na novo narisati nov položaj rok in nog, kot je prikazano v drugem delu te lekcije. To je potrebno za zagotovitev, da je slika videti jasna, ker transformacija močno popači črte slikovnih pik.

4. korak

Naredite kopijo druge plasti in jo obrnite vodoravno. Zdaj imate 1 osnovno pozo in 2 v gibanju. Obnovi motnost vseh plasti na 100%.

5. korak

Pojdite na Okno > Časovna premica, da prikažete ploščo Časovna premica, in kliknite Ustvari okvirno animacijo.