Stosowanie schematów kolorów wymaga zobaczenia ich od nowa
Dla projektantów dostępnych jest wiele zasobów internetowych do przeglądania, modyfikowania i pobierania wspaniałych kombinacji kolorów.
Granie z komplementarnymi, analogicznymi, monochromatycznymi i innymi kombinacjami otwiera nas na ekscytujące możliwości i nie brakuje gratisy.
Istnieje jednak różnica między zwycięskim schematem kolorów a zwycięskim projektem, który go wykorzystuje.
Wybór kolorów to pierwszy krok. Dostosowanie ich do wymagań projektowych jest równie ważne.
To, co wygląda dobrze w próbce, może nie działać dobrze na stronie internetowej - ale to nie znaczy, że musisz powrócić do pierwszej. Omówimy tutaj nowe sposoby patrzenia na schematy kolorów.
Kolor odgrywa ważną rolę w absorpcji treści przez ludzi. Niezależnie od tego, czy projekt jest zarezerwowany, czy głośny, przyjacielski lub złowieszczy, ciepły czy chłodny, odwiedzający stronę internetową są natychmiast pod wpływem tonu określonego przez układ, typografię, zdjęcia i, oczywiście, odcienie i wartości, które składają się na jego schemat kolorów.
Wybór kolorów może być najbardziej subiektywną pracą w projektowaniu stron internetowych. Niektóre kolory dobrze ze sobą współpracują; inni, nie tak bardzo. Niektóre kombinacje przemawiają do pewnych osób. Więcej niż jeden zestaw kolorów może pasować do tego samego projektu.
Na szczęście istnieje wiele zasobów, które mogą pomóc. Generatory palet kolorów, takie jak Projektant schematów kolorów , Adobe Kuler , Woliera Tukan i Dzienny schemat kolorów są wśród wielkich miejsc znaleźć kombinacje kolorów, które skutecznie nadają nastrój. Ale znalezienie palety to dopiero pierwszy krok. Potencjalna skuteczność każdego schematu kolorów może być zagrożona przez sposób, w jaki jest stosowany .
Liczba kolorów w schemacie ma znaczenie
Schemat kolorów to zestaw kolorów, które zostały wybrane do współpracy. Schematy zwykle mają co najmniej cztery kolory i często można je pobierać jako obrazy proste, a czasami jako
Powyższy schemat kolorów jest typowy dla większości schematów: jako jednolite próbki o płaskich kolorach. Ten zestaw może być oznaczony jako taki:
- Wesoły
- Przyjazny
- Współczesny
- Codzienny
- Primaries
Ale wyróżnij jeden lub dwa kolory i mogą pojawić się różne przymiotniki.
Powyższy obrazek ma ten sam schemat, który został przedstawiony w próbce, ale jest mniej przypadkowy i bardziej przypomina pustynia. Ten obraz podkreśla ciepłe kolory. Pojedyncze plamy koloru niebieskiego i zielonego przyciągają uwagę, ponieważ są rzadsze. Wynikowy nastrój można opisać jako:
- Piaszczysty
- Jasny
- Ciepły
- Khaki
- Szorstki
Wybór dominującego koloru wpływa na sposób pojawiania się schematu.
Ponownie, tutaj używamy tych samych kolorów, ale na zupełnie innym końcu. Ten obraz wygląda jak abstrakcyjna mapa świata z wyspami czerwonymi, zielonymi i brązowymi. Obraz jest nie tylko chłodniejszy - jest nieco ciemniejszy , mimo że pochodzi z tej samej palety.
Rozpoznanie dobrych kombinacji kolorów nie jest wystarczające, ponieważ kolory rzadko są równomiernie stosowane do projektu strony internetowej. Używanie kolorów w rozsądnej proporcji jest równie ważne, jak wybieranie właściwych kolorów.
Tło Ustawia dźwięk
Najbardziej oczywiste miejsce, w którym można uderzyć kolorem, znajduje się w tle. Ta szeroka przestrzeń może przyciągać tyle samo uwagi, co zawartość umieszczona nad nią.
Pomimo posiadania identycznej treści, wzór po prawej stronie jest znacznie cieplejszy niż po lewej. Ale dzieje się tu więcej niż zwykła zamiana kolorów.
Paski zawartości w zielonym projekcie (tj. Biały tekst na czerwono) trzymają się na szerokim zielonym tle. Ale czerwone tło po prawej stronie zmywa mizerne zielone paski. To dlatego, że oprócz cieplejszego, ten odcień czerwieni jest bardziej nasycony. W rzeczywistości, jedynymi elementami o wystarczającej wadze wizualnej, aby przeciwdziałać czerwonym tle, są duże nagłówki. Niewielki tekst na ciele i wyblakłe zielone paski bledną w porównaniu. To niekoniecznie jest złe; mocne tło zapewnia znaczącą obecność strony. Zielony design jest chłodniejszy i zapewnia bardziej swobodną atmosferę.
Które użycie koloru jest lepsze? To zależy od twojego zamiaru. Czy goście powinni traktować treść jako zrelaksowaną lub odważną? Czy chcesz zagrać w kolorowe paski? Czy obawiasz się, że tło pokona te informacje? Czy jeden kolor jest ważniejszy niż inny w Twoim brandingu? Odpowiedzi na te pytania ustalą, który kolor jest "właściwy". Ta pojedyncza paleta kolorów przedstawia dwa różne rozwiązania.
Kolor za tekstem
Interakcja tekstu i tła zależy od wielkości i ilości każdego z nich. Efekt tekstu na stronie zależy w dużej mierze od koloru samego tekstu, jak i od koloru tła - pomimo ogólnej tendencji do martwienia się bardziej o tło.
Powyżej jasny tekst na ciemnym tle działa lepiej, gdy typ jest duży. Pożyczyliśmy od schematu kolorów, od którego zaczęliśmy, to złoto jest mniej odpowiednie dla tekstu głównego (tj. Około 13 pikseli lub mniejszego). Rozwiązanie jest proste:
Powyżej mały tekst w dwóch ostatnich rzędach jest w jaśniejszym odcieniu złota. Nie jest całkiem biały, ale znacznie czytelniejszy niż dwie linie na pierwszym obrazie. Dodany kontrast sprawia, że mały tekst nie jest przytłaczany przez tło. Kluczem jest użycie schematu kolorów jako punktu wyjścia, a nie ustalonej reguły. Jeśli kolor tła grozi przytłoczeniem mniejszych elementów, zwiększ kontrast, co pozwoli zachować integralność schematu i zachować czytelność treści.
Tekst na białym tle
Wiele stron internetowych ma białe tło lub białe obszary zawartości. Ale "biały" nie oznacza "puste". Duże pokosy bieli wpływają na postrzeganie koloru. Na przykład:
Kolory, które zaczęliśmy, są lżejsze w przypadku tekstu.
- Stosunkowo ciemny niebieski tworzy wystarczający kontrast, aby tekst był czytelny na tle bieli.
- Ten szczególny odcień zieleni wtapia się w tło. Jeśli intencją jest harmonia, to zielony działa.
- Czerwony + biały = różowy lub brzoskwiniowy.
- Złoto wygląda prawie jak ton sepii.
Biały ma tendencję do rozjaśniania wszystkiego, czego dotyka. Jeśli chcesz ustawić lekki nastrój, może zadziałać jedna z powyższych kombinacji. Aby uzyskać większy efekt, możesz przyciemnić schemat kolorów.
Granie ze schematami kolorów w Photoshopie
Jeśli twój projekt nie wymaga równomiernego wykorzystania wszystkich kolorów w twoim schemacie, powinieneś przetestować jeden lub dwa kolory dominacji. Sztuką jest znalezienie schematu z kolorami, które działają zarówno ze sobą, jak iz dominującym kolorem.
Na szczęście mamy łatwy proces testowania kolorów. Aby zobaczyć, jak różne miary kolorów mogą wpłynąć na projekt, wykonaj następujące kroki w programie Photoshop.
1. Znajdź lub utwórz schemat kolorów. Nasz przykład ma pięć kolorów, ale każda liczba powyżej jednego zadziała.
2. Utwórz nowy obraz w Photoshopie, 500 x 500 pikseli, na białym tle.
3. Utwórz cztery nowe warstwy (warstwa tła będzie piątą). Jeśli twój schemat ma więcej lub mniej niż pięć kolorów, odpowiednio dodaj lub usuń warstwy.
4. Wypełnij każdą warstwę innym kolorem ze schematu.
5. Dodaj maskę warstwy do każdej warstwy powyżej warstwy tła. Twoja paleta warstw powinna wyglądać tak:
Powyżej, paleta warstw programu Photoshop, z jedną warstwą na kolor i nałożonymi maskami warstw.
6. Uruchom akcję "Thresholdizer" na każdej masce warstwy - ale nie na samych warstwach.
Powyżej, używając działania "Thresholdizer", należy wybrać maskę warstwy , a nie właściwą warstwę. Jeśli przez pomyłkę uruchomisz akcję na warstwie, skorzystaj z funkcji "Cofnij".
Ta akcja najczęściej tworzy losowy wzór w masce warstwy. Stąd projektant przejmuje kontrolę: z kontrolką "Próg". Przesuń suwak Próg w lewo, aby odkryć więcej danej warstwy, i prawo, aby ujawnić mniej. Zastosowanie tej akcji do każdej maski warstwy sprawi, że jeden kolor zdominuje pozostałe w losowym wzorze.
W takim przypadku kontrolka Próg określa, jaka część danej warstwy jest widoczna. Przeważnie czarna maska maskuje warstwę; głównie biały odsłania warstwę. Uruchomienie akcji Thresholdizer na każdej masce warstwy utworzy składankę kolorów takich jak ta:
Ten dokument Photoshopa pokazuje, jak mógłby wyglądać projekt, gdyby dominował kolor żółty. Teraz dostosowywanie kolorów jest bardzo proste: aby nadać kolorowi więcej (lub mniej) kontrastu, wystarczy użyć polecenia programu Photoshop (na przykład Obraz> Dopasowania> Nasycenie odcienia ).
Na przykład kolor zieleni, który wcześniej dobrze działał z niebieskim, nie wygląda teraz zbyt dobrze, gdy niebieski nie jest dominujący. Kilka eksperymentów ujawnia, co następuje:
Tutaj mamy dwie odmiany naszego oryginalnego schematu kolorów. Wariacja nr 1 nieco przyciemnia zieleń. To prawie działa. Wariacja nr 2 zmienia wszystko oprócz żółtego, aby dodać kontrast i wyrównać odcienie.
Co jeśli nasz projekt miał głównie kolor niebieski zamiast żółtego? Ten odcień błękitu jest wystarczająco ciemny, aby kontrastować z innymi kolorami, ale żadna z nich nie jest współrzędna - wszystkie są prawyborami. Wybierając nową dominującą, stworzyliśmy nowy problem.
Odmiana nr 1 zastępuje miękką czerwień ciemniejszym odcieniem niebieskiego i zmienia odcień zieleni na bladą miętę. Wariacja nr 2 idzie w drugą stronę, używając więcej czerwieni (lub bordu) zamiast mniej.
Zasługa którejkolwiek z tych odmian jest subiektywna. Najlepiej byłoby zastosować je do rzeczywistego projektu przed podjęciem ostatecznej decyzji. Klucz jest w trakcie: zdobądź paletę, wybierz dominujący kolor i spraw, aby inni z nim pracowali.
O akcji "Thresholdizer"
Nie ma żadnej tajemnicy dla tego działania. Możesz uzyskać ten sam efekt, stosując Filtruj> Renderuj> Chmury lub Filtr> Renderuj> Chmury różnicowe na maskę warstwy. Ta akcja jedynie udoskonala proces, organizując polecenie Próg do decylów.
Proszę, czuj się swobodnie by pobierz akcję "Thresholdizer" . Jeszcze lepiej, stwórz własne i udostępnij je wszystkim, podając link w komentarzach poniżej.
Ocena koloru bez akcji
Oczywiście istnieją sposoby oceny koloru bez grania za pomocą Threshold. Zacznij od wybrania jednego głównego koloru, a następnie spraw, aby inni z nim pracowali.
Oto nasz oryginalny schemat kolorów, z brązowym jako kolorem podstawowym.
Zmiękczyliśmy zieleń i nasyciliśmy czerwień. Ostrzejsze kolory stoją same, tak jak niebieski (który nie został skorygowany).
Tutaj wyblakliśmy na zielono, żółto i czerwono. Te nisko-kluczowe "akcenty" mieszają się z brązowym tłem. Przyciemnij niebieski, aby uzyskać kontrast.
Trzy ciemniejsze kolory podstawowe dobrze pasują do średnio brązowego, podczas gdy jasnożółty służy jako akcentujący kolor.
Ponownie, ostateczna decyzja pojawia się, gdy projektant stosuje te schematy do faktycznego projektu. Do tego czasu są to tylko punkty wyjścia: przydatne narzędzia do unikania starć, przydatne odniesienia do utrzymywania projektów na temat i świetny sposób na zbadanie kombinacji.
Kolor jest tylko elementem projektu. Wykorzystanie kolorów to umiejętność, którą należy ćwiczyć, aby kontrolować nastrój, rozwijać swój gust i móc zobaczyć możliwości w kilku próbkach.
Tylko jedna rzecz jest pewna: że zieleń musi odejść.
Napisany specjalnie dla Webdesigner Depot przez Ben Gremillion. Ben jest niezależny projektant stron internetowych który rozwiązuje problemy z komunikacją dzięki lepszemu projektowi.
Jak testujesz kolory? Jakie są twoje ulubione sposoby tworzenia schematów kolorów? Podziel się swoimi poglądami w komentarzach poniżej.