Cvičení 4 - Základy práce s vektorovou grafikou
Doposud byla cvičení z Multimediálních systémů věnována výhradně rastrovým formátům pro uložení obrazu. Druhým způsobem práce s grafikou v počítači je využití vektorů. Pro uložení grafiky tak nepoužíváme pravidelnou mřížku pixelů, ale geometrické tvary definované jejich matematickým zápisem. Toto cvičení s tématem vektorové grafiky je postaveno zejména na praktických ukázkách práce v aplikaci Inkscape.
Cíle cvičení
- seznámit se s principy a vlastnostmi vektorové grafiky
- vytvořit čtyři různé grafické objekty dle zadání
Obsah cvičení
Vektorová grafika
Obraz vektorové grafiky skládáme ze tří základních typů geometrických objektů (bod, přímka, křivka), přičemž přímky a křivky můžeme uzavírat a tvořit z nich polygony (obdélník, trojúhelník, elipsa apod.). Jednotlivým objektům je možno definovat vlastnosti (například linii můžeme nastavit její barvu, typ symbologie, tloušťku čáry apod.).
Základní výhodou vektorové grafiky oproti té rastrové je možnost bezeztrátového zvětšování obrazu v libovolném poměru. Nezáleží tak na tom, zdali se vytvořenou grafiku rozhodneme vytisknout na papír formátu A5 či ji vystavovat na billboardu - vždy bude mít totožnou kvalitu. Je to dáno tím, že geometrie všech grafických objektů je v souboru zapsána jen jejich platnou matematickou funkcí, která není nikterak spojena s velikostí objektu na papíře či monitoru počítače. Při tisku nás díky tomu nelimituje žádná hodnota PPI ani jiná veličina jako v případě rastrového souboru.
Dalšími výhodami vektorové grafiky oproti té rastrové je možnost jednoduše pracovat s jednotlivými částmi scény (je tvořena samostatnými objekty) a u jednodušších obrazů i menší velikost výsledného souboru (např. černé kolečko uložíme vektorově pouze zápisem tří hodnot - kruh, velikost poloměru, barva výplně, zatímco v rastru musíme zapsat do každého vybraného pixelu kód pro černou barvu). Na druhou stranu obrazy vektorové grafiky není tak snadné pořizovat jako rastrovou grafiku (fotoaparát, skener, ...) a je velmi složité s ní zachytit složité barevné scény s různorodými přechody (například fotografie).
Základem pro zápis křivek ve vektorové grafice jsou tzv. Bézierovy křivky. Vycházejí z principu, že libovolný úsek křivky je možno zapsat jejími čtyřmi body (dva koncové a dva kontrolní určující tvar křivky). Spojnice mezi kontrolním bodem a koncovým bodem je tečnou k výsledné křivce.
Existuje řada aplikací pro práci s vektorovou grafikou. Mezi nejznámější komerční produkty patří Adobe Illustrator či Corel Draw. Na tomto cvičení budete pracovat s aplikací Inkscape, která je šířena pod svobodnou licencí GNU. Jedná se o komplexní nástroj nabízející velkou funkcionalitu, podporu řady formátů a jednoduché grafické prostředí. Aktuální verzi aplikace pro operační systémy Linux, Windows, Mac OS si můžete stáhnout z oficiálního webu aplikace.
Formát svg
SVG (Scalable Vector Graphics) je otevřeným formátem pro zápis vektorové grafiky vyvíjeným konsorciem W3C (World Wide Web Consortium) od roku 1999. Formát je založen na značkovacím jazyce xml (stejně jako například html), díky čemuž můžeme svg grafiku vytvářet i v libovolném textovém editoru. SVG je obecně podporováno standardními webovými prohlížeči (v případě IE až od verze 9), umožňuje vytvářet statické obrazy i animace. Jedná se o nativní formát aplikace Inkscape.
Praktická úloha 1 - vytvoření tlačítka navigace
Cílem prvního úkolu je vytvořit tlačítko využitelné například pro navigaci na webové stránce nebo v prezentaci - viz obrázek 1. Postup jeho vytvoření v aplikaci Inkscape názorně a detailně ukazuje níže vsazená animace a shrnuje tento text:
- založte nový soubor o rozměrech přibližně 500 x 250 px
- vytvořte základní černý obdélník tlačítka a jeho 4 zmenšené kopie
- aplikujte lineární přechod od černé k bílé druhému a třetímu obdélníku
- aplikujte radiální přechod na vnitřní červený obdélník
- vytvořte odlesk nad vnitřním obdélnímkem tlačítka s využitím lineárního gradientu a převodu objektu s obdélníkem na křivku
- doplňte text tlačítka
- upravte jednotlivé přechody obdélníků do finální podoby
- tlačítko uložte ve formátu svg
Obr. 1: Tlačítko navigace
Obr. 2: Animace s postupem vytvoření tlačítka z obrázku 1, pro spuštění tutoriálu klikněte na obrázek
Praktická úloha 2 - vytvoření obrazu biliardové koule
Cílem tohoto úkolu je vytvořit vektorovou kresbu biliardové koule s prostorovým efektem - viz obrázek 3. Postup jeho vytvoření v aplikaci Inkscape názorně a detailně ukazuje níže vsazená animace a shrnuje tento text:
- založte nový soubor o rozměrech přibližně 500 x 500 px
- vytvořte základní kruh koule
- na kruh aplikujte radiální přechod od vybrané barvy k bílé - vybraná barva bude simulovat barvu celé koule
- vytvořte kruh pro zápis čísla koule, definujte mu lineární přechod od bílé k tmavému odstínu, vepište do něj číslo koule
- vytvořte odlesk v horní části koule duplikováním základního kruhu koule, jeho zmenšením, zploštěním a definováním lineárního přechodu
- upravte pozici a podobu jednotlivých částí koule do finální podoby
- grafiku uložte ve formátu svg
Obr. 3: Biliardová koule
Obr. 4: Animace s postupem vytvoření biliardové koule z obrázku 3, pro spuštění tutoriálu klikněte na obrázek
Praktická úloha 3 - simulace kresby rostliny využitím křivek
Cílem tohoto úkolu je vytvořit vektorovou kresbu založenou na křivkách vyvolávající dojem zdobné zeleně - viz obrázek 5. Postup jeho vytvoření v aplikaci Inkscape názorně a detailně ukazuje níže vsazená animace a shrnuje tento text:
- založte nový soubor o rozměrech přibližně 600 x 300 px
- vytvořte základní tvar křivky - nástroj Kresba Bérierovýck křivek, v případě potřeby editujte jednotlivé body křivky (Edit Paths By nodes)
- totožným způsobem doplňujte vedlejší křivky kresby - můžete je duplikovat
- změňte tvar konce vybrané křivky na tvar listu převedením Objektu na křivku a editací tvaru konce linie
- vytvořte samostatný objekt listu pomocí křivky a vhodně jej umístěte na vybrané místo
- prozkoumejte možnosti editace symbologie křivky v panelu Objekt/Výplň a obrys
Obr. 5: Simulace rostliny s využitím křivek
Obr. 6: Animace s postupem vytvoření grafiky rostliny z obrázku 6, pro spuštění tutoriálu klikněte na obrázek
Praktická úloha 4 - pořizování vektorové grafiky vektorizací rastrové předlohy
Cílem tohoto úkolu je ukázat, jak lze v případě potřeby získat vektorovou grafiku kopírující rastrovou předlohu. Předvedeným způsobem můžete relativně snadno vytvořit vektorové grafiky jednodušších rastrových obrazů. Postup vektorizace rastrového obrázku s kolíčkem na prádlo v aplikaci Inkscape názorně ukazuje níže vsazená animace (v animace není zahrnuta celá vektorizace kolíčku, jelikož ta se skládá z dokola se opakujících kroků) a shrnuje jej tento text:
- stáhněte si z webu rastrový obrázek s vybranou předlohou, který chcete vektorizovat do podoby vektorové grafiky
- obrázek otevřete v prostředí Inkscape
- s využitím Bézierových křivek obkreslujte jednotlivé části rastrového obrázku - mírou detailnosti vlastní práce ovlivníte kvalitu výsledku
- plochám definovaným nakreslenými křivkami definujte jednobarevnou výplň či užijte barevného přechodu
Obr. 7: Vektorizace rastrového obrázku na příkladu kolíčku na prádlo (vlevo rastrová předloha, vpravo jednoduše vektorizovaný obraz)
Obr. 8: Animace s postupem vektorizace rastrové předlohy v prostředí Inkscape, pro spuštění tutoriálu klikněte na obrázek