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:
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:
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:
GIMP:
- instalator dla Windows: http://gimp-win.sourceforge.net/stable.html
Zadanie:
Raport
- Ś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)
- 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