In fast jedem Design ist Farbe ein wichtiger Bestandteil. Egal, ob Sie ein Fan von hellen, kräftigen Farbtönen sind oder ein eher minimalistisches Schwarz-Weiß bevorzugen: Die Verwendung von Farbe kann einen großen Einfluss auf das gesamte Design haben.
Eine Möglichkeit, Farbe zu verwenden, um eine Aussage zu treffen, ist ein Design, das eine Farbüberlagerung enthält. Dies bedeutet, dass Sie ein Bild oder Video mit einem halbtransparenten Farbfeld abdecken. Der Effekt kann einem Bild eine Bedeutung verleihen, die Aufmerksamkeit auf ein Design lenken und Ihnen helfen, die meisten begrenzten künstlerischen Entscheidungen zu treffen.
Heute werden wir uns eine Vielzahl von Farbüberlagerungen ansehen, die als Inspiration für die Erstellung Ihrer eigenen dienen sollen.
Versuchen Sie einen Farbverlauf
Steigungen sind wieder cool. Sie sind auch eine großartige (und auffällige) Option, wenn Sie mit einer Farbüberlagerung arbeiten möchten.
Besonders schön an einem Farbverlauf ist, dass Sie mit ein paar Farben arbeiten können - denken Sie hier an Ihr Branding - oder verwenden Sie eine einzige Farbe, um den Fokus zu erzeugen. Helle Paarungen können Benutzer in das Design einbeziehen und Bildern Funken verleihen.
Ein Großteil dieses Trends lässt sich auf Spotify zurückführen, wo mit Verlaufsüberlagern und Duoton-Überlagerungen begonnen wurde, Playlisten hervorzuheben. Die Farbe gab den Bildern, die die Benutzer gewohnt waren (Pressefotos von Musikern), neues Leben.
Dieses Konzept ist auch für Sie leicht zu replizieren.
- Wähle ein Foto aus.
- Erstellen Sie einen Farbverlauf mit Markenfarben.
- Habe Spaß!
Volltonfarben Stellen Sie einen Ton ein
Eine durchgehende Farbüberlagerung kann genauso auffällig sein wie ein Verlaufsmuster, hat jedoch oft eine deutlichere Bedeutung, die mit der Farbauswahl verknüpft werden kann. Betrachten Sie zum Beispiel eine Sepia-Überlagerung. Es ruft sofort Gefühle alter Zeiten und Geschichte hervor.
Dasselbe gilt für die Auswahl einer trendigen Farbauswahl. Durch die Verwendung einer der hellen, satten Farben, die mit flachem oder materiellem Design verbunden sind, können Sie Gefühle der Moderne oder der Mode auslösen.
Wenn Sie eine einzelne Farbe als Überlagerung verwenden, müssen Sie über den Sättigungsgrad und die Transparenz der Farbe nachdenken. Diese Elemente können auch Bedeutung hinzufügen. Stärkere Farbkombinationen - weniger transparent und mehr Sättigung - fokussieren die Farbe selbst stärker als das dahinterliegende Bild. Durch leichtere, subtilere Kombinationen wird das Bild stärker betont.
Betrachte Dunkel oder Licht
Sie müssen nicht immer eine Farbe per se verwenden, um eine Überlagerung zu erstellen. Manchmal kann es schwarz, weiß oder grau sein. Die Verwendung dieser Farbtöne kann die Stimmung eines Projekts wirklich verändern.
Wie erwartet, erzeugen dunklere Überlagerungen eine stimmungsvollere Umgebung. Leichtere Überlagerungen sind mit Spaß verbunden. Ein weiterer Beitragsfaktor, wenn es um diese Gefühle und Schwarzweiß geht, ist das Bild selbst. Wie funktioniert es mit der Tönung? Funktionieren Bild, Farbe und Messaging miteinander?
Rufen Sie mich an. Ish (oben) verwendet eine weiße Überlagerung, um die Wörter auf dem Bildschirm über einem Schwarzweißfoto hervorzuheben. Beachten Sie jedoch den Ausdruck auf dem Gesicht des Fotografen: Er lächelt mit einem breiten Grinsen. Die Farb- und Fotokombination ist einladend und Sie möchten mit dem Fotografen interagieren und ihn möglicherweise sogar für einen Job einstellen.
Entscheiden Sie sich für kontrastreiche Bilder
Bei der Planung einer Bildüberlagerung in einem Designprojekt ist die Zusammensetzung des Fotos (oder Videos) wichtig. Ein mildes Bild hinterlässt ein farbloses Overlay-Ergebnis. Die besten Ergebnisse erzielen Sie, wenn Sie mit einem Foto mit viel Kontrast und dunklen und hellen Bereichen im Bild beginnen.
Wenn Ihr Bild nicht genügend Kontrast aufweist, können Sie in der Fotobearbeitungssoftware einen Kontrast hinzufügen oder ein anderes Bild auswählen. Andernfalls kann der Bildeffekt flach werden.
Es gibt einen weiteren Trick, um diesen Effekt zu erzielen, indem Sie mit einem Schwarzweiß-Foto beginnen. Insbesondere für Anfänger kann es einfacher sein, den Kontrast in einem Schwarzweißbild zu sehen und zu verbessern. Just Actions ist ein hervorragendes Beispiel für ein Schwarzweißbild neben Bildern mit Farbüberlagerung. (Außerdem ist es ein cooler Effekt, um Bilder ohne Farbe und einen hellen Farbkontrast zu koppeln.)
Bilder sollten natürlich aussehen (oder nicht)
Wenn Sie mit Farbüberlagerungen arbeiten möchten, haben Sie zwei Möglichkeiten:
- Bilder sollten trotzdem natürlich aussehen. Farbe und Beleuchtung sowie Schatten sollten an einem natürlichen Ort erscheinen. Die Überlagerung ist etwas subtil, wie zum Beispiel Abednego Coffee (oben).
- Bilder sehen völlig verändert aus. Es wird nicht vermutet, dass eine Farbüberlagerung verwendet wurde (wie in den meisten Beispielen in diesem Artikel).
Hier gibt es eigentlich keinen Mittelweg. Wenn Bilder nicht in eines dieser "Extreme" fallen? Benutzer denken möglicherweise zu genau über die Farbauswahl nach und konzentrieren sich nicht auf den Inhalt der Website. Sie möchten nicht mit einer Farbüberlagerungstechnik ablenken; es sollte das Design verbessern.
Versuchen Sie einen Überlagerungsakzent
In den vorangegangenen Beispielen wurden Möglichkeiten zum Verwenden einer Farbüberlagerung für große Bilder aufgezeigt, z. B. für Optionen im Stil eines Heldenkopfs. Dies ist jedoch nicht die einzige Möglichkeit, diese Technik optimal einzusetzen. Farbüberlagerungseffekte können auch gut als Akzente wirken.
Die beiden obigen Beispiele zeigen verschiedene Möglichkeiten, dies effektiv zu erreichen.
Knoten Bekleidung (oben) verwendet eine hellgrüne Navigationsleiste mit Transparenz. Dies wird durch den festen Strich darüber hervorgehoben. Der Effekt trägt dazu bei, die Farbpalette der Marke im gesamten Design zu erhalten, während Artikel in einer Vielzahl anderer Farben präsentiert werden. Der Effekt ist einfach, lässt die Seite etwas weicher aussehen, als wenn die Navigation in einer einfarbigen Farbe wäre, und zieht den Blick auf die Seite und durch das Design.
Nuts and Woods geht einen anderen Weg. Das Design verwendet eine Farbüberlagerung als Hover-Effekt, um mehr über bestimmte Elemente auf der Website zu erfahren. Jedes Element, das eine rote Überlagerung erhält, ist auch ein anklickbares Element. Das Bemerkenswerte an diesem Design ist, dass die Farbüberlagerung den Benutzern als visuelle Hilfestellung dient, genau das zu sagen, was sie wissen möchten, und einen Pfad zu Links im gesamten Inhalt bereitstellt.
Fazit
Die Verwendung einer Farbüberlagerung ist eine dieser Techniken, die nicht immer funktioniert. Die meisten Designer finden, dass sie nur für ein oder zwei Projekte damit auskommen können, bevor es übertrieben erscheint. (Hier könnte eine Akzentüberlagerung die bessere Option sein.)
Stellen Sie sicher, dass Sie sie wie bei jeder Designtechnik im richtigen Kontext anwenden. Sie sollten niemals eine Farbüberlagerung verwenden, nur weil Sie von einem anderen Projekt inspiriert wurden. Speichern Sie die Idee und verwenden Sie sie für das richtige Design.