Jak jednoduše tvořit vlastní animované GIFy - 3. díl

1. díl - Úvod, historie GIFů

2. díl - Pokračování historie, limity GIFů

Vytváříme GIF

Tvorbu animovaných GIFů vám umožní spousta aplikací, my vám však ukážeme jen základy v programu Photoshop Elements, spotřebitelském editoru obrázků od Adobe, který vám umožní exportovat váš soubor jako animovaný GIF. Každý rámeček animace jednoduše umístíte jako zvláštní vrstvu a při exportu budou tyto vrstvy zkompilovány do animace. (Stejný postup, byť s mírně pozměněnými jednotlivými kroky, platí i pro bezplatnou alternativu Photoshopu – Gimp.

Následující kroky vás provedou tvorbou rotující „květinové“ grafiky.

1. krok: Otevřete Photoshop Elements a na startovací obrazovce vyberte Foto editor. Dále vyberte Soubor > Nový prázdný soubor. Pojmenujte nový dokument třeba Animace a potom definujte jeho velikost. GIFy jsou nejlepší celkem malé, takže vyberte rozměry kupříkladu 640 x 360. Nyní nastavte Obsah pozadí (Background Contents) na Transparentní a klikněte na OK. Jakmile se váš dokument otevře, klikněte na volbu Expert nahoře, potom na tlačítko Vrstvy (vpravo dole), abyste v průběhu tvorby mohli sledovat vrstvy dokumentu.

2. krok: Vyberte Vrstva > Nově vyplnit vrstvu > Plná barva. Pojmenujte tuto vrstvu třeba „Zelené pozadí“ a klikněte na OK. Nyní si vyberte jakou barvu chcete, v našem případě jsme použili odstín zelené (H: 110; S: 40; B: 70).

3. krok: Vyberte si nástroj Vlastní tvar a ve spodní části okna se vám poté zobrazí možnosti. Nyní klikněte na první tvar hned napravo nahoře. Poté zvolte aktuálně vybraný tvar a zobrazí se vám další alternativy ve vyskakovacím panelu. Z horního menu tohoto panelu vyberte Příroda nebo Květiny a zvolte květinu zvanou Flower24. Nyní podržte klávesu Shift a poté přesuňte kurzor napříč vaším plátnem úhlopříčně z pravé horní části. Tím, že stisknete Shift, zajistíte, že poměr výšky a šířky zvoleného tvaru zůstane stejný. Natáhněte objekt tak, aby byl téměř tak velký jak celý obrázek, a potom si z vyskakovacího menu výběru barev zvolte novou barvu tohoto objektu. V našem případě jsme si vybrali pastelově zeleno-žlutou. Nakonec musíte objekt vycentrovat. Vyberte nástroj Přesunout (V). Poté už jen v menu Vybrat > Vybrat vše, a z ukotvovacích možností dole na stránce si zvolte vertikální i horizontální vycentrování objektu.

4. krok: Zvolte si nástroj Text. Poté se vám v dolní části obrazovky opět objeví možnosti. Vyberte si nějaké bezpatkové lehké písmo, my jsme si vybrali Helvetica Neue Ultralight o velikosti 30 bodů, bílé a se zarovnáním na střed. Klikněte doprostřed obrázku a napište SPRING (jaro). Poté vložení textu potvrďte. V dolní části obrazovky se vám teď opět zobrazují možnosti ukotvení. Takže stejný postup jako v předchozím kroku: Vybrat > Vše a pak zvolte horizontální i vertikální vycentrování. Nakonec tuto vrstvu uzamkněte, abyste ji při další práci náhodou neposunuli nebo jinak nezměnili. V menu Vrstvy vyberte vrstvu textu, klikněte na ni (pokud ji už nemáte vybranou) a poté klikněte na ikonu zámku umístěnou nahoře.

5. krok: Vaše další dva rámečky budou založeny na prvním souboru vrstev. V menu Vrstvy stiskněte Shift a poté myší klikněte na všechny tři dosavadní vrstvy. Jakmile máte všechny vrstvy vybrány, zvolíte Vrstvy > Duplikovat vrstvy. Otevře se vám nové okno, které nemusíte nijak řešit – potvrďte jej kliknutím na OK. Stejný proces zopakujte ještě jednou. Nyní byste měli mít tři kopie vašeho textu, květinového vzoru a barvy pozadí.

6. krok: Vyberte nástroj Přesunout (Move) a klikněte na květinu. Nyní byste měli mít tento tvar ohraničený čtvercem a pod ním uprostřed by se měl nacházet maličký kruh. Klikněte na něj. Ve spodní části obrazovky se objeví několik možností transformace. Pod možností Úhel napište 20 pro otočení tvaru o 20 stupňů. Klikněte na zelené potvrzovací tlačítko u tvaru pro přijetí změny.

7. krok: V menu Vrstvy klikněte na ikonu oka pro tři nejvyšší vrstvy, čímž je zneviditelníte. Proces otáčení z kroku šest pak zopakujte pro květinu v prostřední vrstvě, tentokrát ji však otočte pouze o 10 stupňů. Jakmile rotaci dokončíte, opět aktivujte tři deaktivované vrstvy.

8. krok: Nyní musíte sloučit každou z květin s jejím zeleným pozadím, čímž vytvoříte tři různé snímky výsledného GIFu. (V tomto bodu vám doporučujeme vaše dílo uložit, pokud by se v dalších krocích něco pokazilo.) Pomocí Shiftu a kliknutí vyberte tři nejvyšší vrstvy a vyberte Vrstva > Sloučit vrstvu. To samé opakujte pro zbývající dvě sady vrstev.

9. krok: Je čas zapnout váš GIF! Vyberte Soubor > Uložit pro web. Zcela napravo okénka pro uložení teď vidíte několik možností. Vyberte z nich GIF 32 No Dither (tj. bez ditheringu) a zaškrtněte políčko u možnosti Animovat. Téměř vpravo dole uvidíte možnosti animace. Smyčka by měla být nastavena na nekonečnou, prodleva mezi políčky pak na 0,2 sekundy. Klikněte na Uložit.

10. krok: Váš GIF si nyní otevřete v okně webového prohlížeče, kde jej můžete obdivovat v akci.

Jakmile se s tímto procesem dobře seznámíte, můžete pro plynulejší animaci vytvářet GIFy s více rámečky. Zapamatujte si, že když zvýšíte počet rámečků, můžete snížit prodlevu mezi nimi, čímž zvýšíte snímkovou frekvenci.

Ve čtvrté a poslední části se podíváme na alternativní postup tvorby GIFu.