2. 2.17 Webová grafika Grafický návrh webové stránky se skládá z několika kroků: koncepce stránky, návrh navigace, příprava obrázků a jejich optimalizace. GIMP samozřejmě nabízí také nástroje pro práci s webovou grafikou. Tvorba pozadí pro web - textura Pozadí internetových stránek může být v nejjednodušším případě tvořeno jednou barvou definovanou přímo v HTML souboru. Zajímavější však může být použití textury nebo jiné grafiky. Je jen potřeba pamatovat na dobrou čitelnost textu na pozadí a přiměřenou velikost souboru. Textura je malý obrázek obvykle do velikosti 100x100 pixelů, který se skládá na pozadí stránky. Různé textury můžeme nalézt na internetu, jsou obvykle součástí grafických editorů (včetně GIMPu) a samozřejmě je můžeme vytvořit. Při tvorbě textury můžeme vyjít z nějaké fotografie (cihlová zeď, tráva, písek...). Vybereme a upravíme vhodnou část. Komplikací mohou být viditelné přechody při opakování textury. Řešením je využití filtrů nebo ruční způsob odstranění (rozdělení textury na čtvrtiny, vhodné otočení a záměna jednotlivých čtvrtin, zamaskování přechodů a vrácení do původní polohy). Další z možností je texturu tvořit od začátku sami a navrhnout ji tak, aby na sebe jednotlivé části navazovaly, podobně jako desky na dřevěné podlaze. Tvorba textu pro web Součástí většiny internetových stránek je text. Někdy však může být vhodné text do stránky vložit jako obrázek - použijeme-li neobvyklý typ písma nebo chceme-li text vylepšit nějakým grafickým efektem. Některé z vhodných oživení textu jsme již použili například text podél cesty. Další možnosti oživení přináší opět použití různých filtrů a barevných přechodů, inverze barev... Tvorba tlačítek pro webové stránky Tlačítka pro webové stránky můžeme vytvořit automaticky použijeme-li Fuskripty nebo ručně s využitím běžných nástrojů pro kreslení (obdélník, výplň, text...). 1
Obrazové (klikací) mapy Ve vytvořeném obrázku můžeme definovat aktivní oblasti (pomocí souřadnic), které obsahují hypertextový odkaz a otevírají tak například určitou webovou stránku. Obrazovou mapu můžeme využít i pro navigaci na stránkách... Obrazovou mapu lze vytvořit ručně v HTML kódu. Rychlejší a pohodlnější je využít vizuálního rozdělení pomocí zásuvného modulu Filtry / Web / Obrázková mapa. Postup: v GIMPu si připravíme (otevřeme) obrázek mapy spustíme modul Filtry / Web / Obrázková mapa definujeme oblast s využitím tří nástrojů pro definování oblasti (levý panel, obdélník, kruh, polygon) poklepeme do oblasti a vyplníme dialog Nastavení oblasti mapu si uložíme Soubor / Uložit jako (mapu můžeme kdykoliv upravit) v nabídce Zobrazit / Zdrojový kód uvidíme zdrojový kód, který umístíme do HTML stránky za tag <BODY> Nástroje pro definování oblasti Nastavení oblasti Definovaná oblast Obrázek 1. Obrázková mapa 2
Otázky, úkoly Tvorba textury z obrázku. o Otevřete ze složky OBRAZKY soubor KRAVA.JPG [2]. o Proveďte obdélníkový výběr 100x100 pixelů z hnědé části těla krávy. o Založte nový soubor se stejnou velikostí jako má výběr a vložte do něj vybranou část kůže. o Vyexportujte obrázek do formátu PNG. o Vytvořte jednoduchou HTML stránku a nastavte vytvořený obrázek jako pozadí stránky. o Nyní se pokusíme odstranit viditelné přechody jednotlivých dlaždic. Vyzkoušejte Filtry / Mapa / Odstranit Přechody nebo Filtry / Rozmazat /Dlaždicovatelné rozostření. o Opět exportujte a zobrazte si HTML stránku. o Můžete vyzkoušet odebrat texturu z trávy, případně vodní plochy. Použitý obrázek pochází z internetu [2]. Tvorba textury II. o Založte nový soubor s velikostí 100x100 pixelů. o Použijte filtr Filtry / Vykreslit / Vzorek / Sinus o Vyzkoušejte různá nastavení filtru, nezapomeňte zatrhnout volbu Vynutit dlážditelnost. 3
o Opět exportujte a zobrazte si HTML stránku. Tvorba nadpisu webových stránek o Založte nový soubor s velikostí 1024x768 pixelů s bílým pozadím. o Vložte černě psaný text. o Proveďte kopii vrstvy s textem (duplikovat vrstvu). o Na kopii použijte filtr Filtry / Rozmazat / Gaussovské rozostření (poloměr cca 20). o Založte nový soubor s velikostí 1024x768 pixelů s černým pozadím. o Vložte bíle psaný text. o Otočte textovou vrstvu o 90. (Vrstva / Transformovat). o Na kopii použijte filtr Filtry / Zkreslení / Vítr. o Otočte textovou vrstvu zpět. o Založte nový soubor s velikostí 1024x768 pixelů s bílým pozadím. o Vložte černě psaný text. o Vyzkoušejte použití filtrů z nabídky Filtry / Alfa do loga (na obrázku byl použit Chladný kov). 4
Tvorba tlačítka pro web. o Založte nový soubor s velikostí 200x100 pixelů s bílým pozadím. o Proveďte obdélníkový výběr cca 130x30 pixelů se zaoblenými rohy cca 10 pixelů. o Výběr vykreslíme příkazem Upravit / Vykreslit výběr. o Výběr vypníme barvou pomocí nástroje Plechovka. o Odznačíme všechny výběry. o Provedeme výběr výplně tlačítka pomocí kouzelné hůlky. o Na paletce volby obdélníkového výběru nastavíme režim Průnik s aktuálním výběrem a pomocí obdélníkového výběru vybereme levou část vnitřku tlačítka. o Vybranou část vyplníme jinou barvou. o Umístíme text. Vytvořte jednoduché webové stránky s obrázkovou mapou. Základem bude trojúhelník s písmeny I (proud), U (napětí), R (elektrický odpor). Po klepnutí na příslušnou oblast trojúhelníku se zobrazí nová stránka se zvolenou veličinou vyjádřenou z ohmova zákona. (Klepnu na U, objeví se U=R*I, klepnu na R, objeví se R=U/I...) Použité zdroje [1] GNU Image Manipulation Program: Uživatelská příručka [online]. [cit. 2013-06-22]. Dostupné z: http://docs.gimp.org/2.2/pdf/cs.pdf Použité obrázky [2] Commons.wikimedia.org [online]. [cit. 2013-06-22]. Dostupný pod licencí Public domain na WWW: http://commons.wikimedia.org/wiki/file:nrf_norwegianred_daughter_10579_eggtroe n.jpg Autorem všech dalších obrázků je Jiří Hort. 5