Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Discount week - Prosinec

Lekce 2 - Tvoříme vlastní Pixel art

Vítejte u další lekce na téma Pixel Art. V minulé, úvodní lekci, Pixel art - Co to vlastně je?, jsme se tomuto tématu věnovali spíše v obecné rovině. V dnešní lekci si již zkusíme nějakou vlastní tvorbu.

PIXEL ART - Tvoříme

Abychom si uměli plynule popisovat svou činnost, je třeba hned ze začátku vysvětlit pár výrazů, které jsou s grafikou her úzce spjaty.

  • Sprite - vizuální podoba objektu, hrdiny, a pod.
  • Rozlišení - hustota obrazových bodů - detailnost obrazu
  • Stylizace - určitý stupeň zjednodušování resp. deformace tvaru podle autorského záměru nebo uměleckého stylu
  • Vzorník - výběr barev podle specifických kritérií (nejčastěji základní barvy, podle frekvence použití nebo teploty)
  • Plátno - obrazová plocha určená pro tvorbu
  • Pointilizmus - umělecký směr využívající pro tvorbu obrazu jednoduché bodové otisky štětce. Intenzita barvy vznikala pomocí hustoty barevných bodů a odstín podle toho, jaké barevné body se nacházely ve své blízkosti.

V čem Pixel art tvořit

Pro samotnou tvorbu pixel artu existuje spousta nástrojů. Windows Paint nebo Gimp, online free Lospec nebo Piskelapp, placený Aseprite nebo Photoshop - nebo libovolný jiný, který vám sedne nejvíc. Základem je hlavně možnost pracovat na úrovni, kde je možné maximální přiblížení - zvětšení a možnost uložit nebo exportovat obrázek ve formátu "PNG". Tento formát má v sobě možnost ukládat transparenci a umí minimální obrazovou kompresi. Čili je sice větší než klasický "JPG/JPEG", ale při přiblížení a zvětšení nedělá tzv. haloefekt mezi kontrastními plochami.

Pokud tedy máme připravený vhodný editor, zvolíme si možnost "NEW" a pokusíme se nastavit:

  • a) vhodnou velikost obrázku
  • b) vhodnou paletu barev.

Velikost

Původní bitmapová grafika byla realizována pomocí předepsaných základních šablon odpovídajících 8bitové struktuře. Proto se i dnes realizují obrázky do pixel artových her v původních násobcích čísla 2 - 8x8, 16x16, 32x32, 64x64 nebo 128x128 bodů. Pokud se jedná o speciální Sprite, klasické rozměry se mohou překročit, za což nám ale samozřejmě programátor nepoděkuje ...

Osobně si vybírám velikost plátna dle požadavků na velikost Spritu ve hře, jeho detailnost a konkrétní obsah. Pokud chci udělat postavičku, která bude jen siluetou, volím menší rozměry do 16 bodů. Pokud mám vytvořit detailní a věrohodnou podobu, vybírám si spíše větší plátno. Moje srdcovky jsou plátna 8x8 a 16x16. Souvisí to s tím, že kromě grafiky programuji hry do oken max 800 bodů na šířku a tento rozměr mi při 4násobném zvětšení nejvíce vyhovuje. Kromě toho je v tvorbě takto "malého" Spritu i zmiňovaná výzva, jestli to je vůbec možné realizovat při zachování charakteru a podoby předlohy.

Postavička - stylizace - silueta

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Abychom vytvořili jednoduchou siluetu, můžeme si zvolit libovolnou velikost Spritu. Čím méně, tím samozřejmě výraznější stylizace (dále od reality) a naopak. Důležité je ale vložení očí na dešifrování a ujištění, že se jedna o postavu.

Sprite - zvíře - kůň

Každá počítačová grafika vyžaduje určitou kreslířskou schopnost. Když chceme něco věrohodně zachytit, snažíme se nejprve co nejvíce abstrahovat obraz - dešifrovat ho, rozdělit na obrazy drobné. Nejprve do linií a následně do základních geometrických tvarů, jako jsou kružnice, elipsy a čtverce. Při koníkovi je důležité nastínit si osu krku, hlavy, nohou a těla. Potom přidáme koníkovi plochu a jako poslední objem. V tomto případě by byly oči na škodu a proto je ponecháme v tušení čtenáře.

Stejně jako u zvířat můžeme postupovat i v případě lidí. Opět platí, že základem je co nejvěrnější nastínění proporcí postavy pomocí linií a následně stavby těla.

Alternativa - kopie obrazu

Pokud se nejedná o vlastní tvorbu postavičky, ale spíše o kopii podle předlohy, je postup jiný. Platí klasický výtvarný postup - od celku k detailu.

Vybereme si vhodnou velikost Spritu podle detailnosti originálu a následně si do formátu tužkou nakreslíme siluetu, která bude vystihovat celkový tvar. Pak dešifrujeme střední tóny a postupně procházíme do detailů.

Barva

Já osobně používám při tvorbě základní paletu poskytovanou softwarem (16 základních). Takový postup mi do jisté míry zaručí čitelnost Spritu na různých pozadích. Kromě dodržování takové kontrastnosti používám i tzv. pointilistický efekt, skládání barev podle původní 8bit filozofie. Při přechodu jedné barevné plochy do druhé používám původní barvy.

Obrys

Při finalizaci se často pixel art obtahuje. Jednou z možností je bílý okraj, který dodává obrazu vzhled nálepek a vykresluje správný obraz při libovolném pozadí. Hodí se hlavně do plochy s vysokou strukturou a pestrostí. Druhou možností je stejně kontrastní černý obrys, který působí více komiksově. Při menší velikosti Spritu ale zbytečně ztmavuje obraz, který se pak jeví jako špinavý.

Barva obrysu je v podstatě libovolná a může být ukazatelem kladných a záporných postav ve hře i vlastním stylem autora. Kromě toho obtáhnutí obrázku působí velmi efektně a doporučuje ho 9 z 10ti pixel artistů. Začátečníkům tak zaručí použitelnost jejich obrázků a méně zklamání v pokročilém stádiu jejich tvorby.

Trénujeme dál

Při běžném tréninku tvorby pixel artu je nejlepší vybrat si populární obrázek a zkusit ho přenést do pixel artu. Díky dobrému výběru budeme mít slušnou zpětnou vazbu od sledovatelů jakož i možnost porovnat podobu bez originálu.

Začneme při velikosti 64x32 bodů, nakolik je obrázek v poměru stran 2:1. Záměrně si nevybíráme větší plátno, jelikož vidíme z předlohy, že nejvýraznějším prvkem obrázku jsou bílé vlasy a velké černé brýle. Postupujeme analyticky tak, že si z plochy nejprve vyznačíme celou osobu. Následně rozdělíme plochu na základní barevné tóny a přejdeme k detailům. Záměrně volíme odstíny šedé přímo ze vzorníku a střídáme sledování originálu a kopie. Pokud se nám stane, že pracujeme příliš dlouho, zkusme originál zavřít a sledovat, jestli nás něco na kopii neruší. Umělci občas idealizují (říká se že i lžou ;)) a tak to zkusíme i my.

Dobrou školou je i volba skupiny postaviček. Vyberme si například notoricky známou skupinu ze seriálu Scooby Doo nebo Avenger a následně je od sebe dešifrujme pomocí základních atributů.

Nejprve si navrhněme základní vizuál pro postavu a následně si osobitými barvami a prvky posuneme jednotlivé postavičky ke konkrétní podobě. Hulk je zelený a nejmohutnější, Ironman má uprostřed hrudníku světlo a podobně. (Je mi jasné, že fanoušci komiksu mě za mix Marvelu a DC určitě budou proklínat ;P)

Na dalším obrázku jsou hl. postavičky mé nejoblíbenější pohádky. Uhodnete, které to jsou?

To je pro dnešní lekci vše. V příští lekci, Objekty, pozadí a další prvky v Pixel artu, si řekneme něco blíže k objektům a pozadí.


 

Předchozí článek
Pixel art - Co to vlastně je?
Všechny články v sekci
Pixel art
Článek pro vás napsal chain
Avatar
Jak se ti líbí článek?
3 hlasů
Venuje sa grafike, objektovemu programovaniu, vyuke a osobnemu rozvoju
Aktivity (4)

 

 

Komentáře

Avatar
tatko
Redaktor
Avatar
tatko:12.11.2019 16:16

no jo těch programů je dost :))

Odpovědět
12.11.2019 16:16
Lepší jedna po ránu ...než celý den žádná...:))
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.