Vytvoření jednoduché animace ve formátu GIF
Když jsem měla vlastní webový formulář funkčně téměř hotový, začala jsem uvažovat nad tím, jak pisateli dát najevo, že jeho zpráva byl úspěšně odeslána. Což o to, samotný text nebylo složité vypsat, ovšem přišlo mi to poněkud "fádní". Jelikož si vedu stránky s psí tematikou, co třeba současně s oznamovacím textem nechat zjevit animaci pejska, odnášejícího poštu adresátovi? A kostra nápadu byla na světě.
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.
Vybraný soubor ve formátu AVI jsem si otevřela ve VirtualDubu - programu na zpracování videa. Mně šlo v jeho případě o uložení jednotlivých frame, které by na sebe relativně dobře navazovaly a jejichž poskládáním vznikne ještě plynulá animace. 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ě stačilo. 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 rámů nastal čas oddělit obrys psíka od travnatého pozadí a v případě tlapky schované v trávě tuto "domalovat".
Spustila jsem grafický program GIMP, otevřela první frame a pomocí Beziérových křivek, následně převedených na výběr, jsem vyjmula Zlatku z obrázku. Vložení výběru do nového souboru s průhledným pozadím (šachovnicí) zajistilo, že hotová animace není závislá na barvě pozadí stránky. Případné nerovnosti obrysu jsem doladila po aplikaci Rychlé masky, nechala Automaticky oříznout obrázek a volbou Barvy -> Posterizovat... dostal výsledný snímek nejen jakoby kreslenou podobu, ale především výrazně menší datovou velikost. Vzhledem k složení hotové animace z celkem 20 obrázků bylo nanejvýš žádoucí myslet na co nejmenší objem dat již na samém počátku práce.
původní vzhled a velikost - kliknutím zvětšíte
po posterizaci, doladění okrajů a v "životní" velikosti.
Tak - a mám hotovou první vrstvu, potažmo PRVNÍ políčko budoucí animace! Úplně stejně jsem postupovala při zpracování zbývajících 19 snímků... V dokreslování v trávě schovaných tlapek mi výborně pomohlo vkopírování vhodně umístěné již existující packy na správné místo - a tablet. Vnější rozměry jsem prozatím ponechala na původních hodnotách, protože o výsledném rozměru rozhodne největší snímek z celé animace (co do výšky a šířky). Také pouhým měněním rozměrů té které vrstvy jsem docílila postupného mizení pejska do ztracena. Od vhodného políčka jsem pomocí Textové vrstvy začala přidávat obrázek zavináče, jehož naklopení je možno nastavovat volbou Vrstva -->Transformovat.
v GIMPu přehledný sloupec se všemi připravenými 20 vrstvami, které tvoří animaci - kliknutím zvětšíte
hotová animace otevřená v GIMPu se jeví jako změť všech vrstev - kliknutím zvětšíte
A zde si kliknutím spustíte konkrétní výsledek celého snažení, přímé nasazení lze zahlédnout na mé stránce s formulářem (zde se animace ale zobrazí pouze po odeslání formuláře):
