1 / 25

Aplikační programové vybavení

Aplikační programové vybavení. Úvod do p o čítačové grafiky. 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ů

arissa
Download Presentation

Aplikační programové vybavení

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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ů • http://www.xrite.com/custom_page.aspx?PageID=77

  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

  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

  12. 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

  13. 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)

  14. 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!

  15. Ztrátová komprese (JPEG)

  16. 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ů

  17. 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

  18. Test světel…

  19. Grafika na webu • 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: • <rect width="400" height="400"/><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.459c-29.8262, 3.9863-58.6504-2.4551-82.7891-16.5098" /> • Není podporováno Internet Explorerem (plug-in)

  20. 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}

  21. 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á

  22. 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ší …

More Related