zur Startseite vom TP

1Schritt 1

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.

---

2Schritt 2

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.

---

3Schritt 3

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.

---

4Schritt 4

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 Tastenbsp;SHIFT (Pfeil nach oben auf der Tastatur) drücken, somit werden bnur 180 Grad Winkel gezeichnet.

---

5Schritt 5

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 bwährendnbsp;des kreisselektierens die Taste: SHIFT gedrückt halten. Somit wird nur eine proportionale Höhe und Breite des Kreises erstellt. ;)

---

6Schritt 6

 

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.

---

7Schritt 7

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.

---

8Schritt 8

 

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.

---

9Schritt 9

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.

---

10Schritt 10

 

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.

---