Als u kleurenschema's wilt toepassen, moet u ze opnieuw bekijken
Veel online bronnen bestaan voor ontwerpers om geweldige kleurencombinaties te verkennen, tweaken en downloaden.
Spelen met complementaire, analoge, monochromatische en andere combinaties opent ons voor spannende mogelijkheden, en er is geen tekort aan freebies.
Maar er is een verschil tussen een winnend kleurenschema en een winnend ontwerp dat het gebruikt.
Kleuren kiezen is de eerste stap. Aanpassen aan uw ontwerpvereisten is net zo belangrijk.
Wat er in een staal goed uitziet, werkt mogelijk niet goed op een webpagina, maar dat betekent niet dat je terug moet keren naar het kwadraat. We zullen hier nieuwe manieren verkennen om naar kleurenschema's te kijken.
Kleur speelt een belangrijke rol in hoe mensen inhoud opnemen. Of een ontwerp nu gereserveerd of hard, vriendelijk of sinister, warm of cool is, bezoekers van een website worden onmiddellijk beïnvloed door de toon die wordt bepaald door de lay-out, typografie, beelden en, natuurlijk, de tinten en waarden die het kleurenschema vormen.
Kleuren kiezen kan de meest subjectieve taak zijn in webdesign. Sommige kleuren werken goed samen; anderen, niet zo veel. Sommige combinaties spreken bepaalde mensen aan. Meer dan één reeks kleuren kan bij hetzelfde ontwerp passen.
Gelukkig zijn er veel bronnen om te helpen. Kleurenpalet-generators zoals Kleurenschema ontwerper , Adobe Kuler , Volière Toucan en Dagelijkse kleurenschema zijn tussen de grote plaatsen om combinaties van kleuren te vinden die effectief een stemming instellen. Maar het vinden van een palet is slechts de eerste stap. De potentiële effectiviteit van elk kleurenschema kan worden aangetast door de manier waarop het wordt toegepast .
Het aantal kleuren in een schema maakt een verschil
Een kleurenschema is een reeks kleuren die is gekozen om samen te werken. Regelingen hebben meestal ten minste vier kleuren en kunnen vaak worden gedownload als eenvoudige afbeeldingen en soms als
Het kleurenschema hierboven is typerend voor hoe de meeste schema's worden gepresenteerd: als uniforme monsters van vlakke kleuren. Deze set kan als zodanig worden getagd:
- Vrolijk
- Vriendelijk
- tijdgenoot
- toevallig
- voorverkiezingen
Maar zorg dat er een of twee kleuren opvallen en denk aan verschillende adjectieven.
De afbeelding hierboven heeft hetzelfde schema dat in het staal werd gepresenteerd, maar het is minder casual en meer woestijnachtig. Deze afbeelding benadrukt de warme kleuren. Geïsoleerde stukjes blauw en groen trekken de aandacht door spitser te zijn. De resulterende stemming kan worden omschreven als:
- zanderig
- Helder
- Warm
- Khaki
- Ruw
De keuze voor de dominante kleur beïnvloedt de manier waarop het schema wordt weergegeven.
Nogmaals, hier gebruiken we dezelfde kleuren, maar met een heel ander doel. Deze afbeelding lijkt op een abstracte wereldkaart, met eilanden van rood, groen en bruin. Het beeld is niet alleen cooler, het is iets donkerder , ook al komt het uit hetzelfde palet.
Goede kleurencombinaties herkennen is niet genoeg, omdat kleuren zelden worden toegepast op een website-ontwerp. De kleuren verstandig en in de juiste verhouding gebruiken is net zo belangrijk als het kiezen van de juiste kleuren.
De achtergrond stelt de toon in
De meest voor de hand liggende plaats om impact te maken met kleur is op de achtergrond. Deze brede uitgestrektheid kan evenveel aandacht trekken als de inhoud die eroverheen wordt geplaatst.
Ondanks dat de inhoud identiek is, is het ontwerp aan de rechterkant veel warmer dan aan de linkerkant. Maar er gebeurt hier meer dan een eenvoudige kleurruil.
De inhoudbalken in het groene ontwerp (dwz de witte tekst op rood) houden hun eigen tegen de brede groene achtergrond. Maar de rode achtergrond rechts spoelt de nietige groene balken uit. Dit komt omdat, naast het feit dat het warmer is, deze specifieke tint rood meer verzadigd is. De enige elementen met voldoende visueel gewicht om de rode achtergrond tegen te gaan, zijn de grote koppen. De kleine tekst van het lichaam en de vervaagde groene balken bleken in vergelijking. Dat is niet noodzakelijk slecht; een krachtige achtergrond geeft de pagina substantiële aanwezigheid. Het groene ontwerp is koeler en geeft de inhoud een meer casual omgeving.
Welk kleurgebruik is beter? Het hangt van je intentie af. Moeten bezoekers de inhoud als ontspannen of vet beschouwen? Wil je de gekleurde balken verslaan? Ben je bang dat de achtergrond de informatie zal overheersen? Is de ene kleur belangrijker dan de andere in uw branding? De antwoorden op deze vragen bepalen welke kleur "goed" is. Dit kleurenpalet biedt twee verschillende oplossingen.
Kleur achter tekst
De interactie tussen tekst en achtergrond wordt beïnvloed door de grootte en de hoeveelheid van elk. Het effect van tekst op de pagina hangt evenzeer af van de kleur van de tekst zelf als van de achtergrondkleur, ondanks de algemene neiging om meer zorgen te maken over de achtergrond.
Hierboven werkt lichte tekst tegen een donkere achtergrond beter wanneer het type groot is. Geleend van het kleurenschema waarmee we begonnen, is dit goud minder geschikt voor body-tekst (dus ongeveer 13 pixels of kleiner). De oplossing is eenvoudig:
Hierboven is de kleine tekst in de laatste twee rijen in een blekere tint goud. Het is niet helemaal wit, maar veel leesbaarder dan de twee lijnen in de eerste afbeelding. Contrast toegevoegd voorkomt dat de kleine tekst wordt overmeesterd door de achtergrond. De sleutel is om uw kleurenschema te gebruiken als een startpunt, niet als een vaste regel. Als een achtergrondkleur dreigt kleinere elementen te overweldigen, verhoog dan het contrast, dat de integriteit van het schema zal behouden en de inhoud leesbaar zal houden.
Tekst op wit
Veel webpagina's hebben witte achtergronden of witte inhoud. Maar 'wit' betekent niet 'leeg'. Grote witte strepen beïnvloeden hoe de kleur wordt waargenomen. Bijvoorbeeld:
De kleuren waarmee we begonnen, zien er lichter uit bij gebruik voor tekst.
- Het relatief donkerblauwe contrast zorgt voor voldoende contrast om de tekst leesbaar te maken tegen wit.
- Deze specifieke tint groen voegt zich naar de achtergrond. Als de bedoeling harmonie is, dan werkt de groene.
- Rood + wit = roze of perzik.
- Het goud lijkt bijna op een sepiatint.
Wit heeft de neiging om alles wat het aanraakt op te fleuren. Als u een lichte bui wilt instellen, werkt een van de bovenstaande combinaties mogelijk. Voor meer impact zou u het kleurenschema donkerder kunnen maken.
Spelen met kleurenschema's in Photoshop
Als uw ontwerp niet vereist dat alle kleuren in uw schema gelijkmatig worden gebruikt, moet u een of twee kleuren testen op dominantie. De kunst is om een schema te vinden met kleuren die zowel met elkaar werken als met de dominante kleur.
Gelukkig hebben we een eenvoudig proces om kleuren te testen. Als u wilt zien hoe verschillende kleurmetingen een ontwerp kunnen beïnvloeden, volgt u deze stappen in Photoshop.
1. Zoek of maak een kleurenschema. Ons voorbeeld heeft vijf kleuren, maar elk nummer boven één werkt.
2. Maak een nieuwe afbeelding in Photoshop, 500 x 500 pixels, met een witte achtergrond.
3. Maak vier nieuwe lagen (uw achtergrondlaag zal de vijfde zijn). Als uw schema meer of minder dan vijf kleuren bevat, voegt u dienovereenkomstig lagen toe of verwijdert u deze.
4. Vul elke laag met een andere kleur dan je schema.
5. Voeg een laagmasker toe aan elke laag boven de achtergrondlaag. Je lagenpalet zou er als volgt uit moeten zien:
Hierboven het palet met Photoshop-lagen, met één laag per kleur en met laagmaskers.
6. Voer de actie "Thresholdizer" uit op elk laagmasker, maar niet op de lagen zelf.
Gebruik hierboven, bij gebruik van de actie "Thresholdizer", het laagmasker en niet de eigenlijke laag. Als u de actie per ongeluk op de laag uitvoert, wees dan blij met de functie "Ongedaan maken".
Deze actie maakt meestal een willekeurig patroon in een laagmasker. Vanaf hier neemt de ontwerper de leiding: met de "Threshold" -regeling. Schuif de Threshold-regelaar naar links om meer van een bepaalde laag zichtbaar te maken en naar rechts om minder zichtbaar te maken. Door deze actie op elk laagmasker toe te passen, zal één kleur de anderen in een willekeurig patroon domineren.
In dit geval bepaalt de Threshold-regelaar hoeveel van een bepaalde laag zichtbaar is. Een meestal zwarte laagmasker verbergt de laag; meestal wit onthult de laag. Als u de actie Thresholdizer uitvoert op elk laagmasker, ontstaat er een mengeling van kleuren zoals deze:
Dit Photoshop-document laat zien hoe een ontwerp eruit zou kunnen zien als het geel dominant was. De kleuren nu aanpassen is een fluitje: om een kleur meer (of minder) contrast te geven, gebruikt u gewoon een Photoshop-opdracht (zoals Afbeelding> Aanpassingen> Tintverzadiging ).
Bijvoorbeeld, de schaduw van groen die goed werkte met blauw eerder ziet er niet erg goed uit nu blauw niet dominant is. Een paar experimenten onthullen het volgende:
Hier hebben we twee variaties op ons oorspronkelijke kleurenschema. Variatie # 1 maakt de green iets donkerder. Het werkt bijna. Variatie # 2 verandert alles behalve het geel om contrast toe te voegen en de tinten uit te lijnen.
Wat als ons ontwerp grotendeels blauw was in plaats van geel? Deze blauwe tint is donker genoeg om te contrasteren met de andere kleuren, maar geen van hen coördineert - het zijn allemaal voorverkiezingen. Door een nieuwe dominant te kiezen, hebben we een nieuw probleem gecreëerd.
Variatie # 1 hierboven vervangt het zachte rood door een donkerder blauw en verandert de schaduw van groen in een bleke munt. Variatie # 2 gaat de andere kant op, met meer rood (of bordeaux) in plaats van minder.
De verdienste van een van deze variaties is subjectief. Idealiter zou u ze toepassen op het eigenlijke ontwerp voordat u een definitieve beslissing neemt. De sleutel is in het proces: een palet krijgen, een dominante kleur kiezen en de anderen ermee laten werken.
Over de actie "Thresholdizer"
Er is geen mysterie aan deze actie. U kunt hetzelfde effect krijgen door Filter> Render> Wolken of Filter> Renderen> Difference Clouds toe te passen op een laagmasker. Deze actie verfijnt alleen het proces en organiseert het Threshold-commando in decielen.
Voel je vrij om download de actie "Thresholdizer" . Nog beter, maak je eigen en deel deze met iedereen door een link in de onderstaande opmerkingen te plaatsen.
Kleur evalueren zonder de actie
Natuurlijk zijn er manieren om kleur te beoordelen zonder met Threshold te spelen. Begin met het kiezen van één hoofdkleur en laat de anderen daarmee werken.
Dit is ons oorspronkelijke kleurenschema, met bruin als primaire kleur.
We hebben het groen afgezwaaid en het rood verzadigd. Zwaardere kleuren staan op zichzelf, zoals het blauw doet (dat niet is aangepast).
Hier zijn we groen, geel en rood vervaagd. Deze ingehouden "accenten" vermengen zich met de bruine achtergrond. Maak het blauw donkerder om contrast te creëren.
De drie donkerdere primaire kleuren gaan goed tegen het medium bruin, terwijl het lichtgeel als accentkleur dient.
Nogmaals, de uiteindelijke beslissing komt wanneer de ontwerper deze schema's toepast op het eigenlijke ontwerp. Tot die tijd zijn dit slechts startpunten: handige tools om botsingen te voorkomen, handige verwijzingen om ontwerpen op thema te houden en een geweldige manier om combinaties te verkennen.
Kleur is slechts een ontwerpelement. Kleurgebruik is een vaardigheid die je moet oefenen om de stemming te beheersen, om je smaak te cultiveren en om in een paar stalen de mogelijkheden te zien.
Slechts één ding is zeker: dat groen moet gaan.
Exclusief geschreven voor Webdesigner Depot door Ben Gremillion. Ben is een freelancer webdesigner die communicatieproblemen met beter ontwerp oplost.
Hoe test je kleuren? Wat zijn je favoriete manieren om kleurenschema's te maken? Deel uw mening in de opmerkingen hieronder.