Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dirk Metzmacher 15. September 2004

Photoshop: Grunge Buttons

Kein Beitragsbild

Grunge, also Schmutz oder Abfall, darf auch das Menüdesign beeinflussen, Hauptsache es geht dreckig zu. Sorgen Sie dafür, dass keine Fläche glatt und poliert wirkt.

Anzeige

Schritt 1
Den Hintergrund füllt ein Streifenmuster aus zwei dunkelgrauen Linien. Zeichnen Sie auf einer neuen Ebene mit dem Buntstift, der kleinsten Werkzeugspitze und einem dunklen Grau eine 1 Pixel breite Linie, indem Sie beim ziehen die SHIFT-Taste gedrückt halten. Darunter zeichnen Sie eine Linie in einem etwas helleren Grauton. Kopieren und positionieren Sie die Ebene, so dass der Hintergrund gefüllt ist. Soll dieser Hintergrund die Website füllen, bietet es sich an aus den zwei Linien eine Hintergrundkachel zu erstellen.

Hintergrund erstellen

Schritt 2
Im Grunge-Stil darf nichts sauber, gerade und poliert erscheinen, deshalb darf schon die Grundlage der Button etwas schräger daher kommen als üblich. Erstellen Sie eine neue Ebene, wählen Sie mit dem Polygon-Lasso die Grundform aus und füllen Sie die Fläche mit einem dunklen Beigeton.

Die Grundlage im Beispiel zeigt feine Risse. Dazu wurde mit dem Linienzeichner und einem dunklen Grauton eine Menge Linien gezogen, die zusammen ein feines Rissmuster ergeben. Die Linien wurden auf eine Ebene reduziert und durch "Ebene –> Schnittmaske erstellen" mit der darunter liegenden Ebene verbunden.

Grundlage der Buttons

Schritt 3
Den Hintergrund der einzelnen Buttons erstellen Sie auf einer eigenen Ebene mit dem Auswahlrechteck, füllen anschließend die Auswahl mit einem Grau und spendieren der Fläche Störungen durch "Filter –> Störungsfilter –> Störungen hinzufügen". Kopieren Sie den Buttonhintergrund mehrmals und drehen Sie die Flächen durch "Bearbeiten –> Transformieren –> Drehen".

Screenshot
Hintergrund der einzelnen Buttons

Schritt 4
Erstellen Sie eine neue Ebene und sprühen Sie mit dem Airbrush und einem Grauton etwas Schmutz auf die soeben erstellten Flächen, den Sie mit dem Gaußschen Weichzeichner etwas weichzeichnen. Den Hintergrund für die Schrift wählen Sie mit dem Auswahlrechteck aus, erstellen eine neue Ebene und füllen die Fläche mit #849433. Erstellen Sie auf einer neuen Ebene eine "Zierleiste" in einem hellen Grauton mit dem Auswahlrechteck.

Screenshot
Erster Schmutz und grüne Flächen

Schritt 5
Der leichteste Schritt dieser Anleitung lautet: Beschriften Sie Ihren Button mit dem Textwerkzeug. Aktivieren Sie bei der Zierleiste den Ebenenstil Schlagschatten und fügen Sie Störungen hinzu.

Screenshot
Buttons beschriften

Schritt 6
Noch ist das Menü zu sauber. Sprühen Sie deshalb auf eigenen Ebenen Schmutz in verschiedenen Farben und mit verschiedenen Werkzeugspitzen über das Menü. Diesen "Schmutz" können Sie später noch weichzeichnen.

Screenshot
Mehr Schmutz

Schritt 7
Sorgen Sie für etwas Licht im dunklen Grunge-Style. Auf einer eigenen Ebene wählen Sie mit dem Polygon-Lasso den Lichteinfall aus. Die Auswahl füllen Sie mit einem Verlauf von Weiß zu Transparent. Stellen Sie den Ebenenmodus dieser Ebene von Normal auf überlagern um.

Screenshot
Mit "Licht"

Kleine Schrauben oder andere Accessoires lockern das Menü auf.

Dirk Metzmacher

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.