webdesign-mit-CSS

Eine professionelle und elegante Navigation mit Photoshop erstellen

Schon in meinen letzten Wochen-Tweets hatte ich auf einen Artikel über Website-Navigationen verwiesen. Eine Navigation ist nunmal obligatorisch für jede Website. Da gibt’s nichts dran zu rütteln.

Heute will ich kurz eine frische, elegante und professionell aussehende Navigation mit Photoshop erstellen und die einzelnen Schritte, die hierzu nötig sind erläutern. Das Endprodukt wird dann so aussehen:

Ich will auch gleich damit anfangen. Zunächst benötigen wir ein Fenster mit den Abmessungen 1100 x 200 px. Als Hintergrund habe ich ein grau gewählt (#25292e).

Welchen Hintergrund man hier wählt hängt natürlich von der Website ab, für die man die Navigation baut, aber in meinem Fall wird der Kopf der Site eben genau dieses grau im Hintergrund haben. Der nächste Schritt ist dann die eigentliche Navigationsleiste. Dazu wähle ich das Rechteck-Werkzeug und zunächst die Farbe weiß. Nun ziehe ein Rechteck über den kompletten oberen Bereich meines grauen Hintergrunds. Die Höhe de Rechtecks sollte ungefähr 55px betragen.

Um nun einen gewissen dreidimensionalen Effekt zu erzielen, wende ich einen kleinen Gradient-Overlay Effekt auf das Rechteck an. Farbverlauf von hellgrau (#dfdede) nach weiß (#ffffff).

Zusätzlich dann noch einen klitzekleinen Schatten…

Danach sollte die Navigation schonmal so aussehen:

Um das ganze noch ein wenig plastischer wirken zu lassen, füge ich an das untere Ende der Leiste noch eine 1px hohe weiße Linie über die komplette Breite der Leiste ein.

Das ist doch schonmal recht nett. Im nächsten Schritt baue ich den Hintergrund oder das kleine Kärtchen oder Schild (wie auch immer) für das spätere Logo der zukünftigen Site ein. Im Prinzip sehen die Schritte ähnlich aus, wie bei der Leiste. Die Größe des Schildes beträgt in diesem Fall 150 x 155 px. Nun wähle ich aber ein Rechteck mit abgerundeten Ecken und der Radius der Abrundung beträgt 5px.

Auch hier wird wieder der Layer-Style Gradient Overlay angewendet. Diesmal aber von weiß zu einem etwas leicht dunklerem grau (#c0bfbf).

Nun müssen wir noch den Schatten anfertigen. Einen einfachen Layer-Style können wir hier nicht nehmen, weil der Schatten nur über der Leiste sichtbar ist und auch ein wenig den Eindruck erzeugen soll, das Schild wäre leicht von der Leiste weggehend. Blöd ausgedrückt, aber man sieht ja was ich meine.

Deshalb dupliziere ich zunächst die Ebene des Schildes. Und dann färbe ich die Original Ebene mit dem Schild schwarz ein (Color Overlay). Als nächstes wende ich den Filter Gaussian Blur an. Man muß hier mal ein wenig rumprobieren, welche Einstellung einem am besten gefällt.

Danach gehe ich auf das Bewegungswerkzeug (ganz oben) und setze den Haken bei Show Transform Controls. Mit desen Hilfe verkleinere ich den “Schatten” auf die Höhe der Leiste. Danach schalte ich um auf das Warp Tool und verforme den Schatten wie im Endresultat zu sehen. Jetzt nur noch die Sichtbarkeit nach Geschmack runterdrehen (hier: 49%) und dann sollte der Schatten ungefähr so aussehen:

Wenn ich nun wieder das Schild (eigentlich die Kopie von vorhin) sichtbar mache, dann sieht es schon netter aus…

Jetzt geht es um die eigentliche Navigation. Um die einzelnen Links zu separieren erstelle ich einen Divider. Er besteht eigentlich aus zwei senkrechten Linien. Die rechte bekommt ein kleines Color-Overlay von #bcbcbc nach #f6f6f6. Die linke Linie ist schlicht weiß. Angewendet sieht das dann so aus:

Angefangen habe ich den letzten Divider ganz rechts zu setzen. Wie man oben gesehen hat, soll meine Website am Ende sechs Links in der Navigation erhalten. Aus diesem Grund habe ich einen Abstand von 120px zwischen den einzelnen Dividern gewählt.

Um die Navigation noch ein wenig informativer, aber auch visuell etwas interessanter zu machen, habe ich unter den jeweiligen Link-Namen ebenfalls in etwas kleinerer Schrift und hellerem grau eine Mini-info zu jedem Link dazu geschrieben.

Die Schrift hierfür ist Verdana 13px schwarz und für die Mini-Info: Verdana 10px #737373.

Im großen und ganzen wäre es das bereits. Je nach Website fehlt dann natürlich noch das Logo. Die Links muß man sich dann auch dementsprechend anpassen. Die Frage ist nun, wie sollen sich nachher im XHTML / CSS die Links verhalten, wenn man mit der Maus drüberfährt ? Ich würde in diesem Fall gar keinen so großen Aufwand betreiben. Je nach Farbschema der Website würde ich einfach den Linknamen in einer anderen (passenden) Farbe ändern. Das ist alles. Einfach und effektiv.

Hier gibt es die PSD-Dateien zum Download !

Dieser Eintrag wurde am Montag, 21. Juni 2010 um 08:15 erstellt und ist abgelegt unter Allgemein, Photoshop, Tutorial, WebDesign. Mit dem RSS 2.0 Feed kannst du den Antworten zu diesem Artikel folgen. Du kannst eine Antwort hinterlassen, oder einen Trackback von deiner eigenen Seite senden.