Jak vytvořit animovaný GIF s reklamou v Adobe Photoshopu

Animovaný GIF je v podstatě sada dvou a více statických obrázků uložených v jednom souboru. Ty se pak v nastaveném intervalu střídají ve svém zobrazení. Animovaný GIF může vypadat jako blikající reklama, ale také jako jednoduché video. Záleží na tom, kolik snímků s jakou rychlostí v něm budete střídat. Nevýhodou je omezení v podobě maximálního počtu barev (256), výhodná je zase velikost animací v GIFu a snadnější vložení do webu oproti flashovým animacím.

Adobe Photoshop je primárně určen pro práci s rastrovou grafikou, tedy s fotografiemi a návrhy designu webů. Co se týče animací, i pro ně nabízí několik nástrojů, kupodivu řada uživatelů neví, jak je správně zkombinovat a získat animovaný GIF. Patříte-li mezi ně, snad vám pomůže tento krátký návod. Je psán s ohledem na Adobe Photoshop CS5, ale bez problémů byste ho měli uplatnit i ve starších verzích Photoshopu.

Základem jsou vrstvy

Jelikož se animovaný GIF skládá z několika po sobě jdoucích obrázků, musíme si je ve Photoshopu nějakým způsobem připravit. Nepotřebujeme k tomu několik souborů. Postačí jediný, který bude obsahovat několik vrstev.

Vytvořte si tedy nový soubor (File > New) s rozměry 468 x 60 px a umístěte do něj obrázek se základní podobou reklamního banneru.

GIF v Adobe Photoshopu

V příkladu pro tento návod jsem vložil barevné pozadí, nějaký text a zvýrazněné upozornění na slevu. Od červeného textu Sleva budu ve výsledku požadovat, aby ve vytvořeném GIFu blikal. To zařídíme zobrazováním a ukrýváním jeho vrstvy.

GIF v Adobe Photoshopu

Vytvoření snímků pro animovaný GIF

Zobrazte si panel pro jednotlivé snímky animace, a to pomocí funkce Window > Animation. Ve spodu vám přibude nový panel a v jeho pravém spodním rohu klepněte na tlačítko Convert to frame animation. Okno Photoshopu by pak mělo vypadat nějak takto:

GIF v Adobe Photoshopu

Nyní v levém spodním rohu animačního panelu klepněte na tlačítko pro přidání dalšího políčka v animaci - Duplicates Selected Frames. V náhledech políček přibude další. Nyní tedy máte dvě políčka animace střídající se ve výchozím intervalu deseti sekund. Zobrazení nebo ukrytí jednotlivých vrstev se bude vždy vztahovat k políčku, které máte právě označeno.

Chceme tedy začít s tím, že se banner zobrazí se slovem Sleva, které se následně ukryje. Pak se zase zobrazí, ukryje a pořád dokola. Čili, označte si vespod druhý snímek a v seznamu vrstev klepněte na oko, kterým ukryjete vrstvu se slovem Sleva. Když se přepnete na první snímek, všimněte si, že zde je vrstva zobrazena.

Vespod každého políčka animace je jeho délka zobrazení v sekundách. Pro obě políčka tedy nastavte délku zobrazení 0,5 sekundy, případně si ji upravte dle potřeby. Aby animace kolovala, tedy aby se neustále střídalo zobrazení a ukrytí textu Sleva, tak ještě v levém spodním rohu animačního panelu změňte opakování animace z výchozího Once (jednou) na Forever (pořád). Nyní můžete klepnout na přehrávací tlačítko vedle a animaci si prohlédnout přímo v okně Photoshopu.

GIF v Adobe Photoshopu

Jak exportovat animaci z Photoshopu do GIFu

Hotový projekt si nezapomeňte uložit do nativního formátu Photoshopu, čili do souboru PSD. Jen tak budete moci animaci později upravovat. Pokud byste otevřeli přímo animovaný GIF, tak Photoshop načte první políčko animace a po uložení všechna ostatní zruší.

Animovaný GIF vyexportujte po přípravě popsané v předchozích částech návodu tak, že zavoláte funkci File > Save for Web & Devices a jako výstupní formát vyberete GIF. Potom klepněte na tlačítko Save.

GIF v Adobe Photoshopu

Banner z návodu vypadá následovně, PSD soubor pro Photoshop si můžete stáhnout z přílohy níže. Jak vidíte, vytvoření banneru ve Photoshopu je velice snadné.