Použití barevných schémat vyžaduje jejich vidění Anew
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é
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.
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í.
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.
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í.
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é:
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:
Barvy, které jsme začaly vypadat jako lehčí při použití textu.
- 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:
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.
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.
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:
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í:
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.
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.
Zde je naše původní barevná schéma, která je jako primární barva hnědá.
Zesílili jsme zelenou a nasypali jsme červenou barvu. Drsnější barvy stojí samy o sobě, jako modrá (která nebyla nastavena).
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.
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.
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.