Originaltext: 5 einfache Tricks, um Licht und Schatten in Ihre Designs zu bringen
Licht und Schatten gibt es überall im wirklichen Leben. 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 Beleuchtung 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. Verwendung von Lichtquellen
Bei der Verwendung von Beleuchtung ist es grundsätzlich wichtig 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 , verwenden divergierende Lichtquellen, um einen Sonnenaufgangseffekt zu erzeugen.
Icebrrg nutzt Beleuchtung, um die Seite unter Wasser zu machen.
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. Farbverläufe
In der realen Welt ist nichts immer ein flacher Ton. 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 die Bearbeitbarkeit Ihres Farbverlaufs gewährleistet, und da die Ebene skaliert wird, kann der Farbverlauf auch verlustfrei skaliert werden.
Die Website von nclud verwendet subtile, aber wirkungsvolle 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. Glanzlichter
Glanzlichter können Schatten ausgleichen und sollten am Rand des Objekts 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.
Icon Dock und Newism, verwenden beide durchscheinendes Weiß am oberen Rand der Seite, um einen Hervorhebungseffekt zu erzeugen. 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 – vielleicht die am schwierigsten zu gestaltende Seite im Internet – verwendet immer noch einen subtilen Schlagschatten auf seiner Suchseite.
5. Erweiterte Schatten
Um Objekten ein dreidimensionales Aussehen zu verleihen, stehen Ihnen neben einfachen Schatten viele weitere Optionen 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 Raumposition völlig anders , nachdem dieselbe Cola-Dose mit unterschiedlichen Schatten und dunklen Teilen versehen wurde.
Emotions von Mike, nutzt geschickt Schatten (und Beleuchtung), 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.
Weitere Ressourcen Das Folgende ist auf Englisch:
Außerdem empfohlen: 35 Websites, die Licht- und Schatteneffekte hervorragend nutzen (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. Über Übersetzer und UrheberrechteÜbersetzer sind damit beschäftigt, hervorragende ausländische Tutorials zu übersetzen, um Englisch zu lernen. Sie können meinen Blog abonnieren oder mich als Fan hinzufügen. Dieser Artikel folgt dem CC-Lizenzprinzip [Attribution-Noncommercial-ShareAlike]. Bitte geben Sie beim Nachdruck die Originalquelle des Originaltextes und der Übersetzung an. Originalübersetzung: http://www.yeeyan.com/articles/view/benhuoer/40160 |
