7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Interface Design

So erstellen Sie ein Grunge-Webdesign in Photoshop

Scroll to top
Read Time: 12 mins

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Photoshop ist häufig das richtige Werkzeug für das Webdesign, insbesondere wenn Sie ein Design mit zahlreichen Bildern und Pinseleffekten erstellen. In diesem Tutorial zeige ich Ihnen, wie Sie ein vollständiges Grunge-Homepage-Design erstellen. Wir werden die Kopfzeile, die Seitenleiste, den Körper, die Fußzeile und alles so gestalten, dass sie in einem stark strukturierten und abgenutzten Design zusammenarbeiten.


Schritt 1

Dieses Mal erstellen wir ein vollständiges Webdesign im Grunge-Stil mit Photoshop und vielen Stock-Bildern. Da dies ein Tutorial für Fortgeschrittene ist, überspringe ich die Erläuterung einiger grundlegender Schritte. Erstellen Sie zunächst ein neues Dokument mit einer Größe von 950 x 800 Pixel bei RGB 72 dpi. Zeigen Sie die Lineale und ziehen Sie vier Hilfslinien, die das Dokument begrenzen. Dies ist der optimale Bereich des Entwurfs. Ich plane, ein Layout mit fester Breite beizubehalten.

Gehen Sie zu Bild > Leinwandgröße und erhöhen Sie die Breite und Höhe erheblich. 1200 x 1000 Pixel sind in Ordnung. Auf diese Weise werden wir für breitere Bildschirmauflösungen entwerfen. Fügen Sie dann weitere Hilfslinien hinzu, in denen Sie die Container hinzufügen möchten (Kopfzeile, Navigationsleiste, Seitenleiste, Fußzeile).

Stellen wir uns vor, dieses Design ist für eine Wordpress-Vorlage bestimmt, daher benötigen wir eine Kopfzeile, eine Navigationsleiste in der Kopfzeile und eine rechte Seitenleiste. Schauen Sie sich den unteren Teil des folgenden Bildes an. Füllen Sie dann einen Hintergrund mit dieser Farbe #7A8173.


Schritt 2

Jetzt erstellen wir ein Muster für den Hintergrund des Headers, das ziemlich einfach ist. Erstellen Sie ein neues Dokument mit einer Größe von 50 x 300 Pixel und zeichnen Sie so etwas wie das folgende Bild. Ich benutze Hilfslinien, um meine Form so symmetrisch wie möglich zu gestalten. Gehen Sie dann zu Bearbeiten > Muster definieren und speichern Sie die Form als "pattern 1".


Schritt 3

Zeichnen Sie auf einer neuen Ebene in unserer Hauptentwurfsdatei mit dem Rechteck-Werkzeug ein Rechteck mit einer Höhe von 300 Pixel. Gehen Sie zu Filter, fügen Sie eine Musterüberlagerung hinzu, suchen Sie nach Ihrem brandneuen Muster und wenden Sie es an. Damit es korrekt aussieht, müssen Sie auf die Schaltfläche Am Ursprung ausrichten klicken. Ändern Sie die Ebenenfüllung auf 0%, erstellen Sie eine neue leere Ebene über der Formebene und führen Sie beide zusammen. Auf diese Weise haben Sie das Muster bereit, um einige Effekte hinzuzufügen. Nennen Sie diese Ebene "Pattern 1".


Schritt 4

Wählen Sie die Ebene "Pattern 1" und wenden Sie einige Ebenenstile an: Schlagschatten, Verlaufsüberlagerung und Musterüberlagerung. Versuchen Sie, mit den folgenden Werten etwas Ähnliches wie unten im Bild zu erhalten.


Schritt 5

Jetzt fügen wir den Hintergrund der Navigationsleiste hinzu. Zeichnen Sie ein Rechteck, das ein wenig von der Ebene "Pattern 1" verbirgt. Wenden Sie auf dieses Rechteck eine Musterüberlagerung, eine Schwarz-Rot-Schwarz-Verlaufsüberlagerung und einen weichen Schlagschatten an. Verwenden Sie die Werte der folgenden Bilder als Referenz. Fügen Sie als Nächstes eine Ebenenmaske hinzu > Alle ausblenden und zeichnen Sie einen reflektierten Farbverlauf von Schwarz zu Weiß zu Schwarz auf die Ebenenmaske. Sie erhalten etwas Ähnliches wie im unteren Bild unten.


Schritt 6

Zeichnen Sie nun eine Ellipse (#691E1B) über die Ebene "Pattern 1", nennen Sie sie "Light" und wenden Sie eine Gaußsche Unschärfe mit einem Radius von 50 Pixel an. Ich habe eine zusätzliche Anleitung erstellt, um das Licht in die Mitte des Headers zu zeichnen. Löschen Sie alles unterhalb der Navigationsleiste und ändern Sie den Mischmodus der Ebene in Ausweichen.


Schritt 7

Um den ersten Teil des Layouts fertigzustellen, zeichnen wir den Hintergrund der Seitenleiste. Zeichnen Sie einige Hilfslinien, um die Seitenleiste abzugrenzen, und bearbeiten Sie auch die vorhandenen Hilfslinien, damit sie in das tatsächliche Design passen. Zeichnen Sie dann ein rotes Rechteck (#3D100B) und wenden Sie die folgenden Stile an: Schlagschatten, Farbüberlagerung und Musterüberlagerung.

An dieser Stelle müssen Sie überlegen, wie Sie das Bild in HTML + CSS schneiden möchten. Aus diesem Grund verwende ich die meiste Zeit Schlagschatten mit einem Abstand von 0 Pixel und nur horizontalen oder vertikalen Verläufen. Die Textur hat in diesem Fall viele horizontale Linien. Es muss einfach sein, dies für viele Bereiche in einen sich wiederholenden Hintergrund umzuwandeln. Dies ist auch ein guter Punkt, um eine Pause einzulegen und die Ebenen in Ihren Ordnern zu organisieren, um die Organisation zu gewährleisten.


Schritt 8

Beginnen Sie nun mit den Details. Ich möchte den Site-Namen an prominenter Stelle hinzufügen. Deshalb werde ich dieses schöne Grunge-Label-Bild verwenden. Natürlich müssen Sie das Etikett extrahieren und in der oberen linken Ecke unseres Designs platzieren. Versuchen Sie, so etwas wie das erste Bild unten zu bekommen. Verwenden Sie als Nächstes den Zauberstab, um den kleinen braunen Kreis auszuwählen, und dann Befehl + Umschalt + I, um die Auswahl umzukehren. Stellen Sie die Pegel und den Farbton/Sättigung mit den unten gezeigten Werten ein.


Schritt 9

Löschen Sie nun mit dem Radiergummi-Werkzeug und einem unregelmäßigen Pinsel einige Bereiche des Etikettenrandes. Um einen Papierschnitt-Effekt hinzuzufügen, wählen Sie das Ausweichen-Werkzeug und verwenden Sie dieselbe Pinselform, um das Ausweichen auf den Rand des Etiketts anzuwenden.


Schritt 10

Als nächstes werden wir unserem Label einen Schatten hinzufügen. Duplizieren Sie dazu die Ebene "Layer", ändern Sie den Farbton/Sättigung > Helligkeit auf -100 und wenden Sie eine Gaußsche Unschärfe mit einem Radius von 10 Pixel an. Ändern Sie als Nächstes den Mischmodus "Label copy" in "Multiplizieren" und stellen Sie die Deckkraft auf 75% ein.


Schritt 11

Als letzte Retusche für das Etikett ändern Sie die Sättigung auf -40, um es grauer zu machen.


Schritt 12

Jetzt werden wir einige Support-Bilder hinzufügen und versuchen, Bilder zu finden, die ein Konzept umgeben. Da dies jedoch ein Tutorial zu den Techniken ist, wähle ich ein zufälliges aus. Dies ist ein wunderschönes Bild eines Oldtimer-Zuges hier im Hochland von Bolivien. Extrahieren Sie die Form des Zuges, wie Sie möchten. Ändern Sie dann den Mischmodus der Ebene "train" in "Abdunkeln".


Schritt 13

Fügen wir einen Text hinzu, zuerst den Seitennamen. Geben Sie etwas mit einer Grunge-Schriftart ein. Hier finden Sie einige interessante. Verwenden Sie für den Titel einen schwarzen Typ und ändern Sie den Mischmodus der Ebene in Überlagern. Duplizieren Sie dann die Ebene und ändern Sie die Deckkraft der Kopie auf 75%. Verschieben Sie die kopierte Ebene um ein oder zwei Pixel nach links oder rechts, um einen winzigen Unschärfeeffekt zu erzielen. Fügen Sie mit dieser Technik mehr Text hinzu, z. B. einen Slogan oder etwas anderes. Es ist auch ein guter Moment, um auch die Navigationslinks hinzuzufügen.


Schritt 14

Jetzt füge noch mehr Sachen hinzu, es ist Grunge-Stil! Ich habe einige Pinsel von Jenn B von hier heruntergeladen. Diese Pinsel haben Einschränkungen. Mit diesen Pinseln können Sie Zahlen, Ecken, Abdeckbänder und so weiter hinzufügen. In diesem Schritt können Sie tun, was Sie wollen. Denken Sie daran, alle Ebenen unter den Ebenen "Label" und "Label Copy" hinzuzufügen.


Schritt 15

Jetzt fügen wir die Seitenabschnitte hinzu. Zunächst benötigen wir in der Kopfzeile eine Suchleiste. Geben Sie eine Suchbezeichnung ein. Zeichnen Sie als Nächstes ein rotes Rechteck (#6A0400) als Sucheingabefeld und wenden Sie dann einen Strich- und einen Musterüberlagerungsebeneneffekt an.


Schritt 16

Jetzt werden wir den Hauptinhalt unseres Designs hinzufügen. Zuerst fügen wir ein Feld hinzu, in das Text eingefügt werden soll. Zeichnen Sie ein dunkelgraues Rechteck (#0D0F0E) in eine Ebene unter der Seitenleiste. Ich habe vier Ordner erstellt, um das Layout übersichtlich zu halten: einen für den "Header" über allem, einen für die "Sidebar" unter dem "Header", einen für den "Content" unter dem "Header" und der "Sidebar" und den letzten eine für die "Footer".

Sie können dieses Rechteck zur Ebene "Content" hinzufügen. Außerdem können Sie in diesen vier Ordnern beliebig viele Ordner hinzufügen. Wenn Sie das Rechteck an der richtigen Stelle platziert haben, wenden Sie einen Schlagschatten- und einen Stricheffekt mit den folgenden Werten an.


Schritt 17

Laden Sie hier einige Grunge-Ecken und -Ränder herunter und fügen Sie eine über den grauen Hintergrund ein. Wenden Sie als Nächstes einen Überlagerungseffekt auf die Ecke mit der Farbe #171612 an. Fügen Sie außerdem eine weitere Ecke über dem Hintergrund der Seitenleiste hinzu, verringern Sie diesmal jedoch die Deckkraft unter 25%.


Schritt 18

Fügen wir einen Text hinzu. Sie können einen beliebigen Beispieltext hinzufügen. Stellen Sie sich vor, es handelt sich um einen Abschnitt mit Javascript-gesteuertem Text für die letzten Beiträge oder einen Abschnitt mit vorgestellten Beiträgen. Ich verwende dieselbe Grunge-Anzeigeschrift wie für die Navigationsleiste mit der Farbe #4D0D0D und Arial mit der Farbe #3F3F3F für den Textkörper.

Wenden Sie einen Schlagschatteneffekt auf den Titel an und fügen Sie den gleichen Effekt auch den Navigationselementen hinzu. Wenn Sie diese PSD in eine HTML + CSS-Datei konvertieren, müssen Sie diese Titel in Bilder konvertieren. Es ist also in Ordnung, wenn Sie ihnen weitere Stile hinzufügen möchten. Verwenden Sie zum Schluss einige Hilfslinien, um die Textebenen an der richtigen Stelle zu platzieren.


Schritt 19

Unsere vorgestellte Leiste sieht etwas leer aus. Fügen wir also ein Support-Bild hinzu. In diesem Fall habe ich eine Polaroidaufnahme verwendet. Sie können das Polaroidbild hier herunterladen. Extrahieren Sie das Polaroid, fügen Sie es in eine Ebene über dem grauen Hintergrund und der Grunge-Ecke im Ordner "Inhalt" ein und ändern Sie dann den Farbton/Sättigung, um das Polaroid ein wenig mehr Sepia zu erhalten (Wählen Sie die Option "Kolorieren").

Verwenden Sie die gleichen Techniken für die Kanten der Ebene "Label" (Schritt 9). Löschen und weichen Sie die Ränder des Polaroid-Bildes aus. Fügen Sie abschließend einen Schlagschatten mit der gleichen Technik wie in Schritt 10 dieses Tutorials hinzu.


Schritt 20

Ich hatte dieses Sepia-Bild von mir, also füge ich es dem Design hinzu. Fügen Sie ein beliebiges Bild zu einer neuen Ebene über der Ebene "Polaroid" hinzu, wählen Sie das schwarze Quadrat des Polaroids aus und dann Befehl + Umschalt + I, um die Auswahl umzukehren. Wählen Sie die Bildebene aus und löschen Sie alle zusätzlichen Elemente. Als nächstes können Sie weitere Grunge-Details hinzufügen, z. B. ein Klebeband über dem Bild, wie in den folgenden Abbildungen gezeigt. Ich habe auch einen 1px Schlagschatteneffekt auf das hinzugefügte Band angewendet.


Schritt 21

Es ist ein guter Moment, der Seitenleiste ein RSS-Symbol hinzuzufügen. Zeichnen Sie ein Rechteck mit abgerundeten Ecken (#99917E) und wenden Sie die folgenden Effekte darauf an: Verwenden Sie die im Bild unten gezeigten Werte, um ein inneres Leuchten, eine Musterüberlagerung und einen Schlagschatten zu erzielen. Zeichnen oder fügen Sie als Nächstes die Standard-RSS-Form in eine neue Ebene über dem Rechteck ein und füllen Sie sie mit Schwarz. Ändern Sie abschließend den Mischmodus "RSS-Form" in "Überlagern".


Schritt 22

Platzieren Sie nun das RSS-Symbol oben links in der Seitenleiste. Fügen Sie Text wie "RSS FEED" hinzu. Zeichnen Sie ein weiteres Stück Klebeband und schreiben Sie die Anzahl der Abonnenten darüber. Denken Sie daran, jetzt arbeiten wir im Ordner "Sidebar".


Schritt 23

Es ist Zeit, unserem Design einen einzelnen Beitrag hinzuzufügen. Schreiben Sie einfach einen zufälligen Text als Titel, eine weitere Zeile für Datum, Kategorie und Autor. Auch einige Wörter als Text des Beitrags. Typografie ist in diesem Schritt am wichtigsten. Ich liebe es, Serif-Schriftarten für die Titel und Sans-Serif für den Körper zu verwenden, aber ich bin es nur. Entscheiden Sie, was Ihrer Meinung nach am besten für Ihr Design geeignet ist.


Schritt 24

Um unserem Beispielbeitrag ein wenig mehr Einstellung zu verleihen, werden wir ein Vorschaubild hinzufügen, genau wie auf den TUTS-Websites. Da es sich jedoch um ein Grunge-Design handelt, müssen wir unseren Bildern einen Grunge-Hintergrund hinzufügen. Dies ist so einfach wie das Hinzufügen von Auffüllungen oben und unten mit CSS und das Festlegen eines sich wiederholenden Hintergrundbilds.

Dieses Bild zeigt einen 35-mm-Film. Extrahieren Sie zwei kleine Streifen aus dem Film und ändern Sie ihren Farbton/Sättigung anhand der Werte im Bild unten. Löschen Sie anschließend mit einem unregelmäßigen Radiergummi einige Bereiche der Streifen. Fügen Sie zum Schluss jedem Streifen einen Schlagschatten hinzu. Wenn Sie mit dem Film fertig sind, fügen Sie ein Bild unter die Filmebenen ein. Ich füge ein Bild von einer meiner Reisen hinzu. Wenden Sie schließlich einen Stricheffekt (#2F261D) auf dieses Bild an.


Schritt 25

Zeichnen Sie eine 2 Pixel große rote Linie unter dem Beitrag und Text für die Kommentare. Es ist eine gute Idee, alle mit dem Beitrag verbundenen Ebenen in einem neuen Ordner mit dem Namen "Post" hinzuzufügen. Erhöhen Sie dann die Höhe des Dokuments ein wenig. Verwenden Sie dazu das Zuschneiden-Werkzeug, um zu sehen, wie unser Design aussehen wird, wenn es zwei oder drei Pfosten enthält. Duplizieren Sie die Gruppe "Post" und ändern Sie den Text und das Bild wie unten gezeigt.


Schritt 26

Eigentlich sieht es ziemlich gut aus, jetzt füge die Titel der Sidebar-Elemente hinzu. Sie können auch für jedes Element einen Ordner erstellen.


Schritt 27

Fügen Sie nun ein Listensymbol hinzu. Sie können jede benutzerdefinierte Form verwenden. Füge zufälligen Text hinzu, ich benutze Georgia für die Seitenleiste. Duplizieren Sie die Symbole und bearbeiten Sie eines, um den Schwebezustand darzustellen. Machen Sie dasselbe für jedes Sidebar-Element.


Schritt 28

Wir sind fast fertig. Fügen Sie einige Grunge-Details am unteren Rand der Seitenleiste hinzu, indem Sie einige Grunge-Pinsel in eine neue Ebene über der Hintergrundebene der Seitenleiste einfügen. Wählen Sie die Hintergrundebene der Seitenleiste aus und gehen Sie zu Ebene > Ebenenmaske > Alle anzeigen. Als nächstes verstecken Sie einige Bereiche unten links im Hintergrund der Seitenleiste mit einem unregelmäßigen schwarzen Pinsel.


Schritt 29

Wählen Sie abschließend die Hintergrundebene der Seitenleiste aus und kopieren Sie den Ebenenstil. Zeichnen Sie ein Rechteck am unteren Rand des Designs im Ordner "Footer" und fügen Sie den Ebenenstil ein. Als nächstes extrahieren Sie dieses Bild und fügen es über dem Hintergrund der Fußzeile ein.

Passen Sie die Sättigung an, um sie etwas grauer zu machen. Sie können auch auf dieses Blatt Papier einen Schlagschatten auftragen, der die Technik von Schritt 10 wiederholt. Fügen Sie etwas Text über das Blatt Papier hinzu, vielleicht einen Slogan oder so. Fügen Sie außerdem Fußzeilentext wie eine Schnellnavigationsleiste und die Copyright-Informationen hinzu.


Abschluss

Webdesign ist kein Kinderspiel, aber ich hoffe, dieses Tutorial hilft Ihnen dabei, Ihre Fähigkeiten zu verbessern. Jetzt liegt es an Ihnen, Ihre eigenen zu entwerfen oder sich bei PLUS anzumelden, um die PSD-Quelle herunterzuladen und damit zu spielen. Ich würde gerne einige Grunge-Webdesigns in der Psdtuts+ Flickr-Gruppe sehen. Sie können das endgültige Bild unten oder eine größere Version hier anzeigen.

Abonnieren Sie den Psdtuts+ RSS-Feed, um die besten Photoshop-Tuts und Artikel im Web zu erhalten.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.