GIMP (6) - Webová grafika a animácia

Pre vytváranie grafických prvkov na web možno využiť štandardné nástroje Gimpu (úprava rozmerov, farieb atď.). Okrem nich sú v ňom integrované funkcie špeciálne na tvorbu loga, tlačidiel, atď. Nájdeme ich napríklad v menu Rozšírenia --> Script-fu na Toolboxe. Ich "preskúmanie" nechám na čitateľa (práca s nimi je jednoduchá, aj keď si možno vyžiada trochu cviku), pretože teraz si ukážeme, ako sa dá vytvoriť "klikacia mapa". Potrebujeme pri tom však poznať aspoň trochu z jazyka HTML, takže ak ho neovládate, bude to asi trošku problém.

Mapa obrázka

V Gimpe ju vytvoríme špeciálnym nástrojom. Nájdeme ho v Menu --> Filtre --> Web --> Mapa obrázka. Mapu je výhodné vytvárať z obrázkov formátu JPG. Otvorí sa nám toto okno:

Vľavo sa nachádzajú nástroje na výber oblastí pre jednotlivé odkazy. Používajú sa klasicky, s tým rozdielom, že po záverečnom kliknutí sa nám ukáže okno, ktoré je potrebné vyplniť príslušnými údajmi. Na tretej karte môžeme doplniť Javascripty, na druhej meníme polohu vybratej oblasti posuvníkmi. Na prvej, najdôležitejšej, vyplňujeme samotný cieľ odkazu, či už lokálny, alebo webový. Po vybratí typu odkazu Gimp doplní začiatok odkazu sám (napr.: http://; ftp:// ...)

Ak sme si už celý obrázok "rozparcelovali", uložíme si ho. Potom si už iba Gimpom vytvorený kód otvoríme v textovom editore a vložíme ho (aj s použitým obrázkom) na príslušné miesto kódu našej web stránky. Ako vidíte, prežili sme to aj s minimálnymi znalosťami jazyka HTML :-)

Rozdiel oproti ručne napísanému kódu je v tom, že sme nemuseli priamo zadávať hodnotu veľkosti a umiestnenia odkazu, a tiež v (zbytočnom?) pridaní komentára.

Animovaný obrázok

Ďalším, oveľa častejšie využívaným prvkom na internetových stránkach sú Animované obrázky. Vytvoriť ich môžeme napríklad pomocou balíka GAP (Menu --> Video--> ... ), ktorý sa k animáciám správa ako k videu, čím nenápadne prekračuje hranicu statických obrázkov. Je to "väčší" balík, preto si ho nebudeme rozoberať. Ešte však treba povedať, že podporuje iba niektoré formáty MPEG 1,2 a aj to, že najradšej pracuje s obrázkami formátu XCF. GAP nájdeme na rovnakých miestach ako Gimp. Ak vás táto téma láka, vyskúšajte si ho. Opis a používanie je bližšie opísané v tutoriáloch. GAP ponúka veľmi široké možnosti animácie. Nám však na vytvorenie jednoduchej animácie postačí karta (dialóg), ktorý máme stále poruke- vrstvy.

Trochu voľnejšie som tu použil tutoriál, ktorý nájdete na gimp.org. Princíp animácie á'la Gimp spočíva v tom, že obrázok poskladáme z jednotlivých vrstiev (pri práci použijeme formát XCF, hotový objekt exportujeme do formátu GIF), ktorým povieme, po akom dlhom čase sa majú zobraziť. Teda nahradiť/doplniť vrstvu obrázku.

Príklad: Začneme otvorením nového obrázka, vyberieme si napríklad jednu zo šablón (Súbor-> Nový-> Šablóna-> Web banner common) pre logo. Samozrejme si môžeme upraviť jeho rozmery. (To mi pripomína ... Nájdeme tam ikonku reťaze, ktorá symbolizuje "zviazanosť" spojených prvkov- momentálne výšky a šírky obrázka. Rozpojíme ju kliknutím.) Vytvoríme si novú, priesvitnú vrstvu. Na ňu si pretiahneme čiernu farbu (alebo ju vymaľujeme ručne :-), vyberieme si celú vrstvu (Ctrl+A), "zmrštíme" ju o napr. 1 bod (Výber-> zmrštiť), vymažeme čiernu (Ctrl+K) a rám obrázka máme hotový.

Teraz si vložíme všetko, čo chceme, aby obrázok obsahoval. Základné prvky môžeme nechať na pozadí. Tie, ktoré chceme "rozhýbať" dáme na jednotlivé vrstvy. Niečo jednoduchšie vyzerá napríklad takto:

1)
2) 3)

Použijeme aj nástroj Filtre-> Animácia-> Prehrávanie..., ktorý nám presne ukáže, ako to bude celé fungovať. Ak sme s výsledkom spokojní, priradíme jednotlivým vrstvám časy. Urobíme to poklikaním na názov vrstvy, kde dopíšeme do zátvoriek čas zobrazenia vrstvy v milisekundách. Napríklad:

Za čas ešte môžeme (takisto do zátvoriek) uviesť spôsob kombinovania vrstiev. Replace je dafaultné, určuje, že nová vrstva nahradí predošlú. Combine zas naopak. Obrázok máme teda hotový. Ibaže, ak si všimneme, koľko miesta zaberá v pamäti, tak používatelia dial- upu nám začnú "pýtať zdravíčko". Použijeme teda Filtre-> Animácia -> Optimalizovať (pre GIF). Gimp teraz z jednotlivých vrstiev zmaže opakujúce sa časti (čo akurát na našom príklade nie je veľmi vidno), čím sme upokojili dial-upistov, pretože veľkosť súboru (utvorí sa optimalizovaná kópia obrázku) sa zmenšila. (Pri optimalizácii pre web zohráva veľkú úlohu aj použitie farebnej palety. Zjednodušene: čím menej farieb, tým menší obrázok.) Zostáva nám obrázok už iba uložiť. Na to použijeme formát GIF. Otvorí sa nám okno na upresnenie uloženia:

Nezabudnime zaškrtnúť voľbu "Uložiť ako animáciu", ponecháme tiež prevod na indexovanú paletu farieb (tiež kvôli veľkosti súboru). V ďalšom okne ešte treba potvrdiť opakovanie (donekonečna), a spôsob ukladania vrstiev: Replace alebo Combine. Môžeme pridať aj komentár. Nič ťažké, však? Toto je naozaj veľmi jednoduchý príklad. Ak chceme použiť náročnejšie spôsoby animácie, použijeme vlastnosti balíčka GAP.

Záver

Na záver serálu ešte vyjadrím nádej, že sa (apoň čiastočne) podarilo dosiahnuť ďalšie spopularizovanie tohto vynikajúceho programu, rovnako ako aj priblíženie základov práce s ním. Prinášať nové tutoriály je totiž (podľa mňa) nosenie dreva do lesa, keďže ich nájdeme desiatky, ba stovky na spomínaných špecializovaných stránkach (viď vynikajúci seriál na Linuxsofte, GUG, alebo gimp.cz), kde ich pripravujú šikovní znalci Gimpu.

Otázka skôr je, či bude vedieť použiť v nich spomínané postupy aj začiatočník v Gimpe. Dúfam, že ak sa niekto "prehryzie" týmto seriálom, nebude mať problém s vetou "vytvoríme si masku vrstvy". Mimochodom, nespomínali sme, že sa dajú použiť aj rôzne návody pre Photoshop a spol., ibaže sa spomínané moduly nazývajú v Gimpe inak. V drvivej väčšine však s tým problém nie je. Dúfam, že vám Gimp "učaroval" tak ako mne a budete naďalej krok po kroku objavovať stovky a stovky v ňom skrytých tajomstiev a prekvapení.