Teorie barev. Způsob definování barev. Vladimír Kopecký Jr. Model RGB (Red, Green, Blue) Fyzikální ústav MFF UK

Transkript

1 Obrazový materiál ve vědecké práci aneb jeden obrázek vydá za tisíc slov Vladimír Kopecký Jr. Fyzikální ústav MFF UK Teorie barev Ostwaldův barevný kruh vzniká postupným smísením základních barev Barvy protilehlé komplementární, doplňkové Barvy sousední také oku lahodí Šipka, trojúhelník a čtverec jsou praktické při vyhledávání vhodných kombinací barev Způsob definování barev Model RGB (Red, Green, Blue) Fyziologické zobrazení Určeno pro zobrazení na monitoru Užívá se při snímání í obrazových předlohř Používá tři barevné kanály v rozsahu 0 (nejnižší) až 255 (nejvyšší intenzita světla) R G B 1

2 Způsob definování barev Model CMYK (Cyan, Magenta, Yellow, black) Barvy inkoustů při tiskovém výstupu Používá čtyři y kanály v rozsah 0 % až 100 % nebo 0 až 250 (nejvyšší intenzita) Nastavení soutisku (překrytí) barev Barevné separace svíceny pod různými úhly natočení rastrů (azur 15, purpur 45, černá 75, žlutá 90 ) Barvy na obrazovce jsou světlejší než tisk! C M Y K Způsob definování barev Model HSB (Hue, Saturation, Brightness) Malířské míchání barev Používá tři kanály v rozsahu 0 až 255 Hue =tón tón, tj. čistá barva od červené, přes oranžovou, zelenou, modrou etc. Saturation = sytost, tj. nižší hodnota přidává více bílé a tím je barva méně sytá Brightness = určuje jas, světlost barvy, tj. nízká hodnota má vyšší podíl černé a znamená tmavší barvu Užívá se spíše v umělecké tvorbě Pro tisk je nutný převod do CMYK Způsob definování barev Přímé barvy Průmyslová báze barev, tj. specifikace poměru pigmentů v tiskárenském inkoustu Barvy se vybírají přímo z nabízených palet, např. Pantone Spot, Truematch, Toyo Colors, Focoltone Užívají se především v případě speciálních barev, např. stříbrná, fluorescenční zelená, kovové barvy apod. Lze kombinovat s použitím systému CMYK 2

3 Barevná hloubka Barevná hloubka Udávaná počtem bitů na pixel (obrazový bod) Exponenciální vyjádření celkového počtu barev Se zvětšování roste výrazně velikost souborů Obrázek černobílý (black and white) = = 1 bitová hloubka = bílá a černá barva Obrázek ve škále šedi (grayscale) = 8 bitů = 256 odstínů šedi Barevný obrázek (High color) = 16 bitů = = barev Barevný obrázek (True color) = 24 bitů = = 16 milionů barev Grafické formáty Pevný soupis pravidel pro uložení grafických dat Firemní formáty Většinou podporovány pouze konkrétním programem (např. PSP, PSD) Výjimkou jsou např. BMP, PCX, WMF Univerzální formáty Nezávislé na programu Neuchovávají všechny vymoženosti grafických programů (vrstvy atp.) Nejznámější jsou GIF, PNG, JPEG, TIFF, EPS Graphics Interchange Format Publikován firmou CompuServe v roce 1987 Existují varianty GIF 87 a GIF 89a (udány prvními bajty souboru) Uložení barev Obsahuje pouze 256 barev Používá nepřímé vyjádření barev v tzv. barevné paletě Nezávislé uložení barev v tabulce Body se označují indexovými čísly, nikoli přímo barvou Výhodou je snížení počtu bitů na jeden pixel (např. 16 barev se značí čísly 0 až 15, tj. binárně 4 bity. V případě standardního uložení je velikost 16násobkem) 3

4 Graphics Interchange Format Komprimace Komprimuje pomocí bezztrátové komprese algoritmu LZV (Lempel Ziv Welch) Algoritmus je od roku 1994 patentován firmou Unisys Komprimace je na úrovni ZIP či ARJ Komprimace je na úrovni ZIP či ARJ Probíhá po řádcích a tudíž je asymetrická Jednolitá barevná plocha vede k nepatrnému nárůstu velikosti souboru (zdvojnásobení velikosti plochy vede k 10% nárůstu datové velikosti GIF komprimuje úspěšněji vodorovné čáry 1450 bajtů 2884 bajtů Graphics Interchange Format Průhlednost Zavedena až v GIF 89a Jedna barva v paletě je označena jako průhledná Barva se nezobrazuje a prosvítá původní podklad Animace Promítání sekvence obrázků uložených v jednom GIFu Proklad Postupné načítání jednotlivých řádků Mírné zvětšení velikosti 1/8 dat 1/4 dat 1/2 dat celá data JPEG Joint Photographic Experts Group vyvinula formát počátkem 90. let Určen pro ukládání fotografií Kompletní 24 bitová barevná informace Ztrátová komprese obrazu Využívá specifických vlastností oční percepce (jas je důležitější než barva) Komprese udána v % (orientačně), dosahuje 1:10 až 1:20 Je aditivní (opakuje se při každém uložení) Rozostřuje hrany, tj. nevhodné pro perokresby, či ostré přechody nebo jednolité plochy Progresivní ukládání Postupné načítání vrstev = efekt zaostřování 4

5 Portable Network Graphics Vznikl v polovině 90. let s pomocí W3C konsorcia jako reakce na licenční problémy GIFu Plná barevná paleta (24 i 48 bitů) Komprimace pomocí deflate algoritmu (úspěšnější než LZW, shodný se ZIP a ARJ), tj. lepší než GIF Průhlednost Uložena v alfa kanálu 256 až úrovní průhlednosti Nevhodný pro fotografie (příliš veliké) Vhodný pro kresby Slabší podpora v prohlížečích Portable Network Graphics Proklad Algoritmus Adam 7 vede k efektu zaostřování Rozhození řídké sítě bodů, která se zahušťuje Možnost nastavení způsobu prokladu 1/64 dat 1/32 dat 1/16 dat 1/8 dat celá data 1/4 dat 1/2 dat Tagged Image File Format Vyvinut firmami Aldus a Microsoft, vlastní Adobe Univerzální bitmapový formát Plná paleta barev (1 až 64 bitů) Podpora většiny barevných prostorů (Grayscale, RGB, CMYK, CIELab, ) Komprese Vypnuto Bezztrátová (LZW, RLE, PackBits) Ztrátová (JPEG, CCITT Fax) Ukládání náhledů Požadován pro sazbu článků 5

6 Encapsuled PostScript Vyvinut firmou Adobe v 80. letech k přenosu grafiky ve formátu PostScript EPS soubor může obsahovat text, vektorovou i bitmapovou grafiku Nepodporuje alfa kanály Plná paleta barev (1 až 64 bitů) Obsahuje náhledovou bitmapu Často jde o TIFF nebo PICT (pro Mac) Rozlišení je minimální, tj. 72 dpi Univerzálně podporovaný formát Pozor na různé verze PostScriptu level 1 vs. 2 Vytváření může být často komplikované a je vhodné především pro profesionální tisk Rozlišení rastrových obrazů ppi (pixels per inch) hustota obrazových bodů na palec dpi (dots per inch) hustota tiskových bodů na palec X Y přímá velikost obrazu ve vodorovném a svislém rozměru Pozor na hustotu tiskového rastru (lpi) výstupního zařízení! lpi (lines per inch) hustota tiskového rastru v počtu linek na palec Autotypický rozklad Odstíny barev nelze tisknout přímo je třeba obrázek rozložit do rastru Rastr V lpi, hustota čar na palec Udává počet bodů rozkladu Rozlišení V dpi, body na palec Nejmenší velikost jedné plošky, ze které je rastrový bod složen Rastr Rozlišení výstupního zařízení 6

7 Tiskový (autotypický) rastr Definován hustotou, tvarem a úhlem lpi (lines per inch) hustota tiskového rastru v počtu linek na palec Tvar tiskového bodu kruhový, eliptický, čárový, čtvercový, ý vzorkovaný Úhel natočení rastru k potlačení jeho vnímání Volba rastru závisí na kvalitě papíru 65 lpi = novinový tisk 90 lpi = časopisecký tisk 133 lpi = běžný ofsetový tisk na hlazený papír 150 lpi = nejkvalitnější tisk na křídové papíry Stanovení rozlišení obrázků Hustota snímání obrazu Základní pravidlo (reprodukce 1:1): Dpi = lpi 2 (optimalizační faktor, min. 1,2) Reprodukce v jiném poměru: Dpi = lpi 2 cm výsledné / cm předloha Hustota šedé Hustota šedé = (dpi / lpi) 2 + 1(bílá) Rastr = 256 šedých, při 150 lpi; na inch, výstup na 2400dpi Tiskárna 300 dpi (600 dpi) reprodukuje pouze 32 šedí (120 šedí při 80 lpi) Kvalita výstupních zařízení Laserové tiskárny 300 dpi rastr ca. 60 lpi, 32 odstínů šedí 600 dpi rastr 75 až 80 lpi, 100 až 120 odstínů šedi 1200 dpi rastr ca. 130 lpi, všech 256 odstínů šedi Osvitové jednotky určené pro profesionální fotosazbu, rozlišení od 1200 dpi, standardně 2400 dpi Webové stránky 72 až 96 dpi Originál Laserová tiskárna dpi Laserová tiskárna dpi 7

8 Typy grafů 2D grafy Bodový graf (scatter graph) Průběhový graf (line graph) Sloupcový graf (bar graph) Koláčový diagram (pie graph) 3D grafy Bodový graf (3D scatter) Graf trajektorií (3D trajectory) Pseudo-3D grafy (3D sloupce, stuhy, stěny) Plošný graf (surface, fishnet, waterfall, etc.) Densitogram Každý graf je pro něco jiného 3,0 2,5 B C D E 4,5 4,0 3,5 B C D E 3,0 2,0 3,0 2,5 1,5 1,0 0,5 0, ,0 2,5 2,0 1,5 1,0 2,5 2,0 1,5 1,0 0,5 0, ,0 B C 2,5 D E 2,0 1,5 1,0 0,5 32 0, E D C B 4,5 4,0 3,5 3,0 2,5 2,0 1,5 B C D E 1,5 1,0 0,5 2,0 35 0,5 0,0 0, ,0 0, Každý typ grafu se hodí pro jiné vyjádření hodnot C D E 0,0 Tvoříme graf Graf je vždy názornější než tabulka! Nikdy neukazujte, že žádná změna v zobrazovaných veličinách neproběhla (vyjádřete to slovně) Zobrazujte jen data hodná pozornosti, tj. komentovaná v textu Graf nemusí začínat nulovou hodnotou, tj. místo 0.00 stačí jednoduše 0 Upřednostňujte bezserifová písma Šetřete barevnými obrázky, často jsou placené či se na ně vztahují jiná omezení Nepoužívejte vlasové linky (0,5 pt) nelze je spolehlivě vytisknout a jsou špatně čitelné 8

9 Co je špatně?! 50 system) Nodule number (per root DAS 40 DAS 50 DAS CV. ADT ,50 4,00 Rain ph 5,50 7,00 Tak je to správně! DAS 40 DAS 50 DAS CV. ADT1 35 r m] Nodule numbe [per root system Rain ph 7.0 Barevné vs. černobílé grafy Barvy v RGB se zdají bezkonfliktní Skutečnost po převodu do škály šedi může nepříjemně překvapit! 9

10 Barevné vs. černobílé grafy DAS 40 DAS 50 DAS CV. ADT1 Nodule number [per root system] Rain ph DAS 40 DAS CV. ADT DAS 40 DAS CV. ADT DAS DAS Nodule number [per root system] Nodule number [per root system] Rain ph Rain ph Vymezení plošné hustoty grafu Prázdné místo je plýtvání prostorem Příliš husté kótování znepřehledňuje graf Dělení škál má být co nejpřirozenější Není vždy nutno kótovat škálu od nuly! Příliš mnoho čar Vyplnění celého prostoru křivkami Rozdělení grafu do dvou spojených ploch 10

11 Mlžná pole Tloušťky čar v grafech 0,73 0,72 0,71 etr [a.u.] Parame 069 0,69 etr [a.u.] Parame 0,70 0,68 0,67 0, Čas [dny] Čas [dny] Obrys grafu nesmí být tlustší čarou než křivky Vyznačené úsečkové chyby nesmí být výraznější než samotné křivky Vkládané grafy Zarovnat graf! Rámeček zcela chybí Nadbytečný rámeček kolem grafu Nevhodné, automaticky generované škálování osy X 11

12 Samostatné vs. souhrnné grafy Šetří tiskový prostor článku Zpřehledňují Umožňují snadné porovnání výsledků Třetí dimenze nebo raději ne? thods 9 (2012) 851. Převzato z N. Gehlenborg & B. Wong, Nature Met 3D grafy jsou vhodné pouze pro speciální účely Rozdílné stínování, velikost a především zákryty definují hloubku obrazu 3D zobrazení musí mít jasnou výhodu před 2D, jinak je užití nevhodné Redukce dimenze v grafech např. pomocí PCA, je-li to možné Popisky přidávat bez perspektivního zkreslení Třetí dimenze raději ne thods 9 (2012) 935. Převzato z N. Gehlenborg & B. Wong, Nature Met 3D data ve 2D jsou pro nás přirozenější Použití paralelních os jako alternativa k 3D Jednotlivé koordináty jsou paralelní a nikoli ortogonální Použití stejného škálování os umožňuje snadné porovnání Výška a vzdálenost os se volí tak aby absolutní hodnoty úhlů křivek byly blízké 45 Špatně použitelné pro kategorizovaná data 12

13 Třetí dimenze raději ne thods 9 (2012) 935. Převzato z N. Gehlenborg & B. Wong, Nature Met Grafy rozptylu jsou další alternativou Jsou zobrazeny párové vztahy mezi všemi dimenzemi za užití mřížky grafů představující všechny kombinace Nepostihuje vzájemné vztahy konkrétních dat Vhodné při hledání shluků dat Interpretace vizuálních dat vzdálenosti a poměry 5. Převzato z B. Wong, Nature Methods 7 (2010) 665 Klesá rozdíl mezi oběma křivkami? Rozdíl je konstantní Lidé vnímají minimální vzdálenost a proto divergence klesá Jaký je poměr mezi oběma kruhy? Vetší je 14 větší Lidé nejsou schopni dobře odhadnout plošné poměry Nepoužívejte bublinové grafy! Interpretace vizuálních dat plochy vs. délky 5. Převzato z B. Wong, Nature Methods 7 (2010) 665 Co si počít s koláčovým grafem? Budeme porovnávat plochy, úhly nebo dílky? Vše snižuje přesnost odhadu Nakreslíme totéž ve sloupcovém grafu! 13

14 Interpretace vizuálních dat pořadí důležitosti Pořadí Porovnávané hledisko 5. Převzato z B. Wong, Nature Methods 7 (2010) Pozice na společné škále 2. Pozice na stejné ale nesrovnané škále 3. Délky 4. Úhly a sklon 5. Plocha 6. Objem, sytost barvy 7. Odstín barvy Interpretace vizuálních dat barva vs. poměrné veličiny 5. Převzato z B. Wong, Nature Methods 7 (2010) 665 Jsme schopni detekovat nepatrné rozdíly v barvě Vztah mezi barvou a kvantitativní hodnotou je vždy nejasný Barevné škály jsou pro poměrové vyznačovaní nejhorší volbou! Interpretace vizuálních dat barva vs. kvantifikace dat 9. Převzato z B. Wong, Nature Methods 8 (2011) 189 Dvě barvy rychlý přechod, malý rozdíl mezi nejsytější a nejslabší barvou (zvláště u žluté) Duha dobře rozeznatelné, ale nejasná ekvidistance Gradient přechod černé % je konzistentní vizuální škála Barva není pro reprezentaci kvantitativní informace! 14

15 thods 9 (2012) 769. Převzato z N. Gehlenborg & B. Wong, Nature Met Interpretace vizuálních dat barva vs. kvantifikace map... Pozitivní a negativní data posun škály sytosti 10 až 90 % černé mimo teoretické hodnoty >2 důležité oblasti přechod přes nulu, užití barvy a sytosti Důležitá nula zcela rozdílné barvy v oblastech přechodu, např. u geografických map thods 9 (2012) 769. Převzato z N. Gehlenborg & B. Wong, Nature Met Interpretace vizuálních dat barva vs. kvantifikace map Software většinou užívá divergentní nastavení map Pokud data neprochází nulou jsou špatně škálována Pro nastavení barev v mapách existují webové nástroje NASA s Color Tool ColorBrewer 2 Interpretace vizuálních dat pořád problémy s barvou 9. Převzato z B. Wong, Nature Methods 8 (2011)

16 Interpretace vizuálních dat pořád problémy s barvou 5. Převzato z B. Wong, Nature Methods 8 (2011) 525 Lepší než špatná barva je žádná barva! a) Barevná škála s ostrým přechodem v odstínu zveličuje rozdíl b) Arbitrární barvy s velkou variací sytosti vedou k špatné prezentaci Jasné barvy mohou lidé vnímat jako větší rozdíl Interpretace vizuálních dat pořád problémy s barvou 5. Převzato z B. Wong, Nature Methods 8 (2011) 525 Stále stejná data a přece jiné barevné obrázky a) teplotní mapa b) černobílé čárové grafy c) duha sytost indikuje korelační skóre d) barva udává spojení s enzymem Vyznačování v grafech a obrázcích 3. Převzato z B. Wong, Nature Methods 7 (2010)

17 Vyznačování v grafech a obrázcích Použití příliš mnoha grafických vyznačení je na překážku jejich správnému vizuálnímu vnímání Řešením je grafické oddělení několika parametrů ve zvláštních grafech 3. Převzato z B. Wong, Nature Methods 7 (2010) 773 Psychologie grafů Obdélník na výšku budí dojem rychlého růstu Často vznikají prázdné plochy v horní části grafu Užití složitých obrazců pro značení hodnot je nevhodné Prázdné symboly pro značení hodnot také nelze doporučit Psychologie grafů Protáhlý tvar grafu vnucuje představu pomalého růstu hodnot Příliš velké symboly hodnot v poměru k popisům os nejsou vhodné 17

18 Psychologie grafů Tvar grafu je již vhodný Vložení sítě sice umožní přesný odečet hodnot, ale znepřehlední graf Vhodnější je užití kalibrovaných škál v celém rámečku kolem grafu Psychologie grafů Nejpoctivější řešení Nesnažte se čtenáři podsouvat trendy na psychologické bázi je to vhodné spíše do reklamy! Celostní pohled na grafy Základní principy Psychologie celostní percepce pochází ze 20. let 20. století z Německa Celek je více než součet jednotlivých částí 3. Převzato z B. Wong, Nature Methods 7 (2010) 863? 18

19 Celostní pohled na grafy Základní principy Síla relativní vazby (a) mezi objekty je určena podobností < blízkostí < spojením < uzavřením V grafech (b) čáry reprezentují jasné spojení a uzavření přitahuje pozornost ke skupině objektů 3. Převzato z B. Wong, Nature Methods 7 (2010) 863 Celostní pohled na grafy Automatické doplnění Máme tendenci automaticky doplnit (vidět a vnímat) jakkoli naznačené tvary Snadněji doplníme obecné jednoduché pravidelné geometrické tvary Převzato z B. Wong, Nature Methods 7 (2010) 941. Celostní pohled na grafy Automatické doplnění Uzavření textu a obrázků do podvědomých rámců usnadňuje pochopení i orientaci čtenáře Pozor i malé odchylky si člověk všimne! Nakreslete si proto vodící linky Převzato z B. Wong, Nature Methods 7 (2010)

20 Celostní pohled na grafy I prázdnota umí být plná Převzato z B. Wong, Nature Methods 8 (2011) 1. Prázdný prostor definuje tvar objektů bez ohledu na jejich přítomnost! Volné plochy mohou čtenáře samostatně vést Volné plochy oddělují a rozdělují Prázdno nemá být samoúčelné, ale informačně dotvářet obraz Celostní pohled na grafy (postery) I prázdnota umí být plná Převzato z B. Wong, Nature Methods 8 (2011) 1. Schémata a uspořádání 1. Převzato z B. Wong, Nature Methods 8 (2011) 101 Vyhněte se přílišným detailům Prázdné místo slouží jako vizuální rozdělovník Schémata dělte do logických celků 20

21 Schémata a uspořádání Graficky působivé nemusí být přehledné! Schéma vede v jednom směru a je konzistentní 1. Převzato z B. Wong, Nature Methods 8 (2011) 101 Schémata a uspořádání 5. Převzato z B. Wong, Nature Methods 8 (2011) 365 Buďte graficky konzistentní! Maximálně zjednodušte a zobrazte jen proměňující se části Nesměšujte data a schémata! Schémata a uspořádání Omezte množství prvků na nezbytné minimum Odstraňte opakující se prvky Jednoduchý obrázek neznamená povrchní 1. Převzato z B. Wong, Nature Methods 8 (2011)

22 Schémata a uspořádání Opakující se popisky shrňte jako nadpisy (obdélníky) Méně příkladů vede k snadnějšímu porozumění (kroužky) Popisky transformačních kroků se šipkami dodají význam 1. Převzato z B. Wong, Nature Methods 8 (2011) 611 Schémata a uspořádání Šipky a jak na ně 1. Převzato z B. Wong, Nature Methods 8 (2011) 701 a) Tvar šipky k nám umí promlouvat b) Existují specifické konvence pro užití šipek c) Šipky přitahují pozornost k funkčním vztahům spíše než k jednotlivým elementům Schémata a uspořádání Šipky a jak na ně Šipky, na rozdíl od spojovacích čar, napovídají funkční vztahy 1. Převzato z B. Wong, Nature Methods 8 (2011) 701 K popiskám užijte jednoduché alternativy linek Správně zvolený poměr mezi tloušťkou linky a velikostí šipky méně ruší čitelnost schématu Dejte přednost plným šipkám, volný prostor u otevřené formy přitahuje nechtěnou pozornost 22

23 Schémata a uspořádání Šipky a jak na ně 1. Převzato z B. Wong, Nature Methods 8 (2011) 701 Prázdné místo vymezené šipkou pomáhá dobře odlišovat objekty Orientace šipek v podobném směru vytváří přirozený vizuální tok (při zachování správných poměrů ě ů šipek a textu) t Kdo nebo co je PDF? 1982 J. Warnock a C. Geschke odcházejí od firmy Xerox a zakládají Adobe Systems, Inc. Firma Adobe uvádí na trh standard Portable Data Format (PDF) Zdarma stažitelný Adobe Acrobat Reader umožňuje mezinárodní rozšíření a standardizaci PDF Adobe Reader umožňuje pouze zobrazeni PDF, nikoli tvorbu a editaci (sic!) k tomu potřebujete Distiller a Adobe Acrobat Adobe postupně představila kompletní řešení pro svět dokumentů (InDesign, Illustrator, PhotoShop, ) Tvorba PDF Všeobecná nastavení Kompatibilita buďte minimálně o jednu verzi pozadu Optimalizace pro web umožňuje částečné načtení dokumentu Miniatury vložení náhledů stránek pro snadnou navigaci Písma Možnost přiložit fonty k dokumentu vede k bezpečné portabilitě dokumentu Vložením podmnožiny vkládáme pouze užité znaky fontové sady (nikoli celý font) Barvy Nastavení barevných prostorů pro obrázky Kritické pro tisk, vhodné nastavit národní či lokální barevný prostor 23

24 Tvorba PDF Převzorkování Efektivní snížení rozlišení u bitmapových obrázků, tj. originál má vyšší rozlišení než potřebujeme Komprese Komprimování grafiky v souboru ZIP komprese Bezeztrátová forma komprimace Efektivní pro obrazy s jednolitými plochami 4 bitová na 4 bitové, či 8 bitová komprese na 4 bitové obrazy je neztrátová 4 bitová na 8 bitové je ztrátová! Vhodné ponechat automatické nastavení ZIP komprese JPEG komprese Ztrátová komprese vhodná pouze pro fotografie Nastavení PDF Distilleru Verze PDF Převzorkování Kvalita Písma Barvy Web (150) dpi Střední vkládat podmnožinu RGB, srgb Kancelář dpi vysoká vkládat všechna RGB Tisk 1.3/ 1.4 min. 300 dpi maximální nebo bezeztrátová komprese vkládat všechna CMYK +ICC Doporučená literatura S. Horný: Počítačová typografie a design dokumentů. Grada Publishing, Praha S. Ihring, E. Ihring: QuarkXPress pro Windows. CCB, Brno P. Satrapa: WEB Design. Neokortex, Praha Z. Šesták: Jak psát a přednášet o vědě. Academia, Praha B. Wong Nature Methods kompletní série článků autora od roku