Aplikační programové vybavení

1. Aplikační programové vybavení Úvod do počítačové grafiky

2. Elektromagnetickézáření • 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ů

3. Barevné modely • 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í

4. Aditivní barevný model • pracuje se světelnými zdroji barev (např. monitor nebo projektor) • 70 léta 19. století

5. Aditivní barevný model • 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

6. Model RGB • 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)

7. Subtraktivní barevný model • pracuje s odrazem bílého světla (tiskárny a všechno hmotné)

8. Subtraktivní barevný model • 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á

9. Model CMY • 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

10. Proč máme více barevných modelů? • monitor, projektor vyzařuje světlo, oko pohlcuje světlo • reálné objekty odráží světlo • http://www.dangries.com/Flash/RGB/eye.html

11. Gamut • 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

14. Rastrová (bitmapová) data • 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

16. Vektorová data • 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)

17. Rastrová vs. vektorová grafika • 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!

18. Ztrátová komprese (JPEG)

19. Barevná hloubka • 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ů

20. Rozlišení (rastrového) obrazu • 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

21. Test světel…

22. Grafika na webu • obyčejně rastrová • vektorová grafika je podporovaná v HTML5 • SVG (Scalable Vector Graphics) • Popis vektorového obrázku pomocí XML souboru: • <svg width="200px" height="10px"><rect x="0" y="0" width="150px" height="10px" rx="5" fill="green"/><rect x="50" y="3" width="80px" height="5px" fill="red"/></svg> • lze vkládat přímo do HTML dokumentu nebo do externího souboru • podporováno ve všech hlavních prohlížečích

23. Grafika na webu • 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}

24. Zásady použití barev • 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á

25. Odstrašující případy • 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ší …