Przejdź do treści

Kolejna część artykułu dot. psychologii kolorów dotyczyć będzie tak jak już było wspomniane – palet kolorystycznych oraz narzędzi, przydatnych podczas pracy jako grafik i nie tylko. Zapoznaj się z tematyką kolorów nieco głębiej.

Rodzaje palet kolorystycznych

Palety kolorów, mieszanie barw – nazewnictwo tego tematu jest dość szerokie. W skrócie można to opisać w ten sposób, że chodzi o dopasowywanie różnych kolorów tak, aby po połączeniu w projekcie kilku, wyglądało to spójnie, ciekawie, no – po prostu aby do siebie pasowało 🙂
Rodzaje palet, które opiszę w celu łatwiejszego zrozumienia 'zaopatrzę’ w zdjęcia, które zapożyczę z narzędzia Adobe Color, które opiszę w drugiej części artykułu.

Paleta monochromatyczna

Jak można się domyślić chodzi o wybranie jednego koloru i na jego podstawie wybranie odcieni, które będą pasować w projekcie. Są to dobre palety, m.in. ze względu na to, że nie ma w nich dużego kontrastu, przez co są przyjemne dla oczu, natomiast przy złym doborze odcieni, projekt może zlać się w jedną całość i efekt będzie słaby.
W poniższym przykładzie, pomarańczowy kolor w środku jest kolorem bazowym, na podstawie którego dopasowywane są pozostałe odcienie.

monochrom

Paleta dopełniająca

Często określana też paletą kontrastującą, ze względu na to, iż dzięki niej dobierane są najbardziej kontrastujące ze sobą kolory, np. czerwony – zielony, niebieski – żółty i ich odcienie. Inaczej mówiąc – są to dwa kolory z przeciwnych stron na kole barw.

dopelniajaca

Paleta Dopełniająca z podziałem

Dość rzadko się o niej mówi, natomiast jest to ostatnio również dość popularny rodzaj palety. Jest to podobny rodzaj palety jak w przypadku palety dopełniającej, z tą różnicą, że z jednej strony jest tylko jeden kolor, a z drugiej odcienie 'drugiego koloru’. Może to brzmieć nieco zagmatwanie, więc lepiej zobrazuje to poniższa grafika – z jednej strony kolor czerwony – z drugiej odcienie zieleni.

doppodz

Paleta analogiczna

Paleta analogiczna zawiera barwy, które są obok siebie na kole barw lub w takich samych odległościach.
Odnosząc się do tej informacji można z powodzeniem stwierdzić, iż oba poniższe przykłady są paletami analogicznymi:

analog

analog2

Triady

Są to, jak łatwo można się domyślić – złożone z trzech kolorów i ich odcieni. Są to dokładnie trzy kolory rozmieszczone na kole barw w trzech miejscach, których odległości są identyczne. Podobnie jak w przypadku palet dopełniających, kolory są kontrastowe, natomiast przez dodanie trzeciego koloru nie jest to aż tak 'rażące dla oczu’. W przypadku triad warto pokombinować nieco z nasyceniem barw, ponieważ gdy wszystkie są mocno nasycone, projekt może wyglądać nieatrakcyjnie.

triady

Tetriady (podwójnie dopełniające)

Jest to prawdopodobnie najtrudniejsza paleta do dopasowania i zastosowania w projekcie, ze względu na 4 kolory, które są rozmieszczone na 'dwóch osiach’.
Ciężko to jakoś lepiej rozpisać, dlatego najlepiej będzie posłużyć się tu graficzną prezentacją:

tetriad-colorhttp://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2011/05/color-tetradic.png

tetriady

Palety niestandardowe

Jest to rodzaj palet inny niż wszystkie 😉 Aby je stworzyć trzeba odbiec od omówionych powyżej schematów i stworzyć coś unikalnego.

wlasne

wlasne2

Narzędzia do pracy z kolorami

Tak jak obiecałem, teraz przyszła pora na garść informacji na temat narzędzi, które w dużym stopniu ułatwiają pracę z kolorem.

Adobe Color CC

Jest to chyba najpopularniejsze narzędzie do 'kolorowej zabawy’. Tak jak już wspomniałem, powyższe kwadraty z kolorami pochodzą właśnie z tej aplikacji. Można z niej korzystać zarówno w przeglądarce pod adresem color.adobe.com jak i w programach Adobe, tj. Photoshop czy Illustrator.
No tak, fajny program, ale do czego konkretnie on służy ? Otóż jest to narzędzie do tworzenia palet kolorów. Po wejściu na stronę projektu ukazuje nam się duże 'koło kolorów’, a na dole kwadraty, podobne do tych z pierwszej części artykułu.
Na kole jest 5 punktów, które odpowiedzialne są za kolor – im bliżej środka tym kolor jaśniejszy – im dalej – bardziej nasycony. Obok koła jest biała i czarna kropka, jeśli chcemy jaśniejsze bądź ciemniejsze odcienie, a po lewej gotowe, wspomniane powyżej układy kolorystyczne.
Po zdefiniowaniu palety w przeglądarce możesz ją zapisać, otworzyć np. w Photoshopie i wykorzystać w projekcie. W tym celu musisz jednak posiadać konto Adobe, które jest darmowe (jeśli korzystasz z Photoshopa, Illustratora czy innych, domyślam się, że już je posiadasz). Po założeniu konta i zalogowaniu się wystarczy nad panelem z presetami wybrać dowolną nazwę, kliknąć Zapisz, a następnie w panelu w programie wczytać gotowy preset.
Gdyby nie chciało Wam się kombinować i wymyślać własnych schematów, możecie wykorzystać 'gotowce’. W tym celu wystarczy wejść na podstronę Eksploruj (Explore) dostępnej z górnego menu i wybrać taki schemat, jaki Ci się podoba.

Color Scheme Designer 3 / Paletton

Kolejne narzędzie jest alternatywą dla Kulera. Kiedyś nazywało się Color Scheme Designer 3 – obecnie jednak Paletton.
To może po kolei. To co najbardziej rzuca się w oczy to kolorowe koło. Jest ono ciekawie oznaczone, mianowicie z prawej strony na górze jest oznaczenie „warm”, czyli kolory ciepłe, a analogicznie, choć w tym artykule bardziej pasuje dopełniająco, po przeciwnej stronie „cold”, czyli kolory zimne. Poza kołem w lewym górnym rogu znajduje się kąt oraz fajny przycisk „opposite”, który ustawia przeciwległą wartość kąta. W lewym dolnym rogu mamy procentowe wartości barw RGB, a po stronie prawej ten sam kolor podany jako wartość heksadecymalną (HEX).
Nad samym kole jest jedna kropka – przesuwając ją zmieniamy kolor. W panelu nad kołem mamy znane z Kulera „Reguły”. Domyślnie jest ustawiona „mono”, natomiast do wyboru mamy jeszcze dopełniającą (complement), triadę, tetriadę, analogiczną oraz „akcentowaną analogiczną”, czyli rozszerzoną dopełniającą. Po wybraniu jednej z 'reguł’ ilość kropek zwiększa się. Manipulując ciemnymi przestawiamy cały schemat kolorów, natomiast przestawiając jasne kropki, dopasowujemy pozostałe kolory.
W nowej wersji aplikacji (Paletton) jest jeszcze dostępna 'reguła’ „Free style”, czyli własne, gdzie można ustawiać od 2 do 4 kolorów w dowolnych miejscach i odcieniach.
Wracając do CSD – pod kołem mamy 3 zakładki – Hues, na której znajduje się koło kolorów, Adjust scheme, gdzie możemy dopasować odcień wybranego koloru (na górze jest rozwijana lista z presetami, z których można korzystać aby zaoszczędzić nieco czasu) i jest też zakładka Color list, gdzie mamy dostępne wykorzystywane kolory wraz z ich odcieniami oraz wartościami HEX.
Po prawej stronie koła domyślnie jest podgląd schematu kolorów – największy obszar zajmuje kolor główny, a po bokach 4 prostokąty z odcieniami. Pod podgladem jest opcja „Show sample text”, dzięki której możemy podejrzeć jaki odcień tekstu (jasny czy ciemny) najbardziej pasuje do danego schematu. Pod ramką z kolorami są też dwie opcje – Light / Dark page example. Po kliknięcu na nie otwiera się lightbox z podglądem przykładowej strony z użyciem wybranych kolorów – spore ułatwienie dla WebDesignerów 🙂
Nad tym panelem znajdują się 4 kwadraty z głównymi kolorami projektu – w Adobe Color CC jest ich 5. Pod nimi znajduje się identyfikator schematu, dzięki czemu można łatwo podesłać schemat znajomym lub klientowi.
Powyżej znajdują się różne narzędzia – z tych przydatniejszych:
Randomize Palette – ustawia losową paletę kolorów wg zdefiniowanych ustawień w polu Randomization Settings.
Color space – Aktualnie można podejrzeć tylko schematy RGB, Web i Opaltone, swego czasu były również opcje PANTONE oraz RAL, które niestety zostały usunięte.

Web Color Trends

Ostatnim prezentowanym narzędziem jest lista. Lista stron, która działa nieco podobnie jak powyższa, mianowicie pokazuje trendy kolorystyczne w projektowaniu witryn (WebDesign). Na stronie znajduje się ponad 5700 projektów wraz ze schematami kolorów w nich użytymi. Kolory prezentowane są w wartościach HEX oraz RGB.
To by było na tyle jeśli chodzi o tematykę kolorów. Jeśli pojawią się jakieś newsy z tej 'dziedziny’ będę informował o tym na facebooku lub na blogu 🙂



Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *