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

Základy graky Jan Hamá£ek

13. zá°í 2016

Jan Hamá£ek

Základy graky

Barevné systémy

Jak uloºit efektivn¥ barvu do po£íta£e?

Jan Hamá£ek

Základy graky

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?)

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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.

Jan Hamá£ek

Základy graky

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

= 15 · 160 + 15 · 161 = 15 + 15 · 16 = 255

Jan Hamá£ek

Základy graky

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

= 15 · 160 + 15 · 161 = 15 + 15 · 16 = 255

Takto #FFFFFF = (255, 255, 255) = bílá P°evod mezi systémy: ru£n¥ nástroj na míchání barev nap°.

http://htmlcolorcodes.com/color-picker/.

Jan Hamá£ek

Základy graky

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£·)?

Jan Hamá£ek

Základy graky

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)?

Jan Hamá£ek

Základy graky

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²í.

Jan Hamá£ek

Základy graky

P°evod CMY(K) a RGB Máme systémy CMY a RGB, barvy jsou reprezentovatelné £ísly 0 255. Potom

C = 255 − R M = 255 − G Y = 255 − B

Pokud máme i £ernou, pak

K

= min(C , M , Y )

C1 = C − K M1 = M − K Y1 = Y − K V systému

C1 M1 Y1 K

jsme u²et°ili jednotlivé barvy.

Jan Hamá£ek

Základy graky

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

http://htmlcolorcodes.com/color-picker/.

Jan Hamá£ek

Základy graky

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?

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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 .

Jan Hamá£ek

Základy graky

Formát BMP

Data jsou v obrázku uloºena

nekomprimovan¥

pixelu (RGB).

⇒

Velké obrázky.

Obvykle 24 bit·/pixel

Jan Hamá£ek

Základy graky

jako barvy kaºdého

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.

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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?

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

Testovací obrázek

Jan Hamá£ek

Základy graky

PNG vs. GIF  kvalita obrázku

PNG

GIF

Jan Hamá£ek

Základy graky

PNG vs. GIF  prokládání PNG prokládání Adam7

GIF prokládání:

Obrázek rozd¥líme na bloky velikosti 8x8 pixel·. V datech

nejprve °ádky 1, 9, 17,. . .

obrázku jsou na za£átku pixely

potom °ádky 5, 13, 21,. . .

ozna£ené 1, potom 2, 3,. . . , 7 podle schématu: 1

6

4

6

2

6

4

6

7

7

7

7

7

7

7

7

5

6

5

6

5

6

5

6

7

7

7

7

7

7

7

7

3

6

4

6

3

6

4

6

7

7

7

7

7

7

7

7

5

6

5

6

5

6

5

6

7

7

7

7

7

7

7

7

Jan Hamá£ek

potom °ádky 3, 7, 11, 15. . . potom zbylé °ádky 2, 4, 6, 8,. . .

Základy graky

Formát JPG

Barvy v obrázku jsou uloºeny v barevném modelu

YCb Cr .

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

YCb Cr

jsou dále zakódovány

ztrátovou kompresí.

Ztrátovost m·ºeme ovládat pomocí parametru kvalita s hodnotou 0100. Ztrátovost komprese tolik nevadí u fotek, ale nap°. u psaného textu se objevují artefakty.

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

Záv¥ry

Jan Hamá£ek

Základy graky

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.

Jan Hamá£ek

Základy graky

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

Jan Hamá£ek

Základy graky

Vektorový formát SVG  p°íklad <svg xmlns="http://www.w3.org/2000/svg" width="467" height="462"> Zdroj:

https://cs.wikipedia.org/wiki/Scalable_Vector_Graphics Jan Hamá£ek

Základy graky

P°íklad  kruºnice

<svg xmlns="http://www.w3.org/2000/svg" width="467" height="462"> Dokumentace dal²ích základních tvar·:

https://www.w3.org/TR/SVG/shapes.html

Jan Hamá£ek

Základy graky