Grunge-Photoshop-Tutorial - Welcome to the jungle

Großstadtdschungel-TutorialModerne Webseiten sollten mehr als nur die reine Darstellung von Informationen bieten. Vielmehr sollten die Informationen in der richtigen Art und Weise präsentiert und Emotionen transportiert werden. Im folgenden Photoshop-Tutorial zum Thema Gestaltung eines Webseitenkopfes, werden Euch Schritt für Schritt daher einige Tricks und Kniffe für die Gestaltung eines ausdrucksstarken Webseitenkopfes im Grunge-Stil geboten.

Vorschau auf das Endergebnis

Großstadtdschungel-Tutorial

Step 1: Gestaltung des Hintergrunds

Zunächst müsst Ihr die Größe für Euer Seitenlayout wählen. Im folgenden Tutorial wird daher mit einer Dokumentengröße von 1300 x 1200 Pixeln gearbeitet. Dann steckt euch mit Unterstützung der Hilfslinien, Begrenzungen in der Breite von 950 - 960px ab. Damit sind die wichtigsten grafischen Elemente auch bei einem Viewport von 1024 x 768 Pixeln noch zu sehen. Für den Hintergrund verwendet ihr einen hellen Beige-Ton mit dem Farbwert #f6e9c9, wobei die Hintergrundebene mit dem Wolkenfilter über Filter -> Renderfilter -> Wolken bearbeitet wird. Bevor Ihr nun den Wolkenfilter benutzt, müsst Ihr die Hintergrundfarbe #8a7f61 eingestellt haben. Diese Hintergrundebene wird anschließend mit einem Rauschfilter (Filter -> Rauschfilter -> Rauschen hinzufügen) auf 1 Prozent versehen und die Helligkeit der Ebene (Bild -> Anpassungen -> Helligkeit und Kontrast) auf +75 erhöht. Das Ergebnis dürfte dann in etwa wie folgt aussehen:

Headerhintergrund

Step 2: Gestaltung des Bildbanners

Im zweiten Schritt erfahrt ihr wie das Bild hinter den freigestellten Grafiken richtig in Szene gesetzt wird. Hierzu wird zunächst mit Hilfe des Auswahlrechteck-Werkzeugs eine Auswahl von 900 x 300 Pixel gezogen. Diese wird weiß gefüllt und anschließend in der horizontalen Mitte des Layouts, mit einem Abstand von 50 Pixeln zum oberen Rand, ausgerichtet. Anschließend wird dieser Ebene, mit Hilfe eines Strukturierungsfilters (Filter -> Strukturierungsfilter -> Mit Struktur versehen), eine Struktur zugewiesen.

Anschließend wird diese Ebene dupliziert und die Ebene im Hintergrund transformiert. Hierzu drückt Ihr am besten STRG+T, haltet anschließend STRG gedrückt und klickt auf eine der Ecken und zieht diese in die gewünschte Richtung. Wenn Ihr die Ebenen wie abgebildet transformiert habt, verringert ihr die Deckkraft auf circa 50 Prozent, legt dann eine schwarze oder braune Farbüberlagerung auf die Ebene und radiert mit einem großen weichen Radiergummi die Ecken dezent weg. Diese Arbeitsschritte dürften dann in etwa zu folgenden Ziwschenstand führen:

Hintergrund mit Rahmen und Schatten

Im nächsten Schritt wird eine der Abbildungen die Betsandteil der gesamten Hintergrundgrafik wird, in die gewünschte Größe gebracht und beschnitten, um es dann mit einem Abstand von fünf Pixeln zu allen Seiten auf dem weißen Banner platzieren zu können. Über die Beigefarbige Hintergrundebene legt ihr noch einen halbtransparenten Verlauf mit dem Farbwert #967b45. Dieser Verlaufsebene wird dann die Einstellung "farbig nachbelichten" mit einer Deckkraft von 50 Prozent zugewiesen. Anschließend sollte Euer Ergebnis in etwa wie folgt aussehen:

Hintergrund mit Motiv

Step 3: Bringt den Dschungel in Euer Design

Risse im Hintergrund verstärkenUm das Bild der Hauswand in einen "Großstadtdschungel" zu verwandeln, dürfen Lianen natürlich nicht fehlen. Daher werden diese im nun folgenden Arbeitsschritt im Layout platziert. Um diese nicht einfach nur sinnlos im Layout zu platzieren, könnten diese bspw. der Hauswand "herausbrechen". Hiefür wird einfach das Polygonlasso verwendet, um auf diese Weise die Risse, welche bereits auf dem Fotomotiv vorhanden sind, nachzuzeichnen und zu verstärken.

Im Anschluss wird die Auswahl mit der Farbe #2a1f09 gefüllt. Wiederholt diesen Vorgang an mehreren Stellen im Bild! Anschließend solltet Ihr dem Bild noch die "passende Stimmung" verleihen. Hierzu ändert ihr zunächst die Farbbalance (Bild -> Anpassungen -> Farbbalance: Farbtonwerte: +15, 0, -20), dubliziert dann das Bild, um dieser Ebene dann die Einstellung "Ineinanderkopieren" bei einer Deckkraft von ca. 60 Prozent zu geben. Um bestimmte Bereiche in Eurem Bild mehr hervorzuheben, werden diese schärfer gezeichnet. Dafür benutzt ihr das Scharfzeichner-Werkzeug mit circa 20 Prozent Stärke. Diese Arbeistschritte sollten euch nun schon etwas näher ans eigentliche Ziel bringen ( siehe erste Abbildung oben ), wobei der aktuelle stand Eurer Headergrafik in etwa wie folgt aussehen sollte:

optimierte Hintergrundgrafik mit Motiv

Als nächstes werdet Ihr euch an das Illustrieren der Lianen begeben. Hierzu wird ein Foto von einem Zweig mit Blättern und dem Zeichenstift-Werkzeug benutzt. Wählt zunächst den Pinsel und stellt eine Pinselgröße von 3 Pixeln bei 100 Prozent Härte ein ( linker Teil der Abbildung ). Als Vordergrundfarbe wählt Ihr den Farbwert #b4c602. Wählt dann anschließend das Zeichenstift-Werkzeug und stellt dieses auf "Pfade" um ( rechter Teil der Abbildung ).

Zeichenstift-Werkzeug

Zieht nun einen Pfad, ähnlich dem abgebildeten ( linker Teil der Abbildung ). Der Ursprung der Lianen sollte in einem der Risse liegen. Klickt anschließend mit der rechten Maustaste auf den Pfad und wählt "Pfadkontur füllen" ( rechter Teil der Abbildung ).

Pfade anlegen und ausfüllen

Anschließend benutzt das Nachbelichter-Werkzeug, um den bisher flachen Linien ein wenig Tiefe zu verleihen. Dupliziert die Ebene und legt auf die oben liegende Ebene einen Rauschfilter. Gebt dieser Ebene eine Deckkraft von 50 Prozent.

Lianen anlegen und ausrichtenStellt dann ein paar Blätter mit dem Polygonlassowerkzeug frei und platziert diese an der Liane. Reduziert alles auf eine Ebene und dupliziert diese. Gebt der hinteren der beiden angesprochenen Ebenen eine schwarze Farbüberlagerung (Doppelkick auf die Ebene im Ebenenfenster -> Farbüberlagerung). Stellt die Ebenendeckkraft auf circa 40 bis 50 Prozent und verzerrt die Ebene wie nachfolgend abgebildet. Radiert mit dem Radiergummi die Enden leicht weg. Wenn Ihr diesen Vorgang mehrere Male wiederholt habt erzielt ihr eine gewisse Tiefe in der Abbildung. Dann wiederholt ihr den oben beschrieben Vorgang einige Male.

Step 4: Jetzt wird es wild

Da zu unserem Großstadtdschungel nicht nur Pflanzen gehören, sollten als nächstes die Tiere ihren Platz im Großstadtdschungel finden. Stellt zunächst Eure Tierfotos mit Hilfe des Polygonlasso-Werkzeugs grob frei, skaliert diese und platziert sie im Layout ( linker Teil der Abbildung ). Wie Ihr mit Sicherheit bemerkt habt, ist es gar nicht so einfach die Mähne des Löwen freizustellen. Daher an dieser Stelle ein kleiner Trick: Wählt einfach das Wischfinger-Werkzeug aus und stellt dieses auf einen Durchmesser von 1 Pixel und einer Stärke von circa 75 bis 80 Prozent ein. Klickt anschließend auf den Rand der Mähne und zieht in einer schnellen Bewegung ein kleines Härchen mit etwa 5 bis 10 Pixeln Länge. Wiederholt diesen Vorgang für die gesamte Mähne ( rechter Teil der Abbildung ). Wenn Ihr wollt, könnt Ihr dasselbe auch am restlichen Körper machen, hier allerdings etwas vorsichtiger.

Tiermotive einfügen und freistellen

Um den Löwen an die dramatischen Lichtverhältnisse des Bildes im Hintergrund anzupassen, wird anschließend die Ebene dupliziert und diese wird wie im linken Teil der Abbildung zu sehen ist mit einem Hochpassfilter (Radius: 2 Pixel) versehen (Filter -> Sonstige Filter -> Hochpass). Nun gebt der "Hochpass-Ebene" die Einstellung "Ineinanderkopieren". Anschließend sollte Euer Löwe in etwa wie folgt aussehen ( rechter Teil der Abbildung ).

Ineinanderkopieren von Ebenen

Wiederholt die oben beschriebenen Schritte auch für alle weiteren Tiere, welche Ihr im Layout platzieren wollt. Spielt gegebenenfalls ein wenig mit Schatten und verschiedenen Farbbalancen herum, um ein stimmiges Bild zu erhalten. Ihr könnt den Tieren natürlich auch ein anderes Aussehen, wie in diesem Beispiel dem Löwen ein neues Gesicht, verleihen. Eurer Fantasie sind hier keine Grenzen gesetzt! Die letzten Arbeitsschritte führen mit den von mir verwendeten Tieren, zu folgendem Zwischenstand:

Ausrichten der Tiermotive

Step 5: Die Navigation

Natürlich soll der Webseitenkopf nicht nur hübsch aussehen, sondern auch die Möglichkeit bieten, auf bestimmte Unterseiten navigieren zu können. Zu dem bisherigen Layout passt hier wohl am besten eine horizontale Navigation. Deshalb zieht ihr im ersten Schritt zunächst mit dem Auswahl-Rechteckwerkzeug eine Auswahl von 900 Pixeln Breite und 50 Pixeln Höhe. Füllt diese Auswahl mit dem Farbwert #c2a15a und legt anschließend einen halbtransparenten, radialen Verlauf mit circa 300 Pixeln in der Farbe #e4b658 darüber. Wichtig ist, dass ihr beim anlegen der Navigation genügend Platz für die späteren Navigationspunkte berücksichtigt, es soll ja später kein Gedränge geben. Das Ergebnis dürfte dann in etwa so aussehen:

Navigation in Layout implementiert

Dupliziert diese Eben und verseht sie mit einem Rauschen. Gebt dieser Ebene eine Deckkraft von circa 70 Prozent und reduziert danach beide wieder auf eine Ebene. Im Anschluss gebt Ihr der Ebene eine Ebenenmaske und "zerstört" diese ein wenig mithilfe von unterschiedlichen Grungebrushes. Spielt ein wenig mit der Deckkraft herum, um so ein möglichst "natürliches" Ergebnis zu erzielen. Wählt die oberen 40 Pixel der Ebene aus und ändert die Helligkeit auf -80. Auf diese Weise, verleiht ihr auch dem Bereich der Navigation den bisher dominierenden Stil der Headergrafik, mit folgendem Ergebnis:

Anpassen der Navigation an das Jungle-Layout

Nun fehlen nur noch die Navigationspunkte. Diese können selbstverständlich auch als Text im dafür vorgesehenen Bereich ausgerichtet werden. Wenn ihr mit dem Gedanken spielt die Navigationspunkte als Grafiken zu verwenden, denkt bitte immer daran, dass die Grafiken entsprechend ausgezeichnet werden, so das auch Nutzer mit körperlichen oder technischen Einschränkungen, keine Barrieren vorfinden. Die Erreichbarkeit der Inhalte für die Webseitenbesucher, steht über jedem noch so kreativen Design! Wenn ihr euch dennoch entschließen solltet die Navigationspunkte als Grafiken zu definieren, setzt hierfür einfach ein Textfeld auf den zuvor ertsellten Navigationshintergrund. Gebt diesem die Schriftfarbe weiß und einen Schlagschatten als Ebeneneffekt. Dieser sollte den Farbwert #2a2100 haben und eine Deckkraft von 50 Prozent besitzen. Außerdem sollte der Abstand auf 1 und die Größe auf 6 eingestellt werden. Was bei Euch in etwa zu folgendem Ergebnis führen sollte:

Anlegen der Navigationspunkte in Layout

Einstellen der SättigungUm den gesamten Header-Bereich etwas stimmiger wirken zu lassen und um ihm etwas mehr Tiefe zu verleihen und um dem Hintergrund somit einen etwas stärkeren Kontrast zum Vordergrund zu geben, werden rund um den gesamten Bildbanner noch Grungebrushes in der Farbe #6e6134 platziert und diesem die Ebeneneinstellung "farbig nachbelichten" gegeben. Anschließend werden über "Farbton/Sättigung" die in der Abbildung verwendeten Werte eingestellt. Was dazu führen würde, dass nach allen bisherigen Arbeitsschritten der aktuelle Stand des Headers je nach Verwendung der Motive, in etwa wie folgt aussehen könnte:

Header im Grunge-Stil

Step 6: Das Finishing

Nachdem das "Großstadtdschungel-Logo" im Layout platziert und mit einem Schatteneffekt versehen wurde, kann dem gesamten Kopfbereich noch in ein einheitliches "verwunschenes" Licht tauchen. Hierzu wird einfach mit Hilfe eines großen weichen Pinsels, kräftige, helle Rot- und Gelbtöne auf eine neue Ebene gemalt und dieser Ebene die Einstellung "Weiches Licht" gegeben. Und fertig ist Euer ausdrucksstarker Webseitenkopf im Grunge-Stil!

Großstadtdschungel-Tutorial

Sebastian Kollat, Gastautor dieses Step-by-Step Photoshop-Tutorials ist Junior Art Director im Webdepartment Düsseldorf bei der Euroweb Internet GmbH, einem Full-Service-Dienstleister für kleine und mittelständische Unternehmen in Deutschland und Österreich. Zu empfehlen ist auch der Weblog der interessante Artikel wie "Projekt Western-Inn: Von der Idee zum individuellen Design." beinhaltet.

Ähnliche Artikel zu diesem Thema:
  1. Patrick
    29 Jul 2009, 13:21

    Wow, wie man es von den Profis erwartet. Ein sauberes und kurzes Tutorial. Super Teil.


  2. Jonas
    29 Jul 2009, 13:30

    Sehr sehr schön Seb! :)


  3. Duy
    29 Jul 2009, 13:38

    Sehr geil!


  4. Michael 29 Jul 2009, 13:40

    Super Tutorial


  5. Roman 29 Jul 2009, 14:48

    Ein übersichtliches Tutorial mit tiefen Einblicken in den Alltag eines Profis! Mehr davon ;)


  6. Danny 29 Jul 2009, 15:17

    feine Sache... macht Hunger auf mehr...


  7. Paul
    30 Jul 2009, 01:11

    Hut ab und wirklich großes Respekt. Das Ergebnis ist wirklich sehr gelungen. Allerdings finde ich die Fress-Lücke vom Löwen nicht so toll.


  8. Michel
    30 Jul 2009, 16:18

    Coole Sache Seb, immer weiter so ;)


  9. Daniel - Geldkrieg
    02 Aug 2009, 14:55

    Sieht wirklich schick aus, ABER:
    Wie kann man bitte das Poster von Dritte Wahl verdecken?!?!? :D


  10. Manuel
    02 Aug 2009, 23:55

    ein sehr gelungenes grunge-tutorial - i love grunge style :)
    übrigens den titel welcome to the jungle gefällt mir sehr gut.
    thx


  11. bendesign 05 Aug 2009, 09:44

    Nice Tutorial. Thank you. :)


  12. Julian
    24 Okt 2009, 16:58

    Schönes Tutorial!
    Gut erklärt


  13. GeT4 26 Apr 2010, 11:44

    Thx,
    schönes Tut. Sieht super aus... gleich abspeichern und am We mal versuchen zu verwenden.


  14. Bybe
    17 Mär 2012, 21:16

    Guter Guide, ich danke Ihnen sehr... ;)


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage