Dnes se vám pokusím vysvětlit, jak v programu Adobe Image Ready vytvořit složitější animovaný GIF. K tvorbě bude nejdůležitější funkce tween (v české verzi krkolomný překlad mezilehlé), velmi podobná motion tweenu z Macromedia Flashe. Výsledek dnes nebude nijak zvlášť úchvatný, možná spíše kýčovitý, ale myslím, že pro příklad bude plně vyhovovat.

Podklad máme pouze jediný a to fotku Ježíška (v anglické verzi krkolomný Santa Claus) táhnoucího nevinné děvčátko na sáňkách. Vánoce, tudíž i Ježíšek, jsou ale pryč, takže pomocí základních nástrojů hrubě vyretušujeme vše mimo děvčátka na sáňkách. Tento, již rutinní, postup bude velmi jednoduchý. Nejprve použijeme nástroj výřez (zkratková klávesa C), s jehož pomocí vyřízneme pouze děvčátko na sáňkách. Oblohu odstraníme pomocí magické hůlky (zkratková klávesa W) a provázek jednoduše obyčejnou gumou (zkratková klávesa E). Tím bychom měli dosáhnout jediné vrstvy s děvčátkem na sáňkách…

Pokud jste dosud pracovali v Photoshopu, přepneme se do samotného Image Ready. Vytvoříme nový soubor o standardních velikostech banneru – 468 x 60 pixelů. Jeho pozadí vyplníme příjemným nerušivým odstínem modré barvy a do nového obrázku přesuneme vrstvu s děvčátkem. Ta bude o dost vyšší než obrázek, takže ji za pomoci libovolné transformace (zkratková klávesa Ctrl+T) zmenšíme na námi požadovanou velikost. Při transformování doporučuji držet klávesu Shift, která nám zaručí proporcionální transformaci (stejný poměr stran).

Nyní již přejdeme k využití funkce mezilehlé. Hned ze začátku vytvořte nový snímek pouhým kliknutím na ikonu duplikace aktuálního snímku v panelu animace (o práci se snímky jsem psal v minulém díle). V prvním snímku poté posuňte děvčátko ven z obrázku tak, aby se levý okraj (držátko sáněk) dotýkal pravého okraje obrázku. Pozice na ose Y musí zůstat stejná, tudíž doporučuji děvčátko posunout se stisknutou klávesou Shift a detailní posunování za okraj provést pomocí klávesnicových šipek.

Na panelu animace (stejně jako i na několika dalších) máme k dispozici další funkce, které si zpřístupníme po kliknutí na šipku mířící doprava.

Z menu, které se zobrazí po kliknutí, vybereme možnost mezilehlé. Zobrazí se následující okno.

Nabídkou vrstvy určujeme, s kterými vrstvami bude nástroj pracovat. Parametry můžeme nastavit, s kterými vlastnostmi vrstev má funkce pracovat. Poloha bude pracovat s polohou vrstev, tudíž budeme moci s předměty plynule posouvat. Krytí bude pracovat s procentuálním krytím vrstvy, tudíž budeme moci předměty plynulým přechodem rozsvicet a zhasínat. Vlastnost efekty pracuje s efekty (styly) vrstvy. Mezilehlé s nastavuje, s kterými snímky bude mezilehlé pracovat. Jedním snímkem je ten, který je právě označený v panelu animace, druhý se nastavuje právě v této nabídce. Počet snímků je (překvapivě) počet snímků přechodu, který nástroj vygeneruje. Nás omezuje z jedné strany kvalita (plynulost) animace a z druhé velikost souboru. Oko je schopné zaznamenat 24 snímků za vteřinu, filmy mají kolem třiceti snímků za vteřinu, zářivka třináct, rychlý přechod mezi dvěma obrázky ve filmech by měl mít pět až osm snímků… to jen na okraj.

Dialog prakticky můžeme nechat s implicitními hodnotami (všechny vrstvy, vše zaškrtnuté, s následujícím snímkem, 5 snímků) a potvrdit. Klikneme na poslední snímek animace a prodloužíme délku jeho zobrazení (viz. minulý díl). Měl by nám vzniknout tento mezivýrobek...

Tímto jednoduchým příkladem jsem, myslím, dostatečně vysvětlil vytváření animace pomocí polohy. Vytvoříme k banneru ještě jednoduchý popisek. Do nové textové vrstvy napíšeme výraznou kontrastní barvou text banneru a pro zvýraznění vrstvě zapneme efekt vnějšího stínu. Buď pracujte pouze s textovou vrstvou nebo snímky, vygenerované v předchozím kroku, smažte. V prvním snímku přechodu vypneme viditelnost textové vrstvy a jejích efektů, v druhém necháme viditelnost celé vrstvy zapnutou. Opět zapneme nástroj mezilehlé a dialog nastavíme... Díky zaškrtnuté vlastnosti krytí v dialogu mezilehlé dosáhneme plynulého rozsvícení textu... Můžeme udělat i krátký přechod na konci banneru, aby nedošlo k rušivému bliknutí. Ovšem berte v úvahu, že se musíte (měli byste) se vejít do limitu 20kB a že paradoxně vítězí právě kýčovité, jednoduché a rušivé (ať už myšlenkou nebo vizuálním ztvárněním) bannery, které lehko svádí pozornost oka...

Nyní byste teoreticky měli umět vytvořit banner podle Vašich představ. Přeji hodně štěstí a co nejvyšší clickrate. K dispozici je samozřejmě jak předloha, tak výsledný banner v PSD.

Sekera Jiří