Dreckige Webseiten

Teil 2: [Workshop] Websiten im Grunge-Design gestalten

Ziehen Sie die kleinen schwarzen Dreiecke, die Sie unter der Grafik Tonwertspreizung sehen, so weit nach links beziehungsweise rechts, bis Ihnen das Ergebnis zusagt. Auch hier gilt es, sich langsam an das gewünschte Ergebnis heranzutasten.

Nun bringen Sie mithilfe der Bild-Sättigung ein wenig Farbe ins Spiel. Aktivieren Sie die Checkbox Färben, dann ziehen Sie den Farbton-Schieberegler, bis Sie den angestrebten Farbton getroffen haben.

Das letzte Feintuning lässt sich dann noch über Sättigung und Helligkeit regeln. Als weiteren Filter verwenden Sie Bewegungsunschärfe, stellen einen Winkel von beispielsweise -50 ein und legen den Abstand auf 1 Pixel fest. Ebenso öffnen Sie das Filter-Fenster Kräuseln und tragen bei Stärke den Wert 350 ein, den Eintrag Mittel bei Größe lassen Sie unverändert. Bevor Sie die Textur als Hintergrundbild verwenden können, muss sie noch kachelfähig gemacht werden. Dieser Vorgang vermeidet die hässlichen Ränder, die normalerweise entstehen, wenn der Browser eine Kachel an die andere reiht, bis das Browserfenster gefüllt ist.

Website im Grunge-Design

© Archiv

Hierzu wählen Sie den Filter Verschiebungseffekt und setzen die Werte bei Horizontal und Vertikal auf 50. Zum Schluss lassen sich mithilfe des Stempel-Werkzeugs die bei der letzten Aktion entstandenen Linien ausbessern.

Eingescannte Werke

Wollen Sie sich bei der Gestaltung des Hintergrunds weder am PC quälen noch auf eigene künstlerische Fähigkeiten verzichten, dann bieten Scanner eine praktikable Möglichkeit, um zum Beispiel alte Fotos, Notizzettel oder Kaffeeränder für den Grunge-Auftritt vorzubereiten.

Wählen Sie bei farbigen Vorlagen eine Auflösung von 300 dpi und eine Farbtiefe von 24 Bit, bei Schwarz-Weiß-Grafiken genügen 150 dpi und 8 Bit. Mit diesen Scannereinstellungen erzielen Sie gute bis sehr gute Ergebnisse, sodass sich die Bilder ohne erkennbare Qualitätsverluste vergrößern oder in höherer Auflösung einfacher und besser nachbearbeiten lassen.

Foto bearbeiten

Eingescannte Vorlagen lassen sich anschließend ebenso wie Fotos mit Photoshop zu ansehnlichen Hintergrundbildern verarbeiten. Hierzu wählen Sie die Menüfunktion Auswahl/Farbbereich und experimentieren mit dem Toleranz-Schieberegler so lange, bis Sie mit dem Ergebnis zufrieden sind. Anschließend invertieren Sie den markierten Bereich über Auswahl/Auswahl umkehren, drücken die Entf-Taste und heben mit Strg+D die Auswahl wieder auf.

Den eigentlichen Grunge-Pfiff erhält das Foto schließlich durch den Menübefehl Bild/Korrekturen/Umkehren, der die Farbeinstellung umdreht.

Tesa hält das Bbild

Schicke Navigationselemente vertragen sich natürlich nicht mit verdreckten, rostigen Wallpapers. Also ist auch hier schmutzige Fantasie gefragt, die im Web in vielfältiger Weise befriedigt wird.

So finden sich auf der Website olive-grüne Buttons mit stilisierten Rostflecken, die sich einzeln herunterladen und weiter bearbeiten lassen.Auf der Webseite steht sogar ein Set zum Download bereit, das so gängige Grunge-Elemente wie Büroklammer, Haftie und Kaffeekränze enthält. Am Beispiel des ebenfalls beiliegenden Klebestreifens zeigen wir, wie Sie ein Foto an dem Wallpaper befestigen.

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…