Erstellen Sie somit als erstes ein neues Bild "CTRL+N".

Nachdem Sie Ihr neues Bild vor sich haben, sollten Sie soweit sein wie das untenstehende Bild.

Nun kommen wir zu den Farben. Was sehr wichtig ist um eine Zeitgerechte Navigation zu erhalten, ist, dass der Farbwert sehr hell sein muss. Wir können hier auch von Pastellfarben sprechen. Nehmen Sie mit dem "Color-Picker" oder dem "Gradient-Fill" Farbe auf. Die Farbe für den Farbverlaufsbeginn bzw. -ende lautet: #E4E8EF .

Erstellen Sie ein neues Layer (Ebene) für Ihren Navigationshintergrund. (Wieso? Damit wir später evtl. nur den Navigationshintergrund ausbelichten oder einfärben könnten)

Wenn Sie die zweite Farbe ( #7AA4DE ) gewählt haben können Sie nun mit dem "Füllwerkzeug" oder "Gradient-Fill" Ihren Navigationshintegrund auffüllen. Nachdem Sie dies getan haben, sollten Sie etwas ähnliches wie im untenstehenden Bild erhalten.

Nun haben wir unseren gefüllten Bereich und wollen diesen nun irgendwie Trennen von unserem Inhaltsbereich (Weisser Bereich unten).

Erstellen Sie nun ein neues Layer (Neue Ebene) für die Blaue Linie. Im Beispiel unten heisst dieses Layer "borderline" Ziehen mit dem Malwerkzeug eine gerade Linie. Um nicht zu verutschen, sollten Sie während Sie die Linie Ziehen die Taste "SHIFT" (Pfeil nach oben auf der Tastatur) drücken, somit werden nur 180 Grad Winkel gezeichnet.

Voilà, Sie haben nun Ihren Navigationsbereich gezeichnet und wir können schon mit der ersten "Schaltfläche" beginnen. Markieren Sie eine "Kreis-Selektion" (Siehe Bild unten). Erstellen Sie hier jeweils auch eine neue "Ebene" (Englisch : Layer). Schleichwerbung muss sein, filedesign.com. Die Farbe können Sie mit dem "Color-Picker" aufnehmen. Damit Ihr Kreis aer auch rund und nicht eliptisch wird, sollten Sie während des kreisselektierens die Taste: "SHIFT" gedürckt halten. Somit wird nur eine proportionale Höhe und Breite des Kreises erstellt. ;)

Hui, wir haben da schon ein Button in Windeseile und können gleich weiter zum nächsten Schritt übergehen. Übrigens für Schreibfehler hier entschuldige ich mich. Nun geben wir unserem Knöpfchen einen Rahmen. Da Adobe Photoshop 5.5 © nur beschränkte "Effekte" beinhaltet, müssen wir den blauen Rahmen (Siehe Bild unten) leider mit einem "Outer Glow" erstellen (Glühen). (In Adobe Photoshop 6.0: Rahmen/Stroke).

Geben Sie die gleichen Einstellungen wie im Bild gezeigt ein.

Schon haben wir einen kleinen einfachen Knopf, nun geben wir ihm auch einen "Touch" von "Leichtigkeit" mittels eines leichten wölbens der Oberfläche. Dies können wir mit dem Effekt: "Bevel and Emboss" erzeugen.

Jetzt kommen wir zum Schluss, indem wir unserer Navigationsschaltfläche ein nettes Icon geben. Nun habe ich hier einfach die "Webdings"-Schriftart genommen, da diese auf vielen Microsoft © Windows © -Systemen schon vorinstalliert ist. Die Farbe sollte die gleiche sein wie der Navigationsrahmen. Achja, verschieben Sie die Schaltfläche dann genau über Ihren Navigationsrahmen. Somit geben wir der Navigation eine Einheitlichkeit.

Damit die Navigation auch lesbar wird, müssen wir jeweils einen Navigationstext eingeben. Hier habe ich für das passende Icon (Symbol) das Wort "Books" genommen. Da Sie jetzt schon mit Effekten gearbeitet haben, können Sie ohne zusätzliche Beschreibung Ihrem Text einen "Dropshadow" (Schlagschatten) geben. Dieser Schlagschatten ist zwar kaum sichtbar, doch sehr wichtig, da das gesamtbild mit vielen "Unscheinbarkeiten" zusammenhängt. Bei vielen Arbeiten werden Sie dies schlussendlich merken, dass gerade die "feinen und schlichten"-Sachen umso wichtiger werden.

So, dieses letzte Tutorialbild werde ich nicht weiters beschreiben. Da wir alle Teile der Navigation in Layer aufgeteilt haben, können Sie mit "Adobe ImageReady 2.0 ©" oder höher eine HTML-Umsetzung erstellen.

Original Adobe Photoshop 5.5 PSD-File hier zum Downloaden.

Autor: filedesign.com