In der bildenden Kunst ist der gekonnte Einsatz von Licht und Schatten seit Jahrhunderten Merkmal besonders wirkungsvoller Gemälde. Egal ob Rembrandt oder Tizian: Generationen von Malern machten sich die faszinierende Wirkung von Hell-Dunkel-Kontrasten zunutze. Was bereits vor Jahrhunderten Betrachter beeindruckt hat, verfehlt auch heutzutage nicht seine Wirkung – durchaus auch in anderen Bereichen. Wer beispielsweise als Webdesigner tätig ist, kann seine Arbeit schon mit einer Handvoll Grundregeln zum Thema Licht und Schatten bereichern. Im Blog des Smashing Magazine findet sich eine Übersicht zu diesem Thema.

Gerade der dezente Einsatz von Licht und Schatten kann eine Webseite optisch interessanter machen und ihr eine ansprechende Tiefe geben. Dafür muss man als Webdesigner keine umfangreiche Theorie durcharbeiten. Es genügt bereits, einige Basics zu beherzigen – so zum Beispiel der Standort der virtuellen Lichtquelle. Je nachdem, ob die Helligkeit beispielsweise von der Seite oder von oben kommt, ändert sich die Atmosphäre. Ebenso kann man auch mehrere Lichtquellen platzieren.

Selbst ein eher schlichtes Design kann durch Schatten erheblich an Tiefe gewinnen. Das Geheimnis liegt darin, die Kontraste nicht zu übertreiben – ein tiefschwarzer Schatten wirkt anders als eine zarte Schattierung. Zudem sind die Platzierung und Intensität der Lichtquelle ausschlaggebend dafür, wie ein Objekt auf den Betrachter wirkt. Das Smashing Magazin hat dies in seinem Beitrag anhand von unterschiedlich schattierten Getränkedosen verdeutlicht. Das Spiel mit Hell und Dunkel ist natürlich auch im Schriftbereich umsetzbar, wie nicht zuletzt der allseits bekannte Google-Schriftzug beweist.

Eine weitere Möglichkeit, die Abstufungen zwischen hell und dunkel für gutes Webdesign zu nutzen, sind Farbverläufe. Weniger ist auch hier mehr – allzu extreme Abstufungen sollten vermieden werden, da sie unrealistisch wirken und dem Gesamteindruck eher schaden als nutzen. Für eine Webseite können Farbverläufe beispielsweise dafür eingesetzt werden, verschiedene Contentbereiche zu untergliedern und Objekten Tiefe zu verleihen. Den gleichen Effekt haben Highlights. Zur dezenten Abtrennung verschiedener Bereiche voneinander ist es denkbar, halbtransparente weiße Linien zu platzieren. Highlights sind darüber hinaus auch bei Schriften einsetzbar.

Photoshop-Nutzer, die ihre Fertigkeiten im Umgang mit Licht und Schatten gern ausbauen möchten, finden unter anderem bei Directory Aviva, PSD tuts+ und Photoshop Café übersichtliche Tutorials zum Erstellen von Schatten bei Objekten und Schriftzügen. Viel Spaß beim Ausprobieren und Dazulernen!

(Bildquelle: Screenshots www.smashingmagazine.com)

Beitrag von Redaktion Stichworte: Farbverlauf, Hell-Dunkel, Licht, Lichtquelle, Schatten, Smashing Magazine, Tutorials, Webdesign