Komentář k článku

Někdy bychom rádi použili na svém webu animaci, která má za úkol podtrhnout vizuální působení stránek. Například takto lze oživit akci vykonanou jejich návštěvníkem. Mě samotnou před časem napadlo vytvořit si animaci pejska odnášejícího mail ze správně odeslaného formuláře jako vizuální dodatek k textu, že zpráva byla odeslána, protože si vedu web s psí tematikou. Stáhnout hotovou animaci je pohodlné, ovšem musíme počítat s autorskými právy a také provedení nemusí být podle našich představ. A už vůbec se výtvorem nemůžeme chlubit :-). Schopnost GIMPu pracovat s mnoha vrstvami naráz nám výborně poslouží při výrobě.

1. Kde vzít obrázky k animaci?

Protože se na mě při nadělování kreslicího talentu nedostalo, ani co by se za nehet vlezlo, nezbylo mi, než si vypomoci technikou. A vlastním synem a zvířátkem. Synek se na louce s házedlem v ruce rozmáchl k hodu tenisákem do mé blízkosti, Zlatka vystřelila za míčkem jak raketa a já jsem celý proces jejího úprku natáčela na video ve foťáku. A znovu, a znovu... Kamera by neměla v tomto případě valný smysl, protože bylo stejně potřeba zmenšit rozlišení a tím i velikost výsledné animace na únosnou míru. Z půlhodiny průběžného natáčení jsem vybrala vzorek, který se mi líbil nejvíce a následovala mravenčí práce na počítači.

2. Příprava políček animace

Vybraný soubor ve formátu AVI jsem si otevřela ve VirtualDubu - programu na zpracování videa. Mně šlo v jeho případě pouze o uložení jednotlivých frame, které by na sebe relativně dobře navazovaly a jejichž poskládáním vznikne ještě plynulý pohyb. Nedařilo se mi však uložit vybraná políčka filmu jako samostatný soubor, a tak jsem použila klávesu PrintScreen a vložila do Malování ve Windows. Rozlišení bohatě dostačovalo. U snímků fenky běžící po zemi stačilo vybírat frame ob jeden až dva, protože si byly navzájem velmi podobné, ale záběry ve vzduchu po jejím výskoku už nešly ošidit - příliš se od sebe lišily. Po vyselektování 20 vhodných rámů (angl. frames) nastal čas oddělit obrys psíka od travnatého pozadí a v případě tlapky schované v trávě tuto "domalovat".
Screenů jsem sejmula pro jistotu na padesát a z nich teprve vybírala vhodné. Zde ukázka jen části nasnímaných políček (screenů) filmu:

3. Zrození prvního políčka do animace

Spustila jsem grafický program GIMP a otevřela první screen

Pomocí Beziérových křivek (cest), následně převedených na výběr, jsem vyjmula fenku z obrázku

Vložení výběru do nového souboru s průhledným pozadím (šachovnicí) zajistí, že hotová animace není závislá na barvě pozadí stránky.

Případné nerovnosti obrysu jsem doladila po aplikaci Rychlé masky a kreslením štětcem černé, popř. bílé barvy, v blízkosti obrysu

Potom jsem nechala Obrázek -> Automaticky oříznout obrázek a volbou Barvy -> Posterizovat... (zde na pouhých 6 barev) dostal výsledný snímek nejen jakoby kreslenou podobu, ale především výrazně menší datovou velikost. Obrázek uložíme s příponou XCF, protože lépe se nám bude v případě potřeby upravovat. Vzhledem k složení hotové animace z celkem 20 obrázků je nanejvýš žádoucí myslet na co nejmenší objem dat již na samém počátku práce.

Tak. A je připravený první frame z celkových 20, které reprezentují výslednou animaci. Pokračujeme stejným postupem extrakce pejska z obrázku i u zbývajících políček. Když je někde tlapka příliš schovaná v trávě, stačí z jiného obrázku dát vhodnou část tlapky do výběru a jednoduše vkopírovat místo té chybějící. Vzhledem k malé velikosti obrázků si nemusíme dělat starosti, že by byl přechod vidět.

Jakmile máme takto pracně vypreparované jednotlivé frame, nastane úkol poskládat je dohromady. V tuto chvíli je třeba mít na paměti několik podstatných momentů:

každé políčko budoucí animace bude mít svou vlastní vrstvu
protože moje ukázková animace začíná "zničehonic" a končí doztracena, je nutné počáteční a koncové obrázky pejska patřičně zmenšit, každý samozřejmě jinak
aby nedošlo k nechtěnému oříznutí animace ve formátu GIF, musí mít každé políčko dostatečně velkou vrstvu

4. Odhadnutí rozměrů animace

Postupovala jsem tak, že jsem si otevřela nový obrázek (Soubor -> Nový...) s průhledným pozadím a rozměry jsem určila podle velikosti největšího políčka co do šířky a co do délky. Čili zobrazila jsem si v Průzkumníku velké náhledy již připravených jednotlivých obrázků na průhledném pozadí a od oka jsem vybrala ten nejširší. Protože jsem každý obrázek po vyhlazení obrysů a po posterizaci nechala automaticky oříznout, dala se snadno zjistit šířka tohoto obrázku v pixelech. Číslo jsem i o pár desítek pixelů zvětšila a nastavila jako šířku toho nového obrázku. Úplně stejně jsem odhadla výšku nového obrázku. Zdánlivě přehnané rozměry nejsou na škodu, protože pejsek se v animaci pohybuje a kdybych nastavila malou výchozí velikost, mohlo by se stát, že mi "vyběhne" z mantinelů a vznikla by práce navíc se zvětšováním vrstev.

5. Skládání políček do animace

V tuto chvíli máme připravenou novou prázdnou a průhlednou vrstvu a soubor můžeme pojmenovat třeba Animace. První obrázek pejska hodně zmenšíme (proto si s jeho přípravou nemusíme až tolik hrát) a vložíme do našeho připraveného nového obrázku a posuneme směrem k pravému dolnímu rohu. Vrstvu ukotvíme. Otevřeme si druhý obrázek pejska, opět zmenšíme, ale už méně než předchozí. Do obrázku s názvem Animace přidáme novou průhlednou vrstvu (je vhodné ji pojmenovat třeba číslem) a pejska do ní vložíme zase do pravé dolní čtvrtiny, ale již trošku blíž ke středu. Ukotvíme. Otevřeme si třetí obrázek, zase o něco méně zmenšíme a vložíme do třetí zase předem připravené vrstvy. Umístění jednotlivých vkládaných obrázků musíme nějak odhadnout. A tak dále a tak dále .

Já jsem k oživení použila navíc obrázek zavináče (napsaného pomocí textové vrstvy), který jsem od určitých políček začala vkládat i s různým natočením tak, aby to vypadalo, že pes zavináč chytá a odnáší - spolu s emailem.

V závěru bude přehled vrstev vypadat nějak takto

Výhoda jednotlivých vrstev pro každé políčko animace je jednak v tom, že bez toho bychom naše dílo ani nezapsali jako animaci a také nám samostatné vrstvy dovolí hýbat jimi tak, aby animace byla plynulá. Správné umístění se nám totiž možná nepodaří hned napoprvé odhadnout.

Úplně všechny vrstvy vypadají pohromadě jako velký chumel

Z něj je názorně vidět, proč je důležité dát vrstvám dostatečný prostor. Protože pejsek vyskakuje do výšky a utíká zprava doleva, nebojme se výchozí vrstvu pro složení animace udělat opravdu velikou. Oříznout jde vždy, opačně o poznání hůře.
Výsledný soubor ukládáme ve formátu GIF, přičemž zvolíme Zapsat jako animaci a klikneme na Exportovat