Erstellung einer Portfolio-Webseite im Grunge-Stil mit Photoshop

Tutorials 10. August 2011 – 2 Kommentare

In diesem Tutorial für Webdesign mit Photoshop erkläre ich, wie ein Portfolio im Grunge-Stil erstellt wird. Unter anderem werden auch die Vorteile von Smart-Objekten erläutert und die Erstellung eigener Muster sowie Tricks im Umgang mit Effekten + neuen Schriftarten.

Wir empfehlen:
Photoshop-Video-Training - Basics & Tricks

Schritt 1:

Ich erstelle ein neues Dokument in 1600 x 1600 Pixel.

Schritt 2:

Im Ebenenbedienfeld lege ich drei Ordner an, damit alles auch seine Ordnung hat, wenn ich meine zahlreichen Ebenen erstelle. Die Hintergrundebene färbe ich in Schwarz um.

Schritt 3:

Damit ich jetzt weiß, wo der Hauptinhalt in einer Größe von 980 Pixel erstellt werden muss, gibt es folgenden Trick: Ich lege zunächst eine Hilfslinie genau in der Mitte an (rastet automatisch in der Mitte ein). Jetzt erstelle ich eine Auswahl mit Fester Größe und klicke mit gedrückter Alt-Taste genau auf die Hilfslinie. Jetzt wird meine Auswahl genau von diesem Punkt aus mittig erstellt.

Schritt 4:

Ich lade mir jetzt von z. B. PSD-Tutorials.de Mauertexturen runter und wähle mir eine passende aus. Als Nächstes kopiere ich diese in den Ordner „Header“, wandle diese dann in ein Smart-Objekt um und schiebe sie sehr weit nach oben, sodass nur 1/4 von der Textur angezeigt wird.

Schritt 5

Ich kann, damit die Textur eine bessere Sättigung erhält, auch eine Farbton/Sättigung-Einstellungsebene anlegen.

Schritt 6:

Damit sich die Farbton/Sättigung-Einstellungsebene nur auf die Textur auswirkt, werde ich diese als Schnittmaske anlegen. Dazu klicke ich mit gedrückter Alt-Taste mit der linken Maustaste genau zwischen die Ebenen. Die Einstellungsebene wird dann eingerückt und symbolisiert mit einem kleinen Pfeil, dass diese tatsächlich nur die darunterliegende Textur-Ebene beeinflusst.

Schritt 7:

Damit meine Steintextur-Ebene eine andere Farbe bekommt, habe ich darunter einen helleren Streifen mit dem Rechteck-Werkzeug erstellt und die Mauertextur in der Deckkraft auf 60% gestellt.

Schritt 8:

Als Nächstes habe ich eine neue Textebene mit dem Namen „Meine Webseite“ erstellt und bin dann auf die Filtergalerie gegangen. Da habe ich einmal die Buntstiftschraffur + Strichumsetzung ausgewählt. Ich kann beide gleichzeitig ausführen lassen, indem ich unten rechts auf das Neu-Symbol in der Filtergalerie klicke. So werden die Filter wie Ebenen gehandhabt.

Schritt 9:

Ich kann mir aber die ganze Geschichte auch einfacher machen, indem ich mir eine entsprechende Schriftart z. B. bei www.dafont.com lade. Ich wähle die Aria Penci Roman aus.

Schritt 10:

Sieht doch gleich viel besser aus. Einen Untertitel habe ich auch noch eingegeben.

Schritt 11:

Für den Untertitel besorge ich mir die Schriftart Seriffic Grunge.

Schritt 12:

Und so sieht jetzt der Untertitel mit der Schriftart Seriffic Grunge aus:

Schritt 13:

Als Nächstes füge ich oben mit dem abgerundeten Rechteckwerkzeug bei einem Rundheitsradius von 10px eine Fläche oben ein und schreibe da hinein „Kontakt | Impressum“.

Schritt 14:

Jetzt benötige ich noch ein paar Symbole, die finde ich auf www.iconspedia.com mit dem Suchbegriff „Calendar“.

Schritt 15:

Und so sieht es aus, wenn ich die drei Symbole und noch einen Untertitel eingefügt habe:

Schritt 16:

Ich füge jetzt einen neuen Unterordner im Ordner Header ein: Navigation. Darein schreibe ich jetzt ein paar Menüpunkte und lege als Aktiven Punkt unter Startseite mit dem abgerundeten Rechteckwerkzeug eine orange Fläche an. Danach setze ich den Text kursiv. Hier muss ich einen Trick anwenden, weil in der Schriftarten-Familie kein Kursiv vorgesehen ist: Ich transformiere die Schrift (Strg+T) und ziehe mit Strg an dem oberen Anfasser und kippe dann den Text.

Schritt 17:

Als Nächstes füge im im Hintergrund der Navigation mit dem Rechteck-Werkzeug eine schwarze Fläche ein und werde die Deckkraft leicht reduzieren.

Schritt 18:

Jetzt füge ich wieder eine neue Ebene ein, und wenn vorhanden ist, werde ich mit einem Grunge-Pinsel (findet man auf www.psd-tutorials.de im Downloadbereich) oder mit der Spritzer-Pinselspitze grob drauflosmalen und danach mit dem Auswahlrechteck alles bis auf eine kleine Linie entfernen, sodass ich nur noch eine 2 Pixel hohe Linie habe, die teilweise unterbrochen ist.

Schritt 19:

Ich füge jetzt ein Foto ein. Darauf kommt jetzt die Fülloption Kontur mit 3px Größe in der Farbe Weiß. Danach klicke ich mit der Strg-Taste auf die Ebene, damit ich eine Auswahl habe. Darin füge ich einen Verlauf von Blau zu Rot ein. Als Nächstes kopiere ich den Ebeneneffekt Kontur mit gedrückter Alt-Taste direkt im Ebenenbedienfeld.

Schritt 20:

Jetzt noch neben dem Bild eine Textbox mit Text eingefügt.

Schritt 21:

Als Nächstes füge ich für den Hintergrund eine Textur als Smart-Objekt bei 10% Deckkraft im Modus Luminanz ein. So sieht der Hintergrund leicht schmutzig aus.

Schritt 22:

Jetzt ziehe ich mir mit dem abgerundeten Rechteckwerkzeug zwei Flächen auf, die genau übereinander liegen. Die obere Fläche werde ich transformieren und ein wenig kleiner ziehen. Die untere Form setze ich auf 30% Deckkraft und die obere auf 10%. Dabei muss ich bei der unteren Ebene genau die Größe der oberen Form maskieren (kann ich schnell erreichen: Strg+Klick auf die obere Ebene und dann auf das Maskensymbol im Ebenenbedienfeld klicken).

Schritt 23:

In der Form werde ich eine Textbox aufziehen und eine Überschrift + Text einfügen.

Schritt 24:

Als Nächstes möchte ich eine gestrichelte Linie erstellen. Dazu erstelle ich ein neues Dokument mit einer Breite von 8 Pixel und 2 Pixel Höhe. Danach wandle ich die Hintergrundebene mit einem Doppelklick im Ebenenbedienfeld in eine normale Ebene um. Jetzt fülle ich drei Pixel mit Schwarz und den Rest lasse ich transparent. Jetzt das Ganze nur noch komplett markieren und dann unter Menü>Bearbeiten>Muster festlegen als Muster definieren.

Schritt 25:

Jetzt kann ich mit dem Linienwerkzeug mit gedrückter Shift-Taste eine 2 Pixel hohe Linie aufziehen und füge dieser dann mein neues Muster hinzu.

Schritt 26:

Ich füge den Text + den Trenner jeweils in einen extra Unterordner ein, damit alles schön seine Ordnung hat.

Schritt 27:

Als Nächstes kommt ganz unten mit roter Farbe noch ein Hinweis auf weitere Einträge + ein Pfeil aus den eigenen Formen von Photoshop.

Schritt 28:

Jetzt kopiere ich 2 x den kompletten Ordner von meinem Blog-Block und schiebe diese nach rechts. Die Überschrift passe ich jetzt an.

Schritt 29:

Damit der Foto-Blog gut aussieht, füge ich jetzt ein Foto ein, welches ich natürlich vor dem Skalieren in ein Smart-Objekt umwandle. Jetzt eine zweite Möglichkeit, ein Foto einzufügen: Dazu klicke ich mit Strg auf das Foto, damit ich davon eine Auswahl habe, und schiebe es mit gedrückter Shift-Taste mit dem Auswahlwerkzeug weiter nach unten.

Schritt 30:

Jetzt füge ich das Foto, welches ich in die Zwischenablage kopiert habe, per Menü>Bearbeiten>Einfügen Spezial>In die Auswahl einfügen in meine Auswahl ein. Es wird automatisch eine nicht verbundene Ebenenmaske angelegt und ich kann jetzt mein Foto mit meiner Wunschgröße perfekt in den Bereich positionieren.

Schritt 31:

Die Fotos bekommen jetzt von mir eine 3 Pixel große weiße Kontur als Ebeneneffekt.

Schritt 32:

Im Footer füge ich jetzt noch ein paar Links ein.

Schritt 33:

Jetzt noch schnell eine 7 Pixel große Linie aufziehen mit der Füllmethode Luminanz. Damit diese Linie noch mehr nach Grunge aussieht, kann man sie mit einem Textur-Muster in den Kontur-Füllart-Einstellungen hinzufügen.

Schritt 34:

Damit die Boxen noch besser aussehen und man so automatisch auch ein Icon zum Draufklicken auf mehr Details hat, füge ich jetzt 3 Icons ein. Die besorge ich mir von www.iconspedia.com. Die Icons wandle ich auch jetzt wieder in Smart-Objekte um, damit ich diese ohne schlechtes Gewissen immer hin- und herskalieren kann, bis ich die optimale Größe gefunden habe.

Schritt 35:

Das Ergebnis sieht dann wie folgt aus:

Schritt 36:

Ganz oben füge ich noch ein Twitter-Icon ein, das ich auch auf www.iconspedia.com in der gleichen Icon-Sammlung gefunden habe.

Schritt 37:

Die Icons werde ich auf die Füllmethode Multiplizieren ändern, damit sie noch besser wie ins Layout reingezeichnet aussehen. Außerdem werde ich die Schattierungen innerhalb der Symbole mit einer Ebenenmaske ausblenden.

Schritt 38:

Und so sieht jetzt die fertige Webseite aus (habe den Rand beschnitten, damit man den eigentlichen Hauptcontent hier im Workshop besser sieht).

Bildquelle fotolia.com: Dancing girl © Ivan Bliznetsov, Simply beautiful © Sorin Popa, beauty in detail 13 © Amir Kaljikovic

Wir empfehlen:
Camera Raw-Video-Training

Jetzt bist du gefragt!

Dir hat das Tutorial gefallen? Hast du Kritik, eine Frage zu diesem Tutorial oder möchtest einfach nur ein Lob aussprechen? Dann freuen wir uns auf deinen Kommentar. Du kannst dieses Tutorial auch weiterempfehlen, wir sind dir für jede Unterstützung dankbar!

Unsere Empfehlung für dich

Freistellen mit Photoshop

Freistellen mit Photoshop

Du willst wissen, wie du Personen und Tiere, Haare und Felle, Gläser und Flaschen, Wolken und Feuer, Bäume und andere filigrane Objekte freistellen kannst? Dann ist das genau dein Praxis-Training!

  • 8 Stunden Video-Training - Schritt für Schritt alle Freistelltechniken ergründen
  • Geeignet für Photoshop ab CS3, komp. mit MAC, PC & Tablets (iPad)

Mit diesem Training wechselst du als Einsteiger zu den Profis!

Zum Training

Löse das Quiz und teste dein Wissen:

2 Antworten zu “Erstellung einer Portfolio-Webseite im Grunge-Stil mit Photoshop”

  1. jac803 sagt:

    klasse Tutorial!!

  2. spike004 sagt:

    Wieso bekomme ich den Header Hintergrund nicht so gut hin?

Schreibe einen Kommentar

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

Folgende HTML-Elemente sind erlaubt:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>