Anzeige
Tutorialbeschreibung

Webdesign mit Photoshop: Navigation

Webdesign mit Photoshop: Navigation

Die Workshops in diesem Tutorial sollen Ihnen sowohl Praxiswissen vermitteln als auch kreative Anstöße geben, wie Sie interaktive Elemente wie Navigationen und Buttons gestalten können.


Versuchen Sie, beim Gestalten der Navigation immer auf gute Erweiterbarkeit zu achten. Lassen sich weitere Menüpunkte ergänzen? Funktioniert das, ohne dass das gesamte Design umgeschmissen wird? Auf welche Art und Weise lässt sich eine zweite Navigationsebene einblenden? Auch wenn vorerst nur eine Hauptnavigation vorgesehen ist, sollten Sie bei der Gestaltung immer weiter planen – man weiß nie, wie sich eine Seite entwickelt.


Workshop: 3D-Navigation

Mit relativ einfachen Mitteln lässt sich mit einer eigentlich zweidimensionalen Grafik eine 3D-Optik simulieren.


1. Hintergrundgrafik erstellen

Erstellen Sie mit dem Zeichenstift-Werkzeug die Grundform des Menüs, indem Sie entlang der Schnittpunkte der Hilfslinien klicken, wie in der unten stehenden Abbildung gezeigt. Ober- und unterhalb des Dokuments können Sie großzügig in der grauen Arbeitsoberfläche arbeiten. Stellen Sie sicher, dass die Form seitlich mindestens bis zur Hälfte der Bildfläche reicht. Laden Sie anschließend eine Auswahl des Pfades und füllen die Fläche auf der Ebene "3D-Block" mit der Farbe Grundfarbe.

Bilder

Die halbe Grundform der Hintergrundgrafik.


 
Duplizieren Sie die Ebene "3D-Block" mit Strg+J und spiegeln die Kopie über Bearbeiten>Transformieren>Horizontal spiegeln. Schieben Sie die Kopie bis an die rechte Hilfslinie, markieren dann die Originalebene und die Kopie und führen sie mit der Tastenkombination Strg+E auf einer Ebene zusammen.

Bilder

Die gespiegelte Grundform.


Erstellen Sie eine neue Ebene mit der Bezeichnung "Verlauf unten" und ziehen über die gesamte Breite ein Auswahlrechteck von der unteren Hilfslinie bis zur Dokumentunterkante auf. Weisen Sie der Auswahl von oben nach unten einen Verlauf von der Farbe Verlauf unten zu Transparent zu. Bilden Sie mit der darunterliegenden Ebene "3D-Block" eine Schnittmaske, um die Ausdehnung des Verlaufs einzuschränken.

Für den Schatten im oberen Bereich verfahren Sie genauso. Auf einer neuen Ebene mit der Bezeichnung "Verlauf oben" ziehen Sie ein Auswahlrechteck von der oberen Hilfslinie bis zur Dokumentoberkante auf und erstellen darin von unten nach oben einen Verlauf von der Farbe Verlauf oben zu Transparent (s. Abb.). Bilden Sie auch mit dieser Ebene eine Schnittmaske mit der darunterliegenden.

Bilder

Die fertig schattierte Grundform mit einem klar erkennbaren Treppenstufen-Effekt.


 

2. Hauptnavigation

Wählen Sie das Text-Werkzeug mit der Schriftart Arial Bold, einer Schriftgröße von 30 Pixeln und der Farbe Navi Inaktiv. Erstellen Sie einen Punkttext mit den Begriffen "start", "material", "weblinks", "forum" und "kontakt" und trennen jeden der Begriffe mit vier Leerzeichen. Erstellen Sie eine Auswahl um die obere graue Fläche und verwenden bei aktivierter Textebene den Befehl 'An horizontaler Mittelachse ausrichten' aus dem Steuerungsbedienfeld des Verschieben-Werkzeugs. Positionieren Sie den Text zudem 7 Pixel oberhalb der oberen Hilfslinie.

Bilder

Text mittig ausrichten. Die Auswahl funktioniert dabei als Referenz.


HINWEIS: Das Trennen der einzelnen Begriffe mit Leerzeichen ist nicht die sauberste Variante, vereinfacht jedoch an dieser Stelle das Prozedere und lässt somit mehr Platz für weitere Workshops. Gewöhnen Sie sich an, jeden Navigationspunkt als einzelne Textebene zu erstellen. Somit sind Sie vollkommen flexibel bei der Findung der optimalen Positionierung.

Färben Sie den Begriff "material" in der vorgegebenen Farbe. Erstellen Sie unter der Textebene eine neue Ebene mit der Bezeichnung "Weiße Hinterlegung". Ziehen Sie ein Auswahlrechteck von der Dokumentoberkante bis zur oberen Hilfslinie auf, das 10 Pixel links des Begriffs "material" beginnt und 10 Pixel rechts davon endet. Füllen Sie die Auswahl von oben nach unten mit einem Verlauf von Weiß zu Transparenz und reduzieren die Ebenendeckkraft auf 75 %.

PIXELRASTER: Zum pixelgenauen Arbeiten sollten Sie bei aktiviertem Pixelraster (Ansicht>Einblenden>Pixelraster) und starkem Zoom arbeiten.

Bilder

Ein weißer Verlauf im Hintergrund hebt das aktive Element hervor.


 
Duplizieren Sie die Ebene, nennen sie "Schattierung Hinterlegung" und positionieren diese unter der Ebene mit dem weißen Verlauf. Reduzieren Sie die Helligkeit für die Schattenebene im Dialog Farbton/Sättigung (Strg+U) auf den Minimalwert von –100 und zeichnen den Schatten weich, indem Sie den Filter>Weichzeichnungsfilter>Gaußscher Weichzeichner mit einem Wert von 2 Pixeln anwenden.

Bilder

Die Hinterlegung des aktiven Navigationspunktes. Über Farbton/Sättigung reduzieren Sie die Helligkeit.


Als Letztes verleihen Sie der Schrift noch einen Schattenwurf, wodurch ein Schweben über der Treppenstufe erkennbar wird.

Legen Sie unter der Textebene eine Ebene mit der Bezeichnung "Schattenwurf Schrift" an. Erstellen Sie darauf unter jedem Navigationspunkt einen 2 Pixel hohen schwarzen Balken, dessen Breite dem jeweils zugehörigen Begriff entspricht. Achten Sie darauf, dass alle Balken auf einer Höhe erstellt sind. Verwenden Sie am besten die obere Hilfslinie als Orientierung.

Bilder

Die schwarzen Balken simulieren den Schattenwurf der Schrift.


 
Wenden Sie den Weichzeichnungsfilter>Gaußscher Weichzeichner aus dem Menü Filter mit einem Radius von 2 Pixeln auf die Balken an und schieben diese etwa in die Mitte der Treppenstufe. Reduzieren Sie abschließend die Deckkraft der Schattenebene auf 50 %.

Bilder

Das fertige Hauptmenü.


3. Sekundärnavigation

Schreiben Sie die Begriffe "workshops", "zusatzinhalte" und "index" in der Schriftart Arial Bold, in 20 Pixel Größe und der vorgegebenen Farbe in den unteren Balken. Lassen Sie zwischen den einzelnen Buchstaben jeweils 5 Leerzeichen Abstand und positionieren Sie die Zeile linksbündig mit dem Begriff "material" der Hauptnavigation.

Laden Sie die Formbibliothek Pfeile aus dem Optionsmenü des Eigene-Form-Werkzeugs. Ziehen Sie die Form Pfeil 2 als Formobjekt mit der Farbe Navi Aktiv in der Höhe eines Kleinbuchstabens der Sekundärnavigation auf.

Positionieren Sie den Pfeil vier Pixel links des Navigationspunktes "zusatzinhalte" und färben auch diesen in der vorgegebenen Farbe ein.

Bilder

Formobjekt auf die Höhe der Subnavigation anpassen.


 

Dropdown-Navigation

Diese zweite Navigationsvariante bietet den Vorteil, platzsparend zu sein. Die zweite Menüebene wird nur temporär beim Überfahren des Hauptpunktes aufgeklappt und bleibt ansonsten unsichtbar. Das Prinzip entspricht der Navigation auf http://www.photozauber.de. Das geht allerdings ein wenig auf Kosten der Orientierung.


1. Den Hintergrund gestalten

Ziehen Sie auf der Ebene "Hinterlegung" ein quadratisches Auswahlrechteck mit einer Kantenlänge von 105 Pixeln auf und füllen es mit der Farbe Weinrot. Wandeln Sie im Anschluss die Ebene in ein Smart-Objekt um. Klicken Sie dazu mit der rechten Maustaste auf die Ebenenbezeichnung in der Ebenen-Palette (nicht die Miniatur!) und wählen In Smart-Objekt konvertieren.

Wenden Sie anschließend den Filter>Rauschfilter>Rauschen hinzufügen mit einem Wert von 1,5 %, Gaußscher Normalverteilung und aktivierter Option Monochromatisch an.

Bilder

Das Rauschen nimmt der einfarbigen Fläche die sterile Monotonie.


SMARTFILTER: Seit Version CS4 lassen sich nun nahezu alle Filter auch auf Smart-Objekte anwenden. Diese Smartfilter haben den großen Vorteil, dass ihre Parameter sich auch im Nachhinein jederzeit anpassen oder auch löschen lassen, so wie Sie es auch von den Fülloptionen kennen. In der Ebenen-Palette erscheint direkt an der Ebene die Bezeichnung des Filters mit einem kleinen Schieberegler-Symbol.

Per Doppelklick darauf können Sie die Filtereinstellungen anpassen bzw. ihn zum Löschen einfach auf das Mülleimersymbol ziehen. Der Haken an der Sache: Wenn Sie den eigentlichen Ebeneninhalt verändern möchten, müssen Sie das Smart-Objekt erst rastern, womit auch der Filter endgültig mit der Ebene verrechnet wird.


2. Die Navigationsreiter erstellen

Erstellen Sie eine neue Ebene mit der Bezeichnung "Seitliche Kontur" und legen Sie an der rechten und linken Innenkante des Quadrats eine 1 Pixel starke weiße Linie an.

Definieren Sie zwei neue Ebenen zwischen den Ebenen "Seitliche Kontur" und "Hinterlegung" mit den Bezeichnungen "Licht" und "Schatten". Wenden Sie auf der Ebene "Schatten" einen radialen Verlauf von Schwarz zu Transparent an, dessen Mittelpunkt rechts unterhalb der Hinterlegung beginnt und ein gutes Stück in diese hineinläuft. Auf der Lichtebene verfahren Sie genauso, mit einem Verlauf von Weiß zu Transparent, ausgehend von links über der Hinterlegung.

Bilder

Radiale Verläufe in die Hinterlegung führen. Das Quadrat bekommt einen seitlichen Schatten, um eine schwache Abrundung zu simulieren.


 
Legen Sie für beide Verlaufsebenen eine Schnittmaske mit der Ebene "Hinterlegung" an und reduzieren die Deckkraft für die Ebene "Schatten" auf 60 %.

Laden Sie nun eine Auswahl der Ebene "Hinterlegung". Erstellen Sie eine neue Ebene und ziehen darauf am linken Rand des Quadrats einen linearen Verlauf von Schwarz zu Transparent auf.

(1). Duplizieren Sie diese Ebene, spiegeln sie horizontal und schieben sie an den rechten Rand des Quadrats

(2). Führen Sie danach die beiden Verlaufsebenen mit Strg+E zusammen und reduzieren Sie die Deckkraft auf 30 %. Benennen Sie die Ebene mit "Schatten Seite".

Bilder

Schattenwurf der gesamten Fläche.


Laden Sie den Ebeneninhalt der Ebene "Hinterlegung" als Auswahl und füllen diese auf einer neuen Ebene mit der Bezeichnung "Schattenwurf Quadrat" mit Schwarz. Wenden Sie darauf den Gaußschen Weichzeichner mit einem Radius von 2 Pixeln an und positionieren die Ebene unter der Hinterlegung.

UNBUNTE SCHATTEN: Wenn Sie unbunte Schatten setzen möchten, arbeiten Sie immer mit Schwarz. Über das nachträgliche Regeln der Deckkraft können Sie die Intensität sehr gut regeln, schränken sich aber nicht bereits im Vorfeld durch einen zu hellen Grauwert ein.


 

3. Die Navigationsreiter beschriften

Schreiben Sie den Begriff "START" in der Schriftart Arial Narrow, in 19 Pixel Größe und der Ausrichtung Zentriert. Die Farbe spielt keine Rolle, da Sie später eine Verlaufsüberlagerung anwenden werden. Richten Sie den Begriff mittig an der Hinterlegung aus, mit 15 Pixel Abstand zum unteren Rand.

(3). Suchen Sie das Eigene-Form-Objekt Bourbonische Lilie aus der Standard-Form-Bibliothek (4) und ziehen mit gehaltener Shift-Taste eine Lilie mit einer Breite von ca. 35 Pixeln auf. Positionieren Sie diese ebenfalls zentriert zur Hinterlegung ein Stück oberhalb des Begriffs "START" (5).

Bilder

Der Reiter wird beschriftet und mit einem Icon versehen.


TEXT ZENTRIEREN: Verwenden Sie bei mittig ausgerichteten Navigationspunkten immer die Absatzausrichtung Zentriert. So bleibt das Textelement auch bei längeren bzw. kürzeren Begriffen an der korrekten Position und verschiebt sich nicht zur Seite.

Fassen Sie nun alle Ebenen, ausgenommen den Himmel, in einer neuen Gruppe mit der Bezeichnung "Start" zusammen. Duplizieren Sie die Gruppe viermal, und positionieren Sie die Kopien mit jeweils 6 Pixel Abstand zur vorherigen. Ändern Sie zudem die Begriffe auf den Reitern in "START", "DIE BURG", "EVENTS", "ANFAHRT" und "KONTAKT". Passen Sie abschließend noch die Bezeichnung der Ebenengruppen entsprechend der folgenden Abbildung an.

 
TIPP: Markieren Sie zum Duplizieren die gesamte Gruppe in der Ebenen-Palette und verschieben den Reiter bei aktiviertem Verschieben-Werkzeug mit gedrückter Shift- und Alt-Taste.

Bilder

Die Reiter werden dupliziert.


4. Subnavigation

Erstellen Sie über der Ebene "Himmel" eine neue Gruppe mit der Bezeichnung "Subnavigation" und ziehen anschließend aus der Gruppe "Die Burg" die Ebenen "Hinterlegung" und "Seitliche Kontur" mit gedrückter Alt-Taste in diese neue Gruppe.

Positionieren Sie die beiden kopierten Elemente direkt an der Unterkante der bordeauxfarbenen Hinterlegung des Reiters darüber. Löschen Sie den Smart-Filter der Ebene "Hinterlegung" im Ordner "Subnavigation" und weisen Sie ihr die Fülloption Farbüberlagerung mit der Farbe Weiß zu. Reduzieren Sie danach die Deckkraft der Ebene auf 75 %. Die Hinterlegung der Subnavigation:

Bilder



 
Für die Beschriftung der Subnavigation schreiben Sie die Begriffe "Historisch", "Grundriss" und "Heute" in der Schriftart Arial Normal, in 13 Pixel Größe, mit 30 Pixel Zeilenabstand und der Farbe #383838. Die Ausrichtung des Textes ist zentriert. Richten Sie die Schrift mittig zur weißen Hinterlegung aus.

Für die Hinterlegung des aktiven Unterpunktes erstellen Sie eine neue Ebene unterhalb der Textebene und ziehen darauf einen Balken über die Breite der weißen Box in der Farbe Lila. Bezüglich Höhe und Positionierung orientieren Sie sich bitte an der folgenden Abbildung. Ändern Sie danach noch die Schriftfarbe für "Heute" in Weiß.

Färben Sie zum Abschluss die Ebene "Hinterlegung" im Ordner "Die Burg" ein. Markieren Sie dazu diese Ebene und wählen Ebene>Neue Einstellungsebene>Farbton/Sättigung… Stellen Sie den Wert bei Farbton auf –60.

Bilder

Der aktive Navigationspunkt in der Subnavigation wird farbig hinterlegt.


 
Das Tutorial ist ein Auszug aus dem Photoshop-Buch von Philip Fuchslocher und René Schulze. Wir danken Galileo Press für die Genehmigung zur Veröffentlichung.

Bilder


Philip Fuchslocher und René Schulze: Webdesign mit Photoshop

Modernes Webdesign: Mal sind das wilde und opulente Grunge-Elemente, mal futuristische Buttons oder auch nüchterne und minimalistische Layouts. Egal, welche Richtung Sie einschlagen wollen, an erster Stelle bei der Entwicklung eines Webdesigns steht der Entwurf in Photoshop.

Dieses Buch führt Sie von der ersten Idee über die Konzeption und Gestaltung einer Website bis hin zur Umsetzung mit HTML und CSS. Anhand zahlreicher Workshops werden Ihnen sowohl das nötige Praxiswissen als auch umfassende theoretische Hintergründe vermittelt, die Ihnen das eigenständige Arbeiten an Ihren Web-Projekten erleichtern werden. Vom ersten Pixel bis zur Ausgabe des fertigen Designs erarbeiten Sie sich einen kompletten und praxisnahen Webdesign-Workflow in Photoshop, bei dem Ihnen zeitgleich die Möglichkeiten und Restriktionen durch unterschiedliche Browser, Monitore und Betriebssysteme aufgezeigt werden. Zudem finden Sie in einer Vielzahl ausgewählter Praxisbeispiele konkrete Handlungsanweisungen und Inspirationen zum Erstellen webrelevanter Elemente wie Buttons, Navigationen, Hintergründe und spannende Bildeffekte.

Weitere Informationen zum Buch!


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von matze87
  • 29.07.2011 - 22:14

Vielen Dank! Hat mir als Anfänger viel geholfen =)

Portrait von OJey
  • 11.07.2011 - 07:50

Ein gelungenes Tutorial für eine Navigationsidee! Lässt sich relativ gut umsetzten.

Portrait von Maxime611
  • 30.05.2011 - 08:20

Gutes tut hat mir sehr weitergeholfen thx ;-)

Portrait von Superking88
  • 15.03.2011 - 08:22

Sry das hat mir nicht so gut weitergeholfen. Aber danke für die Mühe

Portrait von snoopdog1971
  • 07.11.2010 - 00:09

DANKE für die gute Erklärung

Portrait von buuunz
  • 28.09.2010 - 16:15

Na ja, sooo doll sieht das ja nun auch nicht aus. Aber trotzdem gut erklärt.

Portrait von kmehmet
  • 23.09.2010 - 14:31

SEHR gut erklärt danke dafür

Portrait von WebDiver_09
  • 14.09.2010 - 11:46

Na ja, sooo doll sieht das ja nun auch nicht aus. Aber trotzdem gut erklärt.

Portrait von sh_72
  • 04.09.2010 - 17:43

Ein sehr tolles und sehr gut verständliches Tutorial.

Portrait von Spearboy
  • 02.08.2010 - 15:57

Vielen Dank für diese Anleitung! Sehr anschaulich erklärt!

Portrait von snoopdog1971
  • 06.05.2010 - 11:19

Jo kenn ich schon, hab das Buch aber sehr gut erklärt

Portrait von manowar34
  • 28.02.2010 - 00:29

danke, gefällt mir sehr gut und sieht gut aus

Portrait von schmoekerliese
Portrait von tiralondon
  • 26.02.2010 - 16:29

Der Titel verspricht wirklich etwas mehr oder hätte treffender gewählt werden müßen.

Portrait von jpapst30179
  • 26.02.2010 - 10:21

Der Titel hätte besser "Kästchen, Schatten, Verläufe in PS" heißen sollen! Wird ja nix von Navigation erklärt. Mogelpackung!

Portrait von Angela2370
  • 25.02.2010 - 13:13

Sehr ausführlich erklärt, für meine Zwecke sehr gut geeignet! :)

Portrait von Wolfsfaden
  • 24.02.2010 - 23:03

Sowas hab ich schon lange gesucht, danke!

Portrait von jetoja
  • 24.02.2010 - 22:28

Hatte mir von der Überschrift auch mehr erhofft. Für mich eher unbrauchbar.

Portrait von GhostFace0
  • 24.02.2010 - 21:47

gut gemacht, danke
webdesign is immer gut :D

Portrait von Susan99
  • 24.02.2010 - 01:26

Vielen Dank! Kann ich gut gebrauchen.
LG Susan

x
×
×