Der Musikstil »Grunge« steht für einen rohen, schmutzigen Sound. Genau diese Attribute könnte man auch im Webdesign einsetzen und auf die einzelnen Bildelemente übertragen, die eben nicht sauber und ordentlich wirken sollen, sondern dreckig und mit kleinen Fehlern geschmückt. Als Kontrast kommt hier etwas Web 2.0 Glossy-Power dazu.

Zuletzt hatte das Smashing Magazine im schönen Beitrag mit der Überschrift Grunge Style In Modern Web Design zahlreiche Beispiele und Quellen zum Thema gesammelt.

Der Grunge-Stil dient zahlreichen Websites als Grundlage. Passende Texturen, Werkzeugspitzen oder Stile vorausgesetzt, wird das Gestalten in diesem Stil zum Kinderspiel. Im folgenden Tutorial zeige ich ein Beispiel, das sehr leicht variiert werden kann.

1. Material

a. Texturen

Die beiden Texturen, die hier als Ausschnitt zu sehen sind, dienen als Struktur für die Flächen, die in diesem Tutorial entstehen werden. So kommen wir schnell zu einer Struktur, einerseits im Hintergrund des Interface, andererseits für die Button-Grundlage.

Ein Klick auf die rechte Maustaste und »Ziel speichern unter…« sollte reichen, um die Texturen auf der eigenen Festplatte abzulegen. Vielleicht wundert sich jemand, dass die Texturen ganz ohne Farbe als Schwarz-Weiss-Variante angeboten werden. Da wir in diesem Beispiel nur die Form, nicht aber die Farbe verwenden, wie sich später zeigen wird, ist das in diesem Fall von Vorteil.

Grundsätzliches zu Stile

Einen Stil kann man schnell in der Stile-Palette laden und dort abrufbereit halten. Falls dieses Fenster nicht geöffnet ist, klickt man im Menü auf »Fenster ↔ Stile«. Dort sieht man oben rechts einen kleinen, schwarzen Pfeil. Wird der angeklickt, öffnet sich eine Liste, über die verschiedene Aktionen in Bezug auf die Stile durchgeführt werden können.

Über »Stile laden…« kann der aktuellen Auswahl ein oder mehrere Stile hinzugefügt werden, »Stile ersetzen« dagegen tauscht die aktuelle Auswahl durch einen anderen Stil aus.

b. Grunge-Button-Stil

Ein Klick auf das folgende Icon sorgt dafür, dass man den in diesem Tutorial genutzen Stil herunterladen kann. Im weiteren Verlauf gehe ich davon aus, dass der Stil wie oben beschrieben einsatzbereit in der Stile-Palette Gewehr bei Fuss steht.

2. Verlauf

Glatte Flächen sind im Grunge-Stil unerwünscht. Ein Verlauf könnte der erste Schritt zum schmutzigen Hintergrund sein. Hier wurde ein Verlauf von #223344 (RGB 34, 51, 68) nach #446688 (RGB 68, 102, 136) von der linken oberen auf die rechte untere Ecke gezogen. Dabei sollte in den Optionen des Werkzeugs »Vordergrund-Hintergrund« und »Linearer Verlauf« aktiviert sein.

3. Texturen übertragen

Eine der Texturen wird auf einer eigenen Ebene über dem Verlauf positioniert und die Füllmethode in der Ebenen-Palette von »Normal« auf »Ineinanderkopieren« (Überlagern) umgestellt. Ist das Ergebnis zu hell, kopiert man die Ebene über »Ebene ↔ Neu ↔ Ebene durch Kopie« oder schneller über Strg und J. Die Füllmethode »Multiplizieren« und eine Ebenendeckkraft von etwa 15% sorgen dafür, dass der Hintergrund nicht ganz so hell wird.

Über dem nun schmutzigen Hintergrund erstellt man mit dem Abgerundeten-Rechteck-Werkzeug eine Fläche in der Farbe #223344 (RGB 34, 51, 68), wobei hier der »Ebenenstil ↔ Schlagschatten« aktiviert und die Füllmethode auf »Multiplizieren« umgestellt wird. Wer mag, kann noch in einer Ebenenmaske mit schwarzer Farbe Stücke aus der Form »heraus brechen«.

Schon jetzt wirkt auch diese Fläche »grungig«. Die zweite Textur könnte diesen Effekt noch verstärken. Dazu wird sie auf einer eigenen Ebene eingefügt und im Menü auf »Ebene ↔ Schnittmaske erstellen« geklickt.

Tipp

Schneller werden solche Schnittmasken in der Ebenenpalette aktiviert oder wieder ausgeschaltet, in dem man mit gedrückter Alt-Taste die Kante zwischen den Ebenen anklickt.

4. Schwarze Button

Die Grundform des schwarzen Button wurde mit dem Abgerundeten-Rechteck-Werkzeug erstellt, die weiteren kopiert und mit dem Verschieben-Werkzeug positioniert. Ein Klick auf den zuvor eingerichteten Stil in der Stile-Palette reicht nun aus, um den Effekt über den Button zu legen. Eine Erklärung, was für Stile mit diesem Klick aktiviert wurden, darf jedoch nicht fehlen.

Ein »Schatten nach innen« mit der Füllmethode: Multiplizieren, Deckkraft 85%, Abstand 4 und Grösse 5 Pixel sorgt für einen leichten 3D-Effekt, der von einer »Verlaufsüberlagerung« mit der Füllmethode: Multiplizieren, einem linearen Verlauf von Schwarz nach Weiss und einem Winkel von 90 Grad noch gestärkt wird. Eine »Musterüberlagerung« sorgt zusätzlich für etwas Struktur.

5. Button-Variante

Nachdem bei jedem der schwarzen Flächen der Grunge-Stil aktiviert wurde, erstellen wir unkompliziert eine einfache Variante. Der halbdurchsichtige Glossy-Button, der über den schwarzen Versionen stehen soll, ist eine Kopie dessen, wobei allerdings die Deckkraft auf 50% minimiert und die Farbe auf #446688 (RGB 68, 102, 136) geändert wurde (ein Doppelklick auf die Ebenenminiatur ruft den Farbwähler auf). Auch wenn der Glossy-Stil eher zum Web 2.0 passt, funktioniert er auch in diesem Fall, da der schmutzige Hintergrund etwas durchschimmert.

6. Licht und Farbe

Um noch das Lichtspiel zu ändern, könnte man eine neue Ebene erstellen und deren Füllmethode auf »Ineinanderkopieren« umstellen. Jetzt wirkt sich die Farbe »Weiss« wie Licht aus, allerdings zu stark, was man leicht über die Ebenendeckkraft steuern kann. Da bisher nur Blautöne zum Einsatz gekommen sind, sorgt als oberste Ebene ein Verlauf von Rot nach Grün für etwas Farbe, wobei die Füllmethode hier auf »Negativ multiplizieren« und die Deckkraft auf etwa 6% steht.

Auf die Beschriftung möchte ich an dieser Stelle nicht weiter eingehen, da bei der Umsetzung in XHTML und CSS diese Suchmaschinen freundlich und barrierefrei über der Grafik stehen sollte.

Um die offene .psd-Datei mit allen Ebenen herunterzuladen, klickt man auf das Bild mit dem Ergebnis und speichert es auf der Festplatte ab. So kann dieser Workshop noch leichter
nachvollzogen werden.

Natürlich muss und wird dieses Ergebnis nicht jedem Leser gefallen, aber das ist bei Tutorials auch nicht das erste Ziel. Es geht viel mehr darum, die Technik zu beherrschen. Gerne würde ich Ergebnisse eurer Versuche sehen.