Základní informace o Adobe Image Ready bychom z předchozího dílu znali. Nyní můžeme přistoupit přímo k jeho možnostem. V prvním příkladu se vám pokusím vysvětlit, jak vytvořit jednoduchý blikající banner, například pro propagaci vašich stránek, ve formátu GIF. Zdrojové obrázky jsou všechny k dispozici přímo na úvodní stránce Grafiky.

Pustíme se tedy do práce. Adobe Image Ready je velmi podobný samotnému Adobe Photoshopu (ve verzi 6 je přímo jeho plnou součástí), tudíž předpokládám, že práce s ním pro vás nebude příliš složitá. Jelikož jde o produkty, které jsou účelně vzájemně dost provázané, můžete samotné kreslení provést přímo v Photoshopu, poté vaše dílo uložit do formátu PSD a pomocí Image Ready dodělat závěrečné úpravy. Dost řečí, vytvořte nový obrázek (Ctrl+N) a nastavte jeho rozměry na 468x60 (standardní rozměry banneru - proužku). Zkopírujte si logo vašich stránek do schránky (Ctrl+C) a vložte do nové vrstvy, kterou pojmenujte například "logo". Pokud je logo příliš velké (nebo malé), můžete jeho velikost upravit pomocí transformace (Edit>Free Transform). Při používání Transformace doporučuji držet klávesu shift, aby se logo zvětšovalo (zmenšovalo) proporcionálně. Obrázek by měl tedy nyní vypadat nějak takto...

Nyní vytvoříme vrstvu s upoutávkou na jeden z článků. Do nové vrstvy vložíme stejným způsobem jako u loga obrázek k prvnímu článku. Tuto vrstvu pojmenujeme například "obrazek1". Vypneme vrstvu s logem a vytvoříme novou textovou vrstvou, nazvanou například "text1", do které napíšeme popis k prvnímu článku. Obrázek (s vypnutou vrstvou "logo") by tedy měl vypadat asi takto...

Přidáme upoutávku na další článek. Vytvoříme vrstvu "obrazek2", kterou umístíme na stejné místo jako v předchozím kroku. Vrstvu zkopírujeme a vytvořenou kopii pojmenujeme "obrazek2a". Tuto vrstvu přesuneme tak, aby její pravý okraj byl hned vedle levého okraje vrstvy "obrazek2", respektive i vrstvy "obrazek1". K druhému obrázku samozřejmě vytvoříme i textovou vrstvu s krátkým textovým popiskem nezvanou například "text2".

Stejným způsobem vytvoříme i vrstvu "obrazek3", "obrazek3a" a "text3". Obrázek ve vrstvě "obrazek3a" bude v tomto případě na levé straně obrázku ve vrstvě "obrazek2a". Pokud nechápete, nic si z toho nedělejte - pochopíte. Zde si graficky znázorníme všechny vrstvy, které jsme vytvořili...

Vy, kdo jste dělali celý postup v Photoshopu, uložte nyní své práce do formátu PSD a otevřte v samotném Image Ready. Před uložením doporučuji všechny textové vrstvy vykreslit.

Nyní si všimněte spodního okna Animation. Pokud toto okno nevidíte, zobrazte ho v menu Window>Show Animation.

Pokusím se vám nyní toto okno, respektive list Animation, vysvětlit. Obrázek, ohraničený modrou barvou, je první snímek (proto logicky jednička v levém horním rohu) našeho animovaného GIFu. Další snímky se budou řadit chronologicky napravo od tohoto snímku. Pod náhledem snímku je údaj "0,00s", který znamená, jak dlouho bude snímek zobrazen. Pokud na tento údaj dvakrát kliknete, můžete jej v roletovém menu modifikovat. V spodním levém rohu okna je tlačítko, na kterém je (na našem příkladovém obrázku) napsáno Forever. Tento údaj znamená, kolikrát se GIF přehraje. Po kliknutí na tlačítko můžeme tuto hodnotu modifikovat v rozmezí 1 (Once) až nekonečno (Forever) přehrání. Napravo od tohoto tlačítka jsou ovládací prvky, myslím že velmi intuitivní a známé z všemožných přehrávačů. Pro jistotu (tlačítka zleva) - přetočení na začátek, o jeden snímek zpět, stop, spuštění animace, o jeden snímek dopředu. Následuje tlačítko pro přidání nového snímku a pro smazání označeného snímku. Toť nudná teorie, nyní praxe...

Vytvořte tři nové snímky kliknutím na ikonu přehnutého listu papíru v okně Animation (viz popis výše). V okně se vám nyní zobrazí celkem čtyři náhledy snímků, které velmi lehko upravíme tak, že u každého ze snímků zapneme pouze vrstvy, které chceme na daném snímku vidět.

V tomto konkrétním případě zviditelníme v prvním snímku vrstvy "logo", "obrazek1", "obrazek2a" a "obrazek3a". Na druhém snímku zviditelníme vrstvy "obrazek1" a text1", na třetím snímku vrstvy "obrazek2" a "text2" a na posledním, čtvrtém snímku, zviditelníme vrstvy "obrazek3" a "text3". Nyní si můžete banner zkusmo přehrát, ale asi určitě si všimnete, že se přehrává velmi rychle. Nastavíme tedy u každého ze snímků délku, jak dlouho bude zobrazen (viz výše). V tomto případě jsem zvolil u všech čtyř snímků prodlevu dvou vteřin. Po nynějším shlédnutí je rychlost snímků již v pořádku.

Jako poslední krok otevřte okno Optimize, které je implicitně v pravém horním rohu obrazovky, pokud ne, zobrazte jej v menu View>Show Optimize. V panelu nastavte formát obrázku GIF a počet barev (colors) na 64. Tímto krokem si zatím nelamte hlavu, vysvětlíme si ho v přespříštím díle. Banner uložte pomocí nabídky File>Save optimized a jsme hotovi. Vytvořili jsme jednoduchý a dle mého názoru elegantní banner, který v mém případě zabírá 19kB, tudíž ho můžeme použít takřka v kterémkoliv výměnném reklamním systému...

Samozřejmě dávám volně k stažení výsledný PSD soubor a v příštím díle se vám pokusím vysvětlit tvorbu složitější animace.

Sekera Jiří