Anvendelse af farveskemaer kræver, at de ses igen
Der findes mange online ressourcer til designere til at udforske, finjustere og downloade flotte farvekombinationer.
At spille med komplementære, analoge, monokromatiske og andre kombinationer åbner os for spændende muligheder, og der er ingen mangel på freebies.
Men der er forskel på et vindende farveskema og et vindende design, der bruger det.
Valg af farver er det første skridt. Tilpasning af dem til dine designkrav er lige så vigtigt.
Det, der ser godt ud i en farveprøve, fungerer muligvis ikke godt på en webside - men det betyder ikke, at du skal vende tilbage til den firkantede. Vi undersøger her nye måder at se på farveskemaer.
Farve spiller en vigtig rolle i, hvordan folk absorberer indhold. Uanset om et design er reserveret eller højt, venligt eller uhyggeligt, varmt eller køligt, bliver besøgende på et websted umiddelbart påvirket af tonen, der er fastsat af layoutet, typografi, billeddannelse og selvfølgelig nuancer og værdier, der omfatter dets farveskema.
Valg af farver kan være det mest subjektive job i webdesign. Nogle farver fungerer godt sammen; andre, ikke så meget. Nogle kombinationer appellerer til bestemte personer. Mere end et sæt farver kan passe til samme design.
Heldigvis findes der mange ressourcer til at hjælpe. Farvepaletgeneratorer som f.eks Color Scheme Designer , Adobe Kuler , Aviary Toucan og Daglig farveskema er blandt de store steder at finde kombinationer af farve, der effektivt sætter stemning. Men at finde en palette er kun det første skridt. Ethvert farveskema's potentielle effektivitet kan blive kompromitteret med den måde, den anvendes på .
Antallet af farver i en ordning gør en forskel
Et farveskema er et sæt farver, der er valgt til at arbejde sammen. Ordninger har normalt mindst fire farver og kan ofte downloades som enkle billeder og nogle gange som
Farveskemaet ovenfor er typisk for hvordan de fleste ordninger præsenteres: som ensartede prøver af flade farver. Dette sæt kan mærkes som sådan:
- Glad
- Venlige
- Moderne
- Casual
- Primary
Men gør en eller to farver skiller sig ud og forskellige adjektiver kan komme til at tænke på.
Billedet ovenfor har den samme ordning, der blev præsenteret i swatchen, men det er mindre afslappet og mere ørkenlignende. Dette billede fremhæver de varme farver. Isolerede pletter af blåt og grønt trækker opmærksomhed ved at være sparsommere. Det resulterende humør kunne beskrives som:
- Sandet
- Bright
- Varm
- khaki
- Ru
Valget af den dominerende farve påvirker, hvordan ordningen vises.
Igen bruger vi her de samme farver, men i en helt anden ende. Dette billede ser ud som et abstrakt verdenskort med øer af rød, grøn og brun. Billedet er ikke bare køligere, det er lidt mørkere , selvom det kommer fra samme palette.
At kunne genkende gode farvekombinationer er ikke nok, fordi farver sjældent påføres jævnt på et website design. Brug farverne klogt og i den rigtige del er lige så vigtigt som at vælge de rigtige farver.
Baggrunden indstiller tonen
Det mest oplagte sted at påvirke farve er i baggrunden. Denne vidvinkel kan tiltrække så meget opmærksomhed som indholdet placeret ovenpå det.
På trods af at have samme indhold, er designet til højre meget varmere end det til venstre. Men der sker mere her end en simpel farvebytte.
Indholdsstængerne i det grønne design (dvs. den hvide tekst på rødt) holder deres egen mod den brede grønne baggrund. Men den røde baggrund til højre vasker ud de stramme grønne stænger. Dette skyldes, foruden at være varmere, er denne særlige skygge af rød mere mættet. Faktisk er de eneste elementer med tilstrækkelig visuel vægt til at modvirke den røde baggrund de store overskrifter. Den lille tekst og de falmede grønne søjler er bleg i sammenligning. Det er ikke nødvendigvis dårligt; En kraftig baggrund giver siden en betydelig tilstedeværelse. Det grønne design er køligere og giver indholdet en mere afslappet omgivelser.
Hvilken brug af farve er bedre? Det afhænger af din hensigt. Skal besøgende betragte indholdet som afslappet eller fed? Vil du spille ned de farvede søjler? Er du bekymret for, at baggrunden vil overbelaste oplysningerne? Er en farve vigtigere end en anden i din branding? Svarene på disse spørgsmål afgør, hvilken farve der er "rigtig". Denne enkelt farvepalette præsenterer to forskellige løsninger.
Farve bag tekst
Samspillet mellem tekst og baggrund påvirkes af størrelsen og mængden af hver. Effekten af tekst på siden afhænger så meget af farven på selve teksten som på baggrundens farve - på trods af den generelle tendens til at bekymre sig mere om baggrunden.
Ovenfor fungerer lystekst mod en mørk baggrund bedre, når typen er stor. Lånt fra farveskemaet, vi begyndte med, er dette guld mindre egnet til krops tekst (dvs. ca. 13 pixels eller mindre). Løsningen er enkel:
Ovenfor er den lille tekst i de sidste to rækker i en lysere skygge af guld. Det er ikke helt hvidt, men meget mere læseligt end de to linjer i det første billede. Tilføjet kontrast holder den lille tekst fra at blive overstyret af baggrunden. Nøglen er at bruge dit farveskema som udgangspunkt, ikke en fast regel. Hvis en baggrundsfarve truer med at overvælde mindre elementer, så øg kontrasten, som vil bevare systemets integritet og holde indholdet læseligt.
Tekst på hvidt
Mange websider har enten hvide baggrunde eller hvide indholdsområder. Men "hvid" betyder ikke "tom". Store hvide skiver påvirker, hvordan farven opfattes. For eksempel:
De farver, vi begyndte med, ser lysere ud, når de bruges til tekst.
- Den relativt mørkeblå skaber nok kontrast til at gøre teksten læselig mod hvid.
- Denne særlige skygge af grøn blandes ind i baggrunden. Hvis hensigten er harmoni, så arbejder den grønne.
- Rød + hvid = pink eller fersken.
- Guldet ser næsten ud som en sepia tone.
Hvid har tendens til at lyse alt, hvad det berører. Hvis du vil indstille et lyst humør, kan en af ovennævnte kombinationer virke. For mere indflydelse kan du mørke farveskemaet.
Spiller med farveskemaer i Photoshop
Hvis dit design ikke kræver at alle farver i din ordning skal bruges jævnt, skal du teste en eller to farver for dominans. Tricket er at finde en ordning med farver, som virker både med hinanden og med den dominerende farve.
Heldigvis har vi en nem proces til at teste farver. For at se, hvordan forskellige farveforanstaltninger kan påvirke et design, skal du følge disse trin i Photoshop.
1. Find eller opret et farveskema. Vores eksempel har fem farver, men et tal over et vil fungere.
2. Opret et nyt billede i Photoshop, 500 x 500 pixel, med en hvid baggrund.
3. Opret fire nye lag (dit baggrundslag bliver den femte). Hvis din ordning har mere eller færre end fem farver, skal du tilføje eller fjerne lag i overensstemmelse hermed.
4. Udfyld hvert lag med en anden farve fra din ordning.
5. Tilføj en lagmaske til hvert lag over baggrundslaget. Din lagpalette skal se sådan ud:
Ovenfor blev Photoshop-lagpaletten, med et lag pr. Farve og med lagmasker anvendt.
6. Kør "Thresholdizer" -funktionen på hvert lag maske-men ikke på lagene selv.
Over, når du bruger "Thresholdizer" -aktionen, skal du sørge for at vælge lagmasken , ikke det faktiske lag. Hvis du fejler handlingen på laget ved en fejl, så vær glad for funktionen "Fortryd".
Denne handling skaber for det meste et tilfældigt mønster i en lagmaske. Herfra tager designeren afkald: med "Threshold" -kontrollen. Skub Threshold-kontrollen til venstre for at afsløre mere af et givet lag, og ret til at afsløre mindre. Ved at anvende denne handling på hver lagmaske vil en farve dominere de andre i et tilfældigt mønster.
I dette tilfælde bestemmer tærskelværdien, hvor meget af et givet lag der er synligt. Et mest svagt lag maske skjuler laget; mest hvid afslører laget. Hvis du kører tærskelværktøjsaktiviteten på hver lagmaske, oprettes der en medley af farver som denne:
Dette Photoshop-dokument viser, hvordan et design kan se ud, hvis den gule var dominerende. Justering af farverne nu er et snap: For at give en farve mere (eller mindre) kontrast, skal du bare bruge en Photoshop-kommando (f.eks. Billede> Justeringer> Farvemætning ).
For eksempel ser den grønne skygge, der fungerede godt med blå tidligere, ikke meget godt ud, da blå ikke er dominerende. Nogle eksperimenter afslører følgende:
Her har vi to variationer af vores originale farveskema. Variation # 1 mørkere grønt lidt. Det virker næsten. Variation # 2 ændrer alt undtagen det gule for at tilføje kontrast og justere nuanserne.
Hvad hvis vores design havde for det meste blåt i stedet for gul? Denne skygge af blå er mørk nok til at kontrastere med de andre farver, men ingen af dem koordinerer - de er alle primære. Ved at vælge en ny dominerende har vi lavet et nyt problem.
Variation # 1 ovenfor erstatter den bløde rød med en mørkere blå og forvandler grøntens farve til en bleg mynte. Variation # 2 går den anden vej med mere rød (eller burgunder) i stedet for mindre.
Fortjeneste for nogen af disse variationer er subjektiv. Ideelt set vil du anvende dem på det egentlige design, inden du træffer en endelig beslutning. Nøglen er i gang: Få en palette, vælg en dominerende farve og få de andre til at arbejde med det.
Om "Thresholdizer" -aktionen
Der er ikke noget mysterium for denne handling. Du kan få samme effekt ved at anvende Filter> Render> Clouds eller Filter> Render> Difference Clouds til en lagmaske. Denne handling forenkler blot processen, og organiserer kommandoen Threshold i deciler.
Du er velkommen til at download "Thresholdizer" handlingen . Endnu bedre, lav dit eget og del det med alle ved at give et link i kommentarerne nedenfor.
Evaluering af farve uden handling
Selvfølgelig er der måder at bedømme farve uden at spille med Threshold. Start med at vælge en hovedfarve, og få de andre til at arbejde med det.
Her er vores originale farveskema, med brun som den primære farve.
Vi har tonet ned den grønne og mættet den røde. Hårdere farver står på egen hånd, som den blå gør (som ikke er justeret).
Her har vi falmet den grønne, gule og røde. Disse lavnøgle "accenter" blandes med den brune baggrund. Mørk det blå for at skabe kontrast.
De tre mørkere primærfarver går godt imod mediet brunt, mens den lysegul tjener som accentfarve.
Igen kommer den endelige beslutning, når designeren anvender disse ordninger til selve designet. Indtil da er disse bare startpunkter: nyttige værktøjer til at undgå sammenstød, praktiske referencer for at holde design på tema og en fantastisk måde at udforske kombinationer på.
Farve er kun et designelement. Farveanvendelse er en færdighed, man må øve sig for at styre stemning, dyrke sin smag og blive i stand til at se muligheder i nogle få farveprøver.
Kun én ting er sikker: den grønne er nødt til at gå.
Skrevet udelukkende til Webdesigner Depot af Ben Gremillion. Ben er freelance webdesigner hvem løser kommunikationsproblemer med bedre design.
Hvordan tester du farver? Hvad er dine yndlingsmåder til at oprette farveskemaer? Del dine synspunkter i kommentarerne nedenfor.