Licht und Schatten gibt es im wirklichen Leben überall. Alles, was Sie sehen, wird durch Licht und Schatten reflektiert. Visuell helfen uns Licht und Schatten, Dinge zu identifizieren und ihr Material , ihren Maßstab und ihre Perspektive zu erkennen.
Wenn wir unser Webdesign natürlicher, dynamischer, realer und intuitiver gestalten möchten, ist es daher sehr wichtig, die Licht- und Schatteneffekte richtig zu verstehen. Hier sind fünf Tipps, die Ihnen helfen, Licht und Schatten besser zu nutzen. Wenn Sie sie gut nutzen, können Sie Ihr Design verfeinern und sich von anderen Seiten abheben.
Eine kurze Analyse der Prinzipien von Licht und Schatten
Im Bild unten kommt die Lichtquelle von links. Glanzlichter sind die am stärksten beleuchteten Bereiche und Schatten liegen am weitesten von der Lichtquelle entfernt. Die Existenz von Licht und Schatten hilft uns, eine große Menge an Informationen über das Material der Oberfläche eines Objekts wahrzunehmen. Aber Sie fragen sich vielleicht: Was hat das mit Webdesign zu tun?
Wenn Sie vorhaben, reichhaltige, strukturierte Benutzeroberflächen und Websites zu erstellen, können Ihnen Licht und Schatten helfen. So wie viele traditionelle Künstler Licht in Gemälden verwenden, können Sie Licht auch verwenden, um Ihren Designs Tiefe und visuelles Interesse zu verleihen.
1. Lichtquelle verwenden
Es sollte gesagt werden, dass es beim Einsatz von Beleuchtung grundsätzlich darauf ankommt, zu wissen, wo sich die Lichtquelle befindet. Die Position der Lichtquelle bestimmt die Platzierung von Lichtern und Schatten (im Webdesign können Sie diese Regeln jedoch brechen). In Photoshop können Sie „Globale Beleuchtung“ in Ebenenstilen verwenden, um sicherzustellen, dass sich die Lichtquellen aller von Ihnen erstellten Licht- und Schatteneffekte an derselben Position befinden.
Die Steuerung der Position der Lichtquelle kann eine einzigartige Atmosphäre für Ihr Seitendesign schaffen (selbst ein einfacher linearer oder radialer Farbverlauf kann diesen Effekt erzielen). Auch Licht- und Schatteneffekte können die Verschiebung des Sehzentrums leiten.
Campaign Monitor verwendet divergierende Lichtquellen, um einen Sonnenaufgangseffekt zu erzeugen.
Icebrrg nutzt Beleuchtung, um Seiten unter Wasser zu erstellen.
Mike Precious verwendete mehr als eine Lichtquelle, um das Gesamtbild optisch interessanter zu machen, und verwendete durchgehend Tischlampenbeleuchtung.
Deaxon hat hinter dem Logo eine schwache Lichtquelle, die den Fokus der Seite auf das Logo lenkt.
2. Farbverlauf
In der realen Welt ist nichts immer flach. Licht und Schatten haften an allem. Die Verwendung von Farbverläufen ist eine großartige Möglichkeit, Tiefe und Authentizität zu erzeugen.
Der Schlüssel zur Verwendung von Farbverläufen liegt darin, es nicht zu übertreiben . Wenn Sie Farbverläufe in Photoshop zeichnen, führen Sie bitte eine Farbverlaufsüberlagerung im Ebenenstil durch. Dadurch wird sichergestellt, dass Ihr Farbverlauf bearbeitet werden kann, und da die Ebene skaliert wird, kann der Farbverlauf auch verlustfrei skaliert werden.
Die Website von nclud verwendet subtile, aber effektive Farbverläufe, um Inhalte zu differenzieren und zu organisieren.
Auf den ersten Blick scheinen CSS Ninjas flache Farben zu verwenden. Allerdings weist jeder Farbbereich tatsächlich einen schwachen Farbverlauf auf, wodurch ein faszinierender Materialeffekt entsteht.
3. Höhepunkte
Glanzlichter gleichen Schatten aus und sollten an den Rändern von Objekten in der Nähe der Lichtquelle platziert werden. Hervorhebungen werden meist ignoriert, da man sie bei richtiger Verwendung kaum bemerkt. Allerdings sind nicht alle Situationen für das Vorhandensein von Glanzlichtern geeignet. Ein subtiles Glanzlicht kann einen großen Unterschied in der Oberflächenpolitur eines Objekts bewirken. Je „schärfer“ das Highlight ist, desto stärker ist der Glanz der Objektoberfläche.
Um die Highlights zu erkennen, müssen wir diese Details vergrößern. Wenn Sie Hochglanzdesigns erstellen, ist es eine gute Idee, die Größe Ihres Designs mehr als zu verdoppeln, da Sie möglicherweise nicht erkennen können, was Sie tun, wenn es im Originalmaßstab angezeigt wird.
Sowohl Icon Dock als auch Newism verwenden durchscheinendes Weiß am oberen Rand der Seite, um einen Hervorhebungseffekt zu erzielen. Obwohl es sehr unauffällig ist, verleiht es dem Design einen starken Glanz.
Jeder sollte mit der Website von Apple vertraut sein. Aber wahrscheinlich ist Ihnen die dezente Hervorhebung am unteren Rand des Navigationsmenüs nicht aufgefallen. Es ist dieses Highlight, das der Speisekarte eine herausragende Note verleiht.
4. Grundlegende Schatten
Wie Farbverläufe werden auch Schlagschatten häufig von Webdesignern verwendet. Bei richtiger Anwendung können Schlagschatten einem Design wirklich visuelle Tiefe und Textur verleihen. Der Schlüssel liegt darin, es nicht zu übertreiben oder zu missbrauchen.
Die Schattentiefe hängt von der Richtung und Intensität des Lichts sowie vom Abstand des Objekts von der Projektionsfläche ab. Je stärker das Licht, desto schärfer und dunkler der Schatten; je schwächer das Licht, desto schwächer der Schatten.
Es gibt zu viele Beispiele für Projektionen im Internet.
LinkedIn fügt am unteren Rand der Seitenleiste einen äußerst subtilen Schlagschatten hinzu, um ein Gefühl von Tiefe zu erzeugen.
Google – möglicherweise die am schwierigsten zu gestaltende Seite im Internet – verwendet immer noch einen subtilen Schlagschatten auf seiner Suchseite.
5. Erweiterte Schatten
Um einem Objekt eine dreidimensionale Wirkung zu verleihen, stehen Ihnen neben der einfachen Projektion viele Möglichkeiten zur Verfügung. Lange Schatten können die räumlichen Beziehungen von Objekten auf der Seite dramatisch verändern.
Im folgenden Beispiel erscheint die gesamte räumliche Position völlig anders , nachdem dieselbe Cola-Dose mit unterschiedlichen Schatten und dunklen Teilen versehen wurde.
Emotions von Mike nutzt geschickt Schatten (und Licht), um eine flache Seite buchstäblich in einen Boden zu verwandeln.
Superkix verwendet Schlagschatten, um die Sneaker über der Seite schweben zu lassen. Wenn Sie die Seite vergrößern, kann sich auch der Schatten bewegen, so wie sich auch die Lichtquelle verschiebt. Sofa schafft durch die hervorragende Nutzung von Licht und Schatten einen Boden auf einem reinweißen Hintergrund. Mehr Ressourcen Der folgende Inhalt ist auf Englisch:
Über den AutorRob Morris ist ein australischer Designer, der in Japan arbeitet. Als freiberuflicher Designer firmiert er unter dem Namen Digitalmash und hat Kunden auf der ganzen Welt. Sie können seine Abenteuer auf Twitter verfolgen. |