[Workshop] Websiten im Grunge-Design gestalten

Websites mit schmutzigen Hintergründen, kaputten Schriften und ausgeblichenen Fotos, die von Büroklammern gehalten werden, heben sich wohltuend ab vom oft langweiligen Einheitslook. Allerdings müssen Sie als Webdesigner im Einzelnen abwägen, ob der sogenannte Grunge-Stil zum Inhalt Ihres Webauftritts passt. Wie wäre es, wenn Sie Ihre private Website oder Ihr Weblog um handgefertigte Grunge-Elemente bereichern? Und bei Webseiten, die sich beispielsweise mit Fotografie, Kunst und Kultur oder Comics befassen, bietet sich diese Art der illustrativen Gestaltung ebenso an.

Vorüberlegungen

Während sich das übliche Weblayout meist auf neutralem, einfarbigem Grund präsentiert, zielt das Grunge-Design auf einen möglichst unregelmäßigen und oft verschmutzten Hintergrund. Bevor Sie jedoch den virtuellen Pinsel schwingen, sollten Sie sich über das neue Gewand Ihrer Website grundsätzlich im Klaren sein.

Alle gängigen Grafikprogramme bieten eine Palette an Werkzeugen an, die Ihnen ein komfortables Arbeiten ermöglichen. So lassen sich mit wenigen Handgriffen Linien in jeder Stärke ziehen und verschiedenste Formen erstellen, die Sie mit Farben oder Mustern füllen.

Oder Sie arbeiten mit Sprühdosen, um Hintergründe oder einzelne Bildelemente mit Graffitis zu versehen. Trotzdem ist es nicht jedermanns Sache, künstlerische Kreativität vor dem Bildschirm freizusetzen und auch Grafiktabletts, wie sie zum Beispiel Werbegrafiker und Architekten gerne einsetzen, sind zumindest stark gewöhnungsbedürftig.

Wenn es Ihnen einfach nur an der nötigen Fantasie mangelt oder das handwerkliche Geschick fehlt, ist das Internet eine wahre Fundgrube für Grafiken und Illustrationen aller Art.

Texturen aufstöbern

Devian Art verwöhnt Sie beispielsweise mit vielen Tausend fertigen Texturen. Schon die Eingabe des Suchbegriffs "Grunge" fördert über 5.000 Treffer zutage. Ähnliche Erfolge haben Sie mit "rust", "stone" oder "wood". Bei diesem Angebot ist es höchst unwahrscheinlich, dass Sie auf eine andere Website stoßen, die genau dieselbe Textur verwendet.

Textur im Eigenbau

Wer sich trotzdem nicht mit Texturen von der Stange zufriedengeben möchte, der kreiert mit Photoshop seine eigene Textur, aus der sich anschließend das Hintergrundbild für die Website zusammenbauen lässt.

Hierzu erstellen Sie eine neue Datei, wählen als Vorgabe Web und legen die Breite und die Höhe auf jeweils 100 Pixel fest. Im Listenfeld Hintergrundinhalt entscheiden Sie sich für Transparent. Anschließend stellen Sie als Vordergrundfarbe Weiß ein.Mithilfe des Füllwerkzeugs geben Sie der Ebene einen weißen Anstrich. Nun wählen Sie die Filter-Funktion Differenz-Wolken und drücken anschließend die Tasten Strg+F so oft, bis Ihnen das Zufallsergebnis gefällt. Die nächsten Einstellungen nehmen Sie über die Tonwertkorrektur vor.