Dreckige Webseiten

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

Öffnen Sie mit Photoshop Ihr selbst hergestelltes Wallpaper oder einen fertigen Hintergrund, wie er zum Beispiel auf der Website zum kostenlosen Download angeboten wird.

Bei dem Foto, das Sie mit Klebestreifen an die Pinnwand heften wollen, müssen Sie eventuell erst noch das Format über Bild/Bildgröße anpassen, damit es im richtigen Verhältnis zum Hintergrund steht. Anschließend markieren Sie mit dem Auswahlrechteck-Werkzeug den gewünschten Bildausschnitt und kopieren ihn vor den Hintergrund der Wallpaper.

Mit dem Verschieben-Werkzeug und der gedrückten Maustaste lässt sich das Foto an der gewünschten Stelle platzieren. Öffnen Sie die Datei stickytapeoriginal.psd, die in der zip-Datei enthalten war, und klicken Sie mit dem Zauberstab auf die weiße Fläche außerhalb des Klebestreifens.

Kehren Sie die Markierung über Auswahl/Auswahl umkehren um, kopieren Sie den Tesafilmstreifen in die Wallpaper-Ansicht und schieben Sie ihn an die richtige Stelle. Noch echter wirkt der Klebestreifen, wenn er leicht transparent ist, sodass der Untergrund nur so eben durchscheint. Das erreichen Sie, indem Sie den Schieberegler Deckkraft, den Sie auf der Ebenenpalette sehen, nach links ziehen.

Grungy Text

Ähnlich wie bei den Buttons und Navigationselementen muss auch der Grunge-Text möglichst heruntergekommen wirken. Wer es sich einfach machen will, wird im Web wieder schnell fündig. So finden Sie auf der Webseite insgesamt 63 Fonts - fast alle geeignet, einer Grunge-Site den rostigen Rest zu geben.

Website im Grunge-Design

© Archiv

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

Laden Sie sich die kostenlosen Schriftarten auf Ihren Rechner und installieren Sie diese über den Ordner Schriftarten, den Sie in der Windows-Systemsteuerung finden. Nach einem eventuellen Neustart stehen die Fonts im System zur Verfügung.

Wer jedoch auch hier nicht auf individuelle Schrift verzichten möchte, der erstellt sich seinen Grunge-Text mithilfe von Photoshop selbst. Legen Sie hierzu wieder eine neue Datei an, wählen Sie als Vorgabe Web und legen Sie die Breite auf 400 Pixel und die Höhe auf 100 Pixel fest.

Füllen Sie die Fläche mit Farbe, schreiben Sie mit dem Text-Werkzeug den Text in der gewünschten Schriftart und Schriftgröße und ziehen Sie ihn mit dem Verschieben-Werkzeug an die richtige Stelle. Anschließend aktivieren Sie die Menüfunktion Ebene/Rastern/Text.

Wechseln Sie nun auf die Palette Kanäle und klicken Sie auf das kleine schwarze Dreieck, um über den entsprechenden Menüeintrag einen neuen Kanal anzulegen. Lassen Sie den Kanal markiert, wählen Sie den Filter Wolken und anschließend noch den Filter Körnung, dessen Intensität Sie auf 70 und dessen Kontrast Sie auf 100 setzen. Als Körnungsart entscheiden Sie sich für Vertikal.Nachdem Sie das Dialogfenster verlassen haben, halten Sie die Strg-Taste gedrückt und klicken gleichzeitig auf den neu angelegten Kanal, bevor Sie auf die Ebenen-Palette zurückkehren. Dort wählen Sie die gerasterte Textebene und drücken die Entf-Taste, um die Auswahl zu löschen. Abschließend heben Sie mit Strg+D die Auswahl auf.

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…