GRAFIKA KOMPUTEROWA. mgr inż. Adrian Zapała

Transkrypt

1 GRAFIKA KOMPUTEROWA

2 GRAFIKA KOMPUTEROWA Dział informatyki zajmujący się cyfrowym przetwarzaniem obrazów przy wykorzystaniu algorytmów komputerowych. 2

3 GRAFIKA KOMPUTEROWA Rastrowa i wektorowa, 2D i 3D, Statyczna i dynamiczna. 3

4 GRAFIKA RASTROWA Grafika rastrowa (bitmapowa) podstawowym elementem strukturalnym obrazu rastrowego jest piksel. Jest to grafika mało skalowalna, co oznacza, że przy sztucznej interpolacji obrazu wzwyż lub w dół (zwiększeniu lub zmniejszeniu jego rozdzielczości), jakość obrazu maleje. Przykłady typowych obrazów rastrowych: fotografie cyfrowe, grafika stron internetowych, statyczne banery. 4

5 PIKSEL Piksel (ang. pixel, picture obraz, element jednostka składowa) podstawowy element strukturalny obrazu rastrowego. Zbiór pikseli tworzy obraz rastrowy (bitmapowy). Dla tak powstałego obrazu posługujemy się rozdzielczością i gęstością. 5

6 PIKSEL Skala 1:1 Skala 25:1 6

7 ROZDZIELCZOŚĆ OBRAZU Liczba pikseli w poziomie, oraz pionie danego obrazu np. 800 x 600 px, 1024 x 768 px. 7

8 GĘSTOŚĆ OBRAZU Liczba pikseli mieszcząca się na określonej długości. Wyraża się ją w ppi (ang. pixel per inch punktów na cal). Przykład: 300 ppi, oznacza, że na długości 1 cala = 2,54 cm, znajduje się 300 pikseli. Jest to obraz wysokiej jakości, nadający się do druku. Gęstość 96 ppi (Windows) lub 72 ppi (w Mac ach), oznacza odpowiednio 96 i 72 piksele na cal, co implikuje powstanie na wydruku obrazu niskiej jakości. Są to jednak wartości odpowiednie dla monitorów, oraz dla celów internetowych. 8

9 GŁĘBIA OBRAZU Liczba bitów kodująca barwę pojedynczego piksela. Znając wartość głębi obrazu można obliczyć liczbę kolorów, która z niej wyniknie ze wzoru k = 2 n, gdzie k liczba kolorów, n głębia obrazu. Przykłady: dla n=1, k=2 dla n=24, k=16,7 mln kolorów (tzw. tryb true color). 9

10 GŁĘBIA OBRAZU Przykład Ile razy rozmiar obrazu o rozdzielczości 1024 x 768 px i gęstości 72 ppi zmieni się jeśli będziemy chcieli przekształcić go w obraz o dobrej jakości drukarskiej? ,2cala, oraz 72ppi px : ,6cala. 72ppi px ,4cala, oraz 300ppi px : 2,5cala ppi px Dzieląc otrzymane wartości pierwszej kolumny przez wartości drugiej otrzymujemy wynik równy 4. 10

11 GRAFIKA WEKTOROWA Grafika wektorowa obraz generowany jest na podstawie wzorów matematycznych. Podczas zwiększania lub zmniejszania obrazu kolejne wartości podstawiane są na bieżąco do wzorów, dzięki czemu na każdym etapie otrzymujemy obraz o jakości równej obrazowi wyjściowemu. Podstawowym elementem używanym w grafice wektorowej są tzw. krzywe Beziera. Grafikę wektorową wykorzystuje się przede wszystkim w projektowaniu logotypów, oraz w druku. 11

12 KRZYWE BEZIERA 12

13 OBRAZ WEKTOROWY A RASTROWY Porównanie obrazu wektorowego i rastrowego po uwzględnieniu skalowania. 13

14 GRAFIKA 2D Rodzaj grafiki wykorzystujący manipulację obrazem w 2 wymiarach: x i y. 14

15 GRAFIKA 3D Rodzaj grafiki wykorzystujący manipulację obrazem w 3 wymiarach: x, y, z. 15

16 PODZIAŁ ZE WZGLĘDU NA KINETYKĘ Grafika statyczna elementy obrazu nie zmieniają położenia w funkcji czasu. Utworzona za pomocą programu GIMP, Adobe Photoshop, Corel PhotoPaint itp. Grafika dynamiczna elementy grafiki zmieniają położenie w funkcji czasu. Realizowana za pomocą języka formatów animacji, np. Flash. 16

17 PRZESTRZENIE KOLORÓW RGB ang. Red, Green, Blue, przestrzeń 24-bitowa (8 bitów na kanał), używana do wyświetlania obrazu w monitorach. Jest to przestrzeń nasycona. Liczba kolorów wynosi 256 na kanał (0 255), co stwarza w konsekwencji możliwość kombinacji ponad 16 mln możliwych do uzyskania barw: k ,

18 PRZESTRZENIE KOLORÓW CMYK (ang. Cyan, Magenta, Yellow, Black) przestrzeń węższa od RGB, mniej nasycona, używana do druku. Poszczególne kanały reprezentowane są przez wartości procentowe (0 100%), oznaczające rozbarwienie farby drukarskiej. Barwa czarna została dodana ze względu na niemożność osiągnięcia głębokiej czerni (tzw. mieszanki rich black) za pomocą farb CMY, stąd przyrostek K (od ang. BlacK lub K = ang. key = barwa klucz). 18

19 PRZESTRZENIE KOLORÓW Lab przestrzeń adekwatna do przestrzeni rozpoznawalnej okiem ludzkim. Zawiera w sobie zarówno gamuty RGB jak i CMYK. Obrazy w tej przestrzeni posiadają jeden kanał jasności L (ang. Lightness) i 2 kanały koloru A i B. 19

20 PRZESTRZENIE KOLORÓW HSB (ang. Hue, Saturation, Brightness) przestrzeń zawierająca 3 wartości barwę (wyrażaną w stopniach), nasycenie (%), jasność (%). 20

21 PRZESTRZENIE KOLORÓW Tryb indeksowany przestrzeń zawierająca 256 kolorów na 1B, stanowiąca gamut barwny plików z rozszerzeniem GIF. 21

22 PRZESTRZENIE KOLORÓW Bitmapa przestrzeń o głębi obrazu równej 1, czyli posługująca się maksymalnie 2 kolorami (białym i czarnym). 22

23 PRZESTRZENIE KOLORÓW Skala szarości przestrzeń zawierająca 256 kolorów, stanowiąca gamut barwny wszystkich odcieni koloru czarnego (wartości z zakresu 0 255). 23

24 PRZESTRZENIE KOLORÓW Próbnik kolorów programu Adobe Photoshop CS4: 24

25 Próbnik kolorów programu GIMP: PRZESTRZENIE KOLORÓW 25

26 PRZESTRZENIE KOLORÓW Paletę barw RGB tworzą więc 3 kanały: czerwony, zielony i niebieski. Każdy inny kolor, który widzimy na ekranie naszego monitora, stanowi efekt zmieszania tych trzech barw składowych. Jeśli chcemy więc zmieszać 3 farby z trzech różnych kubełków, uzyskujemy czwarty kolor, będący wynikiem mieszania. 26

27 PRZESTRZENIE KOLORÓW Jak monitor przetwarza a następnie wyświetla określone kolory? Każdy kanał RGB, może przechowywać maksymalnie 256 kombinacji (od 0 do 255) odcienia danej barwy. W sumie więc dostajemy możliwość utworzenia dużej kombinacji kolorów (256 x 256 x 256), co daje niebagatelną liczbę wynoszącą: , czyli ok. 17 mln barw! 27

28 PRZESTRZENIE KOLORÓW Jaki jest związek modelu RGB z systemem HEX (heksadecymalnym) i binarnym? Związek jest bardzo ścisły, o czym można przekonać się już w przypadku kodowania barw językiem CSS i deklarowania ich w kodzie HTML. Wiadomo bowiem, że każdy kolor arkusza stylów kaskadowych można zaprezentować na dwa sposoby. 28

29 PRZESTRZENIE KOLORÓW Pierwszym z nich jest zwykłe wprowadzenie nazwy koloru po angielsku (nazwy angielskie dotyczą tylko najważniejszych kolorów), np. gdy chcemy w kodzie HTML lub CSS zadeklarować barwę jakiegoś elementu, piszemy: color="white" <!-- przykład w kodzie HTML --> color: #FFFFFF /* przykład w kodzie CSS */ 29

30 PRZESTRZENIE KOLORÓW Co oznacza #FFFFFF? # oznacza deklarowanie liczby heksadecymalnej, natomiast FFFFFF to trzy razy po FF, a FF (16)= 255 (10), więc kolor biały otrzymamy mieszając poszczególne kanały RGB po najwyższych wartościach: R255, G255, B255. Wszystko to można sprawdzić w programach graficznych, np. Adobe Photoshop, CorelDRAW, czy GIMP, a nawet (choć w bardzo ograniczony sposób) w windowsowym Paincie. 30

31 PRZESTRZENIE KOLORÓW Dlaczego nie zadeklarować barwy w bitach metodą zero-jedynkową? Odpowiedź brzmi: dla przejrzystości. Jeśli chcielibyśmy pisząc stronę www zadeklarować powyższą barwę białą binarnie, otrzymalibyśmy sekwencję: (2) (2) (2), czyli 3 razy po 255 (dwójkowo). Jest to niepraktyczne i uciążliwe. 31

32 PRZESTRZENIE KOLORÓW Żółty: Ang.: yellow RGB: R255 G255 B0 HEX: #FFFF00 BIN: (2) (2) (2) (niedeklarowalny) 32

33 PRZESTRZENIE KOLORÓW Jeden z odcieni pomarańczowego: Ang.: coral RGB: R255 G127 B80 HEX: #FF7F50 BIN: (2) (2) (2) (niedeklarowalny) 33

34 PRZESTRZENIE KOLORÓW Jeden z odcieni zielonego: brak nazwy angielskiej RGB: R219 G154 B52 HEX: #DB9A34 BIN: (2) (2) (2) (niedeklarowalny) 34

35 UŚREDNIANIE KOLORÓW Zastanówmy się jak pod względem informatycznym działa algorytm kroplomierza (Eyedropper) w programach graficznych i filtr Średnia (Photoshop) z funkcją uśredniania kolorów? 35

36 UŚREDNIANIE KOLORÓW PRZYKŁAD 1 Wymieszanie kolorów beżowego i białego. R = = 449 / 2 = 224,5 225 G = = 433 / 2 = 216,5 217 B = = 383 / 2 = 191,5 192 beżowy (R194 G178 B128), biały (R255 G255 B255) 36

37 UŚREDNIANIE KOLORÓW PRZYKŁAD 1 Rzeczywiście, po próbkowaniu kroplomierzem (użyciu filtru Średnia) średniej z tych 2 kolorów otrzymujemy kolor zmieszany: uśredniony (R225 G217 B192) 37

38 UŚREDNIANIE KOLORÓW PRZYKŁAD 2 Wymieszanie kolorów beżowego i antracytu. R = = 248 / 2 = 124 G = = 243 / 2 = 121,5 122 B = = 181 / 2 = 90,5 91 beżowy (R194 G178 B128), antracyt (R54 G65 B53) 38

39 UŚREDNIANIE KOLORÓW PRZYKŁAD 2 Rzeczywiście, po próbkowaniu kroplomierzem (użyciu filtru Średnia) średniej z tych 2 kolorów otrzymujemy kolor zmieszany: uśredniony (R124 R122 R91) 39

40 UŚREDNIANIE KOLORÓW PRZYKŁAD 3 Wymieszanie kolorów białego, ametystowego, grafitowego i rdzawego. biały (R255 G255 B255), ametyst (R153 G102 B204) grafit (R54 G79 B69), rdzawy (R195 G68 B68) R = = 657 / 4 = 164, G = = 504 / 4 = 126 B = = 596 / 4 =

41 UŚREDNIANIE KOLORÓW PRZYKŁAD 3 Rzeczywiście, po próbkowaniu kroplomierzem (użyciu filtru Średnia) średniej z tych 4 kolorów otrzymujemy kolor zmieszany: uśredniony (R164 G126 B149) 41

42 UŚREDNIANIE KOLORÓW PRZYKŁAD 4 Wymieszanie kolorów antracytowego, błękitu królewskiego, czarnego, czerwieni żelazawej i eozyny. antracyt (R54 G65 B53), błękit królewski (R65 G105 B225) czarny (R0 G0 B0), czerwień żelazawa (R128 G24 B24), eozyna (R195 G92 B11) R = = 442 / 5 = 88,4 88 G = = 286 / 5 = 57,2 57 B = = 313 / 5 = 62,

43 UŚREDNIANIE KOLORÓW PRZYKŁAD 4 Rzeczywiście, po próbkowaniu kroplomierzem (użyciu filtru Średnia) średniej z tych 5 kolorów otrzymujemy kolor zmieszany: uśredniony (R88 G57 B63) 43

44 UŚREDNIANIE KOLORÓW Na podstawie wcześniejszych doświadczeń możemy przedstawić wzór na uśrednianie kolorów w programach graficznych: R = R 1 + R R n, n G = G 1 + G G n, n B = B 1 + B B n, n gdzie: R kanał Red, G kanał Green, B kanał Blue, n ilość kolorów. 44

45 PODSTAWOWE FORMATY RASTROWE *.jpg format kompresji stratnej, używany głównie pod zawartość internetową, oraz do przechowywania zdjęć. W ostateczności używa się go również do druku. *.gif format kompresji stratnej, używany głównie pod zawartość internetową, oraz do sporządzania animacji. Wykorzystuje gamut indeksowany. Cechują go małe rozmiary, oraz dość niska jakość. 45

46 PODSTAWOWE FORMATY RASTROWE *.png (ang. portable network graphics) format kompresji bezstratnej zalecany przez organizację W3C jako wiodący do tworzenia stron pod zawartość internetową. Oferuje możliwość zapisu przezroczystości, dzięki opcji PNG-24. *.tiff format bezstratny o możliwości zapisu plików 8 lub 16 bitowych. Wykorzystuje bezstratną metodę kompresji LZW (Lempel- Ziv-Welsch), dzięki której możliwe jest uzyskanie pliku wyjściowego o małej pojemności i wysokiej jakości. 46

47 PODSTAWOWE FORMATY RASTROWE *.psd, *.psb rozszerzenia programu Photoshop dla plików odpowiednio: mniejszych i większych od 2 GB. *.xcf rozszerzenie funkcjonalne programu GIMP. Format bezstratny i natywny programu GIMP. 47

48 PODSTAWOWE FORMATY WEKTOROWE *.cdr rozszerzenie programu CorelDRAW. Wykorzystuje kompresję bezstratną. Format natywny programu. *.eps ang. Encapsulated Postr Script. Pojemnik zawierający elementy wektorowe i rastrowe będący podzbiorem języka PostScript. 48

49 PODSTAWOWE FORMATY WEKTOROWE *.ai rozszerzenie programu Illustrator. Kompresja bezstratna. Przechowuje zarówno zawartości wektorowe jak i rastrowe. *.pdf ang. Portable Document Format. Standard opracowany przez firmę Adobe, tworzący wysokiej jakości dokumenty kompozytowe (RGB i CMYK). Służy do przechowywania e-book ów, prezentacji, książek, oraz wszelkich materiałów używanych w druku cyfrowym i offsetowym. 49

50 PODSTAWOWE FORMATY ANIMACJI *.swf (ang. Shock Wave Flash) standard opracowany przez firmę Adobe, tworzący wysokiej jakości animacje wektorowe na strony www, oraz do celów prezentacyjnych. 50

51 TYPOGRAFIA Typografia dziedzina wiedzy zajmująca się odzwierciedlaniem i ułożeniem czcionek i tekstów w publikacjach. Rodzaje czcionek PostScrip t (Type 1) True Type Open Type (65000 znaków) 51

52 NAJPOPULARNIEJSZE PROGRAMY GRAFICZNE Grafika rastrowa: Adobe Photoshop Corel Photo-Paint GIMP 52

53 NAJPOPULARNIEJSZE PROGRAMY GRAFICZNE Grafika wektorowa i animacje: Adobe Illustrator CorelDRAW Inkscape Adobe Flash SwishMax 53

54 NAJPOPULARNIEJSZE PROGRAMY GRAFICZNE Skład i łamanie: Adobe InDesign QuarkXpress Corel Ventura 54

55 NAJPOPULARNIEJSZE PROGRAMY GRAFICZNE Grafika 3D i oprogramowanie CAD: 3dsMax Adobe Photoshop Extended AutoCAD SolidWorks 55

56 NAJPOPULARNIEJSZE PROGRAMY GRAFICZNE Przeglądarki graficzne, proste edytory: Adobe Bridge IrfanView ACDSee 56