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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

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

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

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

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

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