Základy graky. Jan Hamá ek. 13. zá í 2016

Transkript

1 13. zá í 2016

2 Barevné systémy Jak uloºit efektivn barvu do po íta e?

3 Barevné systémy Jak uloºit efektivn barvu do po íta e?nej ast ji pouºíváme systém RGB - Red, Green, Blue. Barva - trojice ísel (R, G, B), kde R - mnoºství ervené barvy G - mnoºství zelené barvy B - mnoºství modré barvy Nej ast ji jsou R, G i B mezi 0 a 255 (pro zrovna tolik?)

4 Barevné systémy Jak uloºit efektivn barvu do po íta e?nej ast ji pouºíváme systém RGB - Red, Green, Blue. Barva - trojice ísel (R, G, B), kde R - mnoºství ervené barvy G - mnoºství zelené barvy B - mnoºství modré barvy Nej ast ji jsou R, G i B mezi 0 a 255 (pro zrovna tolik?) Tj. (255, 0, 0) je ervená. (0, 255, 0) je zelená,... (0, 0, 0) je

5 Barevné systémy Jak uloºit efektivn barvu do po íta e?nej ast ji pouºíváme systém RGB - Red, Green, Blue. Barva - trojice ísel (R, G, B), kde R - mnoºství ervené barvy G - mnoºství zelené barvy B - mnoºství modré barvy Nej ast ji jsou R, G i B mezi 0 a 255 (pro zrovna tolik?) Tj. (255, 0, 0) je ervená. (0, 255, 0) je zelená,... (0, 0, 0) je erná (255, 255, 255) je

6 Barevné systémy Jak uloºit efektivn barvu do po íta e?nej ast ji pouºíváme systém RGB - Red, Green, Blue. Barva - trojice ísel (R, G, B), kde R - mnoºství ervené barvy G - mnoºství zelené barvy B - mnoºství modré barvy Nej ast ji jsou R, G i B mezi 0 a 255 (pro zrovna tolik?) Tj. (255, 0, 0) je ervená. (0, 255, 0) je zelená,... (0, 0, 0) je erná (255, 255, 255) je bílá. Jde tedy o aditivní skládání barev.

7 Reprezentace systému RGB Trojici (R, G, B) ob as reprezentujeme jeho ²estnáctkovým kódem. estnáctková soustava je soustava s íslicemi 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. FF = = = 255

8 Reprezentace systému RGB Trojici (R, G, B) ob as reprezentujeme jeho ²estnáctkovým kódem. estnáctková soustava je soustava s íslicemi 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. FF = = = 255 Takto #FFFFFF = (255, 255, 255) = bílá P evod mezi systémy: ru n nástroj na míchání barev nap.

9 Systém CMY(K) Dal²í barevný systém je CMY(K) = cyan, magenta, yellow, (black) C cyan = podobná modré M magneta = podobná alové? Y yellow = ºlutá K black = erná Jde o zp sob míchání malí e ºádná barva = bílá. V²echny barvy = erná. ƒerná není pot eba sta í CMY. K emu je to dobré? Kde se to pouºívá (u po íta )?

10 Systém CMY(K) Dal²í barevný systém je CMY(K) = cyan, magenta, yellow, (black) C cyan = podobná modré M magneta = podobná alové? Y yellow = ºlutá K black = erná Jde o zp sob míchání malí e ºádná barva = bílá. V²echny barvy = erná. ƒerná není pot eba sta í CMY. K emu je to dobré? Kde se to pouºívá (u po íta )? Pomocí tohoto systému mícháme barvy na tiskárn. Kdyº CMY sta í, pro se pouºívá i erná (CMYK)?

11 Systém CMY(K) Dal²í barevný systém je CMY(K) = cyan, magenta, yellow, (black) C cyan = podobná modré M magneta = podobná alové? Y yellow = ºlutá K black = erná Jde o zp sob míchání malí e ºádná barva = bílá. V²echny barvy = erná. ƒerná není pot eba sta í CMY. K emu je to dobré? Kde se to pouºívá (u po íta )? Pomocí tohoto systému mícháme barvy na tiskárn. Kdyº CMY sta í, pro se pouºívá i erná (CMYK)? Je levn j²í.

12 P evod CMY(K) a RGB Máme systémy CMY a RGB, barvy jsou reprezentovatelné ísly Potom C = 255 R Pokud máme i ernou, pak M = 255 G Y = 255 B K = min(c, M, Y ) C 1 = C K M 1 = M K Y 1 = Y K V systému C 1 M 1 Y 1 K jsme u²et ili jednotlivé barvy.

13 Systém HSL Systém vhodný pro lov ka Hue odstín ve stupních (0-360 ). Saturation sytost, istota barvy (pom r ísté barvy a bílé). Rozsah 0 aº 1. N kdy 0% aº 100%. Volume jas, intenzita. Rozsah 0 aº 1. N kdy 0% aº 100%. Pro interní reprezentaci v po íta i se nevyuºívá. Dob e se v n m pracuje pro lov ka. P epo et na/z RGB sloºitý. Vhodné pouºít nástroj

14 Otázky Jakou má reprezentaci v HSV, CMY a CMYK ervená barva tj. barva (255, 0, 0) v RGB? Jak vypadají reprezentace ²edých barev v HSV, RGB, CMY, CMYK? Jak vypadá erná a bílá v HSV? Jaké jsou v²echny moºnosti?

15 Konec povídání o barevných systémech. Následují formáty uloºení obrázk.

16 Formáty uloºení obrázk vektorové formáty - obrázky se skládají z poloh a transformací základních útvar - obdélníky, kruºnice, elipsa, úse ka, lomená ára, mnohoúhelník,... rastrové formáty - ukládají rastr tj. barvy v²ech pixel v obrázku

17 Rastrová graka Pixel = nejmen²í zobrazitelná jednotka v rastrové grace (barevná te ka). Rozli²ení obrázku = po et pixel v obrázku. Obvykle udávané jako po et px na ²í ku x po et px na vý²ku.

18 Formát BMP Data jsou v obrázku uloºena nekomprimovan jako barvy kaºdého pixelu (RGB). Velké obrázky. Obvykle 24 bit /pixel

19 Formát BMP Data jsou v obrázku uloºena nekomprimovan jako barvy kaºdého pixelu (RGB). Velké obrázky. Obvykle 24 bit /pixel (8 bit na kaºdou sloºku RGB). Existují i jiné moºnosti nap. (5, 6, 5) ervená a modrá 5 bit, zelená 6 bit. Dohromady 16 bit /pixel = 2 bajty/pixel.

20 Formát PNG Data uloºena obvykle ve formátu RGB 1 bajt na barevnou sloºku podobn jako u BMP, ale s pouºitím bezztrátové komprese. Dal²í moºnosti uloºení barvy: RGB (16, 16, 16), ernobílá 1, 2, 4, 8, 16 bajt. Umoº uje pouºití pr hlednosti nap. pomocí roz²í ení modelu RGB na RGBA = (red, green, blue, alpha) => 4 bajty na pixel. Umoº uje tzv. prokládání tj. se azení dat tak, aby se p i na ítání dal zobrazit hor²í náhled. (viz pozd ji) Umoº uje animace, ale obvykle se nepouºívají.

21 Formát GIF Barvy uloºené v RGB palet 256 barev na za átku obrázku. Jednotlivé pixely obsahují íslo barvy v palet => velká úspora místa, pouze 1 bajt/pixel. Jeden obrázek obsahuje maximáln 256 barev => obvykle nevhodné pro fotky. (dá se to obejít, ale ned lá se to) Umoº uje prokládání podobn jako PNG. Umoº uje animace. V dne²ní dob je to jeho hlavní pouºití. pro GIF animace a ne PNG nebo video?

22 Formát GIF Barvy uloºené v RGB palet 256 barev na za átku obrázku. Jednotlivé pixely obsahují íslo barvy v palet => velká úspora místa, pouze 1 bajt/pixel. Jeden obrázek obsahuje maximáln 256 barev => obvykle nevhodné pro fotky. (dá se to obejít, ale ned lá se to) Umoº uje prokládání podobn jako PNG. Umoº uje animace. V dne²ní dob je to jeho hlavní pouºití. pro GIF animace a ne PNG nebo video? GIF animace jsou malé (paleta), umí s nimi v²echny prohlíºe e,...

23 Testovací obrázek Základy gra ky

24 PNG vs. GIF kvalita obrázku PNG GIF

25 PNG vs. GIF prokládání PNG prokládání Adam7 Obrázek rozd líme na bloky velikosti 8x8 pixel. V datech obrázku jsou na za átku pixely ozna ené 1, potom 2, 3,..., 7 podle schématu: GIF prokládání: nejprve ádky 1, 9, 17,... potom ádky 5, 13, 21,... potom ádky 3, 7, 11, potom zbylé ádky 2, 4, 6, 8,...

26 Formát JPG Barvy v obrázku jsou uloºeny v barevném modelu YC b C r. Podobný jako RGB, ale pouºívá jiné barvy. Barva Y odpovídá jasu a je proto nejd leºit j²í. U zbylých sloºek nám tolik nevadí ztráta kvality. Pixely v YC b C r jsou dále zakódovány ztrátovou kompresí. Ztrátovost m ºeme ovládat pomocí parametru kvalita s hodnotou Ztrátovost komprese tolik nevadí u fotek, ale nap. u psaného textu se objevují artefakty.

27 Artefakty u screenshotu JPG ƒást screenshotu zobrazující sloºku s popiskem uloºená jako jpg s kvalitou 10.

28 Závislost velikosti obrázku na kvalit JPG Rozli²ení: 1024 x 768 px Velikost: 1,3 MB Kvalita: 100 Základy gra ky

29 Závislost velikosti obrázku na kvalit JPG Rozli²ení: 1024 x 768 px Velikost: 372 kb Kvalita: 90

30 Závislost velikosti obrázku na kvalit JPG Rozli²ení: 1024 x 768 px Velikost: 215 kb Kvalita: 70

31 Závislost velikosti obrázku na kvalit JPG Rozli²ení: 1024 x 768 px Velikost: 132 kb Kvalita: 40

32 Závislost velikosti obrázku na kvalit JPG Rozli²ení: 1024 x 768 px Velikost: 48 kb Kvalita: 10

33 P íklad velikosti obrázku - fotka Rozli²ení 4000 x 3000 px. Velikosti: BMP: 36 MB (p esn ji B) PNG: 21 MB JPG: 5,3 MB (kvalita 90) GIF: 7,1 MB Základy gra ky

34 P íklad velikosti obrázku - screenshot Rozli²ení 1366 x 768 px. Velikosti: BMP: 3,1 MB PNG: 113 kb JPG: 342 kb (kvalita 90) GIF: 85 kb

35 Záv ry

36 Záv ry Volit kvalitu JPG > 90 nedává smysl. Neúm rn roste velikost a zlep²ení kvality není zásadní. JPG se hodí na obrázky, ztrátovost tam není tolik vid t. JPG se nehodí na screenshoty a obrázky obsahující text. Neu²et í místo a je vid t ztráta kvality. GIF se pouºívá obzvlá² na animace na webu. Pro ilustrace na webu ho vytla ují PNG, p ípadn vektorové formáty.

37 Vektorové formáty Obrázky se neskládají z pixel, ale ze základních tvar (kruºnice, obdélníky, lomené áry, k ivky) P íklady vektorových formát :.eps,.ps PostScript.pdf Portable Document Format.ai Adobe Illustrator Artwork.cdr Corel Draw.svg Scalable Vector Graphics.zmf Zoner Callisto

38 Vektorový formát SVG p íklad <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg xmlns=" width="467" height="462"> <rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" /> <rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" /> </svg> Zdroj:

39 P íklad kruºnice <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg xmlns=" width="467" height="462"> <circle r="150" cx="200" cy="200" style="fill: #ffffff; stroke:#ff0000;stroke-width:5px; fill-opacity>: 0;" /> </svg> Dokumentace dal²ích základních tvar :