Dreckige Webseiten

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

23.12.2009 von Redaktion pcmagazin und Achim Beiermann

ca. 2:00 Min
Ratgeber
  1. [Workshop] Websiten im Grunge-Design gestalten
  2. Teil 2: [Workshop] Websiten im Grunge-Design gestalten
  3. Teil 3: [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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.