Postrzeganie i modele barw. Grafika rastrowa a grafika wektorowa.

System wzrokowy człowieka, krótkie przypomnienie:

Budowa ludzkiego oka.

• Źrenica i soczewka.

Siatkówka:

• Pręciki i czopki
• Komórki dwubiegunowe i zwojowe
• Szlaki siatkówki:

• Znajdź swoją ślepą plamkę:

Żeby odnaleźć swoją ślepą plamkę spójrz na rysunek z odległości wyciągniętej ręki, zamknij prawe oko i powoli przybliżając się do rysunku skoncentruj wzrok na sylwetce banku. Znak dolara, kiedy padnie na ślepą plamkę, zniknie w polu twego widzenia, ale nie doznasz w nim luki, ponieważ system wzrokowy zapełni ją bielą tła.

Widzenie barwne

Rysunek. Długość fali a odcienie barwy:

Rysunek. Koło barw:

Rysunek. Powidoki barwne - Test Patriotyzmu

Wpatruj się w kropkę w centrum zielono-czarno-żółtej flagi przez co najmniej 30 sekund. Następnie skup wzrok na czystym biały tle. (np. otwórz nowy dokument w edytorze tekstu i powiększ go do rozmiarów ekranu).

Rysunek. Test ślepoty na barwy Ishihaniego

Sprawdź tutaj:

• Color Vision Test
• Test your color IQ

Widzenie kształtu, głębi i ruchu

• Efekty kontrastu:

Rysunek. Kontrast jasności - im jaśniejsze tło, tym ciemniejszy wydaje się kwadrat.

Modele barw

Podstawowe modele barw:

• RGB
• HSV / HSL

Parametry obrazu

Głębia koloru (color depth): http://en.wikipedia.org/wiki/Color_depth

Ilość informacji opisującej barwę piksela (liczba bitów):

• black & white (b&w) (1 bit)
• skala szarości lub 256 kolorów (8 bitowa paleta kolorów),
• HighColor (16 bitowa paleta kolorów)
• TrueColor (24 bitowa paleta kolorów i 32 bitowa paleta kolorów - dodatkowe 8 bitów to kanał alfa).

Paleta barw indeksowanych

oczywiście im większa głębia koloru, tym większy rozmiar pliku z obrazkiem

Rozdzielczość (resolution):

• określa, ile jest poziomych i pionowych linii tworzących obraz
• im więcej linii i punktów, tym wyraźniejszy obraz

Formaty plików graficznych dla grafiki rastrowej:

JPG (ang. Joint Photographic Experts Group)

• głębia kolorów do 24-bitów
• w zależności od stopnia kompresji, można uzyskać dużą oszczędność pamięci (tracąc na jakości obrazu(kompresja stratna)) lub , jednak niski stopień kompresji nie spowoduje znaczących różnic i zmian jakości obrazu widzianych ludzkim okiem
• rozszerzenie *.jpg lub *.jpeg.
• * zobacz przykład: http://upload.wikimedia.org/wikipedia/en/c/ce/Quality_comparison_jpg_vs_saveforweb.jpg

BMP

• podstawowy format plików graficznych w systemie Windows
• głębia kolorów do 24-bitów
• zapis bezstratny, bo bez kompresji
• rozszerzenie *.bmp.
• zobacz przykłady: http://wvnvaxa.wvnet.edu/vmswww/bmp.html

GIF (ang. Graphic Interchange Format)

• maksymalnie 256 kolorów
• bezstratna kompresja (ale utrata informacji o kolorach, jeśli użyto ich więcej niż 256)
• możliwość utworzenia prostych animacji.
• rozszerzenie *.gif.
• zobacz przykłady: http://phil.ipal.org/tc.html

PNG (ang. Portable Network Graphics)

• głębia kolorów do 24 bit + kanał alfa
• możliwości ograniczenia palety barw, a co za tym idzie zmniejszenie rozmiarów pliku
• kompresja bezstratna
• rozszerzenie *.png.
• zobacz przykład: http://www.mywebsite.force9.co.uk/png/

Zastosowanie praktyczne:

Znaczenie barw przy projektowaniu interface-ów użytkownika
http://designinginterfaces.com/Few_Hues_Many_Values

Oczekiwania i stereotypy użytkownika powiązane z kolorem, barwą.

Oczekiwania użytkownika przenoszone z innych dziedzin mogą zostać wykorzystane do usprawnienia nauki korzystania z nowego systemu/interface-u
Np. Znaczenia kolorów zaczerpnięte z sygnalizacji świetlnej

Kolor	Przykład wykorzystania	Interface użytkownika
czerwone		alarm
żółte	http://blog.tmcnet.com/blog/tom-keating/images/windows-wga-not-genuine.jpg	uwaga
zielone		ok, bezpiecznie

Często korzysta się również z analogii kolorystycznych i kształtów znaków drogowych.

Dodatkowe materiały:

• http://aneksy.pwn.pl/psychologia/?id=246
• http://www.portaldtp.pl/warsztat/barwa/zjawisko_i_percepcja_barwy_063.html
• http://astrophysics.fic.uni.lodz.pl/lectures/graf-barwy.pdf

Palety kolorów:

• http://kuler.adobe.com/

GIMP:

• instalator dla Windows: http://gimp-win.sourceforge.net/stable.html

Zadanie:

Raport

1. Ściągnij z internetu 2 zdjęcia (w formacie BMP, duże i skomplikowane),

Spróbuj np. tutaj:

• http://www.flickr.com/search/?q=color+brain+&m=text
• http://images.google.pl/images?q=brain+colour+filetype:bmp&as_st=y&um=1&hl=pl&client=firefox-a&rls=org.mozilla:pl:official&sa=G&imgsz=xxlarge

otwórz w programie graficznym (np. GIMP) i zachowaj w wymienionych poniżej formatach:

• BMP z paletą indeksowaną
• BMP w odcieniach szarości
• GIF
• PNG z różnym stopniem kompresji
• JPG z różnym stopniem kompresji

Sporządź zestawienie przedstawiające dla każdego otrzymanego pliku:

• wielkość pliku
• jakość obrazka
• uzasadnienie dlaczego wielkość i/lub jakość uległa/nie uległa zmianie.

Do raportu należy dołączyć zapisane pliki zdjęć (spakowane jako .zip lub .rar)

(1.5 pkt)

1. Opisz krótko (maksymalnie 2 strony A4 w sumie) modele kolorów: RGB, CMYK, HSV (1.5)

termin: godzina 24:00 w piątek 9 stycznia (północ z piątku na sobotę)
punkty: 3