Elektromagnetické záření. Zdroj:

Transkript

1 Počítačová grafika

2 Elektromagnetické záření Zdroj:

3 Jak vidíme Naše oči vnímají elektromagnetické záření Jsou citlivé na vlnové délky 390 až 800 nm Do mozku posílají signály, které mozek vyhodnotí jako obraz Jednotlivé vlnové délky vnímáme jako barvu Víte, že obraz je v našich očích promítán vzhůru nohama?

4 Oko a vidění

5 Oko a vidění Tyčinky asi 120 milionů buněk, které rozlišují pouze rozdíly jasů (čb) Čípky asi 7 milionů buněk umožňujících barevné vidění (modrá, zelená a červená) Zdroj: Wikipedia

6 Ženy vs. muži Zdroj:

7 Grafika Jeskyně Lascaux

8 Malíři a grafici Leonardo da Vinci 8

9 Foto-grafie Daguerreotypie Daguerre Atelier

10 Grafické symboly

11 Počítače

12 Počítačová grafika Grafické formáty rastrový (bitmapa) vektorový formát (křivky) Poznámka: zobrazení na monitoru je vždy rastrové

13 Počítačová grafika

14 BITMAPOVÁ GRAFIKA

15 Zdroj: Svět Hardware Rastrová (bitmapová) grafika Bitmapový obrázek je tvořen pravidelnou mřížkou z bodů, tzv. pixelů Každý bod má přiřazenu pozici a určitou barvu

16

17 Rastrová (bitmapová) grafika Každý bod má přiřazenu určitou barvu jednotlivé barevné body se na monitoru tvoří ze tří barev ( R G B ) Při pozorování barvy splývají míchají se Uživatel vidí barevné plochy, přechody apod. Zdroj: Svět Hardware

18 Míchání barev Aditivní Substraktivní

19 Míchání barev CMY CMYK

20 RGB vs CMYK Zdroj:

21 Bitová mapa Zobrazovací plocha je dána maticí bodů např. velikost obrazu může být 800x600 obrazových bodů Základní jednotkou bitmapy je bod PIXEL

22 Pixel na monitoru Zdroj: Svět Hardware

23 Písmeno D na monitoru Zdroj: Svět Hardware

24 Barevná hloubka KAŽDÝ PIXEL MÁ BARVU Model Počet barev Bitů na pixel monochromatické 2 1 ve stupních šedi barevné indexované 8 až až 8 Barevné RGB 16,7 mil. 24 (3 8) * barevná hloubka = počet barev k pixelu přiřazených

25 Bitová mapa 16 barev

26 Rastrová (bitmapová) grafika Výhody určeny pro ukládání předloh z reálného světa (scanované obrázky, digitální fotografie) snadné vytváření ( screenshot obrazovky počítače) možnost modifikace jednotlivě nebo po větších množstvích

27 Rastrová (bitmapová) grafika Výhody změny barevnosti (na těchto modifikacích se může podílet i paleta barev) snadná přenositelnost na rastrová výstupní zařízení, (obrazovka, tiskárna)

28 Rastrová (bitmapová) grafika Nevýhody velikost souboru obraz px, 16M barev (24 bitů na pixel) = cca. 1,4 MB Obraz px, 16M barev = 18 MB Bitmapové obrazy lze komprimovat komprimace ztrátová a bezztrátová

29 Rastrová (bitmapová) grafika Nevýhody Zvětšování a zmenšování obrazu komplikované Zmenšení = ztráta dat Zvětšení = odhadujeme pixely, které tam nejsou

30 Rastrová (bitmapová) grafika DPI (dot per inch) Počet pixelů obrazu na jeden palec (25,4 mm) Příklady: monitor 72 dpi obrazy ve Wordu obvykle 200 dpi tisková kvalita 300 dpi 10 px 1" = 25,4 mm

31 Rastrová (bitmapová) grafika 72 dpi 400 dpi

32 Bitmapové editory Paintbrush (Malování) Adobe Photoshop (CS 6) Corel Paintshop Pro (X3) Gimp Corel PhotoPaint Microsoft PhotoEditor

33 FORMÁTY bitmapové grafiky PCX (jeden z nejstarších, pochází z PaintBrushe) BMP (standardní, bez komprimace velké soubory) TIFF (Tagget Image File Format) má bezztrátovou komprimaci, časté použití) GIF (Graphic Interchange Format) má komprimaci, pro barevné obrázky, i animované, pro WWW, možnost nastavení průhlednosti PSD (Nativní formát Adobe Photoshop)

34 FORMÁTY bitmapové grafiky JPEG (Joint Photographic Expert Group) s nastavitelnou (ztrátovou) komprimací => optimální kvalita a velikost obrázku PNG (Portable Network Graphics) pro přenos grafických dat, využití WWW, (8 bit, 24 bit) RAW (digitální negativ) nezpracovaná data ze snímače digitálního fotoaparátu ICO speciální formát pro ikony

35

36 JPEG - král rastrových grafických formátů Pavel Tišnovský JPEG ztrátová komprimace 100 % bytů 70 % bytů 40 % 7068 bytů 20 % 4479 bytů 10 % 2824 bytů 1 % 1093 bytů

37 JPG vs. PNG

38 GIF mýtů zbavený Oprava Obecně Oblíbeného Omylu GIF zobrazuje pouze 256 barev NENÍ PRAVDA

39 GIF mýtů zbavený Oprava Obecně Oblíbeného Omylu GIF je tvořen logickou obrazovkou, která sestává z řady rámců, každý rámec zobrazuje 256 barev, ovšem každý rámec může zobrazovat jiných 256 barev Pravda a mýty o GIFu Pavel Tišnovský

40 GIF GIF zobrazuje pouze 256 barev který z nich je GIF? A B C D E Pravda a mýty o GIFu Pavel Tišnovský

41 Grafika a animace Aimovaný GIF sestavuje se z několika obrázků GIF předepsané parametry střídání obrázků vytváří se ve specializovaných programech, např. GIF construction set Zdroj: Wikopedia, autor Marvel

42 Grafika a animace Zdroj: Wikopedia, autor Marvel

43 VEKTOROVÁ GRAFIKA

44 Vektorová grafika formát vycházející z vektorů (počáteční bod, směr, délka)

45 Vektorová grafika definovat lze přímky, čáry, obrazce, prostorové objekty

46 Vektorová grafika obrázek = soustava matematických popisů jednotlivých objektů, které jsou postupně vykreslovány výhoda: menší nároky na paměť výhoda: lze libovolně zvětšovat bez ztráty kvality

47 Vektorová grafika

48 Vektorová grafika

49 Beziérovy křivky Francouzský matematik Pierre Bézier libovolný úsek křivky je popsán pomocí čtyř bodů dvou krajních bodů (tzv. kotevní body) dvou bodů, které určují tvar křivky (tzv. kontrolní body) spojnice mezi kontrolním bodem a kotevním bodem je tečnou k výsledné křivce Zdroj:

50 Beziérovy křivky P0, P3 krajní body P1, P2 kontrolní body

51 Vektorová grafika tvorba disku CorelDraw - jak pořádně na vektorovou grafiku? - Autor: Barák Petr

52 Vektorová grafika editory Adobe Illustrator (CS6) Corel Draw (X5) Xara Zebra pro Windows Freehand Autocad

53 Vektorová grafika formáty CDR (Corel Draw) AI (Adobe Illustrator) XAR (Corel Xara) CGM (Computer Graphic Metafile) WMF (Microsoft Windows Metafile) PS (EPS) (postscript) HP-GL standard pro ovládání plotrů

54 Vektorová grafika příklad

55 Vektorová grafika příklad

56 Vektorová grafika příklad

57 Vektorová grafika příklad Autor: Andrew Wrigley

58 Vektorová grafika příklad Autor: Andrew Wrigley

59 Vektorová grafika příklad

60 Bitmapa vs. vektor a) vektorový obrázek b) vektrorový obrázek zvětšený detail c) bitmapový obrázek zvětšený detail Zdroj: Autor: Anthony Atkielski (Agateller)

61 Grafika ukázky Programy pro zpracování obrazu nám umožňují neuvěřitelné změny ve fotografiích a obrazech obecně

62 Grafika ukázky

63 Grafika ukázky

64 Grafika ukázky

65 Grafika ukázky

66 Grafika ukázky

67 Počítačová grafika aneb všechno je jinak Moderní programy pro práci s grafikou dokážou víc než vizážista s plastickým chirurgem dohromady Módní a lifestylové časopisy neukazují skutečné modely, ale retušované obrázky Nesnažte se jim podobat, modelky tak nevypadají

68

69 Grafika 71

70 Modelka na bilboardu Modelka Co dokáže Photoshop

71 S retuší opatrně

72 S retuší opatrně

73 S retuší opatrně

74 Úpravy obrázků Pro úpravy fotografií existuje řada programů Automatické úpravy Jednoduchost ovládání Slušné výsledky

75 Alien Skin Image Doctor

76 AKVIS MakeUp 2.0

77 AKVIS MakeUp 2.0

78 DĚKUJI ZA POZORNOST