Nauka projektowania dla grafików

W zeszłym tygodniu pisaliśmy, dlaczego paleta kolorów i właściwy dobór barw mają kluczowe znaczenie dla tworzenia komunikacji między marką a klientem.

Umiejętne operowanie nasyceniem i odcieniami sprawia, że jeden kolor może sprawiać wrażenie stonowanego, minimalistycznego i eleganckiego lub żywego, radosnego i beztroskiego.
Dziś zajmiemy się tym, jak osiągnąć efekt, którego szukasz.

Nauka projektowania dla grafików
Profesjonalny wygląd dzięki paletom kolorów

 

Jak przeprowadzić analizę palety kolorów?

1. Zrób screenshot przynajmniej trzech podstron swojej witryny
2. Otwórz je w Photoshop
3. Zduplikuj warstwę tła każdego screena
4. Zastosuj efekt rozmycia Gaussa wielkości około 10 pikseli do każdej nowej warstwy
5. Przejdź do Image → Adjustments → Posterize. Użyj poziomu od 8 do 12. Możesz także skorzystać z Filter → Pixellate → Mosaic. Użyj wielkości od 15 do 30 pikseli.

Jak przeprowadzić analizę kolorystyki strony?

 

Tak obrobiony obraz pokaże ci dokładnie, które kolory naprawdę są dominujące. Im bardziej są wyraziste, tym mocniej obraz zapadnie w pamięć użytkownika.

Kiedy layout strony jest już gotowy i organizacja treści nie budzi wątpliwości, czas wybrać właściwą paletę.

 

Projektowanie komunikacji wizualnej: jak dopasować barwy?

Kolor opisuje się zwykle w trzech wartościach:

  • nasycenie (saturation): poziom nasycenia koloru. Kolory jaskrawe są bardziej nasycone niż pastelowe
  • jasność (lightness, value): oznacza, jak jasny lub ciemny jest dany kolor (jak różny od czerni lub bieli)
  • barwa (hue): odnosi się do tej części koła kolorów, do której kolor należy (czerwienie, żółcienie itd.) i określa fizyczną własność rozpraszania, pochłaniania i przepuszczania promieni świetlnych; to wartość, do której najczęściej się odnosimy

 

Nic nie psuje palety kolorów tak, jak gryzące się barwy. Projekt może operować dziesiątkami odcieni danej barwy, od neonowych do pastelowych, ale wciąż wyglądać dobrze. Źle dobrane barwy dają wrażenie chaosu i braku spójności.

Jasność, odcień, nasycenie

 

JAK STWORZYĆ PALETĘ KOLORÓW

 

Jak tego uniknąć niewłaściwego zestawienia barw?

  1. Możesz uniknąć niemiłego dla oka zestawienia dwóch barw poprzez umieszczenie między nimi trzeciej. Najbezpieczniejsze „bufory” to biel, czerń i szarość, ponieważ są neutrale.
  2. Użyj tych samych barw, ale w różnych proporcjach. Jeśli twój projekt operuje brązem i zielenią, jako główny kolor wykorzystaj brąz i jego odcienie, a fiolet stosuj tylko jako kolor do zaakcentowania ważnych treści
  3. Zmień wartości. Czysty błękit zestawiony z cyjanem tworzą dobrą kombinację, ale marynarski granatowy z tym samym cyjanem są już tak mocno skontrastowane, że wzajemnie się odpychają.

Unikanie złych zestawień jest ważne, ale to, czego musisz się nauczyć, to tworzenie dobrych palet. Pamiętaj, że dobra paleta to nie ta, która ci się podoba, ale taka, z którą twoi użytkownicy czują się dobrze.

 

Identyfikacja wizualna: wykorzystaj główne schematy kolorystyczne

Istnieją setki kolorów i tysiące możliwych kombinacji, więc jak wybrać tę jedną właściwą?

Projektanci małych stron www powinni opierać swoje palety kolorów na tych, które pojawiają się w zawartości strony – przede wszystkim jej zdjęciach i kolorach firmowych, np. w logo. Najprostszy sposób na to, aby zbudować paletę kolorów na podstawie dostępnych materiałów, to posłużenie się kroplomierzem w Photoshop.

Inne postawy do budowania palet kolorystycznych to wykorzystanie kolorów firmowych lub odwołanie się do psychologii koloru.

 

Identyfikacja wizualna: używanie tekstur

Niewielkie zmiany w barwie, nasyceniu i jasności tworzą tekstury.
Monochromatyczne tekstury, czyli takie, które oparte są tylko na jednym kolorze i wzorze, wprowadzają subtelny efekt przestrzeni na stronie, bez powodowania wizualnego chaosu.

Jak stworzyć teksturę?

  • wybierz zdjęcie ściany lub innej pustej powierzchni o odpowiednio stonowanym wyglądzie (Freebies dla grafików)
  • otwórz zdjęcie w Photoshop
  • zduplikuj warstwę i nazwij ją „Tekstura1”
  • wypełnij warstwę tła kolorami z twojej palety
  • ustaw warstwę „Tekstura1” na tryb mieszania kolorów „Soft light” i przejrzystość 30%
  • wypróbuj na stronie
Tworzenie tekstur na potrzeby stron www

 

Identyfikacja wizualna: tworzenie dobrych palet kolorów

Czym się charakteryzuje dobre zestawienie kolorów? Pomyśl o nim jako o frameworku lub liniach pomocniczych, które nadają projektowi spójności.
Twoja paleta powinna:

  • składać się z od dwóch do pięciu barw, które współgrają za sobą
  • określać, jak bardzo projekt może odbiegać od zadanych barw
  • określać ilość odcieni każdego koloru
  • współgrać jednakowo dobrze z czernią i z bielą

Poniżej znajduje się przykład:

Tworzenie palet kolorów – krok 1

 

Powiedzmy, że chcesz stworzyć ciepłą, jesienną paletę. Zacznij od wyboru pięciu raczej ciepłych kolorów.

Tworzenie palet kolorów – krok 2

 

W Photoshopie dwie warstwy pokazują odcień i tintę zebranych kolorów (w trybie mieszania kolorów Soft light). Czysta czerń była zbyt ciemna dla skrajnego koloru po prawej, dlatego zmieniono jego przezroczystość.

Tworzenie palet kolorów – krok 3

 

Aby nadać kolorom „wspólny mianownik”, stwórz dodatkową warstwę wypełnioną czystą czerwienią. Tutaj tryb mieszania kolorów ustaw na Kolor, a przezroczystość na 40%.
Uwaga: kolejność warstw jest tu ważna. Kolory zmienią się, jeśli warstwa tinty będzie ustawiona pod warstwą czerni i bieli.

Tworzenie palet kolorów – krok 4

 

W ten sposób uzyskałeś 15 kolorów. Dla ułatwienia do palety wybierzemy cztery różniące się od siebie barwy, tony i odcienie. Aby upewnić się, że kolory będą „grały” również z czernią i bielą, eksperymentujemy z różnymi kolorami tła oraz odcieniami.

Tworzenie palet kolorów – krok 5

 

Aby sprawdzić wszystkie opcje, spróbujmy zmienić wszystkie kolory. W tym celu użyjemy ustawień Barwa/Nasycenie na warstwie „tinta”. Efekt, jaki otrzymujemy, jest daleki od jesiennego zestawienia, ale kolory wciąż są spójne i harmonijne.

Tworzenie palet kolorów – krok 6

Końcowy rezultat to gotowa paleta kolorów, która obejmuje różne (ale nie krańcowo różne) barwy i szeroki wachlarz odcieni, które będą ze sobą współgrać.