GIMP pre WWW: Animované GIF bannery

0
518

Obrázkový formát GIF obsahuje 256 farieb, podporuje transparentné pozadie a animovanie. Práve preto je veľmi často používaný pri tvorbe webdizajnu. V súčasnosti je na scéne aj iný, v mnohom lepší formát – PNG. Ak však potrebujete animovať a nechcete alebo neviete použiť flash, ostáva pre vás jediné riešenie – GIF.

Podpora formátu GIF

GIMP vo verzii 1.2.5 pre Windows podporuje import a export formátu GIF až po dodatočnom nainštalovaní plug-inu, nakoľko sa jedná o licencovaný formát. Inštalátor je možné stiahnuť napríklad zo stránok www.gimp.cz ako súbor s názvom „Podpora LZW“.

Tento obrázkový formát podporuje drvivá väčšina internetových prehliadačov. Zrejme všetky. Teda okrem textových. ;) Novší konkurujúci formát PNG staré prehliadače nepodporujú.

Nastavenie indexovanej palety

Program GIMP umožňuje pohodlné nastavenie indexovanej palety, ktorú formát GIF využíva. Dostanete sa k nej pravým klikom do obrázka/Image/Mode/Indexed alebo klávesovou skratkou ALT+I. Môžete v nej nastaviť počet farieb, farebný rozptyl (dithering) a priehľadnosť pozadia.

Takto nejako vyzerajú základné nastavenia indexovanej palety v praxi…

…a takto zasa nastavenie farebného rozptylu. Pri nastavovaní palety by sme mali pamätať na to, že farebný rozptyl výrazne zvyšuje veľkosť obrázka. A pokiaľ nemáme v pláte stvoriť banner s nejakými farebnými prechodmi, je lepšie ho vypnúť, alebo obmedziť niektorým z prednastavených profilov (viď obrázok).

Okrem toho je v Custom Palette možné použiť niektorú z prednastavených paliet (napr. Web 216), alebo vytvoriť vlastnú paletu.

Ako animovať?

Samotná animácia spočíva v jednoduchom ukladaní obrázkov na seba do vrstiev. Ku každej vrstve sa potom pridá časovanie a všetko sa to uloží do formátu GIF ako stále sa opakujúca (rotujúca) animácia. Ešte predtým, ako si ukážeme jednoduchý príklad pripomeniem, že vašu prácu pred dokončením je dobré ukladať do natívneho formátu XCF. Do formátu GIF uložte obrázok až vtedy, keď ste ho definitívne dokončili. Zabránite tak nárastu veľkosti alebo straty kvality výsledného obrázka. Formát XCF zabezpečí, že sa vždy môžete vrátiť k rozpracovanému obrázku so všetkými nastaveniami (vodiace linky, vrstvy a pod.). A teraz už hor sa animovať!

Budeme potrebovať dva obrázky v rozmere 468×60 px. Oba si uložíme do formátu XCF a nezabudneme zlúčiť vrstvy (Flatten Image) textu a plochy pozadia.

Následne obrázok č. 2 skopírujeme do obrázka č. 1 a uložíme ho do samostatnej vrstvy. Okno vrstiev si otvoríme klávesovou skratkou CTRL+L alebo pravým klikom do obrázka/Layers/Layers, Channels & Paths…

Animáciu máme takmer hotovú. Môžeme si ju prehrať pravým klikom do obrázka/Filters/Animation/Animation Playback…

To, čo uvidíme nás však nijako nepoteší. Obrázky skáču jeden cez druhý rýchlosťou, ktorú nestíhame sledovať. Nemáme totiž správne nastavené časovanie.

V tejto chvíli je vhodné siahnuť po vynikajúcom nástroji Animation Optimize (pravý klik do obrázka/Filters/Animation/Animation Optimize). Ten nielenže očistí vašu animáciu od stále opakujúcich sa plôch (ponechá len meniace sa časti), čím zníži veľkosť výsledného obrázka, ale ku každej vrstve automaticky priradí aj časovanie. Našu animáciu môžeme kedykoľvek vrátiť do pôvodného stavu a to funkciou Animation UnOptimize (pravý klik do obrázka/Filters/Animation/Animation UnOptimize).

Aby ste videli zmeny, ktoré nastali použitím Animation Optimize, je potrebné v zduplikovanej verzii optimalizovanej animácie nahliadnuť do okna vrstiev.

Vidíme, že filter z obrázka č. 2 odstránil zelenú podkladovú plochu, ktorá je totožná s obrázkom č. 1. Striedanie obrázkov teda neprebieha metódou replace (vymieňaním obrázkov), ale combine (kombinovaním obrázkov). Tým sa znižuje veľkosť nášho banneru.

Okrem toho si môžeme všimnúť, že filter ku každej vrstve priradil časovanie 100ms. To je pochopiteľne málo na to, aby ľudské oko stihlo prečítať text. Môžeme si ho teda zmeniť na 3000ms na každú vrstvu. Dvojklikom na nami zvolenú vrstvu otvoríme editáciu, kde zmeníme číselnú hodnotu.

Animácia by aj bola hotová. Teraz ostáva správne ju uložiť.

Uloženie do formátu GIF

Našu animáciu si pochopiteľne musíme uložiť do formátu GIF. Formát XCF je natívnym formátom programu GIMP a nič iné vám ho neprečíta. Ukladáme klasicky klávesovou skratkou CTRL+S alebo pravým klikom do obrázka/File/Save alebo Save as. Zadáme názov banneru, trebárs banner1 a pridáme príponu GIF. Ako prvé budeme musieť prekonať okno Export file.

Aby sa naše obrázky hýbali, musíme označiť položku Save as Animation. Funkcia Merge Visible Layers by nám zlúčila všetky viditeľné vrstvy do jednej. Ak chceme použiť indexovanú paletu, ktorú sme si nastavovali v úvode článku, označíme položku Convert to Indexed… Máme ešte možnosť celú animáciu previesť do odtieňov sivej – Convert to Grayscale. My však chceme náš banner v indexovanej palete a preto spokojne klikneme na tlačítko Export.

Nasleduje okno č. 2 – Save as GIF. Tu je dôležitá hlavne položka Loop forever. Ak chceme, aby naša animácia stále rotovala, toto políčko označíme. Ak chceme, aby po zobrazení banner urobil len jednu rotáciu, políčko neoznačíme. Pokiaľ sme nastavili časovanie a metódu striedania obrázkov, ostatné nastavenia nás v okne Save as GIF nezaujímajú. Pokračujeme kliknutím na tlačítko OK.

Náš banner je hotový :) Prezradím vám ešte pár efektov, ktoré môžu vašu animáciu urobiť zaujímavou.

Blikanie

Kto sa venuje tvorbe webdizajnu vie, že blikanie je veľmi ošemetná záležitosť. Dá sa však urobiť aj oku príťažlivo, nerušivo a celkom jednoducho. Pri tvorbe blikajúceho efektu môžeme využiť priehľadnosť vrstiev – Opacity.

Textovej vrstve “Používajte priehľadnosť!” nastavíme postupne 100%, 70%, 40% a 10% nepriehľadnosť. Každé z nastavení zlúčime do jednej vrstvy a uložíme ako samostatný obrázok. Dostaneme tak 4 obrázky, ktoré môžeme animovať. Ku každému priradíme časovanie (viď obrázok) a získame celkom driečny efekt.

Blikanie sa dá robiť viacerými spôsobmi. Nasledujúci je trochu zložitejší:

Posúvanie

Ďalším z často používaných efektov je posúvanie textu. Uvažovala som nad tým, ako túto animáciu urobiť čo najjednoduchšie, ale nenapadlo ma nič lepšie, než posúvanie textu pozdĺž vodiacej linky.

Text “Používajte vodiace linky!” jednoducho vždy o kus posuniete a zlúčite vrstvy. Aby bol prechod plynulý, musíte vytvoriť viac obrázkov, čím samozrejme narastie aj veľkosť vášho banneru. Preto neviem, či je práve tento efekt tým najvhodnejším. Takýmto spôsobom som vytvorila 13 obrázkov, ktorým som nastavila 300ms.

Podobne môžete objekty posúvať všetkými smermi.

Zoomovanie

Ďalší efekt, ktorý sa dá dosiahnuť relatívne jednoducho je “zoomovanie”. Vytvoríme si 5 obrázkov s rôznymi veľkosťami textu, ktoré budú vytvárať dojem vzdialenia. Zvyšných 5 si v okne vrstiev skopírujeme tak, aby vytvárali opačný dojem – približovania textu k nám.

To by bolo o tvorbe animovaných GIF bannerov v GIMPe z mojej strany hádam všetko. Pri písaní tohto článku ma napadlo, že som nespomenula to najzákladnejšie – formáty obrázkov používané pre web. Takže v budúcom pokračovaní sa zameriam na ne a na ich úpravu v GIMPe.

Autor: Monika Holečková