Existuje mnoho online zdrojů, které mohou návrháři prozkoumat, vyladit a stahovat skvělé kombinace barev.

Hra s komplementárními, analogickými, monochromatickými a dalšími kombinacemi nám otevírá vzrušující možnosti a nedostatek freebies.

Ale existuje rozdíl mezi vítěznou barevnou schématem a vítězným designem, který ji používá.

Volba barev je prvním krokem. Přizpůsobení je tak, aby vyhovovalo vašim požadavkům na design, je stejně důležité.

To, co vypadá dobře ve vzorku, nemusí fungovat dobře na webové stránce - ale to neznamená, že se musíte vrátit na druhou. Prozkoumáme zde nové způsoby, jak se podívat na barevné schémata.

Barva hraje důležitou roli v tom, jak lidé absorbují obsah. Ať už je design vyhrazen nebo hlasitý, přátelský nebo zlověstný, teplý nebo chladný, návštěvníci webu jsou okamžitě ovlivňováni tónem nastaveným rozvržením, typografií, zobrazením a samozřejmě odstíny a hodnotami, které tvoří jeho barevné schéma.

Výběr barvy může být nejvíce subjektivní práce v návrhu webových stránek. Některé barvy dobře spolupracují; jiní, ne tolik. Některé kombinace apelují na určité lidi. Více než jedna sada barev může vyhovovat stejnému designu.

Naštěstí existuje mnoho zdrojů, které vám pomohou. Generátory paletových barev, jako je Návrhář barevných schémat , Adobe Kuler , Voliéra Toucan a Denní barevná schéma jsou mezi skvělými místy najít kombinace barev, které účinně nastavují náladu. Hledání palety je však pouze prvním krokem. Jakákoli účinnost barevné schémy může být ohrožena způsobem, jakým je použita .

Počet barev v schématu je rozdíl

Barevná schéma je sada barev, která byla zvolena pro spolupráci. Schémata mají obvykle alespoň čtyři barvy a často je možné stahovat jako jednoduché obrázky a někdy také Soubory ASE. Pojďme pracovat s následujícím schématem:

vzorek barevné schéma s pěti barvami

Barevná schéma je typická pro většinu schémat: jako jednotné vzorky plochých barev. Tato sada by mohla být označena jako taková:

  • Veselý
  • Přátelský
  • Moderní
  • Neformální
  • Primární

Ale udělejte jednu nebo dvě barvy a vynechejte různá adjektiva.

barevné schéma s hnědým a béžovým zdůrazněním

Výše uvedený obrázek má stejný vzorec, který byl uveden ve vzorkovnici, ale je méně příležitostný a podobnější pouštní. Tento obrázek zdůrazňuje teplé barvy. Samostatné záplaty modré a zelené přitahují pozornost tím, že jsou ostřejší. Výsledná nálada může být popsána jako:

  • Sandy
  • Jasný
  • Teplý
  • Khaki
  • Hrubý

Výběr dominantní barvy ovlivňuje, jak se schéma zobrazí.

barevné schéma s modrým a zeleným zvýrazněním

Opět zde používáme stejné barvy, ale na velmi odlišný konec. Tento obrázek vypadá jako abstraktní mapa světa, s ostrovy červené, zelené a hnědé. Obraz není jen chladnější - je to trochu tmavší , i když pochází ze stejné palety.

Být schopen rozpoznat dobré barevné kombinace nestačí, protože barvy jsou zřídka rovnoměrně aplikovány na návrh webových stránek. Použití barev moudře a ve správném poměru je stejně důležité jako výběr správných barev.

Pozadí nastavuje tón

Nejzřejmější místo, které má dopad s barvou, je v pozadí. Tato široká rozloha může přitahovat tolik pozornosti, kolik je obsah umístěn na vrcholu.

příklady silného červeného a jemného zeleného pozadí na stejném designu stránky

Navzdory stejnému obsahu je design vpravo mnohem teplejší než ten vlevo. Ale zde se děje víc, než jen jednoduchá změna barvy.

Obsahové lišty v zeleném provedení (tj. Bílý text na červeném) se drží na širokém zeleném pozadí. Ale červené pozadí vpravo vypláví zelené mříže. Je to proto, že kromě toho, že je teplejší, je tento konkrétní odstín červené nasycenější. Ve skutečnosti jsou jedinými prvky s dostatečnou vizuální zátěží proti červenému pozadí velké rozměry. Malý text těla a vybledlé zelené pruhy blednou v porovnání. To není nutně špatné; silné pozadí dává stránce podstatnou přítomnost. Zelený design je chladnější a dává obsahům ležérnější prostředí.

Které použití barvy je lepší? Záleží na vašem úmyslu. Měl by návštěvníci považovat obsah za uvolněný nebo odvážný? Chcete hrát barevné barety? Jste znepokojeni tím, že pozadí přemůže informace? Je jedna barva důležitější než jiná ve vaší značce? Odpovědi na tyto otázky určují, která barva je "správná". Jedna barevná paleta představuje dvě různá řešení.

Barva za textem

Interakce textu a pozadí je ovlivněna velikostí a množstvím každého z nich. Účinek textu na stránce závisí stejně na barvě textu jako na barvě pozadí - a to i přes obecnou tendenci starosti více o pozadí.

příklady zlatého textu na modrém pozadí

Nahoře, světlý text na tmavém pozadí funguje lépe, když je typ velký. Zapůjčené z barevného schématu, které jsme začali, toto zlato je méně vhodné pro text těla (tj. Asi 13 pixelů nebo méně). Řešení je jednoduché:

příklady zlatého textu na modrém pozadí

Nad malým textem v posledních dvou řádcích je v bledějším odstínu zlato. Není to úplně bílá, ale mnohem čitelnější než dva řádky na prvním obrázku. Přidaný kontrast zabraňuje tomu, aby malý text byl přehnaný pozadí. Klíčem je použít jako výchozí bod vaši barevnou schéma, nikoli pevné pravidlo. Pokud barva pozadí hrozí přemožením menších prvků, zvyšte kontrast, který zachová integritu schématu a zachová čitelnost obsahu.

Text na bílém

Mnoho webových stránek má buď bílé pozadí nebo oblasti s bílým obsahem. Ale "bílá" neznamená "prázdné". Velké kousky bílé ovlivňují, jak je barva vnímána. Například:

barevné schéma, které jsme začali

Barvy, které jsme začaly vypadat jako lehčí při použití textu.

příklady bílého mocného barevného textu a pozadí
  • Poměrně tmavě modrá vytváří dostatečný kontrast, aby byl text čitelný proti bílému.
  • Tento konkrétní odstín zelené míchá do pozadí. Pokud záměr je harmonie, pak zelená funguje.
  • Červená + bílá = růžová nebo broskvová.
  • Zlato vypadá téměř jako sépie.

Bílá má tendenci rozjasnit vše, co se dotkne. Chcete-li nastavit světelnou náladu, může některá z výše uvedených kombinací fungovat. Pro větší náraz byste mohli zbarvit barevnou schéma.

Přehrávání s barevnými schémami ve Photoshopu

Pokud váš návrh nevyžaduje, aby byly všechny barvy ve vašem schématu používány rovnoměrně, měli byste otestovat jednu nebo dvě barvy pro dominanci. Trikem je najít schéma s barvami, které fungují jak navzájem, tak s dominantní barvou.

Naštěstí máme snadný proces testování barev. Chcete-li zjistit, jak mohou různé barvy ovlivnit design, postupujte podle těchto kroků ve Photoshopu.

1. Najděte nebo vytvořte barevné schéma. Náš příklad má pět barev, ale libovolné číslo nad ním bude fungovat.

2. Vytvořte nový obrázek ve Photoshopu, 500 x 500 pixelů, s bílým pozadím.

3. Vytvořte čtyři nové vrstvy (vrstva pozadí bude pátá). Pokud má vaše schéma více nebo méně než pět barev, přidejte nebo odstraňte odpovídající vrstvy.

4. Naplňte každou vrstvu jinou barvou než vaše schéma.

5. Přidejte masku vrstvy do každé vrstvy nad vrstvou pozadí. Paleta vrstev by měla vypadat takto:

diagram palety vrstev Photoshopu

Nahoře paletu vrstev Photoshopu s jednou vrstvou na jednu barvu a vrstvovými maskami.

6. Spusťte akci "Thresholdizer" na každé vrstvě masky - ale ne na samotných vrstvách.

schéma masky vrstvy, ne vybranou vrstvu

Pokud používáte akci "Thresholdizer", nezapomeňte vybrat masku vrstvy , nikoli skutečnou vrstvu. Pokud spustíte akci na vrstvě omylem, pak buďte rádi, že funkce "Undo".

Tato akce většinou vytváří náhodný vzor ve vrstvě masky. Odtud se návrhář zavazuje: s ovládáním "Threshold". Posunutím ovládacího prvku Threshold doleva zjistíte více dané vrstvy a správně odhalíte méně. Aplikováním této akce na každou masku vrstvy bude jedna barva dominovat ostatním v náhodném vzorku.

schéma ukazující, jaký je práh

V tomto případě určuje ovládací prvek Prah, jak velká část dané vrstvy je viditelná. Většinou černá vrstva masky skryje vrstvu; většinou bílá odkryje vrstvu. Spuštěním akce Thresholdizer na každé vrstvě masky vytvoříte směs barev takto:

schéma působení prahovacího prostředku aplikovaného na každou vrstvu masky

Tento dokument aplikace Photoshop ukazuje, jak by vypadal design, kdyby žlutá byla dominantní. Úprava barev nyní znamená rychlé nastavení: Chcete-li barvu zvýšit na více (nebo méně) kontrast, stačí použít příkaz Photoshop (například Image> Adjustments> Hue Saturation ).

Například odstín zeleně, který fungoval dobře s modrou starší, nevypadá dobře, když modrá není dominantní. Několik experimentů odhalilo následující:

změny původních barev založené na žluté barvě

Zde máme dvě varianty naší původní barevné schématu. Změna č. 1 mírně ztmaví zelenou. Skoro funguje. Varianta # 2 mění vše kromě žluté, čímž přidá kontrast a zarovnává tóny.

Co když náš návrh měl převážně modrý místo žluté? Tento odstín modré je dost tmavý, aby kontrastoval s ostatními barvami, ale žádný z nich není koordinovaný - jsou to všechny primární. Výběrem nového dominantního postavení jsme vytvořili nový problém.

varianty původních barev založené na modré barvě

Změna č. 1 nahrazuje měkkou červenou barvou s tmavší modrou barvou a změní odstín zelené barvy na bledou mátou. Variant # 2 jde opačným směrem, místo toho použije více červené (nebo vínové).

Zásluh každé z těchto změn je subjektivní. V ideálním případě byste je použili na skutečný návrh před konečným rozhodnutím. Klíč je v procesu: získat paletu, zvolit dominantní barvu a přinutit ostatní s tím pracovat.

O akci "Thresholdizer"

Na tuto akci není žádné tajemství. Stejný efekt můžete dosáhnout použitím filtru> Render> Clouds nebo Filter> Render> Difference Clouds na masku hladin. Tato akce pouze zdokonaluje proces a uspořádá příkaz Threshold do decilu.

Neváhejte, prosím stáhnout akci "Thresholdizer" . Ještě lépe, vytvořte si vlastní a sdílejte jej se všemi tím, že uvedete odkaz v níže uvedených komentářích.

Hodnocení barvy bez akce

Samozřejmě existují způsoby, jak posoudit barvu, aniž bychom hráli s prahem. Začněte tím, že vyberete jednu hlavní barvu a pak ji nechte pracovat s ostatními.

originální barevná kombinace s hnědou barvou

Zde je naše původní barevná schéma, která je jako primární barva hnědá.

barevná kombinace s hnědou, druhou variantou

Zesílili jsme zelenou a nasypali jsme červenou barvu. Drsnější barvy stojí samy o sobě, jako modrá (která nebyla nastavena).

barevná kombinace s hnědou, třetí variantou

Zde jsme ztratili zelenou, žlutou a červenou barvu. Tyto "akcenty" s nízkým klíčem se mísí s hnědým pozadím. Ztmavte modrou barvu, abyste vytvořili kontrast.

barevná kombinace s hnědou, čtvrtou variantou

Tři tmavší primární barvy dobře oproti středně hnědé, zatímco bledě žlutá slouží jako akcentní barva.

Opět konečné rozhodnutí přichází, když návrhář uplatní tyto schémata na skutečný design. Do té doby jsou to jen výchozí body: užitečné nástroje, které zabraňují střetům, praktické odkazy, které udržují návrhy na téma a skvělý způsob, jak prozkoumat kombinace.

Barva je pouze designovým prvkem. Barevné použití je dovednost, kterou musí člověk ovládat, aby ovládal náladu, kultivoval chuť a aby mohl vidět možnosti v několika vzorkách.

Jediná věc je jistá: ta zelená musí jít.

vzorek barevné schéma s pěti barvami



Napsaný výhradně pro Webdesigner Depot Ben Gremillion. Ben je na volné noze web designer který řeší komunikační problémy s lepším designem.

Jak testujete barvy? Jaké jsou vaše oblíbené způsoby vytváření barevných schémat? Sdílejte své názory v níže uvedených komentářích.