01.02.2017 Projektowanie Warstwa powierzchni Konkret • Kolorystyka powierzchnia Metodyka szkielet = Metody struktura Techniki + zakres Proces Model Biznesowy Abstrakcja Warstwa powierzchni Kolor i Web • Typografia …lub sterownika drukarki… To ewidentny błąd oprogramowania do przetwarzania grafiki Psychologia kolorów Jak reagujemy na kolory? 1 01.02.2017 Psychologia kolorów Wpływ kolorów • Oddziaływanie psychologiczne – czerwień rozdrażnia, – szkarłat sprawia wrażenie majestatyczne lub żałobne, – żółty rozwesela, – zieleń uspokaja, – fiolet przygnębia Wpływ kolorów Znaczenie kolorów Kolor Znaczenie Czerwony Siła, władza, pasja, niebezpieczeństwo, błąd, stop, ostrzeżenie, agresja, ogień, odwaga, gorący, luksusowy, namiętność, bogactwo • Oddziaływanie fizjologiczne Różowy Kobiecość, kolor słodki, cukierkowy, kiczowatość, popkultura Pomarańczowy Ciepło, jesień, Halloween, energia, żywotność, świeżość, – ostra czerwień działa podniecająco nowoczesność, ostrożność Żółty, złoty Zadowolenie, ostrożność, słoneczność, pogoda ducha, optymizm, – blady błękit, chłodne zielenie działają radość, dostatek, zawiść, zazdrość uspokajająco Brązowy Zabrudzenie, zaufanie, przyjaźń, pewność, jesień, klasyka Zielony Zazdrość, sielska atmosfera, wiosna, natura, wzrost, żyzność, nowość, – światło czerwone powoduje wyraźny nadzieja, przyjaźń, sukces, uzdrowienie Niebieski Męskość, woda, smutek, bezpieczeństwo, niebo, spokój ducha wzrost ciśnienia krwi, przyśpieszenie Fioletowy Tajemnica, kolor królewski, mądrość, duchowe poznanie oddechu czy tętna oraz zwiększa Czarny Zło, noc, upiorny, śmierć, żałoba, powaga, autorytet, strach, siła Szary, srebrny Czystość, rozsądek, niewinność, szlachetność, stare czasy częstotliwość mrugania powiekami Biały Niewinność, czysty, zimny, nieskazitelny, zima Znaczenie kulturowe Jak reagujemy na Kultura Czerwony Niebieski Zielony Żółty Biały USA Niebezpie- Męskość Bezpie- Tchórzostwo Czystość kolory w różnych czeństwo czeństwo Francja Arystokracja Wolność, Półświatek Przemijanie Neutralność pokój kręgach kulturowych? Egipt Śmierć Cnota, Żyzność, Szczęście, Radość walka, tężyzna prosperity prawda Indie Życie, Cnota, Żyzność Sukces Śmierć, twórczość walka, czystość prawda Japonia Gniew, Nieuczci- Przyszłość, Gracja, Śmierć niebez- wość energia szlachetność pieczeństwo Chiny Szczęście Niebo, Dynastia Narodziny, Śmierć, chmury Ming, niebo, bogactwo, czystość chmury moc 2 01.02.2017 Wartość koloru Jakie są • Jest miarą rozpiętości tonalnej – od odcieni jasnych do ciemnych Jasny charakterystyki • Pomagają we wprowadzaniu W odcień A tradycyjnej dychotomii dobra i zła R Czysty T kolorów? kolor • Ciemne kolory – ciężkie i gęste O (kolor + czerń) Ś Ć Ciemny odcień • Jasne kolory – pozytywne, miękkie, delikatne (kolor + biel) Walka dobra ze złem Nasycenie kolorów a kolory… • Stopień natężenia lub przygaszenia • Dodanie koloru szarego (czarny + biały) powoduje zmatowienie i zmniejsza nasycenie • Kolory matowe zmniejszają napięcie, nadają medytacyjny, marzycielski nastrój W a r t o ś ć Nasycenie Temperatura kolorów • Kolory zimne – od zielonego po niebieski Jak reagujemy na • Mają tendencję do wycofywania się • Sprawdzają się jako tło lub większe kolory – wiek i płeć? elementy na stronie • Kolory ciepłe – od czerwonego po żółty, łącznie z pomarańczowym, różowym, brązowym i burgundowym • Mają tendencję do zwracania na siebie uwagi • Dominuje i tworzy wizualne wyróżnienie 3 01.02.2017 Porządek preferencji kolorystycznych • Najprzyjemniejsze barwy –Niebieska –Czerwona Badania psychologa Hansa Eysencka –Zielona 14.000 osób –Purpurowa • Nieprzyjemne barwy –Żółta –Pomarańczowa • Osoby dorosłe: pastelowe; dzieci: żywe 4 01.02.2017 Kolor i biznes • Czarny + złoty, czarny + srebrny – sklep z luksusową biżuterią • Ciemny zielony, khaki, szary – militaria, survival • Jasny zielony oraz uzupełniające – ogrodnictwo • Brązowy, czarny – galanteria skórzana • Żółty, pomarańczowy, piaskowe brązy, błękitny – turystyka • Granatowy, szary – strony dla menedżerów • Żółty, pomarańczowy, czarny, szary – sprzęt budowlany Teoria kolorów Model RGB • Kolory wyświetlane na ekranach komputerów – addytywny model kolorów (RGB) • Poligrafia – drukarki atramentowe, laserowe, prasy drukarskie – subtraktywny model koloru (CMYK) Pantone - międzynarodowy standard identyfikacji kolorów do celów przemysłowych (w tym poligraficznych) opracowany i aktualizowany przez amerykańską firmę Pantone Inc. RGB jest addytywnym modelem barw, kolory powstają przez sumowanie sygnałów w poszczególnych kanałach. Jasność wynikowego koloru zależy od sumy sygnałów składowych. Model RGB Model CMYK • RGB – model odwzorowania kolorów, który powstał na potrzeby ICT • Cyan, Magenta, Yellow, blacK – Czerwony (Red) – #FF0000 Im większa liczba • Zjawisko odbicia światła od tym kolor jaśniejszy powierzchni przedmiotów – Zielony (Green) – #00FF00 #FFFFFF – biały • Powierzchnie barwne – Niebieski (Blue) – #0000FF #000000 - czarny pochłaniają część światła • Zmieszanie w odpowiednich proporcjach trzech • Światło odbite docierające do wiązek światła o ww. barwach obserwatora stwarza • 255 odcieni każdego z podstawowych kolorów wrażenie koloru • Kolorystykę wykorzystywaną w sieci obejmuje tzw. • Intensywność pigmentów reguluje gęstość siatki rastra tablica bezpiecznych barw - 216. – 256 kolorów – 40 kolorów inaczej odzwierciedlanych w Jest to model subtraktywny - barwy powstają prze odejmowanie Windows a inaczej w systemach Apple’a poszczególnych składników od światła białego. 5 01.02.2017 Teoria kolorów Koło kolorów • Studia nad klasyfikacją kolorów – Arystoteles III wiek p.n.e. 1. Kolory podstawowe – czerwony, • Koło kolorów – Isaac Newton, Johann żółty, niebieski – Barwy tworzą trójkąt równoboczny Wolfgang Goethe, Johannes Itten; XVII, XVIII, – Co 4 kolor jest kolorem podstawowym IX wiek 2. Kolory pochodne – Powstają przez wymieszanie sąsiadujących: pomarańcz (czerwień + żółty), zieleń (żółty + niebieski) i fiolet (niebieski + czerwień Koło kolorów Schematy kolorów • Monochromatyczny 3. Kolory pochodne trzeciorzędowe – Mieszanie koloru podstawowego • Analogiczny z kolorem pochodnym – Czerwono-pomarańczowy, żółto- • Uzupełniający pomarańczowy, żółtozielony, niebiesko- zielony, fiołkowy, czerwono-fioletowy • Rozdzielony uzupełniający • Triadyczny • Tetradyczny (podwójnie uzupełniający) Schemat monochromatyczny Schemat analogiczny • Kolor podstawowy + dowolna liczba odcieni • Schemat zawierający barwy sąsiadujące na tego koloru kole (nie bierz kawałka większego niż 1/3) 6 01.02.2017 Blinksale Schemat uzupełniający Chłodna strona firmowa • Schemat zawierający barwy umiejscowione naprzeciw siebie na kole (zielony-czerwony, żółty-fioletowy, pomarańczowy-niebieski) • Pułapki: – Jednoczesny kontrast – każdy kolor sprawia, że ten drugi wygląda na bardziej jaskrawy – Połączenia dysonansowe – gryzą się powodując, że oglądający odczuwa dysonans Schemat uzupełniający Schemat rozdzielony uzupełniający • Schemat zawierający barwy będące kolorami granicznymi koloru uzupełniającego barwy podstawowej Schemat triadyczny Schemat tetradyczny • Schemat zawierający barwy przesunięte tak, • Schemat, w którym jakikolwiek uzupełniający aby wszystkie kolory były jednakowo schemat barw jest połączony z innym rozstawione uzupełniającym schematem 7 01.02.2017 Zapis szesnastkowy Zapis szesnastkowy kolorów kolorów Zapis szesnastkowy Zapis szesnastkowy kolorów kolorów Zapis szesnastkowy Projekt schematu kolorów kolorów • Klient: firma zajmująca się wykonywanymi na zamówienie instalacjami z płytek i kamienia w luksusowych rezydencjach przy plażach • Podstawowy kolor: pomyśl o barwach, które są powszechne w regionie, z którego pochodzi klient 8 01.02.2017 Projekt schematu kolorów Projekt schematu kolorów • Grupa docelowa: ludzie, którzy chcą podnieść • Drzewa mangrowe… standard przybrzeżnych domów – Dobór kolorów powinien być skorelowany ze stylem życia przy plaży Pomyśl o przyjemnej bryzie morskiej, tropikalnych drzewach mangrowych, prywatnych plażach i bardzo drogich willach – Kolor główny: ciepły kolor piaskowy – Kolor uzupełniający: ciemny odcień niebieskiego – kontrast pomiędzy kolorami • Bujna zieleń mangrowa + ziemista czerwień Kolory i dostępność Kolorowe gry, które umieściłem na witrynie, z mocno migającym tłem i niewyraźnymi czcionkami, są kluczowe dla mojej profesji – powodują znaczne pogorszenie się wzroku odwiedzających Zaburzenia w widzeniu kolorów Typy barwoślepoty • Protanopia – nierozpoznawanie barwy czerwonej, lub mylenie z barwą zieloną (dotyka 1% mężczyzn i 0,22% kobiet) • Deuteranopia (daltonizm) – nierozpoznawanie barwy zielonej, lub mylenie jej z barwą czerwoną (dotyka 1% mężczyzn i 0,22% kobiet • Tritanopia – nierozpoznawanie barw żółtej Test z użyciem kart Ishihary (Shinobu Ishihara) i niebieskiej (dotyka 0,002% mężczyzn http://manta.univ.gda.pl/~awieruck/ishihara/ i 0,001% kobiet) 9 01.02.2017 Niedowidzenie barw Narzędzia do kolorów • Łapacze kolorów • Protanomalia – obniżona percepcja – Pobranie kolorystyki ze zdjęcia nasycenia i jaskrawości czerwieni, • Ustalanie jak osoby z barwoślepotą dotyka 1% mężczyzn widzą witrynę (aspekt dostępności) • Deuteranomalia – obniżona percepcja • Dobór kolorów wg zasad nasycenia (ale nie jaskrawości) zieleni, wykorzystywanych dotyka 6% mężczyzn i 0,4% kobiet w sztukach plastycznych • Tritanomalia – obniżona percepcja • Dobór zdjęcia do kolorystyki barwy niebieskiej, występuje nad wyraz • Wyszukiwanie witryn pod kolorystykę rzadko http://www.degraeve.com/color-palette/ http://colorcombos.com Sprawdzenie barwoślepoty http://colorschemedesigner.com/ 10 01.02.2017 http://www.colorschemer.com