Användning av färgscheman kräver att de ses igen
Många online resurser finns för designers att utforska, tweak och ladda ner bra färgkombinationer.
Att spela med komplementära, analoga, monokromatiska och andra kombinationer ger oss spännande möjligheter, och det finns ingen brist på freebies.
Men det finns en skillnad mellan ett vinnande färgschema och en vinnande design som använder den.
Att välja färger är det första steget. Att anpassa dem för att passa dina designkrav är lika viktigt.
Det som ser bra ut i en swatch kanske inte fungerar bra på en webbsida - men det betyder inte att du måste återgå till en kvadrat. Vi undersöker här nya sätt att titta på färgscheman.
Färg spelar en viktig roll i hur människor absorberar innehåll. Oavsett om en design är reserverad eller högljutt, vänlig eller oregelbunden, varm eller kall, påverkas besökare på en webbplats omedelbart av tonen som anges av layout, typografi, bildspråk och naturligtvis nyanserna och värdena som innehåller dess färgschema.
Att välja färger kan vara det mest subjektiva jobbet i webbdesign. Vissa färger fungerar bra tillsammans; andra, inte så mycket. Vissa kombinationer vädjar till vissa personer. Mer än en uppsättning färger kan passa samma design.
Lyckligtvis finns det många resurser att hjälpa till. Färgpalettgeneratorer som Färgscheman Designer , Adobe Kuler , Aviary Toucan och Dagligt färgschema är bland de stora platserna för att hitta kombinationer av färg som effektivt stämmer. Men att hitta en palett är bara det första steget. Vilket färgschema som helst kan komma att äventyras av det sätt det tillämpas på .
Antalet färger i ett schema gör skillnad
Ett färgschema är en uppsättning färger som har valts för att arbeta tillsammans. Scheman har vanligtvis minst fyra färger och kan ofta laddas ner som enkla bilder och ibland som
Färgschemat ovan är typiskt för hur de flesta system presenteras: som enhetliga prover av plana färger. Denna uppsättning kan märkas som sådan:
- Glad
- Vänlig
- Samtida
- Tillfällig
- primär
Men gör en eller två färger sticka ut och olika adjektiv kan komma ihåg.
Bilden ovan har samma schema som presenterades i swatchen, men det är mindre avslappet och mer ökenlikt. Den här bilden betonar de varma färgerna. Isolerade fläckar av blått och grönt uppmärksammas genom att vara sparsigare. Den resulterande stämningen kan beskrivas som:
- Sandig
- Ljus
- Värma
- Kaki
- Grov
Valet av den dominerande färgen påverkar hur systemet visas.
Återigen, här använder vi samma färger, men till en helt annan ände. Den här bilden ser ut som en abstrakt världskarta, med öar av rött, grönt och brunt. Bilden är inte bara kallare - den är lite mörkare , även om den kommer från samma palett.
Att kunna känna igen bra färgkombinationer räcker inte, för färger appliceras sällan jämnt på en webbdesign. Att använda färgerna klokt och i rätt proportion är lika viktigt som att välja rätt färger.
Bakgrunden ställer in tonen
Den mest uppenbara platsen för att göra en inverkan med färg är i bakgrunden. Denna vida utbredning kan locka så mycket uppmärksamhet som innehållet placeras ovanpå det.
Trots att ha samma innehåll är designen till höger mycket varmare än den till vänster. Men mer händer här än en enkel färgbyte.
Innehållsraden i den gröna designen (dvs den vita texten på rött) håller sig egna mot den breda gröna bakgrunden. Men den röda bakgrunden till höger tvättar ut de piggiga gröna stängerna. Detta beror på att, förutom att vara varmare, denna speciella nyans av rött är mer mättad. Faktum är att de enda elementen med tillräcklig synvikt för att motverka den röda bakgrunden är de stora rubrikerna. Den lilla kroppstexten och bleka gröna stängerna bleka i jämförelse. Det är inte nödvändigtvis dåligt; En kraftfull bakgrund ger sidan betydande närvaro. Den gröna designen är svalare och ger innehållet en mer avslappnad omgivning.
Vilken användning av färg är bättre? Det beror på din avsikt. Ska besökare betrakta innehållet som avslappnat eller djärvt? Vill du spela ner de färgade staplarna? Är du orolig att bakgrunden kommer att överbrygga informationen? Är en färg viktigare än en annan i din branding? Svaren på dessa frågor kommer att avgöra vilken färg som är "rätt". Denna enda färgpalett presenterar två olika lösningar.
Färg bakom text
Samspelet mellan text och bakgrund påverkas av storleken och kvantiteten av varje. Effekten av text på sidan beror lika mycket på texten i texten som på bakgrundens färg - trots den allmänna tendensen att oroa sig mer om bakgrunden.
Ovan fungerar ljus text mot en mörk bakgrund bättre när typen är stor. Lånade från det färgschema vi började med, är detta guld mindre lämpligt för kroppstext (dvs. ca 13 pixlar eller mindre). Lösningen är enkel:
Ovan är den lilla texten i de två sista raderna i en ljusare nyans av guld. Den är inte helt vit, men mycket mer läslig än de två linjerna i den första bilden. Tillagd kontrast hindrar den lilla texten från att överföras av bakgrunden. Nyckeln är att använda ditt färgschema som utgångspunkt, inte en fast regel. Om en bakgrundsfärg hotar att överväldiga mindre element, ökar du kontrasten, som håller ordningens integritet och håller innehållet läsbart.
Text på vit
Många webbsidor har antingen vita bakgrunder eller vita innehållsområden. Men "vit" betyder inte "tomt". Stora vita vittor påverkar hur färg uppfattas. Till exempel:
Färgerna vi började med ser ljusare ut när de används för text.
- Den relativt mörkblå skapar tillräckligt kontrast för att göra texten läsbar mot vit.
- Denna speciella nyans av grön blandar sig i bakgrunden. Om avsikten är harmoni, så fungerar den gröna.
- Röd + vit = rosa eller persika.
- Guldet ser nästan ut som en sepiaton.
Vit tenderar att ljusa allt det rör vid. Om du vill ställa in ett lätt humör, kan någon av ovanstående kombinationer fungera. För mer effekt kan du mörka färgschemat.
Spelar med färgscheman i Photoshop
Om din design inte kräver att alla färger i ditt system används jämnt, bör du testa en eller två färger för dominans. Tricket är att hitta ett schema med färger som fungerar både med varandra och med den dominerande färgen.
Lyckligtvis har vi en enkel process för att testa färger. För att se hur olika färgåtgärder kan påverka en design, följ dessa steg i Photoshop.
1. Hitta eller skapa ett färgschema. Vårt exempel har fem färger, men ett nummer ovanför ett kommer att fungera.
2. Skapa en ny bild i Photoshop, 500 x 500 pixlar, med en vit bakgrund.
3. Skapa fyra nya lager (ditt bakgrundslager blir det femte). Om ditt schema har mer eller färre än fem färger, lägg till eller ta bort lager i enlighet med detta.
4. Fyll varje lager med en annan färg från ditt schema.
5. Lägg till en lagermask för varje lager ovanför bakgrundsskiktet. Din lagerpalett ska se ut så här:
Ovan applicerades paletten Photoshop-lag, med ett lager per färg och med lagmasker.
6. Kör "Thresholdizer" -åtgärden på varje lager mask - men inte på lagren själva.
Ovanför, när du använder "Thresholdizer" -åtgärden, var noga med att välja skiktmasken , inte det faktiska skiktet. Om du genom misstag kör åtgärden på skiktet, så var glad för "Ångra" -funktionen.
Denna åtgärd skapar oftast ett slumpmässigt mönster i en lagermaske. Härifrån tar designern laddning: med "Threshold" -kontrollen. Skjut tröskelkontrollen till vänster för att avslöja mer av ett visst lager och rätt att avslöja mindre. Genom att tillämpa denna åtgärd på varje skiktmaske kommer en färg att dominera de andra i ett slumpmässigt mönster.
I det här fallet bestämmer tröskelkontrollen hur mycket av ett givet lager som är synligt. En mestadels svart skiktmaske döljer skiktet; mestadels vit avslöjar skiktet. Genom att köra tröskelbehandlingsåtgärden på varje skiktmaske skapas en medley av färger så här:
Detta Photoshop-dokument visar hur en design kan se ut om den gula dominerar. Justera färgerna nu är ett snap: för att ge en färg mer (eller mindre) kontrast, använd bara ett Photoshop-kommando (t.ex. Bild> Justeringar> Färgtonning ).
Till exempel ser den gröna nyans som fungerade bra med blått tidigare inte så bra nu att blå inte dominerar. Några experiment avslöjar följande:
Här har vi två variationer av vårt ursprungliga färgschema. Variation # 1 mörker grön något. Det fungerar nästan. Variation # 2 ändrar allt utom det gula för att lägga till kontrast och justera nyanserna.
Vad händer om vår design hade mestadels blått istället för gul? Den här blåskärmen är mörk nog för att kontrastera med de andra färgerna, men ingen av dem samordnar - de är alla primära. Genom att välja en ny dominant, har vi skapat ett nytt problem.
Variation # 1 ovan ersätter det mjuka röda med en mörkblå och förvandlar grönfärgen till en blek mynt. Variation # 2 går åt andra håll, med mer röd (eller burgund) istället för mindre.
Förtjänsten av någon av dessa variationer är subjektiv. Idealt sett skulle du tillämpa dem på den verkliga designen innan du fattar ett slutgiltigt beslut. Nyckeln är på gång: Få en palett, välj en dominerande färg och få de andra att arbeta med det.
Om "Thresholdizer" -åtgärden
Det finns inget mysterium med denna åtgärd. Du kan få samma effekt genom att använda Filter> Render> Clouds eller Filter> Render> Difference Clouds till en lagmaske. Denna åtgärd avgränsar bara processen och organiserar tröskelkommandot i deciler.
Vänligen gärna ladda ner "Thresholdizer" -åtgärden . Bättre än, skapa din egen och dela den med alla genom att ge en länk i kommentarerna nedan.
Utvärdera färg utan åtgärd
Självklart finns det sätt att döma färg utan att spela med tröskelvärdet. Börja med att välja en huvudfärg och gör sedan de andra med det.
Här är vårt ursprungliga färgschema, med brunt som primärfärg.
Vi har tonat ner det gröna och mättat rött. Hårda färger står på egen hand, som det blå gör (vilket inte har justerats).
Här har vi bleknat den gröna, gula och röda. Dessa lågmälda "accenter" blandas med den bruna bakgrunden. Mörk det blå för att skapa kontrast.
De tre mörkare primära färgerna går bra mot mediet brunt, medan den blekgula tjänar som accentfärg.
Återigen kommer det slutgiltiga beslutet när designern tillämpar dessa system på den verkliga designen. Fram till dess är dessa bara utgångspunkter: användbara verktyg för att undvika konflikter, praktiska referenser för att hålla mönster på temat och ett bra sätt att utforska kombinationer.
Färg är bara ett designelement. Färganvändning är en färdighet man måste träna för att styra humör, att odla sin smak och att kunna se möjligheter i några färgrutor.
Bara en sak är säker: den gröna måste gå.
Skriven uteslutande för Webdesigner Depot av Ben Gremillion. Ben är en frilans webbdesigner vem löser kommunikationsproblem med bättre design.
Hur testar du färger? Vilka är dina favorit sätt att skapa färgscheman? Dela dina åsikter i kommentarerna nedan.