Vysoká škola ekonomická v Praze Fakulta podnikohospodářská Hlavní specializace: Podniková ekonomika a management Seminář: Manažerská informatika pro pokročilé Semestrální práce: Grafika vektorová vs. bitmapová Školní rok 2009/2010 Bc. Zlata Štědrová
Co je to grafika Slovo grafika pochází z řečtiny (grafein = psát, kreslit) a původně toto pojmenování označovalo všechny způsoby kreslení a psaní. V průběhu staletí prodělala grafika změny povahy námětové i technické, přesto však její základní podstata zůstala zachována: rozmnožování výtvarného díla pomocí tisku. Později se jeho obsah zúžil na reprodukovanou kresbu nebo text. Když se dnes řekne v běžné mluvě slovo grafika, většinou si každý představí tu počítačovou. Původní smysl slova se jaksi vytratil. Ať už si ale každý představí jedno či druhé, má grafika v obou případech své kouzlo a přináší stvořitelský pocit. Počítačovou grafikou se rozumí bitmapová a vektorová. Spolu představují dva základní způsoby, jakými počítače ukládají a zpracovávají obrazové informace. Z tohoto důvodu se tedy na webu obecně používají dva typy obrázků vektorové a rastrové. Vytváření, používání, komprimování a ukládání obrázků v nejvhodnějším možném formátu jsou zcela zásadními dovednostmi pro tvůrce webových stránek. Např. multimediální weby jsou většinou založeny na vektorové grafice. Dalším pojmem v této souvislosti je tzv. vyřezávaná grafika. Její vytváření spočívá ve vyřezání grafického návrhu do samolepicí fólie pomocí vyřezávacího ploteru (výstupní zařízení počítače). Nejen profesionální webdesignéři a grafici mají nárok na znalosti o grafice. I nám pokročilým budou užitečné základní informace o grafických formátech a dalších souvislostech. Vektorová grafika První ze dvou druhů je méně známou grafikou. Podíl na tom bude mít fakt, že programy umožňující práci s ní nejsou tolik rozšířené mezi běžnými uživateli. Na mnohých z webů se používají vektorové obrázky, které mají oproti bitmapovým tu výhodu, že je lze zkomprimovat na menší velikost a že lze měnit jejich velikost beze ztráty kvality. Obrázek 1 - Příklad vektorové grafiky - 1 -
Jsou založeny na matematických výpočtech, což umožňuje vyšší stupeň komprese. Obraz je reprezentován pomocí geometrických objektů křivek, kružnic, lomených čar, mnohoúhelníků. Změna velikosti se provádí výpočtem, a tak nedochází ke zhoršení kvality. Matematický způsob vyjádření každého bodu, křivky nebo plochy znamená, že křivka takto nakreslená je definována souřadnicemi počátečního bodu, vektorem (odtud název grafiky), který určuje směr a zakřivení, a koncovým bodem. K této rovnici se ještě přidají informace o tloušťce a barvě čáry. Vektorový obrázek zpravidla bývá seskupen z mnoha menších a jednodušších objektů. Kreslení složitějších tvarů se provádí buď spojováním a rozdělováním jednoduchých tvarů do výsledného složeného objektu nebo přímo kreslením a editací křivek. Složitější křivky jsou tvořeny několika jednoduchými v koncových bodech pospojovanými úseky. Kreslicími nástroji získáte vektorový objekt, který je plně citovatelný bez ztráty kvality po celou dobu práce s objektem. Každý takto získaný objekt je tvořen obrysem, ohraničením a výplní. Změna tvaru objektu se provádí pouze změnou obrysu, výplň se do objektu generuje automaticky a ohraničení tvoří zvolená čára. Ohraničení ani výplň nejsou u objektů povinné. Objekt může tvořit pouze obrys s ohraničením, ale také samotný obrys s výplní. Z kreslicích nástrojů si pozornost zaslouží Bézierova křivka. Ta je popsána pomocí čtyř bodů dvou krajních, tzv. kotevních, které určují začátek a konec úsečky, a dvou kontrolních určujících vlastní tvar této úsečky. Při šikovné práci s těmito body se dají křivky snadno vytvarovat a vytvořit objekty různých vzhledů. Nejvíce se vektorová grafika využívá při tvorbě log, diagramů, jednoduchých ilustrací, rovněž animací a pro počítačovou sazbu. Pro práci s ní se používají zvláštní vektorové editory, např. Adobe Illustrator, CorelDRAW, Inkscape. Bitmapová grafika Slovo bitmapa vzniklo ze slovního spojení bitová mapa v době, kdy jeden bit popisoval jeden bod. Dnes je počet bitů informace na jeden bod obrázku mnohonásobně vyšší. V bitmapové grafice se tedy obrázky skládají z jednotlivých barevných obrazových bodů neboli pixelů (z angličtiny znamenající obrazový bod). Tyto body neleží nahodile, ale jsou uspořádány do mřížky. Mřížce se říká rastr, proto se také užívá pojmenování - 2 -
rastrová grafika místo bitmapové. V rastru má každý bod přiřazenou určitou barvu (např. RGB) a přesnou pozici. Tento způsob popisu obrázků používá televize nebo digitální fotoaparát. Kvalitu záznamu obrázku ovlivňuje především rozlišení a barevná hloubka. Čím více bodů obrázek má, čím má větší rozlišení (v DPI), tím je kvalitnější. V rastrovém obrázku se používají pixely s různými odstíny šedé barvy. Tyto odstíny zjemňují okraje říká se tomu vyhlazování hran a vytvářejí iluzi jako by se jednalo o jednolitou barvu. Bitmapová grafika se získává rastrováním. Tento proces, též pixelizace, vzniká snímáním předlohy například skenerem, digitálním fotoaparátem nebo kamerou. Bitmapa v neupravené, nekomprimované podobě skutečně obsahuje tolik bodů, kolik se dá vypočítat vynásobením počtu bodů na výšku a na šířku. I přes pixely s určitou barvou a pozicí se dají bitmapové obrázky různě upravovat. Mezi nejčastější patří oříznutí, korekce barevnosti a změna velikosti. Při úpravách se jistě využije efekt Maska, jenž umožňuje izolovat a chránit určité oblasti obrázku a na zbytek aplikovat Obrázek 2 - Příklad bitmapové grafiky barevné změny, filtry nebo jiné efekty. Barevný model definuje základní barvy a popisuje jejich míchání. Nejrozšířenější RGB a CMYK. Druhý jmenovaný vychází ze zkušenosti s mícháním (např. malířských) barev, - 3 -
používá se především v tiskařské technice. Pro vyjádření barev používá čtyř základních odstínů azurová (Cyan), purpurová (Magenta), žlutá (Yellow) a černá (black). Srovnání obou grafik Obě grafiky jsou jednou z možností, jak zaznamenat dvojrozměrný obraz. Zatímco vektorový obrázek je složen z jednoduchých geometrických objektů jako jsou body, přímky, křivky a mnohoúhelníky, lidské oko pracuje na principu bitmapové grafiky, neboť sítnice představuje bitmapový rastr. Mozek ale zpracovává obraz jako vektorovou grafiku. Grafika Vektorová Bitmapová Prohlížení v PC speciální programy bezproblémové Internetové prohlížeče mít plug-in všechny Specifikace vlastností nelze konkrétní Barevné modely RGB, CMYK RGB, CMYK Tabulka 1 - Srovnání možností jednotlivých grafik Grafické formáty Ať už se vytváří, edituje či jinak zpracovává jakákoliv grafika, vždy bude mít nějaký formát. Grafické formáty v sobě uchovávají grafické informace, kterou jsou pak grafické prohlížeče schopny zobrazit jako grafiku. Formáty jsou různé podle druhu grafiky a dále se pak rozlišují. U vektorové grafiky je to dle programů, ve kterých se s ní pracuje, u bitmapové se odlišuje barevné zpracování a možnosti komprese. Formáty se pak mohou navzájem převádět z jednoho do druhého. Formáty vektorové grafiky: přípona formát programu / formát.ps - PostScript.eps - Encapsulated PostScript.cdr - Corel Draw.cmx - Corel Presentation Exchange.ai - Adobe Illustrator Artwork.zmf - Zoner Callisto.svg - Scalar Vector Graphic.wmf - Windows Metafile.fla a.swf - Flash player.dxf - Drawing Interchange Format ascii dxf,.dwg - AutoCAD.dxb - Drawing Binary Interchange File Format Nejlepší je mít data uložená v nějakém univerzálním souboru jakým je například.eps, který byl vytvořen speciálně pro přenos obrazových dat určených pro tisk. Podporuje vektorové i bitmapové grafické prvky a sám je podporován mnoha programy. - 4 -
WMF byl navržen společností Microsoft pro její operační systémy. Je určen spíše pro kliparty a menší soubory. Nepodporuje CMYK a vnořené rastrové objekty. AI je taktéž velmi rozšířený v profesionální grafice, podporuje CMYK a vnořené rastrové obrázky. CDR je velmi využíván v profesionální grafice, podporuje CMYK a je pro tvorbu vyřezávané grafiky. Má vlastní univerzální přenosový formát CMX sloužící pro bitové mapy i pro vektory. Je v něm vytvořena velká řada klipartů. CorelDRAW přes formát.cmx obrázek či bitmapu rozpozná a správně interpretuje. DWG je interní binární formát programů CAD (Computer Aided Design), který se stal standardem pro rýsování počítačových projektů v nejrůznějších oborech. CorelDRAW a Adobe Illustrator jsou schopny ho načíst. SVG (Scalable Vector Graphics) je značkovací jazyk, který popisuje dvojrozměrnou vektorovou grafiku pomocí XML. Definuje tři základní typy grafických objektů: 1) vektorové tvary obdélník, kružnice, elipsa úsečka, lomená čára, mnohoúhelník a křivka, 2) rastrové obrazy, 3) textové objekty. V budoucnu by se měl stát základním otevřeným formátem pro vektorovou grafiku na Internetu. Znamená to, že se obrázek nemusí vytvářet jako tradiční obrázek, ale pro text by se mohly použít běžné znaky sady ASCII. Tím se zjednodušuje údržba a je možné, aby byl text indexován a mohl být nalezen pomocí vyhledávačů. V případě bitmapové grafiky svou důležitou roli sehrává komprese. Jedná se o speciální postup ukládání dat. Jejím úkolem je zmenšit datový tok. Komprese se provádí u každého formátu jinou technologií, a proto převod z jednoho kompresního formátu do druhého může snižovat kvalitu obrázku. Principem komprese je převedení barevného modelu z RGB do HSB, případně HSL (hue, saturation, lightness). Většinou se jedná o zprůměrování hodnot barev nejbližších obrazových bodů. Lze rozdělit do dvou základních kategorií. Neztrátová komprese obrazových dat znamená, že informace jsou zakódovány tak, aby zabíraly méně místa. Ztrátová, že část informací je vypuštěna, tak aby lidské oko nic nepoznalo. Intenzitu ztrátové komprese lze nastavit. Pokud rastrových obrázek obsahuje miliony různých barev, jeho výhodou potom je jeho lepší zobrazení a možnosti komprese. Tyto možnosti jsou rozhodujícím faktorem při volbě použitého formátu. Vývoj jde dopředu, tudíž budou stále snahy o co nejvýhodnější zkombinování zobrazení a komprese. - 5 -
Formáty bitmapové grafiky: přípona význam.bmp - bitmap.gif - Graphics Interchange Format.jpg(.jpeg) - Joint Photographic Experts Group.png - Portable Network Graphic (přenosná síťová grafika).tif(tiff) - Tag Image File Format raw - syrový, nezpracovaný BMP jsou ukládány po jednotlivých pixelech. Většinou nepoužívají kompresi. Jednoduchý, volně použitelný, proto rozšířený. GIF podporuje maximálně 256 barev, komprimuje co největší počet pixelů ve vodorovném směru, proto se lépe komprimují velké plochy s jednolitou barvou (tím menší velikost), lépe zachovává původní barvu, výsledek bude mít ostřejší vzhled, jedna barva v obrázku může být průhledná; podporuje animace, přičemž umožňuje ukládat jen rozdíly mezi snímky, čímž značně zmenší velikost souboru. Grafika se doporučuje ukládat jako.gif, když na obrázku je omezený počet jednolitých barev, obrázek má formu perokresby, jako obrázek ukládáte text bez složitého pozadí, se jedná o miniaturu fotografie, používáte malé obrázky. JPEG určený pro obrázky i s milióny barev dovoluje zobrazit 256 odstínů šedé. Umožňuje uložit obrázek jako progresivní, který se postupně zobrazuje, tj. nejdřív je rozmlžen a později dostává svou podobu. JPEG představuje metodu popisující způsob komprimace rastrových obrázků, ale technicky správný je JFIF definující způsob uložení obrázku v souboru. JPEG je vhodný, když ukládáte fotografii, ukládáte text ve fotografiích nebo obrázek obsahující hodně přechodových barev. PNG je nejmladším formátem, nástupcem GIF a slučuje výhody jeho a JPEG. Z toho vyplývají vlastnosti jako průhlednost, průsvitnost, progresivní mód pro rychlejší zobrazení, efektivní bezztrátová komprese. Dovoluje zobrazit barevnou hloubku až 48 bitů (TrueColor). K nejpoužívanějším formátům s bezztrátovou kompresí patří TIFF. Původně byl vytvořen za účelem získání jednotného formátu pro stolní skenery. Podporuje vícestránkové soubory. Slouží také pro ukládání přijatých faxů pomocí počítače. RAW tvoří jakýsi standard pro ukládání fotografií z digitálních fotoaparátů. Není to formát, nýbrž soubor dat z fotoaparátu. Raw není zkratka, v angličtině znamená syrový, nezpracovaný. - 6 -
Vzájemné převody grafik Výjimečnou není situace, kdy bude potřeba získat z vektorového obrázku bitmapový (rastrový) a naopak. V souvislosti s tím je potřeba vysvětlit dva pojmy. Rasterizace je převod vektorové grafiky do bitmapové. Někdy je prostě nutné mít objekt v bitmapovém formátu. Obrácený postup převod rastru na vektorový objekt, tj. na upravitelné a škálovatelné obrázky se nazývá trasování. Je tomu tak v Corelu a ve Flashi, v Illustratoru je to živá vektorizace. Při procesu je vytvářena paleta barev umožňující jednoduše upravovat, slučovat a odstraňovat barvy a také vybrat, které barvy se objeví ve výsledcích trasování. Převod rastrů na vektorovou grafiku představuje vynikající způsob importu kreativního obsahu, který umožňuje zajistit profesionální výsledky. Programy pro zpracování jednotlivých grafických typů Grafický editor je počítačový program umožňující uživateli prostřednictvím grafického rozhraní vytvářet a upravovat grafické soubory. Bitmapový grafický editor nebo také rastrový pracuje s rastrovou grafikou, kdy data jsou zaznamenávána v některém z formátů vhodných pro bitmapovou grafiku jako např. JPEG, PNG, GIF a TIFF. Editory jsou vhodné především pro úpravu digitálních fotografií a ilustrací. Mimo jiné umožňují odstraňování tmavých, rozmazaných a jinak poškozeních oblastí z fotografií, včetně odstranění červených očí. Ve vektorovém grafickém editoru jsou data zaznamenávána v některém z formátů vhodných pro vektorovou grafiku jako např. EPS, PDF, WMF nebo SVG. Editory jsou užitečné pro vytváření schémat, nákresů s ostrými hranami, technických výkresů, diagramů apod., některé z nich podporují vytváření animací. Některé bitmapové editory, jako např. GIMP nebo Photoshop umožňují vytváření vektorových objektů. GIMP je bitmapový grafický editor částečně podporující vektorovou grafiku. Jako jediný z uváděných je zcela zdarma. Formuje soubory s příponou.xcf a je relativně odolný proti poškození souboru. Program Zoner Photo Studio je převážně určený pro správu a zpracování digitálních fotografií a obsahuje i jednoduchý bitmapový editor. - 7 -
Přehled aplikací k práci s grafikou (řazeno abecedně) vektorové editory prohlížeče a bitmapové editory Adobe Illustrator ACDSee Browser Adobe LiveMotion ACDSee Manager ACDSee Viewer Adobe Lightroom Adobe Photoshop (od verze 6) CorelDRAW Corel PhotoPaint GIMP IrfanView Macromedia Flash Malování Prohlížeč obrázků a faxů Zoner Photo Studio Tabulka 2 - Abecední přehled grafických programů Slovo závěrem V této práci jsme se postupně seznámili s tou nejzákladnější problematikou týkající se grafiky. Teoreticky jsme si uvedli, jaké jsou její možnosti, a nastínili jsme si, co skýtá pro nás. Její využití je široké a používání je dnes téměř nutností. Proto nezabředněme jen v teoretických poznatcích, ale pronikněme do ní po praktické stránce a odhalme její tajemství. Pro nás pokročilé bude výtečným, pokud se s ní naučíme zacházet tak, aby nám usnadňovala práci a uspokojovala umělecké sklony. Odkazy na tematické webové stránky: www.grafika.cz www.zoner.cz www.adobe.com www.font.cz http://www.root.cz/serialy/graficke-formaty/. - 8 -
Informační zdroje 1. FOTR, Jiří, SCHNEIDER, Zdeněk. Flash 5 průvodce uživatele. Praha: Computer Press 2000. ISBN 80-7226-415-X. 2. EXCHER, Clint. Profesionální webdesign techniky a vzorová řešení. Brno: CP Books 2005. ISBN 80-251-0547-4. 3. BAUER, Alois. Grafika - knížka pro každého. Olomouc: Rubico 1999. ISBN 80-85839-34-2. 4. PAVEL, Luboš. Bitmapová a vektorová grafika v praxi. Bakalářská práce. Praha: Bankovní institut vysoká škola 2009. 5. HLAVENKA, Jiří, HERCIK, Jaroslav. CorelDRAW 8 referenční uživatelská příručka doporučená výrobcem. Praha: Computer Press 1998. ISBN 80-7226-066-9 6. HEIKENWALDEROVÁ, Lenka. Prezentace Vektorová a bitmapová grafika. 7. TAHOVSKÝ, Jan. Rastrová a vektorová grafika. ČVUT. 8. Rastrová grafika. Wikipedie.org [online, cit. 2009-11-25]. Dostupný z: <http://cs.wikipedia.org/wiki/rastrov%c3%a1_grafika> 9. Vektorová grafika. Wikipedie.org [online, cit. 2009-11-24]. Dostupný z: <http://cs.wikipedia.org/wiki/vektorov%c3%a1_grafika> 10. Vektorový grafický editor. Wikipedie.org [online, cit. 2009-11-25]. Dostupný z: <http://cs.wikipedia.org/wiki/vektorov%c3%bd_grafick%c3%bd_editor> - 9 -