Ú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ů

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 = barev ve 3 bytech nebo 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 obrazových bodů, stejný obraz s rozlišením 300 dpi obsahuje celkem 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: Není podporováno Internet Explorerem (plug-in)

Pozor na přenášená data velikost – obrázky je nutno optimalizovat obrázky designu 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á

a další …