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
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.
![Pixel art](images/3500/pixel_art2/silhouette_strip2.png)
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.
![Pixel art](images/3500/pixel_art2/konik_strip3.png)
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.
![Pixel art](images/3500/pixel_art2/person_strip2.png)
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.
![Pixel art](images/3500/pixel_art2/22-file-photo-lmz021108grizzlybear-copy.jpg)
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ů.
![Pixel art](images/3500/pixel_art2/maco.png)
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ý.
![Pixel art](images/3500/pixel_art2/she_strip3.png)
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.
![Pixel art](images/3500/pixel_art2/atomic-blonde-movie-poster-charlize-theron.jpg)
![Pixel art](images/3500/pixel_art2/theron_strip4.jpg)
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ů.
![Pixel art](images/3500/pixel_art2/vzor.jpg)
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)
![Pixel art](images/3500/pixel_art2/heroes.jpg)
Na dalším obrázku jsou hl. postavičky mé nejoblíbenější pohádky. Uhodnete, které to jsou?
![Pixel art](images/3500/pixel_art2/wreck_it_ralph.jpg)
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í.