Kde môžete kresliť pomocou pixelov? Adobe Photoshop: Nakreslite a animujte postavu pomocou techniky Pixel Art
James May - aka Smudgethis - vyvinul tento štýl v roku 2011 pre hudobné video pre dubstepový rockový počin. Nerov prvý hit Me & You – kde vytvoril animáciu zobrazujúcu starú hru s dvoma Nerovými členmi. Hra bola 2D rytmická plošinovka so 16-bitovou grafikou podobnou Double Dragon, ale oveľa lepšia ako 8-bitové retro klasiky ako Super Mario Bros.
Na vytvorenie tohto štýlu musia byť postavy stále hranaté, ale zložitejšie ako staršie hry. A hoci na dosiahnutie vzhľadu budete musieť použiť obmedzenú paletu farieb, nezabudnite, že tieto hry mali stále 65 536 farieb.
Tu vám James ukáže, ako vytvoriť postavu z fotografie pomocou jednoduchej farebnej palety a nástroja Ceruzka.
Rovnako ako sprievodca animáciou budete potrebovať aj fotografiu osoby. James použil fotografiu punka, ktorá je zahrnutá v súboroch projektu pre tento tutoriál.
Po dokončení si pozrite tento 16-bitový tutoriál animácie After Effects, kde vám James ukáže, ako vziať túto postavu do AE, animovať ju a použiť retro herné efekty.
Krok 1
Otvorte Sprievodcu animáciou (16 bit).psd a 18888111.jpg (alebo fotografiu podľa vlastného výberu), ktorú môžete použiť ako základ pre postavu. Profilová fotografia v plnej dĺžke bude fungovať najlepšie a pomôže vám získať farebné palety a štýly pre vašu 16-bitovú postavu.Animačný tutoriál má niekoľko póz na jednotlivých vrstvách. Vyberte si tú, ktorá sa najlepšie hodí k póze na vašej fotografii - keďže v ráme nemáme nohy, išiel som so štandardnou pózou na úroveň 1.
Krok 2
Pomocou nástroja Rectangular Marquee Tool (M) vyberte hlavu z vašej fotografie a skopírujte ju (Cmd /Ctrl + C) a vložte ju (Cmd /Ctrl + V) do Sprievodcu animáciou (16 bit).psd.Prispôsobte obrázok tak, aby sa zmestil, proporcionálne. Všimnete si, že keďže sú rozmery PSD veľmi malé, obraz začne okamžite kresliť pixel.
Krok 3
Vytvorte novú vrstvu a nakreslite obrys jednopixelovou čiernou ceruzkou (B), pričom použite sprievodcu animáciou, ktorý je v nej poskytnutý, a fotografiu ako základ. \nDodávaná príručka pomáha rozvíjať rad postáv od väčších figúrok šéfov alebo štíhlejších ženských. Toto je hrubý návod na skladanie a animáciu mojich pixelových postáv.
Krok 4
Pomocou nástroja kvapkadlo (I) naskúšajte najtmavšiu oblasť tónu pleti na fotografii a vytvorte malý farebný štvorec. Urobte to ešte trikrát, aby ste vytvorili štvorfarebnú paletu tónov pleti.Vytvorte ďalšiu vrstvu pod obrysovou vrstvou a pomocou jednopixelového štetca a štvorfarebnej farebnej palety vytieňujte obrázok (opäť použite fotografiu ako sprievodcu). \n
Najlepšie je uložiť všetky prvky vašej kresby alebo rôzne vrstvy, pretože to uľahčuje ich opätovné použitie na iné tvary. To je užitočné najmä pre zloduchov, pretože väčšina 16-bitových hier používa veľmi podobné čísla. Napríklad jeden kamarát môže mať červenú košeľu a nôž, zatiaľ čo ďalší je identický s výnimkou modrej košele a zbrane.
Krok 5
Opakujte tento postup pre ostatné časti postavy, pričom látku vytieňujte tak, aby zodpovedala ostatným prvkom na pôvodnej fotografii. Nezabudnite pokračovať vo vzorkovaní pomocou nástroja kvapkadlo, aby ste najskôr vytvorili farebné palety, pretože to poskytuje konzistentnú sadu farieb, ktorá vyzerá skvele a vyhovuje relatívne obmedzenej palete farieb 16-bitových hier.
Krok 6
Pridajte údaje na vylepšenie svojej postavy odtieňmi, tetovaniami, náušnicami atď. Jedzte tu a premýšľajte o tom, ako chcete, aby sa vaša postava objavila v hernom prostredí. Možno by mohli použiť sekeru alebo mať robotickú ruku?
Krok 7
Ak chcete animovať svoju postavu, zopakujte predchádzajúce kroky pomocou ďalších piatich vrstiev sprievodcu animáciou. Zvládnutie tohto procesu a vytvorenie plynulých výsledkov môže chvíľu trvať, ale opätovným použitím prvkov z predchádzajúcich snímok sa dajú skrátiť. Napríklad v tejto sekvencii šiestich snímok zostáva hlava nezmenená.
Krok 8
Ak chcete skontrolovať, či je sekvencia animácie v poriadku, otvorte panel Animácia vo Photoshope a uistite sa, že práve prebieha iba prvá snímka animácie. Pri vytváraní animácie môžete pridávať nové snímky a zapínať a vypínať vrstvy, ale najrýchlejším spôsobom je použiť príkaz Vytvoriť snímky z vrstiev v rozbaľovacej ponuke panela (vpravo hore).Prvý rámček je prázdne pozadie, preto ho vyberte a kliknutím na ikonu koša na paneli (dole) ho odstráňte.
Prácu dizajnéra a ilustrátora v dnešnej dobe uľahčujú programy ako Photoshop, Illustrator, Corel. S ich pomocou môžete plnohodnotne pracovať bez toho, aby vás rozptyľovalo usporiadanie pixelov, ako tomu bolo na konci minulého storočia. Všetky potrebné výpočty sú vykonávané softvérovo - grafickými editormi. Ale sú ľudia, ktorí pracujú iným smerom, nielen iným, ale dokonca úplne opačným. Zaoberajú sa totiž rovnakým oldschoolovým usporiadaním pixelov, aby vo svojich dielach dosiahli jedinečný výsledok a atmosféru.
Príklad pixel artu. Fragment.
V tomto článku by sme chceli hovoriť o ľuďoch, ktorí robia pixel art. Pozrite sa bližšie na ich najlepšie diela, ktoré už len pre náročnosť ich realizácie môžeme bez preháňania nazvať dielami moderného umenia. Diela, ktoré vám pri pohľade vyrazia dych.
Pixel Art. Najlepšie diela a ilustrátori
Mesto. Autor: Zoggles
Rozprávkový hrad. Autor: Tinuleaf
Stredoveká dedina. Autor: Docdoom
Visuté záhrady Babylonu. Autor: Lunar Eclipse
Obytná oblasť. autor:
Ak ste sa v detstve radi hrali s Legom (alebo sa s ním hrali aj ako dospelí), pravdepodobne vás bude zaujímať izometrický pixel art. Môže to byť technické a môže to byť skôr veda ako ilustrácia. Ale v takom umení nie je žiadna 3D perspektíva, môžete presúvať prvky prostredia s maximálnou jednoduchosťou.
Postavu vytvoríme ako logický východiskový bod pre pixel art, pretože nám pomôže určiť proporcie pre väčšinu ostatných položiek, ktoré môžeme vytvoriť. Najprv sa však musíte naučiť niekoľko základov izometrického pixelového umenia a potom prejsť k vytváraniu postavy; ak sa nechcete učiť základy a kresliť kocku, preskočte na krok 3. Teraz začnime.
1. Pixelové čiary
Tieto riadky sú základom najbežnejšieho (a najzaujímavejšieho) štýlu izometrického pixelového umenia, štýlu, ktorý použijeme v tomto návode:
Predstavujú dva pixely na každý pixel nadol. Tieto línie vyzerajú pomerne jemne a používajú sa na štvorcové povrchy:
Najčastejšie používané čiarové štruktúry (ako je tá nižšie) budú fungovať dobre, ale kresba bude hranatejšia a drsnejšia s každým zvýšením:
Pre kontrast je tu niekoľko nerovnomerne štruktúrovaných riadkov:
Veľmi hranaté a nepozerajte sa
krásne. Vyhnite sa ich používaniu.
2. Zväzky
Naša postava nebude presne dodržiavať zákony izometrie, takže najprv vytvorte jednoduchú kocku, aby sme rozhodli o proporciách.
Vytvorte nový dokument vo Photoshope s rozlíšením 400 x 400 px.
Rád by som otvoril ďalšie okno pre ten istý súbor pomocou ponuky Okno > Usporiadať > Nové okno/lekcie.(Okno > Usporiadať > Nové okno…). To umožňuje pracovať so zväčšením 600% sledovať výsledky v zoom okne 100% . Používanie mriežky je na vás, ale niekedy mi to viac ruší ako pomáha.
Zväčšíme si dokument a vytvoríme jeden z riadkov 2:1
Radšej používam 5% sivá namiesto čiernej, aby som potom mohla pridať tiene (čierna a nízka krycia schopnosť) a pomocou čarovného prútika si mohla vybrať každú farbu zvlášť.
Existuje niekoľko spôsobov, ako nakresliť čiaru:
1. Používanie Nástroj Čiara(Line Tool) s režimom pixelov(Pixely), nezačiarknuté Vyhladzovanie(Anti-alias) a hrúbka 1px. Počas kreslenia by sa mal zobraziť popis uhla 26,6°. V skutočnosti sa nástroj Čiara nedá nazvať pohodlným, vytvára nerovnomerné čiary, ak uhol nie je presný.
2. Musíte vytvoriť výber 20 x 40 px a potom vyberte K ceruzka(Pencil Tool) hrúbka 1px a nakreslite bodku v ľavom dolnom rohu výberu a potom podržte kláves Shift kliknite v pravom hornom rohu. Photoshop automaticky vytvorí novú čiaru medzi týmito dvoma bodmi. Ak cvičíte, môžete týmto spôsobom vytvárať rovné línie bez zvýraznenia.
3. Ceruzkou musíte nakresliť dva pixely, vybrať ich, kliknúť Ctrl + Alt a potom presuňte výber na nové miesto tak, aby sa pixely stretli v rohoch. Výber môžete posunúť aj pomocou klávesov so šípkami na klávesnici, pričom podržíte stlačené tlačidlo Alt. Táto metóda sa nazýva Alt-offset(Alt-Nudge).
Tak sme vytvorili prvý riadok. Vyberte ju a presuňte ako v kroku 3 alebo jednoducho skopírujte a prilepte novú vrstvu a presuňte ju nadol. Potom otočte druhý riadok vodorovne cez ponuku Upraviť > Transformovať > Prevrátiť vodorovne(Upraviť > Transformovať > Prevrátiť vodorovne). Túto funkciu používam tak často, že som si pre ňu vytvoril aj klávesovú skratku!
Teraz spojme naše riadky:
Potom znova Alt-Offset, otočte kópiu vertikálne a spojte dve polovice, aby ste dokončili náš povrch:
Je čas pridať „tretí rozmer“. Alt odsaďte štvorcový povrch a presuňte ho na 44 pixelov dole:
Tip: Ak počas pohybu podržíte klávesy so šípkami Shift, výber sa presunie na 10 pixelov namiesto jedného.
Aby sme vytvorili úhľadnejšiu kocku, zjemnime rohy odstránením pixelov najviac vľavo a vpravo zo štvorcov. Potom pridajte zvislé čiary:
Teraz odstráňte nepotrebné čiary v spodnej časti kocky. Ak chcete začať farbiť našu postavu, vyberte si akúkoľvek farbu (najlepšie svetlý odtieň) a vyplňte ňou horný štvorec.
Teraz zvýšte jas vybranej farby o 10% (Odporúčam použiť posúvače HSB na ovládacom paneli) na vymaľovanie svetlejších rohov pozdĺž prednej časti nášho farebného štvorca. Pretože sme kocku trochu orezali, tieto svetlé čiary budú vyzerať krajšie nad čiernymi okrajmi (namiesto ich nahradenia), ako na obrázku nižšie:
Teraz musíme odstrániť čierne okraje. Použite trik z druhej metódy kreslenia čiar pre gumu (ktorá by mala byť nastavená na normálnu Nástroj na gumu(Eraser Tool), režim Ceruzka(Režim ceruzky), hrúbka 1px).
Pomocou vyberte farbu horného štvorca Pipety(Nástroj na kvapkadlo). Ak chcete tento nástroj rýchlo vybrať počas kreslenia ceruzkou alebo výplňou, stlačte tlačidlo Alt. Použite výslednú farbu kvapkadla na vyplnenie zvislej čiary v strede kocky. Potom znížte jas farieb o 15% a výslednou farbou vyplňte ľavú stranu kocky. Ďalej znížte jas 10% pre pravú stranu:
Naša kocka je kompletná. Po priblížení by mal vyzerať čisto a relatívne hladko 100% . Môžeme pokračovať.
3. Pridajte znak
Štýl postavy môže byť úplne odlišný, proporcie alebo prvky môžete ľubovoľne meniť. Typicky volím tenké telo a trochu väčšiu hlavu. Tenké telo postavy pomáha udržiavať línie rovné a jednoduché.
Bolo by logické začať očami. Ak by sme boli prísni na izometrické uhly, tak na tvári by malo byť jedno oko nižšie, no v malom meradle môžeme túto vlastnosť zanedbať, aby sme spríjemnili tváre postáv. Vďaka tomu bude kresba úhľadná aj napriek veľkosti.
Postavu robíme malou, pretože po chvíli k nej možno budete chcieť pridať auto, dom, celé námestie alebo dokonca mesto. Preto by mala byť postava jedným z najmenších prvkov na ilustrácii. Za zváženie stojí aj grafická efektivita; snažte sa, aby bola postava čo najatraktívnejšia s minimálnym počtom pixelov (dostatočne veľkých na zobrazenie čŕt tváre). Navyše, malé predmety sa kreslia oveľa ľahšie. Výnimkou je prípad, keď chcete ukázať iba postavu, jej emócie alebo podobnosť s niekým.
Vytvorme novú vrstvu. Oči potrebujú iba dva pixely – jeden pre každé oko, s prázdnym pixelom medzi nimi. Preskočte jeden pixel naľavo od očí a pridajte zvislú čiaru:
Teraz pridajte ďalšiu vrstvu a nakreslite vodorovný pás dvoch pixelov, to budú ústa. Na pohyb použite klávesy so šípkami na klávesnici, a keď nájdete perfektnú polohu, posuňte vrstvu nadol. Urobte to isté s bradou, mala by to byť len dlhšia čiara:
Nakreslite vlasy a temeno hlavy, potom zjemnite rohy. Mali by ste dostať niečo podobné ako toto:
Teraz nechajte prázdny pixel vedľa druhého oka, pridajte bokombrady (ktoré tiež pomôžu vykresliť uši postavy) a niekoľko ďalších pixelov nad nimi až po vlasovú líniu. Potom nechajte ďalší prázdny pixel, tu bude začínať ucho a čiara označujúca koniec hlavy. Pokračujte a zjemnite uhly, kde sa čiary stretávajú:
Pridajte pixel pre hornú časť ucha a zmeňte tvar hlavy, ak chcete; hlavy sú zvyčajne nakreslené už v oblasti krku:
Nakreslite čiaru od brady - to bude hrudník. Začiatok krku bude v oblasti uší, niekoľko pixelov dole a pár pixelov diagonálne, aby boli viditeľné ramená našej postavy:
Teraz na mieste, kde končia ramená, pridajte zvislú čiaru dĺžky 12 pixelov na vytvorenie vonkajšej strany ruky a vnútorná strana bude o dva pixely vľavo. Spojte čiary v spodnej časti pomocou niekoľkých pixelov, aby ste vytvorili ruku/päsť (v tomto prípade nie sú žiadne podrobnosti, takže tento prvok ignorujte) a tesne nad miestom, kde končí ruka, pridajte čiaru 2:1 , ktorý bude pôsobiť ako pás, potom vtiahnite líniu hrudníka a získajte kompletnú hornú časť tela. Druhá ruka postavy nie je viditeľná, ale bude vyzerať normálne, pretože ju zakrýva trup.
Mali by ste skončiť s niečím takýmto:
Samozrejme môžete použiť ľubovoľné proporcie; Radšej nakreslím rôzne možnosti vedľa seba, než sa rozhodnem, ktorá je najlepšia.
Teraz pre spodnú časť trupu pridáme ešte niekoľko zvislých čiar. Rád odchádzam 12 pixelov medzi podrážkou a pásom. Nohy sa kreslia veľmi ľahko, stačí urobiť jednu nohu o niečo dlhšiu, čo umožní postave vyzerať objemnejšie:
Teraz pridáme farbu. Nájsť dobrú farbu pleti je vždy ťažké, takže ak chcete použiť rovnakú farbu ako v tomto návode, jej kód #FFCCA5. Výber farieb pre zvyšné prvky by nemal byť problém. Potom určite dĺžku rukávov, polohu strihu košele a jej štýl. Teraz pridajte tmavý prúžok na oddelenie košele od tela. Uprednostňujem, aby boli všetky ozdobné prvky svetlejšie ako čierne (najmä ak je veľa prvkov na rovnakej úrovni, napríklad od košele po kožu alebo nohavice). To vám umožní získať potrebný kontrast bez toho, aby bol obraz príliš hrubý.
Takmer do každej farebnej zóny môžete pridať svetelné efekty. Nepoužívajte príliš veľa tieňov alebo prechodov. O niekoľko pixelov viac ( 10% alebo 25% ) stačí svetlá alebo tmavá farba, aby prvky vyzerali trojrozmerne a odstránili plochosť ilustrácie. Ak chcete pridať zvýraznenie farby do oblasti, ktorá už má 100% jas, skúste znížiť jeho sýtosť. V niektorých prípadoch (napríklad kreslenie vlasov) to môže byť dobrý spôsob, ako meniť tóny.
Existuje veľa možností vlasov, ktoré môžete vyskúšať. Tu je niekoľko nápadov:
Keď budete pokračovať vo vytváraní postáv, maličkosti ako štýl oblečenia, dĺžka rukávov, dĺžka nohavíc, doplnky, oblečenie a farba pleti sa vám budú hodiť na spestrenie.
Teraz už zostáva len spojiť oba prvky a zhodnotiť, ako vyzerajú v jednom prostredí:
Ak chcete exportovať svoj výtvor, PNG je ideálny formát.
To je všetko, práca hotová!
Dúfam, že táto lekcia nebola príliš mätúca. Myslím, že som prebral čo najviac tipov a estetických trikov. Svoj izometrický pixelový svet môžete ľubovoľne rozširovať – budovy, autá, interiéry, exteriéry. Robiť to všetko je možné a dokonca zaujímavé, aj keď nie také jednoduché.
prekladateľ: Shapoval Alexey
Kreslenie na úrovni pixelov má vo výtvarnom umení svoje vlastné miesto. Pomocou jednoduchých pixelov vznikajú skutočné majstrovské diela. Samozrejme, môžete vytvárať takéto kresby na list papiera, ale je oveľa jednoduchšie a správnejšie vytvárať obrázky pomocou grafických editorov. V tomto článku budeme podrobne analyzovať každého zástupcu takéhoto softvéru.
Svetovo najpopulárnejší grafický editor, ktorý dokáže pracovať na úrovni pixelov. Na vytvorenie takýchto obrázkov v tomto editore stačí vykonať niekoľko predbežných krokov nastavenia. Tu je všetko, čo umelec potrebuje na tvorbu umenia.
Ale na druhej strane, na kreslenie pixel art nie je potrebné také množstvo funkcií, takže nemá zmysel preplácať program, ak ho budete používať iba na konkrétnu funkciu. Ak ste jedným z takýchto používateľov, potom vám odporúčame venovať pozornosť iným zástupcom, ktorí sú zameraní špeciálne na pixelovú grafiku.
PyxelEdit
Tento program má všetko, čo potrebujete na vytvorenie takýchto obrazov a nie je presýtený funkciami, ktoré umelec nikdy nebude potrebovať. Nastavenie je pomerne jednoduché, paleta farieb vám umožňuje zmeniť ľubovoľnú farbu na požadovaný tón a voľný pohyb okien vám pomôže prispôsobiť si program.
PyxelEdit má funkciu na nastavenie dlaždíc na plátne, čo môže byť užitočné pri vytváraní objektov s podobným obsahom. Skúšobná verzia je k dispozícii na stiahnutie na oficiálnych stránkach a nemá žiadne obmedzenia na používanie, takže si môžete produkt pred kúpou vyskúšať.
Pixelformer
Vo vzhľade a funkčnosti je to najbežnejší grafický editor, len má niekoľko ďalších možností na vytváranie obrázkov pixelov. Toto je jeden z mála programov, ktoré sú distribuované úplne zadarmo. 
Vývojári neumiestňujú svoj produkt ako vhodný na vytváranie pixel artu, nazývajú ho vynikajúcim spôsobom kreslenia log a ikon.
GraphicsGale
Takmer vo všetkých takýchto softvéroch sa snažia implementovať systém animácie obrázkov, ktorý sa najčastejšie ukazuje ako jednoducho nepoužiteľný z dôvodu obmedzených funkcií a nesprávnej implementácie. GraphicsGale na tom tiež nie je tak dobre, no aspoň môže táto funkcia normálne fungovať.
Čo sa týka kreslenia, všetko je úplne rovnaké ako vo väčšine editorov: základné funkcie, veľká farebná paleta, možnosť vytvárať niekoľko vrstiev a nič navyše, čo by mohlo prekážať pri práci.
Charamaker
Character Maker 1999 je jedným z najstarších takýchto programov. Bol vytvorený na vytvorenie jednotlivých postáv alebo prvkov, ktoré by sa potom použili v iných animačných programoch alebo implementovali do počítačových hier. Preto sa na tvorbu obrazov veľmi nehodí.
Rozhranie nie je veľmi dobré. Takmer žiadne z okien sa nedá presúvať ani meniť veľkosť a predvolené rozloženie nie je príliš dobré. Dá sa však na to zvyknúť.
Pro Motion NG
Tento program je ideálny takmer vo všetkom, počnúc premysleným rozhraním, kde je možné presúvať okná nezávisle od hlavného do ľubovoľného bodu a meniť ich veľkosť, a končiac automatickým prechodom z kvapkadla na ceruzku , čo je jednoducho neuveriteľne pohodlná funkcia.
Inak je Pro Motion NG len dobrý softvér na vytváranie pixelovej grafiky akejkoľvek úrovne. Skúšobnú verziu si môžete stiahnuť z oficiálnej webovej stránky a otestovať, aby ste sa rozhodli, či si ďalej zakúpite plnú verziu.
aseprit
Môže byť právom považovaný za najpohodlnejší a najkrajší program na vytváranie pixel art. Samotný dizajn rozhrania stojí za to, ale to nie sú všetky výhody Aseprite. Existuje možnosť animovať obrázok, ale na rozdiel od predchádzajúcich predstaviteľov sa implementuje kompetentne a ľahko sa používa. Je tu všetko, čo potrebujete na vytvorenie krásnych GIF animácií.
Pixel Art (Pixelová grafika) je v hrách veľmi populárna aj v dnešnej dobe a existuje na to niekoľko dôvodov!
Čo robí Pixel Art podmanivým:
- Vnímanie. Pixel Art vyzerá úžasne! Je toho veľa, čo sa dá povedať o každom jednotlivom pixeli v sprite.
- Nostalgia. Pixel Art prináša skvelý nostalgický pocit pre hráčov, ktorí vyrástli na Nintendo, Super Nintendo alebo Genesis (ako ja!)
- Ľahko sa učí. Pixel Art je jednou z najjednoduchších foriem digitálneho umenia, ktoré sa dá naučiť, najmä ak ste viac programátor ako umelec;]
Tak čo, chcete si vyskúšať Pixel Art? Potom nasledujte so mnou, keď vám ukážem, ako vytvoriť jednoduchú, ale efektívnu hernú postavu, ktorú môžete použiť vo svojej vlastnej hre! Navyše sa ako bonus pozrieme na to, ako ho integrovať do hier pre iPhone!
Na úspešné učenie budete potrebovať Adobe Photoshop. Ak ho nemáte, môžete si stiahnuť bezplatnú skúšobnú verziu z webovej stránky Adobe alebo z torrentu.
Čo je Pixel Art?
Skôr než začneme, ujasnime si, čo je Pixel Art, pretože to nie je také samozrejmé, ako by ste si mohli myslieť. Najjednoduchší spôsob, ako definovať, čo je Pixel Art, je definovať, čo nie je, konkrétne: čokoľvek, kde sa pixely vytvárajú automaticky. Tu je niekoľko príkladov:
Gradient: Vyberte dve farby a vypočítajte farbu pixelov medzi nimi. Vyzerá to skvele, ale nie je to Pixel Art!
Nástroj na rozostrenie: Identifikácia pixelov a ich replikácia/úprava na vytvorenie novej verzie predchádzajúceho obrázka. Opäť nie pixel art.
Hladký nástroj(v podstate generovanie nových pixelov v rôznych farbách, aby bolo niečo "hladké"). Musíte sa im vyhnúť!
Niekto povie, že ani automaticky generované farby nie sú Pixel Art, pretože vyžadujú vrstvu na miešanie efektov (miešanie pixelov medzi dvoma vrstvami podľa daného algoritmu). Ale keďže väčšina zariadení v súčasnosti pracuje s miliónmi farieb, toto tvrdenie možno ignorovať. V Pixel Art je však dobrým zvykom používať málo farieb.
Ďalšie nástroje ako napr (riadok) resp nástroj vedierka farby(Paint Bucket) tiež automaticky generuje pixely, ale keďže ich môžete nastaviť tak, aby nevyhladzovali pixely, ktoré vypĺňate, tieto nástroje sa považujú za vhodné pre Pixel Art.
Zistili sme teda, že Pixel Art si vyžaduje veľkú pozornosť pri umiestňovaní každého pixelu do sprite, najčastejšie manuálne a s obmedzenou paletou farieb. Poďme sa pustiť do práce!
Začíname
Skôr ako začnete vytvárať svoje prvé dielo Pixel Art, mali by ste vedieť, že Pixel Art nie je možné zmenšiť. Ak sa ho pokúsite zmenšiť, všetko bude vyzerať rozmazane. Ak sa pokúsite priblížiť, všetko bude vyzerať v poriadku, ak použijete priblíženie násobkom dvoch (ale samozrejme nebude ostré).
Aby ste sa tomuto problému vyhli, musíte najprv pochopiť, aká veľká by mala byť vaša herná postava alebo herný prvok, a potom sa pustiť do práce. Najčastejšie je to založené na veľkosti obrazovky zariadenia, na ktoré zacieľujete, a na tom, koľko „pixelov“ chcete vidieť.
Ak napríklad chcete, aby hra vyzerala dvakrát väčšia na obrazovke iPhonu 3GS („Áno, naozaj chcem dať svojej hre retro pixelový vzhľad!“), ktorého rozlíšenie obrazovky je 480 x 320 pixelov, musíte pracovať s polovičným rozlíšením v tomto prípade to bude 240x160 pixelov.
Otvorte nový dokument Photoshopu ( Súbor → Nový…) a nastavte veľkosť na akúkoľvek veľkosť vašej hernej obrazovky, potom vyberte veľkosť svojej postavy.
Každá bunka má 32 x 32 pixelov! Vybral som si 32x32 pixelov nielen preto, že sa perfektne hodí k zvolenej veľkosti obrazovky, ale aj preto, že 32x32 pixelov je tiež násobkom 2, čo je vhodné pre hračkárske motory (veľkosti dlaždíc sú často násobky 2, textúry sú zarovnané násobkom 2, atď.
Aj keď engine, ktorý používate, podporuje akúkoľvek veľkosť obrázka, vždy môžete skúsiť pracovať s párnym počtom pixelov. V tomto prípade, ak je potrebné obrázok zmenšiť, veľkosť sa lepšie rozdelí, čo v konečnom dôsledku povedie k lepšiemu výkonu.
Kreslenie postavičky Pixel Art
Pixel Art je známy ako jasná a ľahko čitateľná grafika: pomocou niekoľkých bodiek môžete definovať črty tváre, oči, vlasy, časti tela. Veľkosť obrázka však komplikuje úlohu: čím menšia je vaša postava, tým ťažšie je kresliť. Ak chcete byť praktickejší, vyberte si najmenšiu povahovú črtu. Vždy si vyberám oči, pretože sú jedným z najlepších spôsobov, ako oživiť postavu.
Vo Photoshope vyberte Nástroj ceruzka(Nástroj Ceruzka). Ak ho nemôžete nájsť, jednoducho stlačte a podržte nástroj Nástroj štetec(Brush Tool) a okamžite to uvidíte (malo by byť druhé v zozname). Stačí zmeniť jeho veľkosť na 1 pixel (môžete kliknúť na panel Možnosti nástroja a zmeniť jeho veľkosť, alebo stačí podržať kláves [).
Budete tiež potrebovať Nástroj na vymazanie(Nástroj Guma), tak naň kliknite (alebo stlačte E) a zmeňte jeho nastavenia výberom z rozbaľovacieho zoznamu režim:(režim :) Ceruzka(Ceruzka) (pretože v tomto režime nie je vyhladzovanie).
Teraz začnime pixelovať! Nakreslite obočie a oči, ako je znázornené na obrázku nižšie:
hej! Som pixelovaný!! Už by ste mohli začať s Lineartom, ale praktickejším spôsobom je nakresliť siluetu postavy. Dobrou správou je, že v tejto fáze nemusíte byť profík, skúste si len predstaviť veľkosť častí tela (hlava, trup, ruky, nohy) a východiskovú pózu postavy. Skúste niečo také v sivej farbe:
V tejto fáze nemusíte byť profík Všimnite si, že som tiež nechal nejaké biele miesto. V skutočnosti nemusíte vyplniť celé plátno, nechajte priestor pre budúce rámy. V tomto prípade bude veľmi užitočné zachovať rovnakú veľkosť plátna pre všetky z nich.
Po dokončení siluety je čas . Teraz musíte byť opatrnejší s umiestnením pixelov, takže si nemusíte robiť starosti s oblečením, brnením atď. Pre istotu môžete pridať novú vrstvu, aby ste nikdy nestratili svoju pôvodnú siluetu.
Ak máte pocit, že nástroj Ceruzka je príliš pomalý na kreslenie, môžete ho vždy použiť (Nástroj Line), len si pamätajte, že pixely nebudete môcť umiestniť tak presne, ako to dokážete pomocou ceruzky. Budete musieť nakonfigurovať ako je uvedené nižšie:
Vyberte stlačením a podržaním Nástroj Obdĺžnik(obdĺžnikový nástroj)
Prejdite na panel možností nástroja v rozbaľovacom zozname Vyberte režim nástroja(Režim sledovania cesty) vyberte Pixel , zmeňte Hmotnosť(Hrúbka) na 1px (ak ste tak ešte neurobili) a zrušte začiarknutie Anti-alias(Vyhladzovanie). Takto by ste to mali mať:
Všimnite si, že som neurobil spodný obrys pre chodidlá. Toto je voliteľné, pretože chodidlá nie sú až tak dôležitou súčasťou nôh na zvýraznenie a ušetrí sa tým jeden riadok pixelov na plátne.
Nanášanie farieb a tieňov
Teraz ste pripravení začať farbiť našu postavu. S výberom tých správnych farieb si nerobte starosti, neskôr sa budú veľmi ľahko meniť, len dbajte na to, aby každá mala svoju "svoju farbu". Použite predvolené farby na karte Vzorkovníky(Okno → Vzorkovník).
Vyfarbite svoju postavu ako na obrázku nižšie (ale buďte kreatívni a použite svoje vlastné farby!)
Dobrá, kontrastná farba zlepšuje čitateľnosť vášho diela! Upozorňujem, že som stále nenačrtol oblečenie ani vlasy. Vždy pamätajte: ušetrite čo najviac pixelov z nepotrebných obrysov!
Nie je potrebné strácať čas maľovaním každého pixelu. Pre urýchlenie práce použite linky na rovnakú farbu, príp Nástroj vedierka na farbu(Nástroj Paint Bucket Tool) na vyplnenie medzier. Mimochodom, budete ho musieť nakonfigurovať. Vyberte Nástroj vedierka na farbu na paneli nástrojov (alebo stačí stlačiť kláves G) a zmeniť Tolerancia(Tolerancia) na 0 a tiež zrušte začiarknutie Anti-alias(Vyhladzovanie).
Ak niekedy potrebujete použiť Nástroj Magic Wand(Magic Wand Tool) – veľmi užitočný nástroj, ktorý vyberie všetky pixely s rovnakou farbou, potom ho nastaví rovnakým spôsobom ako nástroj „Paint Bucket“ – žiadna tolerancia a antialiasing.
Ďalším krokom, ktorý si z vašej strany bude vyžadovať určité znalosti, je uhýbanie sa a tieňovanie. Ak nemáte vedomosti o tom, ako ukázať svetlé a tmavé stránky, nižšie vám dám niekoľko krátkych pokynov. Ak nemáte čas alebo chuť to študovať, môžete tento krok preskočiť a prejsť do sekcie "Spice Up Your Palette", pretože nakoniec si môžete urobiť tieňovanie rovnaké ako v mojom príklade!
Použite rovnaký zdroj svetla pre celý majetok Skúste mu dať tvary, ktoré chcete/môžete, pretože potom začne aktívum vyzerať zaujímavejšie. Napríklad teraz môžete vidieť nos, zamračené oči, vlasy, záhyby na nohaviciach atď. Môžete naň pridať aj nejaké svetlé škvrny, bude to vyzerať ešte lepšie:
Pri tieni použite rovnaký zdroj svetla A teraz, ako som sľúbil, malý návod na svetlo a tiene:
Okorente svoju paletu
Mnoho ľudí používa predvolené farby palety, ale keďže veľa ľudí používa tieto farby, môžeme ich vidieť v mnohých hrách.
Photoshop má vo svojej štandardnej palete veľký výber farieb, no nemali by ste sa naň príliš spoliehať. Najlepší spôsob, ako vytvoriť vlastné farby, je kliknúť na hlavnú paletu v spodnej časti panela nástrojov.
Potom v okne Color Picker prejdite na pravý bočný panel a vyberte farbu a v hlavnej oblasti vyberte požadovaný jas (svetlejší alebo tmavší) a sýtosť (jasnejší alebo matnejší).
Keď nájdete ten, ktorý chcete, kliknite na tlačidlo OK a prekonfigurujte nástroj Paint Bucket. Nebojte sa, potom môžete jednoducho zrušiť začiarknutie políčka 'Contiguous' a keď budete maľovať novou farbou, vyplnia sa aj všetky nové pixely s rovnakou farbou pozadia.
Aj preto je dôležité pracovať s malým počtom farieb a použiť vždy rovnakú farbu na ten istý prvok (tričká, vlasy, prilba, brnenie a pod.). Ale nezabudnite použiť iné farby pre iné oblasti, inak bude naša kresba príliš prefarbená!
Ak chcete vyplniť vybrané pixely rovnakou farbou, zrušte začiarknutie políčka „Súvisle“.Ak chcete, zmeňte farby a získajte očarujúcejšie sfarbenie postavy! Môžete dokonca prefarbiť obrysy, len sa uistite, že dobre splývajú s pozadím.
Nakoniec urobte test farby pozadia: vytvorte novú vrstvu pod svojou postavou a vyplňte ju rôznymi farbami. To má zabezpečiť, že vaša postava bude viditeľná na svetlom, tmavom, teplom a chladnom pozadí.
Ako ste už mohli vidieť, vyhladzovanie som vypol vo všetkých nástrojoch, ktoré som doteraz používal. Nezabudnite to urobiť aj v iných nástrojoch, napr. Eliptický markíz(Oválny markíza) a Laso(laso).
Pomocou týchto nástrojov môžete jednoducho meniť veľkosť vybraných častí alebo ich dokonca otáčať. Ak to chcete urobiť, použite ľubovoľný nástroj na výber (alebo stlačte M) na výber oblasti, kliknite pravým tlačidlom myši a vyberte Voľná transformácia(Free Transform), alebo jednoducho stlačte Ctrl + T. Ak chcete zmeniť veľkosť vybratej oblasti, potiahnite jednu z rukovätí umiestnených po obvode rámca transformácie. Ak chcete zmeniť veľkosť výberu pri zachovaní proporcií, podržte stlačený kláves Shift a potiahnite jednu z rohových rukovätí.
Photoshop však automaticky vyhladzuje čokoľvek upravené pomocou Voľná transformácia takže pred úpravou prejdite na Upraviť → Predvoľby → Všeobecné(Ctrl + K) a zmeňte Interpolácia obrazu(Interpolácia obrazu) zapnutá Najbližší sused(Najbližší sused). V skratke, kedy Najbližší sused nová poloha a veľkosť sa vypočítajú veľmi približne, nepoužijú sa žiadne nové farby ani nepriehľadnosť a zachovajú sa farby, ktoré si vyberiete.
Integrácia Pixel Art do hier pre iPhone
V tejto časti sa dozviete, ako integrovať naše pixelové umenie do hry pre iPhone pomocou herného rámca Cocos2d. Prečo uvažujem iba o iPhone? Pretože vďaka sérii článkov o Unity (napríklad: , alebo Hra v štýle Jetpack Joyride v Unity 2D) už s nimi viete pracovať v Unity a z článkov o Crafty (prehliadačové hry: Snake) a Impact (Úvod do vytvárania hier prehliadača na Impact) ste sa naučili, ako ich vložiť na plátno a vytvoriť hry v prehliadači.
Ak ste nováčikom v Cocos2D alebo vo všeobecnosti vo vývoji aplikácií pre iPhone, odporúčam vám začať s jedným z Cocos2d a iPhone tutoriálov. Ak máte nainštalovaný Xcode a Cocos2d, čítajte ďalej!
Vytvorte nový projekt iOS → cocos2d v2.x → cocos2d iOS šablóna, pomenujte ho PixelArt a ako zariadenie vyberte iPhone. Presuňte vytvorený pixel art, napríklad: sprite_final.png do svojho projektu a potom ho otvorte HelloWorldLayer.m a nahraďte inicializačnú metódu nasledujúcim:
-(id) init ( if((self=)) ( CCSprite * hrdina = ; hrdina.pozícia = ccp(96, 96); hrdina.flipX = ÁNO; ; ) vrátiť seba; )
Sprite umiestnime na ľavú stranu obrazovky a otočíme tak, aby smeroval doprava. Kompilujte, spustite a potom uvidíte svojho sprite na obrazovke:
Pamätajte však, že ako sme už v tomto návode diskutovali, chceli sme umelým spôsobom zväčšiť mierku pixelov, aby bol každý pixel zreteľne odlíšiteľný od ostatných. Pridajte teda tento nový riadok do inicializačnej metódy:
Hero.scale = 2,0;
Nič zložité, však? Zostavte, spustite a... počkajte, náš sprite je rozmazaný!
Je to preto, že Cocos2d štandardne vyhladzuje kresbu, keď ju mení. Nepotrebujeme to, takže pridajte nasledujúci riadok:
Tento riadok konfiguruje Cocos2d na zmenšenie obrázkov bez vyhladzovania, takže náš chlap stále vyzerá „pixelovane“ Kompilujte, spustite a... áno, funguje to!
Všimnite si výhody používania grafiky Pixel Art – môžeme použiť menší obrázok, než aký je zobrazený na obrazovke, čím ušetríme veľa textúrovej pamäte. Dokonca ani nepotrebujeme robiť samostatné obrázky pre sietnicové displeje!
čo bude ďalej?
Dúfam, že sa vám tento návod páčil a dozvedeli ste sa niečo viac o pixel art! Pred rozchodom vám chcem poradiť:
- Vždy sa snažte vyhnúť používaniu vyhladzovania, prechodov alebo príliš veľkého množstva farieb na svojich podkladoch. Je to pre vaše dobro, najmä ak ste ešte začiatočník.
- Ak chcete NAOZAJ napodobniť retro vzhľad, pozrite sa na kresbu v 8-bitových alebo 16-bitových konzolových hrách.
- Niektoré štýly nepoužívajú tmavé obrysy, iné neberú do úvahy efekty svetla alebo tieňa. Všetko závisí od štýlu! V našom návode sme nekreslili tiene, ale to neznamená, že by ste ich nemali používať.
Pre začiatočníka sa Pixel Art javí ako najjednoduchšia grafika na učenie, ale v skutočnosti to nie je také jednoduché, ako sa zdá. Najlepší spôsob, ako zlepšiť svoje zručnosti, je cvičiť, cvičiť, cvičiť. Vrelo odporúčam zverejniť svoju prácu na fórach Pixel Art, aby vám ostatní umelci mohli poradiť – je to skvelý spôsob, ako zlepšiť svoju techniku! Začnite v malom, veľa cvičte, získajte spätnú väzbu a môžete vytvoriť úžasnú hru, ktorá vám prinesie veľa peňazí a radosti!