20.09.2008 | Návody | Pridaj komentár

Animované bannery v GIMPe

Ak potrebujete jednoduchý animovaný banner a z rôznych dôvodov nemôžete na jeho výrobu použiť Flash, existuje pre vás jediné riešenie - obrázkový formát GIF. Tento formát sa vyznačuje niekoľkými zaujímavými vlastnosťami. Obsahuje 256 farieb, podporuje Alfa kanál (priehľadnosť) aj animovanie.

Ako to funguje?

Asi každý človek raz v živote spravil vlastnú animáciu. Spomínate si na cvičiacich, súložiacich a bijúcich sa panáčikov v rohoch vašich školských zošitov? No tak animovanie bannerov funguje na rovnakom princípe. Vytvoríte sadu obrázkov, uložíte ich podľa nadväznosti deja na seba a priradíte im čas, ako dlho majú byť zobrazené.

Môj banner obsahuje 14 vrstiev (políčok). No vďaka zníženému počtu farieb a kombinovanému prekladaniu obrázkov neprekračuje hranicu 15 kB, ktorá sa považuje za optimálnu pre rýchle načítanie do prehliadača. No a v duchu hesla raz vidieť je viac ako 100 krát čítať, prikladám zoznam použitých obrázkov aj s počtom milisekúnd, ktoré každému z nich určujú, ako dlho má byť zobrazený.

Dúfam, že ste už pochopili, ako to funguje. Pretože v ďalšej časti článku vás zoznámim s tým, ako sa to dá urobiť. :)

Ako sa to dá urobiť?

Celkom iste sa to dá urobiť v rôznych programoch. Ja to však spravím v grafickom editore GIMP. Používam verziu 2.4.0. Hrdinovia nášho tutorialu sú obrázky s malebným označením 1 a 2. Obidva si prosím otvorte v GIMPe.

Stiahnuť obrázky 1 a 2 vo formáte XCF (RAR, 3,44 kB)

Najdôležitejšia je práca s vrstvami. Ak chcete animovať, musíte jednoducho vedieť, ako jednotlivé obrázky na seba uložiť. K správe vrstiev sa dostanete klávesovou skratkou CTRL+L. Na vašej pracovnej ploche, by to teraz malo vyzerať nejako takto...

Kliknite na obrázok pre zväčšenie...

Na pravej strane vidíte okno s názvom Vrstvy. Áno, toto je to miesto, kde sa bude odohrávať väčšina vašej animovanej tvorby. Teraz však skopírujte obrázok číslo dva (klik na obrázok číslo dva, CTRL+C) a vložte ho do obrázka číslo jedna (klik na obrázok číslo jedna, CTRL+V). Jedným okom pritom sledujte okno vrstvy. V obrázku číslo jedna pribudla nová vstva, ktorú program pomenoval Plávajúci výber (Vložená vrstva). Nie je to nič iné, ako skopírovaný obrázok číslo dva. Aby sme z neho spravili plnohodnotnú vrstvu, musíme kliknúť na ikonu Create a new layer... v ľavom dolnom rohu okna vrstiev. Má podobu čistého hárku papiera.

Vidíte, že v obrázku jedna máte teraz dve vrstvy. Obrázok číslo dva už nebudete potrebovať. V okne vrstiev môžete vrstvy premenovávať, mazať, posúvať, spájať, nastavovať priehľadnosť alebo spraviť (ne)viditeľnými. Jednoducho, v okne vrstiev s vrstvami môžete robiť všeliake huncútstva.

Väčšiu časť animácie máte teraz prakticky hotovú a to už len tým, že ste na seba uložili dva obrázky. Ak by ste chceli vidieť ako budú rotovať v takomto surovom stave, môžete si otvoriť Filtre/Animácia/Prehrávanie... a stlačiť Hrať. Bude to vyzerať takto:

Ja viem, nič moc. Obrázky sa striedajú príliš rýchlo a ak práve nie ste ten sinavý android zo Star Treku, tak si nestihnete prečítať obsah. Nemáte totiž nastavené časovanie. To jest počet milisekúnd, ktoré každej vrstve určia dobu zobrazenia. Tiež nemáte nastavený spôsob prekladania vrstiev. Takže výsledný banner je nie len nečitateľný, ale aj zbytočne veľký. Obe muchy zabijete jednou ranou, ktorá sa volá Optimalizovať (pre GIF). Funkciu hľadajte na Filtre/Animácia/Optimalizovať (pre GIF).

GIMP vytvorí optimalizovanú verziu animácie. V okne vrstiev si všimnite časovanie pridané ku každej vrstve. Štandardne nastavené na 100 ms. Okrem toho pri Vloženej vrstve zočíte nejaké (combine). Znamená to kombinovaný preklad vrstiev. Program zistí, ktoré miesta majú obrázky rovnaké a tieto ponechá iba v jednom z nich. Z ostatných ich vymaže a nahradí transparentným pozadím, čím zníži výslednú veľkosť bannera.

100 ms je krátky čas na zobrazenie, takže nastavte každej vrstve rovno 1000. Dvojklik na vrstvu vám umožní jej editáciu. Enterom potvrdíte vykonané zmeny. A takto bude váš banner rotovať po exporte do formátu GIF:

Dostali sme sa do fázy ukladania vašej práce. Súbor/Uložiť alebo Uložiť ako, klávesová skratka CTRL+S alebo CTRL+SHIFT+S. Do okna Uložiť obrázok napíšte názov a príponu. Skúste napríklad test.gif. Vyberte priečinok, kam to chcete uložiť a potvrďte. V okne Exportovať súbor vyberte Uložiť ako animáciu a Skonvertovať na indexované... V ďalšom okne Uložiť ako GIF môžete nastaviť napríklad spôsob rotácie. Ak neoznačíte Opakovať donekonečna, banner urobí iba jednu rotáciu.

Tadá. Banner je hotový. :)

Dobré rady na záver

Používajte natívny formát programu GIMP, ktorý má koncovku XCF. Ukladajte do neho všetku vašu prácu pred dokončením a exportovaním do nejakého štandardného formátu. XCF je čosi ako PSD. Pamätá si nastavenia, vrstvy, vodiace linky a zabraňuje strate na kvalite pri opätovnom ukladaní.

Veľkosť GIF obrázka môžete ovplyvniť nastavením počtu farieb. Hľadajte na Obrázok/Režim/Indexovaná...

Ak nie ste celkom kreatívnym a dôvtipným jedincom, nápady ako animovať hľadajte v prvej verzii tohto návodu, ktorý som napísala v dobe, keď som ešte bola mladá a sprostá a použila som úplne ohyzdný font, od ktorého sa dôrazne dištancujem.

No a štandardné rozmery bannerov hľadajte napríklad na BillBoarde.

Komentáre

Pridať komentár

Meno (povinné)
E-mail (povinné, nezobrazuje sa)
Web (nepovinné)
Text (povinné):

Ochrana proti spamu. Napíšte prosím číslicu sedem: