paletykolorow

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. 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 Kuler, 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, czerwony 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.

dop

Paleta rozszerzona dopełniająca

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.

rozdop

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:

analog1

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.

triad

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

tetriad

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.

cust1

cust2

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 Kuler

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 kuler.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 Kuler 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. Pod kwadratami z kolorami widnieją 4 suwaki – pierwsze trzy odpowiadają za dobór koloru RGB / CMY, natomiast ostatni odpowiada za czerń / biel. Jeśli chcesz przyciemnić uzyskaną barwę, pod odpowiednim kwadratem przesuwasz w lewo i gotowe 🙂

Na lewo od koła mamy widoczne „Reguły” (ja na to mówię presety, czyli zdefiniowane ustawienia). Do wyboru tam mamy właśnie schematy dopełniające, triady itp. Wybierając jeden z nich na kole, punkty automatycznie ustawiają się wg danego schematu, i manipulując nimi na boki, pozostałe same się dostosowują. Inaczej wygląda to jedynie w opcji Własne (Custom), gdzie możemy dowolnie ustawiać kolory.

Po zdefiniowaniu palety w aplikacji webowej (w przeglądarce) możesz ją zapisać i 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 Kulera 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. Osobiście jestem bardziej przyzwyczajony do ‚starej wersji’, która dostępna jest pod adresem http://colorschemedesigner.com/csd-3.5/ dlatego też to właśnie ją tu opiszę.

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 Kulerze 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.

Guideline Colour

Kolejne narzędzie, a w zasadzie strona www prezentuje wytyczne dotyczące kolorystyki popularnych marek. Są tam podane kolory w wartościach HEX, a do niektórych dołączona jest mniej lub bardziej szczegółowa księga znaku.

Można dowiedzieć się wiele na temat brandingu danej marki. Co ciekawe niektóre opisy mają do 10 stron, a niektóre nawet 150, więc można powiedzieć WOW ! Zwykle księgi znaków mają około kilkunastu stron, a tu, no cóż, trochę więcej 😀

Web Colour Data

Następnym narzędziem, któremu warto się przyjrzeć jest Web Colour Data. Sama strona jest bardzo minimalistyczna i niewiele na niej treści, ale ‚diabeł tkwi w szczegółach’ 🙂

Dzięki tej stronie możesz sprawdzić jakie schematy kolorystyczne są wykorzystane na dowolnej stronie internetowej. Na stronie głównej mamy do wyboru popularne strony, tj. Firefox, Facebook, Flickr itp, ale wpisując w pole w górnej części strony adres strony, możemy sprawdzić jakie kolory na niej zostały użyte.

Ale to nie wszystko – po przejściu na stronę z ‚wynikami’ pojawiają się użyte kolory z wartościami HEX oraz wartościami procentowymi, czyli ile procent danego koloru znajduje się na stronie, pojawia się również wykres ‚cieplny’ naszej strony, czyli informacja jakie kolory na stronie dominują – ciepłe czy zimne, a także koło kolorów z zaznaczonymi miejscami z którego obszaru na kole został pobrany dany kolor.

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 🙂
Dla osób, którym mało wiedzy i chcą więcej, zapraszam do zapoznania się z projektem grupy Rocket Design pt. Color Template, który prezentuje palety kolorów w formie interaktywnej infografiki: http://www.rocket-design.fr/color-template/


  • sekrety umysłu marketing

    Sekrety umysłu – pomocne w marketingu

    Nasz mózg w różnie reaguje na niektóre sytuacje, co jest możliwe do wykorzystania przy mar…
  • psychologiakolorow

    Psychologia kolorów, czyli co oznaczają barwy

    Często otrzymując zlecenie klient sam nie wie jakich kolorów chce użyć i określa, że chce …
Wczytaj więcej
Wczytaj więcej wpisów autora Wierzchu
Wczytaj więcej w Grafika

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Sprawdź także

Moodboard – lekarstwo na blokadę kreatywności

Wielu profesjonalnych projektantów wykorzystuje w swojej pracy kreatywnej moodboardy. Czy …