Anwenden von Farbschemata Erfordert es, sie neu zu sehen
Es gibt viele Online-Ressourcen für Designer, um tolle Farbkombinationen zu entdecken, zu optimieren und herunterzuladen.
Das Spielen mit komplementären, analogen, monochromen und anderen Kombinationen eröffnet uns aufregende Möglichkeiten, und es gibt keinen Mangel an Werbegeschenken.
Aber es gibt einen Unterschied zwischen einem gewinnenden Farbschema und einem gewinnenden Design, das es verwendet.
Die Wahl der Farben ist der erste Schritt. Die Anpassung an Ihre Designanforderungen ist ebenso wichtig.
Was in einem Farbfeld gut aussieht, funktioniert auf einer Webseite möglicherweise nicht gut - aber das heißt nicht, dass Sie auf Platz eins zurückkehren müssen. Wir werden hier neue Möglichkeiten untersuchen, um Farbschemata zu betrachten.
Farbe spielt eine wichtige Rolle dabei, wie Menschen Inhalte aufnehmen. Ob ein Design reserviert oder laut, freundlich oder unheimlich, warm oder kühl ist, die Besucher einer Website werden sofort von dem Ton beeinflusst, der durch das Layout, die Typografie, die Bilder und natürlich die Farbtöne und Werte, die das Farbschema ausmachen, gesetzt wird.
Die Auswahl von Farben kann der subjektivste Job im Webdesign sein. Einige Farben funktionieren gut zusammen; andere, nicht so sehr. Einige Kombinationen sprechen bestimmte Leute an. Mehr als ein Satz Farben kann zum selben Design passen.
Glücklicherweise gibt es viele Ressourcen, die helfen können. Farbpalettengeneratoren wie Farbschema-Designer , Adobe Kuler , Voliere Toucan und Tägliches Farbschema sind unter den großen Orten Farbkombinationen zu finden, die effektiv eine Stimmung erzeugen. Aber eine Palette zu finden ist nur der erste Schritt. Die potenzielle Wirksamkeit eines Farbschemas kann durch die Art der Anwendung beeinträchtigt werden.
Die Anzahl der Farben in einem Schema macht einen Unterschied
Ein Farbschema ist eine Zusammenstellung von Farben, die für die Zusammenarbeit ausgewählt wurden. Schemata haben normalerweise mindestens vier Farben und können oft als einfache Bilder und manchmal als heruntergeladen werden
Das obige Farbschema ist typisch dafür, wie die meisten Schemata dargestellt werden: als einheitliche Muster von flachen Farben. Dieser Satz könnte als solcher gekennzeichnet werden:
- Heiter
- Freundlich
- Zeitgenössisch
- Beiläufig
- Vorwahlen
Aber heben Sie ein oder zwei Farben hervor und verschiedene Adjektive kommen Ihnen vielleicht in den Sinn.
Das Bild oben hat das gleiche Schema, das im Farbfeld gezeigt wurde, aber es ist weniger lässig und wüstenähnlich. Dieses Bild betont die warmen Farben. Isolierte Flecken aus Blau und Grün ziehen die Aufmerksamkeit auf sich, weil sie spärlicher sind. Die resultierende Stimmung könnte beschrieben werden als:
- Sandig
- Hell
- Warm
- Khaki
- Rau
Die Wahl der dominierenden Farbe beeinflusst die Darstellung des Schemas.
Auch hier verwenden wir die gleichen Farben, aber zu einem ganz anderen Ende. Dieses Bild sieht etwas wie eine abstrakte Weltkarte mit Inseln von Rot, Grün und Braun aus. Das Bild ist nicht nur cooler - es ist etwas dunkler , obwohl es aus der gleichen Palette kommt.
Gute Farbkombinationen zu erkennen reicht nicht aus, da Farben selten gleichmäßig auf ein Website-Design angewendet werden. Die Farben weise und im richtigen Verhältnis zu verwenden, ist genauso wichtig wie die Wahl der richtigen Farben.
Der Hintergrund legt den Ton fest
Der offensichtlichste Ort, um mit Farbe zu wirken, ist im Hintergrund. Diese Weite kann genauso viel Aufmerksamkeit erregen wie der darüber gelegte Inhalt.
Trotz des identischen Inhalts ist das Design auf der rechten Seite viel wärmer als das auf der linken Seite. Aber hier passiert mehr als ein einfacher Farbwechsel.
Die Inhaltsbalken im grünen Design (dh der weiße Text auf Rot) halten sich gegen den breiten grünen Hintergrund. Aber der rote Hintergrund auf der rechten Seite wäscht die mickrigen grünen Balken. Dies liegt daran, dass diese besondere Rottonfarbe nicht nur wärmer, sondern auch gesättigter ist. Tatsächlich sind die großen Elemente die einzigen Elemente, die genug visuelles Gewicht haben, um dem roten Hintergrund zu begegnen. Der kleine Körpertext und verblasste grüne Balken verblassen im Vergleich. Das ist nicht unbedingt schlecht. Ein kraftvoller Hintergrund verleiht der Seite eine substanzielle Präsenz. Das grüne Design ist kühler und verleiht dem Inhalt eine lässigere Umgebung.
Welcher Farbgebrauch ist besser? Es hängt von deiner Absicht ab. Sollten Besucher den Inhalt als entspannt oder fett empfinden? Willst du die farbigen Balken runterspielen? Sind Sie besorgt, dass der Hintergrund die Information überwältigen wird? Ist eine Farbe in Ihrem Branding wichtiger als eine andere? Die Antworten auf diese Fragen bestimmen, welche Farbe "richtig" ist. Diese einfarbige Palette bietet zwei verschiedene Lösungen.
Farbe hinter Text
Die Interaktion von Text und Hintergrund wird von der Größe und Menge der einzelnen Elemente beeinflusst. Die Wirkung von Text auf der Seite hängt sowohl von der Farbe des Textes selbst als auch von der Hintergrundfarbe ab - trotz der allgemeinen Tendenz, sich mehr um den Hintergrund zu sorgen.
Oben funktioniert heller Text vor einem dunklen Hintergrund besser, wenn der Typ groß ist. Entliehen von dem Farbschema, mit dem wir begonnen haben, ist dieses Gold weniger geeignet für Textkörper (dh etwa 13 Pixel oder kleiner). Die Lösung ist einfach:
Oben ist der kleine Text in den letzten zwei Reihen in einem blasseren Farbton von Gold. Es ist nicht ganz weiß, aber viel lesbarer als die beiden Zeilen im ersten Bild. Zusätzlicher Kontrast verhindert, dass der kleine Text vom Hintergrund überstrapaziert wird. Der Schlüssel besteht darin, das Farbschema als Ausgangspunkt und nicht als feste Regel zu verwenden. Wenn eine Hintergrundfarbe kleinere Elemente zu überfordern droht, dann erhöhen Sie den Kontrast, der die Integrität des Schemas erhält und den Inhalt lesbar hält.
Text auf Weiß
Viele Webseiten haben entweder weiße Hintergründe oder weiße Inhaltsbereiche. Aber "weiß" bedeutet nicht "leer". Große weiße Schwaden beeinflussen, wie die Farbe wahrgenommen wird. Beispielsweise:
Die Farben, mit denen wir begonnen haben, sehen heller aus, wenn sie für Text verwendet werden.
- Das relativ dunkle Blau schafft genug Kontrast, um den Text gegen Weiß lesbar zu machen.
- Dieser besondere Grünton fügt sich in den Hintergrund ein. Wenn die Absicht Harmonie ist, dann funktioniert das Grün.
- Rot + Weiß = Pink oder Pfirsich.
- Das Gold sieht fast wie ein Sepiaton aus.
Weiß neigt dazu, alles aufzuhellen, was es berührt. Wenn Sie eine Lichtstimmung einstellen möchten, funktioniert möglicherweise eine der oben genannten Kombinationen. Für mehr Wirkung könnten Sie das Farbschema verdunkeln.
Mit Farbschemas in Photoshop spielen
Wenn in Ihrem Design nicht alle Farben in Ihrem Schema gleichmäßig verwendet werden, sollten Sie eine oder zwei Farben auf Dominanz testen. Der Trick besteht darin, ein Schema mit Farben zu finden, die sowohl miteinander als auch mit der dominierenden Farbe funktionieren.
Glücklicherweise haben wir einen einfachen Prozess, Farben zu testen. Gehen Sie folgendermaßen in Photoshop vor, um zu sehen, wie verschiedene Maße von Farbe ein Design beeinflussen können.
1. Suchen oder erstellen Sie ein Farbschema. Unser Beispiel hat fünf Farben, aber jede Zahl über eins funktioniert.
2. Erstellen Sie ein neues Bild in Photoshop, 500 x 500 Pixel, mit einem weißen Hintergrund.
3. Erstellen Sie vier neue Ebenen (Ihre Hintergrundebene ist die fünfte Ebene). Wenn Ihr Schema mehr oder weniger als fünf Farben hat, fügen Sie Layer entsprechend hinzu oder entfernen Sie sie.
4. Füllen Sie jede Ebene mit einer anderen Farbe als Ihr Schema.
5. Fügen Sie jeder Ebene über der Hintergrundebene eine Ebenenmaske hinzu. Ihre Ebenen-Palette sollte folgendermaßen aussehen:
Oben, die Photoshop-Ebenen-Palette, mit einer Ebene pro Farbe und mit angewendeten Ebenenmasken.
6. Führen Sie die Aktion "Schwellenwert" aus auf jeder Ebenenmaske - aber nicht auf den Ebenen selbst.
Wenn Sie die Aktion "Thresholdizer" verwenden, achten Sie darauf, die Ebenenmaske und nicht die tatsächliche Ebene auszuwählen. Wenn Sie die Aktion versehentlich auf der Ebene ausführen, freuen Sie sich über die Funktion "Rückgängig machen".
Diese Aktion erzeugt meist ein zufälliges Muster in einer Ebenenmaske. Von hier übernimmt der Designer die Verantwortung: mit der "Threshold" -Kontrolle. Schieben Sie den Regler "Threshold" nach links, um mehr von einer bestimmten Ebene anzuzeigen, und nach rechts, um weniger zu zeigen. Wenn Sie diese Aktion auf jede Ebenenmaske anwenden, wird eine Farbe die anderen in einem zufälligen Muster dominieren.
In diesem Fall bestimmt der Schwellwert, wie viel von einem bestimmten Layer sichtbar ist. Eine meist schwarze Ebenenmaske verbirgt die Ebene; meist weiß zeigt die Schicht. Wenn Sie die Aktion "Schwellenwert" für jede Ebenenmaske ausführen, wird ein Gemisch von Farben wie folgt erstellt:
Dieses Photoshop-Dokument zeigt, wie ein Design aussehen könnte, wenn das Gelb dominant ist. Das Anpassen der Farben ist jetzt ein Kinderspiel: Um einer Farbe mehr (oder weniger) Kontrast zu geben, verwenden Sie einfach einen Photoshop-Befehl (z. B. Bild> Anpassungen> Farbton-Sättigung ).
Zum Beispiel sieht der Grünton, der früher mit Blau gut funktionierte, nicht mehr gut aus, da Blau nicht dominant ist. Ein paar Experimente zeigen folgendes:
Hier haben wir zwei Variationen unseres ursprünglichen Farbschemas. Variation # 1 dunkelt das Grün leicht ab. Es funktioniert fast. Variation # 2 ändert alles außer dem Gelb, um Kontrast hinzuzufügen und die Farbtöne auszurichten.
Was wäre, wenn unser Design eher blau statt gelb hätte? Dieser Blauton ist dunkel genug, um mit den anderen Farben zu kontrastieren, aber keiner von ihnen koordiniert - sie sind alle Primärfarben. Durch die Wahl einer neuen Dominante haben wir ein neues Problem geschaffen.
Variante Nr. 1 oben ersetzt das weiche Rot durch ein dunkleres Blau und verwandelt den Grünton in eine blasse Minze. Variante 2 geht in die andere Richtung und verwendet mehr Rot (oder Burgunder) statt weniger.
Der Vorteil einer dieser Variationen ist subjektiv. Im Idealfall würden Sie sie auf das tatsächliche Design anwenden, bevor Sie eine endgültige Entscheidung treffen. Der Schlüssel ist dabei: Holen Sie sich eine Palette, wählen Sie eine dominante Farbe und lassen Sie die anderen damit arbeiten.
Über die Aktion "Thresholdizer"
Es ist kein Geheimnis für diese Aktion. Sie können den gleichen Effekt erzielen, indem Sie Filter> Rendern> Wolken oder Filter> Rendern> Differenzwolken auf eine Ebenenmaske anwenden. Diese Aktion verfeinert lediglich den Prozess und organisiert den Threshold-Befehl in Dezile.
Bitte zögern Sie nicht Laden Sie die Aktion "Thresholdizer" herunter . Besser noch, erstellen Sie Ihre eigenen und teilen Sie es mit allen durch einen Link in den Kommentaren unten.
Farbe ohne die Aktion auswerten
Natürlich gibt es Möglichkeiten, Farbe zu beurteilen, ohne mit Threshold zu spielen. Beginnen Sie damit, eine Hauptfarbe auszuwählen und dann die anderen damit arbeiten zu lassen.
Hier ist unser originelles Farbschema mit Braun als Grundfarbe.
Wir haben das Grün abgeschwächt und das Rot gesättigt. Härtere Farben stehen für sich alleine, wie das Blau tut (was nicht angepasst wurde).
Hier haben wir das Grün, Gelb und Rot verblasst. Diese zurückhaltenden "Akzente" verschmelzen mit dem braunen Hintergrund. Verdunkle das Blau, um Kontrast zu erzeugen.
Die drei dunkleren Grundfarben gehen gut gegen das mittlere Braun, während das blasse Gelb als Akzentfarbe dient.
Wiederum kommt die endgültige Entscheidung, wenn der Designer diese Schemata auf das tatsächliche Design anwendet. Bis dahin sind dies nur Ansatzpunkte: nützliche Tools, um Konflikte zu vermeiden, praktische Hinweise, um Designs zum Thema zu behalten und eine großartige Möglichkeit, Kombinationen zu erkunden.
Farbe ist nur ein Designelement. Farbgebrauch ist eine Fähigkeit, die man üben muss, um die Stimmung zu kontrollieren, den eigenen Geschmack zu kultivieren und in einigen Farbfeldern Möglichkeiten zu sehen.
Nur eines ist sicher: Das Grün muss gehen.
Geschrieben exklusiv für Webdesigner Depot von Ben Gremillion. Ben ist freiberuflich tätig Webdesigner Wer löst Kommunikationsprobleme mit besserem Design?
Wie testen Sie Farben? Was sind Ihre bevorzugten Möglichkeiten, Farbschemata zu erstellen? Teilen Sie Ihre Ansichten in den Kommentaren unten.