Úvod do počítačové grafiky
• • •
elmag. záření s určitou vlnovou délkou dopadající na sítnici našeho oka vnímáme jako barvu v rámci viditelné části spektra je člověk schopen rozlišit přibližně 10 milionů barev a jejich odstínů http://www.xrite.com/custom_page.aspx?PageID=77
• •
barva - vlastnost nějakého objektu barevný model (color model) • • •
•
•
systém pro reprezentaci jednotlivých barev je snaha popsat barvu co nejpřesněji popisují se základní barvy a míšení těchto základních barev do výsledného odstínu přidáním informací o okolních podmínkách (dopadající světlo) získáme barevný prostor (color space)
základní rozdělení • •
aditivní subtraktivní
• •
pracuje se světelnými zdroji barev (např. monitor nebo projektor) 70 léta 19. století
• model RGB (Red, Green, Blue) • •
• • •
barvy jsou vytvářeny přidáváním barvy do černé (míchání vyzařovaného světla) přidáním všech složek vznikne bílá (svítíme barevnými reflektory) odpovídá fyziologii vnímání barev lidským okem aditivní barevné prostředí proto nepotřebuje vnější světlo (barvy na monitoru jsou zobrazovány i v naprosté tmě) barevné prostory CIE-XXX, HSV, HSL
• každá barva je udána intenzitou tří základních komponent • 256 (1 byte) úrovní pro každou základní barvu • 2563 = 16 777 216 barev ve 3 bytech • nebo 65536 barev ve dvou bytech • RGBA – barevný pseudo prostor • • •
rozšíření o alfa kanál (A) alfa kanál – informace o průhlednosti pixelu (alpha blending) obvykle je 256 úrovní průhlednosti (1 byte)
•
pracuje s odrazem bílého světla (tiskárny a všechno hmotné)
•
model CMY (Cyan – tyrkysová, Magenta – purpurová, Yellow – žlutá) •
subtraktivní prostředí je prostředí, které odráží světlo, a proto potřebuje vnější zdroj světla CMY a RGB jsou komplementární
• • •
• • •
tyrkysová pohlcuje červenou a odráží zelenou a modrou (ink) zelené + modré světlo = tyrkysové světlo (color)
odpovídá 3 základním barvám (tonerům) používaným při tisku základní barvy jsou odečítány od bílé (čím více „odebereme“, tím více se blížíme černé) „odebírání“ – omezujeme odraz světla, smícháním základních barev vznikne černá
• CMYK – rozšíření o černou (blacK, Key – klíčová) •
teoreticky postačují k vytvoření černé pouze tři barvy modelu CMY ve skutečnosti ale vzniká barva tmavě šedivá
• •
•
technické barvy (ink) obsahují pigment (mikroskopické částečky, které nelze dokonale promíchat)
navíc je černá levnější, proto většina tiskových zařízení používá ještě čtvrtou černou barvu barevné prostory různé – závisí na technologii výroby barvy, tisku a podobně
• •
univerzální např. Pantone
• monitor, projektor vyzařuje světlo, oko pohlcuje světlo • reálné objekty odráží světlo
• kompletní sada barev něčeho (zařízení, obrázku, atd.) • gamut je jedno z kritérií zobrazovacích schopností zařízení • • •
je dáno fyzikálním omezením zařízení každé zařízení má jiné schopnosti každé oko má jiné schopnosti
• • • •
obraz má danou velikost mřížky každý bod mřížky má určenou barvu bod mřížky – pixel (picture element) příklady: JPG, GIF, PNG, BMP, TIFF
• • • • •
geometrický popis obrazu elementární prvky: bod, úsečka, křivka, písmeno dají se vytvářet plochy, definovat barvy CAD aplikace příklady: CDR, AI, EPS, PDF (někdy)
• Vektorový formát • • •
matematický popis neomezená přesnost (libovolné měřítko) pro tisk a zobrazení se musí konvertovat do bitmapy
• Rastrový formát • • • •
ne všechno je možné geometricky popsat velké množství dat (viz BMP) změna velikosti je dost složitá operace s nejistým výsledkem pozor na ztrátovou kompresi!
• •
•
počet bitů potřebných k uložení barvy pixelu větší barevná hloubka zvětšuje škálu použitelných barev a také paměťovou náročnost obrázku obrazy podle počtu použitých barev: • • •
monochromatické: 1 pixel = 1 bit (bílá nebo černá) stupně šedi: 1 pixel = 8 bitů (intenzita jedné barvy) s paletou (indexovaná barva): 1 pixel = 2, 4, 8, 16 bitů • • • •
• •
tabulka barev uložená v souboru s obrazem barva pixelu je zadána jako index do tabulky barev malá paměťová náročnost a možnost změny barev používá se do 256 barev
pravé barvy: 1 pixel = 24 bitů (16 mil. barev) pravé barvy s částečnou průhledností: 1 pixel = 32 bitů
• •
• •
• •
počet obrazových bodů na jednotku délky obrazu obvykle se měří v počtu obrazových bodů na palec (dots per inch, dpi) 1 palec = 2,54 cm příklad: obraz o rozměrech 1×1 palec s rozlišením 100 dpi obsahuje celkem 10 000 obrazových bodů, stejný obraz s rozlišením 300 dpi obsahuje celkem 90 000 obrazových bodů velikost obrazu na obrazovce je určena rozměry v obrazových bodech, velikostí a nastavením monitoru velikost obrazu (souboru) na disku je určena celkovým počtem obrazových bodů a jejich barevnou hloubkou
• obyčejně rastrová • vektorová grafika není nijak zvlášť podporovaná • •
obtížná implementace, chybějící standardy SVG (Scalable Vector Graphics) • •
•
Popis obrázku pomocí XML souboru:
<path fill="#0000FF" d="M330.248, 144.0928c33.5879, 19.5713, 58.0996, 53.8916, 63.6465, 95.4014 c9.5371, 71.3516-40.5762, 136.9219-111.9277, 146.459c29.8262, 3.9863-58.6504-2.4551-82.7891-16.5098" /> Není podporováno Internet Explorerem (plug-in)
• Pozor na přenášená data •
velikost – obrázky je nutno optimalizovat • •
•
obrázky designu 0..10 kB obrázky s daty < 500 kB
počet požadavků •
nepoužívat obrázky na prvky, které je možné vytvořit pomocí CSS (rámečky, linky) • recyklovat – pro celou aplikaci stačí jedna ikona „smazat“ • slučovat • span.mce_bold {background-position: 0 0} • span.mce_italic {background-position: -60px 0}
• barvy používat střízlivě • nepoužívat modrou barvu u malých objektů nebo tenkých čar (lid. oko není příliš citlivé na odstíny modré) • na pozadí nepoužívat červenou a zelenou barvu (časté přeostřování – únava oka) • nekreslit vedle sebe syté barvy vzdálené ve spektru (náročné přeostřování oka) • odstíny šedé neruší • super bílá je trošku namodralá bílá
• • • • • • • • •
http://standanovak.borec.cz/ http://henryklahola.nazory.cz/ http://standa.chytrak.cz/ http://4a.chytrak.cz/ http://flussor.chytrak.cz/ http://cimrman.chytrak.cz/ http://www.vesmirni-lide.cz/default_c.htm http://simona.kvalitne.cz/index2.php a další …
