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

12.03.2005 17:42 | Články | Marián Ščerbák
V dnešnej, poslednej, časti článkov o Gimpe, sa budeme krátko zaoberať témou jeho využitia pri vytváraní prvkov webovej grafiky. Ako vždy, aj tu program je na špičke. Pre pár rokmi bol napríklad odporúčaný viacerými autormi ako 'vynikajúci tvorca' klikacích (obrázkových) máp. Aj keď sa tieto už využívajú málokedy (sú totiž dosť neprehľadné), Gimp webovej grafike jednoducho rozumie. Aj animácii ...

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:

Mapa obrázka

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:// ...)

Údaje pre obrázkovú mapu

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 :-)

Rozdelenie mapy

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.

klikacia_mapa Linuxos.sk Homepage Gimpu Enlightenment Linuxsoft

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.

GAP

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) vrstva_pozadie
2) 2_vrstva 3) vrstva_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:

animácia prehrávanie animácie

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:

export export_2

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.

hotovo

Záver

Ako ste si mohli všimnúť, od vydania prvej časti vyšli ďalšie verzie Gimpu (posledná 2.2.4). Všetko sú to verzie opravujúce chyby z predošlých verzií. Kompletný prehľad noviniek pre verziu 2.2.* nájdeme vo Wikipedii. Myslím, že verzia 2.2* má šancu dosiahnuť rovnaké méty (stabilita, popularita) ako nezabudnuteľné verzie 1.2*.

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í.


    • FUUUJ 28.03.2005 | 10:45
      Pack   Návštevník
      Fuj tak kvalita tej vyslednej animacie to je otras. To mi silne pripomina 80-te roky... to autor nemysli vazne s tym, ze GIMP je nova superhviezda. Celkovo mam dojem, ze sa tu snazite chvalit to co vobec nie je dobre. Novacikovia budu asi smutni ked si ten skvely GIMP nainstaluju.
      • Re: FUUUJ 28.03.2005 | 12:31
        Avatar Ondrej Hučko Kubuntu  Používateľ
        Tak ani nová superhviezda GIMP neurobí nič s tým, že gif môže mať iba 256 farieb. Myslíte si, že Adobe áno? ;)
        • Re: FUUUJ 29.03.2005 | 00:12
          Avatar Marián Ščerbák   Používateľ
          Bohuzial :-( Za to vsak, ako ste si mohli vsimnut, nie je zodpovedny Gimp, ale ja :-) Ak by ste si precitali cely clanok, nasli by ste odkazy na niekolko zaujimavych stranok, na ktorych su tisice nadhernych obrazkov vytvorene prave v tomto programe. O vasich ostatnych nazoroch debatovat nebudem, clanky su mojou odpovedou na ne :-) A tato "fuuuj" animacia mala byt predovsetkym jednoduchou, aby jasne ukazala postupy pri vytvarani animacie. Som presvedceny o tom, ze po kratkej praci s Gimpom bude graficky nadany uzivatel schopny tvorit "umelecke diela", v neporovnatelne vyssej kvalite. A prave preto, aby tymto uzivatelom bolo jasne, ze Gimp je spickovy program, dokaze milion veci a ze praca s nimi nie je vobec zlozita, vznikli tieto clanky :-)
          • Re: FUUUJ 02.04.2006 | 19:12
            fathum   Návštevník
            castokrat viac zalezi na cloveku, ktory sedi pred PC ako na samotnom softe ....prikladom je madarsky blenderista, tusim ma nick v blender komunite Endi, ktory svojim vytvorom uz v spominanom softe polozil v sutazi 3D grafikov kreativcov, ktori vytvarali svoje prace v drahych a tvrdo profesionalnych programoch ...podla mna je gimp dobry soft, no pokial s nim robi antitalent, tak to potom aj tak dopadne
            • Re: FUUUJ 02.04.2006 | 19:12
              fathum   Návštevník
              castokrat viac zalezi na cloveku, ktory sedi pred PC ako na samotnom softe ....prikladom je madarsky blenderista, tusim ma nick v blender komunite Endi, ktory svojim vytvorom uz v spominanom softe polozil v sutazi 3D grafikov kreativcov, ktori vytvarali svoje prace v drahych a tvrdo profesionalnych programoch ...podla mna je gimp dobry soft, no pokial s nim robi antitalent, tak to potom aj tak dopadne
    • re 03.04.2005 | 15:07
      Avatar dodogo Knoppix, Debian, Slackware  Používateľ
      Vzdy sa to tak robi. Ze moznosti programu sa prdvadzaju na relativne primityvnych veciach. Ten serial som, priznam sa, necital. Nezaujimaju ma clanky zaoberajuce sa prostredim. No mozno to tam je no skor mna zaujimaju prakticke veci. Ako napriklad zamenim farby. Ako urobit ak je spodok trnsparentny, aby som urcitu farbu odstranil (vygumoval)...
      Prešov. Som Šarišan a som na to hrdý. :-)
      • Re: re 03.04.2005 | 23:33
        Avatar Marián Ščerbák   Používateľ
        Tieto veci su riesene velmi kvalitne v seriali na Linuxsoft.cz a dalsich, v clanku uvadzanych zdrojoch. Preto som ich tu nerozoberal, iba uvadzal zdroje :-)
    • Spôsoby animácie 17.08.2006 | 22:08
      Mona   Návštevník
      Rôznym možnostiam animovania v GIMPe sa venujem v tomto článku: http://grafika.sk/clanok/gimp-pre-www-animovane-gif-bannery/
    • Krajší banner 12.10.2008 | 02:50
      Mona   Návštevník
      Niektorí čitatelia zjavne nerozumejú napísanému textu. :))) Aký banner možno s GIMPom spraviť, môžete si pozrieť tu:
      http://www.grafickeprace.info/animovane-bannery-v-gimpe.html

      A tiež nie je na škodu veci:
      http://www.grafickeprace.info/photoshop-verzus-gimp.html
    • But it would be intersting 20.06.2009 | 21:19
      Fareeda   Návštevník
      buy levitra -levitra buy propecia -propecia buy zithromax -zithromax buy xenical -xenical buy ultram -ultram buy fioricet -fioricet buy valium -valium buy acomplia -acomplia buy prozac -prozac buy ativan -ativan
    • should have a list of “best posts”. 24.06.2009 | 19:31
      Aj   Návštevník
      online ambien - ambien order diazepam - diazepam buy wellbutrin - wellbutrin online alprazolam - alprazolam order prozac - prozac order online tamiflu - tamiflu lorazepam info - lorazepam buy nexium - nexium best price zoloft - zoloft buy klonopin - klonopin
    • Original post! 15.07.2009 | 08:00
      Gajijens   Návštevník
      • Príspevok bol vymazaný.