Cvičení 5 - Animace ve formátu gif a svg
Animace představuje sled rastrových či vektorových obrazů, jejichž promítnutí vytváří dojem pohybu, akce. Je základem animovaného filmu. Toto cvičení je věnováno tvorbě jednoduchých animací ve formátu gif v aplikaci Gimp.
Cíle cvičení
- seznámit se tvorbou animací ve formátu gif v prostředí aplikace Gimp
- vytvořit animace dle zadání
Obsah cvičení
Animace ve formátu gif
Jak již bylo uvedeno ve Cvičení 1, formát gif umožňuje vytvářet rastrové animace. Animace je v tomto případě složena z jednotlivých rastrových obrazů, jejichž obsah je proměnný. Postupným přehráním jednotlivých rastrových obrazů v intervalu definovaném uživatelem vyvoláváme dojem akce či pohybu. Dobu trvání celé animace určuje celkový počet snímků (jednotlivých obrazů) a rychlost jejich změny - viz obrázek 1 a 2.
Zásadním omezením animace ve formátu gif je možnost použití pouze 256 barevných odstínů daná omezenou barevnou hloubkou tohoto formátu. Gif je tak vhodný spíše pro animování vizuálně jednodušších objektů.
V prostředí aplikace Gimp je vytváření animací snadné - stačí každý jednotlivý snímek animace umístit do samostatné vrstvy a celý soubor následně uložit do formátu gif s nastavením parametrů dle našich aktuálních preferencí.
Praktická úloha 1 - vytvoření prvotní jednoduché animace skákajícího balónu
Cílem prvního úlohy je seznámit se s tvorbou animace v prostředí Gimpu a vlivu prodlevy mezi jednotlivými snímky na vizuální efekt animace. Konkrétním úkolem je vytvořit animaci jako na obrázku 1 či 2. Postup práce:
- založte nový soubor o vybraných rozměrech (např. 800 x 600 px), aktivujte zobrazování okna Vrstvy-stopy
- do spodní části vrstvy pozadí nakreslete zelené pozadí imitující zeleň
- vytvořte novou prázdnou vrstvu (Vrstva/Nová vrstva), do levého horního rohu nakreslete s využitím eliptického výběru míč a vybarvete jej vybranou barvou
- klikněte pravým tlačítkem na vrstvu s míčem a vyberte možnost Nová z viditelné - dojde tím k vytvoření nové vrstvy obsahující pozadí i míč
- skryjte vytvořenou vrstvu, posuňte vrstvu se samostatným míčem směrem doprava dolů přibližně o vzdálenost danou jeho průměrem (funkce Přesun) a nechejte z vrstev s posunutým míčem a pozadí vytvořit novou vrstvu (opět příkazem Nová z viditelné)
- opakujte kroky 4 a 5 dokud nedokončíte přesun míče do vybrané části obrazu (pravý horní roh)
- odstraňte vrstu se samostatným míčem a vrstvu s pozadím, v případě potřeby seřaďte vrstvy tak, jak chcete, aby se animovaly
- soubor exportujte do formátu gif, prodlevu mezi snímky nastavte v rozsahu 100 - 500 ms
Obr. 1: Animace pohybu míče ve formátu gif, prodleva mezi snímky 100 milisekund
Obr. 2: Animace pohybu míče ve formátu gif, prodleva mezi snímky 1 000 milisekund
Praktická úloha 2 - vytvoření animovaného banneru s textem
Cílem tohoto úkolu je vytvořit jednoduchý animovaný banner s textem - viz obrázek 3. Animované bannery v gifu jsou velmi často používány ve webových stránkách pro upoutání pozornosti. Postup vytvoření ukázkového banneru v aplikaci Gimp poskytuje tento text:
- založte nový soubor o rozměrech 600 x 120 px
- do souboru přidejte obrázek s logem Institutu geoinformatiky (např. jeho zkopírováním do schránky a vložením v Gimpu) a zarovnejte jej k levému okraji vrstvy pozadí
- vytvořte novou vrstvu, do které vepište Vámi vybraný text, ten naformátujte a zarovnejte
- vytvořte novou vrstvu, nástrojem Výběr obdélníku vyberte tu část obrazu, kterou chcete mít vyplněnu barvou, a nástrojem Plechovka ji vybarvete
- vrstvu vytvořenou v předchozím kroku duplikujte, zaměňte jí však barvu výplně opět s využitím nástroje Plechovka
- zapněte viditelnost vrstvy pozadí (obsahuje logo), vrstvy s textem a jedné vrstvy s barvou, ostatní vrstvy nenechejte zobrazovat a vyberte možnost Nová z viditelné - dojde k vytvoření vrstvy obsahující logo a text na jednobarevném pozadí
- opakujte předchozí krok s tím, že tentokrát budete mít aktivovánu viditelnost vrstvy s druhou barvou pozadí pod textem
- odstraňte vrstvy obsahující pouze jednotlivé prvky (logo, barva výplně, text) - zůstanou Vám díky tomu jen dvě vrstvy vytvořené v kroku 6 a 7 obsahující všechny tři prvky v každé vrstvě
- soubor exportujte do formátu gif, prodlevu mezi snímky nastavte okolo 400 ms
Obr. 3: Jednoduchý animovaný banner ve formátu gif
Praktická úloha 3 - animace rotující Zeměkoule
Cílem tohoto úkolu je vytvořit animaci rotující Zeměkoule - viz obrázek 4. Postup jejího vytvoření v aplikaci Gimp názorně ukazuje níže vsazená animace a shrnuje tento text:
- v prostředí internetu nalezněte vhodný obrázek Zeměkoule obdélníkového tvaru (nesmí mít zaoblené rohy), obrázek zkopírujte přes schránku do Gimpu
- vytvořte novou prázdnou vrstvu, kterou necháte vyplnit průhledností, této vrstvě definujte režim Sloučení zrnitosti
- vyberte nástroj Mísení (barevný přechod), nastavte režim přechodu Popředí do průhlednosti, bílou barvu jako barvu popředí a vytvořte barevný přechod (od bílé k průhlednosti) pro horní třetinu obrázku - dojde k zesvětlení horní části obrázku
- zopakujte předchozí krok pro dolní třetinu obrázku, ale tentokrát od černé barvy k průhlednosti - dojde ke ztmavení spodní části obrázku; cílem tohoto a předchozího kroku je vyvolat dojem prostorovosti a osvětlení v následné animaci
- obě vrstvy nechejte sloučit do jedné (Sloučit viditelné vrstvy)
- aplikujte filtr Rotující glóbus z nabídky Filtry/Animace - počet políček nastavte na cca 10 až 12
- vytvořenou animaci exportujte do formátu gif s vhodným nastavením prodlevy mezi snímky (např. 250 ms)
Obr. 4: Animace rotující Zeměkoule
Obr. 5: Postup vytvoření animace rotující Zeměkoule z obrázku 4, pro spuštění tutoriálu klikněte na obrázek