Dreckige Webseiten

[Workshop] Websiten im Grunge-Design gestalten

Ein wirklich trendiges Website-Design kommt mit Kaffeerändern, handschriftlichen Notizen, Schmutzflecken und vergilbten Fotos. So peppen Sie auch Ihre Website mit Elementen dieses neuen Trends auf.

Website im Grunge-Design

© Archiv

Richtigen Grunge-Look erhält das Foto nach Umkehrung der Farbeinstellung.

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.

Website im Grunge-Design

© Archiv

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.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…