Grafika komputerowa - gim26.edu.plgim26.edu.pl/informatyczna/materialy/grafika_komputerowa.pdf · Podział grafiki Kryterium ... (paleta barw do 16, 8 mln kolorów), jak i GIF (pełna

Grafika komputerowa

Grafika komputerowa

• Dział informatyki zajmujący się wykorzystaniem komputerów do generowania obrazów oraz wizualizacją rzeczywistych danych.

• Jest obecnie narzędziem powszechnie stosowanym w nauce, technice, kulturze oraz rozrywce.

Zastosowania grafiki

• kartografia, • wizualizacja danych pomiarowych (np. w formie

wykresów dwu- i trójwymiarowych), • wizualizacja symulacji komputerowych, • diagnostyka medyczna, • kreślenie i projektowanie wspomagane

komputerowo (CAD), • przygotowanie publikacji (DTP), • efekty specjalne w filmach, • gry komputerowe.

Podział grafiki

Kryterium – technika tworzenia

• Grafika wektorowa – obraz jest rysowany za pomocą kresek lub łuków.

• Grafika rastrowa – obraz jest budowany z prostokątnej siatki leżących blisko siebie punktów (tzw. pikseli). Głównym parametrem w przypadku grafiki rastrowej jest wielkość bitmapy, czyli liczba pikseli, podawana na ogół jako wymiary prostokąta.

Kryterium - cykl generacji obrazu

• grafika nieinterakcyjna – program wczytuje uprzednio przygotowane dane i na ich podstawie tworzy wynikowy obraz. Tak działa np. POV-Ray, który wczytuje z pliku definicję sceny trójwymiarowej i na jej podstawie generuje obraz sceny.

• grafika interakcyjna – program na bieżąco uaktualnia obraz w zależności od działań użytkownika, dzięki temu użytkownik może od razu ocenić skutki, czas odświeżenia obrazu nie może być zbyt długi. Akceptuje się i stosuje uproszczone metody rysowania obiektów, aby zminimalizować czas oczekiwania.

• grafika czasu rzeczywistego – program musi bardzo szybko (kilkadziesiąt razy na sekundę) regenerować obraz, aby wszelkie zmiany były natychmiast uwidocznione, ma szczególnie znaczenie w różnego rodzaju symulatorach, jest również powszechna w grach komputerowych.

Grafika rastrowa

• W grafice rastrowej obraz jest podzielony na wiele małych prostokątów, tzw. pikseli, a dla każdego z nich zdefiniowany jest jego kolor. Ten sposób reprezentacji obrazu odpowiada sposobowi jego wyświetlania na ekranie i w tym sensie jest dla komputerów czymś "naturalnym".

• Skalowanie, a zwłaszcza powiększanie obrazu, wiąże się z pogorszeniem jakości (obraz staje się rozmyty lub z widocznymi powiększonymi pikselami).

Formaty grafiki rastrowej

• Formaty przechowujące grafikę rastrową (bitmapy) można podzielić na

▫ stosujące kompresję stratną,

▫ stosujące kompresję bezstratną

▫ nie stosujące kompresji.

Bez kompresji • BMP (BitMaP) – zwykła mapa bitowa, standardowy

format w środowisku Windows, wielkość pliku zależy m.in. od liczby pamiętanych kolorów

• TIFF (Tagged Image File Format) - popularny format plików graficznych udostępniający wiele rodzajów kompresji (zarówno stratnej jak i bezstratnej). Format pliku stosowany dla materiałów, przeznaczonych do druku, można w nim uzyskać bezstratną kompresję do 40% oryginalnej wielkości pliku

Kompresja bezstratna

• PNG (Portable Network Graphics) - format grafiki (szczególnie internetowej) obsługiwany przez większość przeglądarek WWW; obsługuje przezroczystość

• GIF (Graphics Interchange Format) - popularny format grafiki (szczególnie internetowej) obsługiwany przez prawie wszystkie przeglądarki WWW; może przechowywać wiele obrazków w jednym pliku tworząc z nich animację

Kompresja stratna

• JPG lub JPEG (Joint Photographic Experts Group) -używany zarówno w sieci internet (obsługiwany przez prawie wszystkie przeglądarki), jak i w aparatach cyfrowych oraz skanerach. Format pliku, w którym w zależności od wyboru stopnia kompresji, można uzyskać dużą oszczędność pamięci, ale traci się na jakości obrazu.

• JPEG 2000 - nowsza wersja formatu JPEG, oferująca lepszą kompresję.

• DjVu - format stworzony do przechowywania zeskanowanych dokumentów w formie elektronicznej

• Rozdzielczość obrazu rastrowego to liczba pikseli przypadajacych na jednostkę miary.

• Najczęściej stosowane jednostki to:

▫ PPI —liczba pikseli obrazu przypadająca na jeden cal ekranu

▫ DPI — rozdzielczość druku mierzona jest liczbą punktów na cal

Przygotowując obraz do wydruku należy uwzględnić, że rozdzielczości wyrażone w PPI i DPI

Głębia bitowa — definicja

• Głębia bitowa określa ilość informacji o kolorze dostępnej dla każdego piksela obrazu. Im więcej informacji o kolorze przypada na jeden piksel, tym więcej kolorów jest dostępnych i tym dokładniejsze jest ich odtworzenie. Na przykład piksele obrazu o głębi bitowej 1 mogą przyjmować dwie wartości: czerń lub biel. Obraz o głębi 8 bitów może przyjmować 28 wartości (czyli 256). Obrazy w skali szarości o głębi bitowej 8 mogą przyjmować 256 odcieni szarości.

• Obrazy RGB składają się z 3 kanałów kolorów. Obraz RGB o 8 bitach na piksel może przyjmować 256 wartości dla każdego kanału, co oznacza ponad 16 milionów możliwych wartości kolorów. Obrazy RGB o 8 bitach na kanał są czasem nazywane obrazami 24-bitowymi (3 kanały po 8 bitów dają łącznie 24 bity danych na każdy piksel).

Cechy grafiki rastrowej

• Umożliwia zachowanie dużego realizmu

kolorystycznego poprzez indywidualne określanie barwy każdego elementu obrazu.

• Nie pozwala na dokonywanie transformacji geometrycznych na elementach składowych (a nie fragmentach) obrazu.

• Wielkość plików szybko rośnie wraz rozdzielczością (ilością pikseli) obrazu.

Przykładowe zastosowania grafiki rastrowej

• Grafika fotorealistyczna

• Cyfrowa obróbka obrazu

• Fotografia cyfrowa

• Cyfrowe wideo i telewizja

• World Wide Web

Wybrane formaty graficzne

JPEG — Joint Photographic Experts Group • szeroko rozpowszechniony

• + szeroka paleta barw: do (28)3 = 224 16, 8 mln (tzw. True Color)

• + dobrze sprawdza sie w przypadku obrazów o łagodnych przejściach tonalnych, zarówno wielobarwnych, jak i w odcieniach szarości (np. fotografie)

• + obsuguje tryb progresywny

• + istnieją rozszerzenia standardu i modyfikacje algorytmu kompresującego (JPEG-LS, JPEG 2000)

• – w procesie kompresji z obrazu usuwane są drobne szczegóły

Wybrane formaty graficzne

GIF — Graphics Interchange Format

• szeroko rozpowszechniony

• + kompresja bezstratna (algorytm LZW)

• + małe rozmiary plików

• + dobrze sprawdza sie w przypadku obrazów składających się z dużych obszarów o jednolitej barwie (np. wykresy „tortowe”) i/lub szczegółowych oraz z ostrymi krawędziami (np. wykresy, rysunki, siatki, szkice)

• + można zapisać informacje o przeźroczystości wybranego koloru

• + istnieją rozszerzenia standardu pozwalające na zapis animacji

• – niewielka paleta barw: maksymalnie 28 = 256 (tzw. tryb indeksowany)

• – obrazy o dużej rozpiętości tonalnej są „redukowane” do 256 kolorów przed wykonaniem kompresji, przez co tracą na jakości

Wybrane formaty graficzne

PNG — Portable Network Graphics

• kompresja bezstratna

• + łączy zalety JPEG i GIF: dobrze sprawdza sie zarówno w przypadku obrazów o płynnych przejściach tonalnych wielobarwnych i w odcieniach szarości (paleta barw do 16, 8 mln kolorów), jak i GIF (pełna 8-bitowa przezroczystość [tzw. kanał alfa] oraz paleta barw od 2 do 256 kolorów)

• + obsługuje korekcje gamma, tryb progresywny i kontrole poprawności pliku

• + obsługuje różne głębokości bitowe (do 48 bitów na piksel)

PNG

• – nie obsługuje animacji (istnieje osobny format do tego celu [MNG] oparty na algorytmie PNG)

• – nieprawidłowo obsługiwany przez przeglądarkę Internet Explorer < 7.0

• – niektóre programy nie obsługują wszystkich właściwości PNG

• – występują problemy z obsługą korekcji gamma w przeglądarkach

TIFF — Tag(ged) Image File Format

• szeroko rozpowszechniony

• + kompresja bezstratna

• + szeroka paleta barw: od 2 do 16, 8 mln

• + obsługuje różne głębokości bitowe (do 48 bitów na piksel) oraz przestrzenie barw

• + obsługuje tryb wielostronicowy (multipage) — zostało to wykorzystane np. w faksach

• + obsługuje przezroczystość i profile barw

• + specyfikacja formatu umożliwia jego rozszerzanie o dodatkowe znaczniki (za zgodą właściciela praw autorskich do formatu TIFF)

• – mogą występować problemy z odczytem plików TIFF w niektórych programach

• – format jest objęty patentami

Pojęcie barwy

• pojęcie barwy jest subiektywne

• inne traktowanie koloru w fizyce (fala świetlna), biologii (postrzeganie przez komórki oka), psychologii (psychologiczny odbiór barwy), filmie i fotografii, telewizji, itd.

Mozliwości postrzegania

• monitory mogą wyświetlić maksymalnie 16,7

miliona kolorów

• oko ludzkie potrafi rozpoznać 7–8 miliona z nich

• na wydrukach można uzyskać najwyżej kilkadziesiąt tysięcy kolorów w przypadku zastosowania najlepszych dostępnych metod druku

Elementy barwy

• odcień — rodzaj koloru

• nasycenie — ilość (czystość) koloru; przy zmniejszaniu, niezależnie od odcienia, uzyskujemy barwę białą

• jasność — ilość światła; przy zmniejszaniu, niezależnie od odcienia, uzyskujemy barwę czarną

• achromatyczność — brak nasycenia kolorem

• chromatyczność— nasycenie kolorem

Elementy barwy

• tinty — barwy powstałe w wyniku dodania bieli do czystego koloru (lub pigmentu do bieli)

• cienie — barwy powstałe w wyniku dodania czerni do czystego koloru

• tony — barwy powstałe w wyniku dodania do czystego koloru bieli i czerni w różnych proporcjach

Postrzeganie barw

Wrażenia ogólne

• jasne i ciemne

• żywe i martwe

• krzykliwe i spokojne

• neutralne — nabierające charakteru w połączeniu z innymi

Postrzeganie barw

Wrażenia cieplne

• zimne — szare, niebieskie, zielone

• ciepłe — żółte, pomarańczowe, czerwone

• bierne — brązy, fiolety

Barwy zimne

Barwy ciepłe

Barwy bierne

Zależność temperaturowa barw

Wrażenia fizyczne

• zwiększenie objętości — czerwień, żółć,

pomarańcz

• zmniejszenie objętości — fiolet

• wzrost ciężaru — czerwień

• zmniejszenie ciężaru — niebieski, zielony

• oddalenie — niebieski, zielony

• przybliżenie — czerwień

Wrażenia psychologiczne

• biel — niewinność, czystość, prawda

• brąz — solidność, bezpieczeństwo, męskość

• czerwień — wyrafinowanie, pewność siebie, mrok, śmierć

• fiolet — niepokój, zniechecenie

• granat — niezawodność, solidność, siła, uczciwość

Model addytywny — RGB

Kolory podstawowe:

• czerwony (red) R

• zielony (green) G

• niebieski (blue) B

Model substraktywny — CMYK

• Kolory podstawowe:

• cyan C

• magenta M

• yellow Y

• black K

Model CMYK

• Model barw subtraktywnych (pochłaniających),

stosowany w drukarkach, ploterach, poligrafii. • Trzy barwy podstawowe: seledynowa

(Cyan), purpurowa (Magenta) i żółta (Yellow) pochłaniają selektywnie światło białe.

• Pozostałe odcienie otrzymywane są poprzez odejmowanie udziałów barw podstawowych od światła białego (np. zielony = światło białe – żółty – seledyn) Barwnik czarny (blacK) poprawia efekt czerni.

Model HSB

Parametry podstawowe: • odcień hue H • nasycenie saturation S • jasność brightness B

W cylindrze HSB odcienie ułożone są na

obwodzie koła, kolory stają się coraz bardziej pastelowe w miarę zbliżania się do środka,

jasność zmniejsza się w kierunku dolnej podstawy walca

Stosowanie barw • barw należy używać z ostrożnością

i powściągliwością

• należy minimalizować ilość użytych barw

• należy używać kolorów leżących na wspólnej osi w wybranym modelu kolorów

• stosowane kolory powinny mieć taka samą jasność

• nie należy stosować odcieni tego samego koloru dla obiektów nie związanych ze sobą

• nie stosować kolorów przy tworzeniu opisów, legend

Szczegóły i kontury

• szczegóły uwidacznia się nie barwą lecz jasnością (natężeniem)

• nie należy stosować barw dla małych obiektów — będą niewidoczne

• obszary barw nieharmonizujących i jednocześnie sąsiadujących należy oddzielać cienką czarną linią

• należy stosować obwódki dla uwidocznienia konturów obiektów

Obiekty i tło

• w przypadku obrazu kolorowego jako tło należy stosować barwy neutralne (biel, czerń, szarości)

• jako tło dla rysunków o określonej barwie należy stosować barwę dopełniającą (barwy dopełniające to pary barw, które połączone z sobą w równych proporcjach dają barwy neutralne)

Tekst i tło

nie należy stosować kolorów o podobnym poziomie jasności

Niebieski na czarnym. Niebieski na czarnym. Niebieski na czarnym. Niebieski na czarnym. Czarny na niebieskim. Czarny na niebieskim. Czarny na niebieskim. Czarny na niebieskim. Biały na żółtym. Biały na żółtym. Biały na żółtym. Biały na żółtym. Żółty na białym. Żółty na białym. Żółty na białym. Żółty na białym.

Dla czarnego tła odpowiedniejszy jest żółty kolor tekstu, dla białego tekstu — niebieskie tło

Żółty na czarnym. Żółty na czarnym. Żółty na czarnym. Żółty na czarnym.

Biały na niebieskim. Biały na niebieskim. Biały na niebieskim. Biały na niebieskim.

Odczucia

• jasne barwy bardziej „rzucają się” w oczy niż ciemne

• barwy z dużym udziałem niebieskiego będą rozmywane w stosunku do innych barw o takiej samej jasności

• daltoniści nie widzą koloru czerwonego i zielonego

Wpływ koloru na obiekty • kolory obiektów wpływają na pozorną zmianę

ich postrzeganej wielkości

• obszary czerwone sprawiają wrażenie położonych bliżej

• czerwony kwadrat umieszczony na zielonym tle wydaje się bardziej czerwony, niż ten sam kwadrat na niebieskim tle

• wiele barw jest postrzeganych inaczej w zależności od jasności tła

Bibliografia

• http://stalker.republika.pl/wyklady/archiwizacja/wyklad3.pdf

• http://www.ocean.univ.gda.pl/files/122/51/11_graf1.pdf

• Paweł Frankowski, Elementy graficzne na stronach www, Helion, Gliwice 2005