In diesem Tutorial erkläre ich, wie man mit Photoshop eine hübsche Website-Navigation erstellen kann. Kann, weil jeder seinen eigenen Stil finden sollte, und kopieren einen selbst nicht weiterbringt.

Photoshop-Grundlagen setze ich voraus, du solltest wissen, was es mit Ebenenstilen, -masken, und den einzelnen Werkzeugen in Photoshop auf sich hat. Ansonsten gibt es hier auf derWebdesigner.net tolle Grundlagen-Tutorials, die alles nötige erklären sollten, des weiteren steht das Forum immer mit Rat und Tat zur Seite.

Als erstes erstellen wir in Photoshop ein neues Dokument mit den Ausmaßen 225 x 450 Pixel. Je nachdem, wo du diese Navigation dann einsetzen willst, kann die Größe natürlich variieren, allerdings solltest du darauf achten, dass genug Platz für alle Elemente ist.



Dann erstellen wir eine Hintergrundebene. Dazu kannst du entweder das Füllwerkzeug verwenden, oder, etwas eleganter, eine sogenannte Füllebene. Diese findest du unter Ebene → Neue Füllebene → Farbe. Die hat den Vorteil, dass die Farbe jederzeit veränderbar bleibt. Ich habe ein dunkles grünliches Grau (#2e3430) gewählt, aber die exakten Werte sind nicht so wichtig, hier kommt es auch ein wenig aufs Augenmaß an.







Nun erstellen wir mit dem Abgerundetes-Rechteck-Werkzeug eine neue Formebene. Stelle den Radius auf 3 Pixel, die Farbe belassen wir bei weiß, da wir später nur mit Ebeneneffekten arbeiten werden. Der Button bekommt die Größe 150x35, das kann man zwar auch „nach Gefühl“ machen, aber wer's so wie ich gern exakt hat, behilft sich folgendes Tricks: Man nehme das Auswahlwerkzeug, stelle bei den Werkzeugoptionen die „Art“ auf „Feste Größe“, und gibt dann als Breite und Höhe die gewünschten Maße ein. Nun klickt man einfach auf die gewünschte Position, und schon hat man ein Auswahlrechteck in passender Größe, dass man einfach mit dem Formwerkzeug mit den obigen Einstellungen nachfahren kann.







Da dieses weiße Rechteck mit einem schönen Button noch nicht viel gemeinsam hat, kommen jetzt die Ebeneneffekte ins Spiel. Also, Doppelklick auf „Form 1“, und dann folgende Einstellungen:

Ich werde nicht alle Einstellungen mit Bildern darstellen, da das einerseits zu viel Platz brauchen würde, und andererseits auch ein wenig unübersichtlich werden würde. Parameter, die nicht angegeben werden, bleiben wie der Standard.

Schlagschatten:

• Farbe: #131813


• Abstand: 0px


• Größe: 3px

Schein nach innen:

• Füllmethode: Ineinanderkopieren (bei manchen Photoshop-Versionen heißt das [*]Überlagern)


• Deckkraft: 30%


• Farbe: weiß (#FFFFFF)


• Größe: 10px

Verlaufsüberlagerung:





Dass der Verlauf die Füllmethode Multiplizieren verwendet ist wichtig, damit die Musterüberlagerung darunter (siehe nächster Schritt) sichtbar bleibt. Wäre die Farbe der Füllebene „Form 1“ jetzt beispielsweise schwarz, würdest du, weil hier Multiplizieren eingestellt ist, von der Verlaufsüberlagerung nichts sehen.

Musterüberlagerung:

Für die Muster für unsere Buttons erstellen wir ein neues Dokument, 4 Pixel breit und 1 Pixel hoch. Dann wählen wir das Buntstiftwerkzeug, 1 Pixel groß, stellen als Farbe schwarz ein und „zeichnen“ wie unten im Bild zu sehen. Dann wählen wir im Menü Bearbeiten → Muster festlegen und nun können wir das eben erstellte Muster für unseren Button verwenden. Verwendet dazu folgende Eigenschaften:




Kontur:




Dieser Verlauf in der Kontur gibt dem Button einen schönen Relief-Effekt, einer der vielen kleinen Kniffe, die ein edles oft von einem sehr edlen Design unterscheiden. An dieser Stelle sei noch einmal erwähnt, dass die exakten Farbwerte bei den Verläufen nicht so wichtig sind, du kannst auch ohne weiteres nur nach Augenmaß die Farben übernehmen, der Sinn eines Tutorials ist ja, etwas zu lernen, und nicht blind etwas vorgekautes nachzumachen.



Der Button ist soweit fertig, fehlt nur noch ein bisschen Text. Wir wählen das Textwerkzeug, stellen die Ausrichtung auf zentriert, und klicken ungefähr (genau positioniert wird gleich) in die Mitte des Buttons. Ich verwende als Schriftart Aller, 13 pt und fett, mit einer Laufweite von +100. Alternativ kannst du auch Trebuchet MS nehmen, die ist der Aller sehr ähnlich. Ich habe meinen Text in Großbuchstaben geschrieben, aber diese Feinheiten sind dir natürlich selbst überlassen. Doppelklickt auf die Textebene, und gebt ihr folgende Effekte:

Schlagschatten:

• Füllmethode: Ineinanderkopieren (bzw. Überlagern)


• Abstand: 0 px


• Größe: 10 px

Verlauf:



Nun gibt es einen kleinen Trick, um den Text genau mittig am Button auszurichten: Wir wählen das Transformationswerkzeug, markieren mit gedrückter Umschalttaste die Text- und die Button-Ebene, und richten die Beiden mit den unten Rot markierten Symbolen aneinander aus, ich denke, mit ein wenig herumprobieren sollten sie selbsterklärend sein. Danach sollten wir ungefähr folgenden Zwischenstand haben:



Fehlt nur noch ein wenig Web 2.0, in Form von einer Art „Reflexion“ über dem Button, mag sein, dass das einen bestimmten Namen hat, mir ist keiner bekannt. Also, wir wählen das Pfadwerkzeug (achte darauf, das „Form erstellen“ aktiviert ist) und zeichnen in etwa so etwas wie im Bild unten. Dann stellen wir die Fläche auf 0%, und erstellen einen Verlauf von weiß zu Transparent in den Ebeneneffekten, und passen dort den Winkel des Verlaufes an, so dass es schön harmonisch aussieht. Anschließend verrringern wir noch die Deckkraft auf 15%. Um diesen Glanz, der ja bereits eine Vektormaske verwendet, auf den Button zu beschränken, gibt es einen weiteren Trick: Wir erstellen ein neues Ebenenset, und weisen diesem die gleiche Vektormaske zu, wie sie der Button hat, in dem wir die Alt-Taste gedrückt halten, und die Vektormaske einfach von „Form 1“  drüberziehen. Dann ziehen wir einfach die Glanz-Ebene in dieses Ebenenset.



Der Button ist jetzt eigentlich fertig.



Damit alles übersichtlich bleibt, habe ich alles, was zu dem Button gehört, in ein Ebenenset gepackt. Wir duplizieren jetzt dieses Ebenenset und richten alle wieder wie oben beschrieben mit dem Transformationswerkzeug aus. Dann ändern wir noch die Beschriftung der einzelnen Buttons, und der erste Teil unser Navigation ist fast fertig.





Um die Navigation optisch etwas abzugrenzen, habe ich mit dem Abgerundetes-Rechteck-Werkzeug (diesmal eine Rundung von 10 px) noch eine Box dahinter gelegt, und ihr folgende Ebeneneffekte zugewiesen:

Schlagschatten:

• Abstand: 0 px


• Größe: 5 px

Verlaufsüberlagerung:



Kontur:



Dann habe ich noch nach dem gleichen Prinzip wie bei den Buttons ein bisschen Glanz hinzugefügt, das Ganze sollte jetzt so aussehen, darunter nochmal diese Hintergrund-Box alleine, damit ihr seht, wie die alleine aussehen soll:





Als nächstes werden wir zusätzlich zu dieser Navigation noch ein Suchfeld hinzufügen, das wird recht schnell gehen, denn wir werden zu einem sehr großen Teil bereits erstellte Objekte dafür verwenden. Also, dupliziere erst einmal die Hintergrund-Box sowie einen der Buttons, inklusive Beschriftung. Wenn du so wie ich den ganzen Button einem Ebenenset untergeordnet habt, dupliziere einfach dieses.

Dann skalieren wir den Button wie unten im Bild zu sehen auf ca. 20x20 Pixel, den Glanz kannst du entweder ebenfalls skalieren oder einfach weglassen, so wie ich das gemacht habe. Dann positionieren wir die ehemalige Button-Beschriftung links oben in der duplizierten Box und ändern den Text auf so etwas aussagekräftiges wie „Suche“. Als nächstes erstellen mit dem Abgerundetes-Rechteck-Werkzeug eine neue Formebene als Eingabefeld für die Suche. Die Höhe wählen wir in etwa so, das sie dem verkleinerten Button entspricht, und in der Breite sollten Button und Suchfeld dann gut nebeneinander in die Box passen. Dann ordnen wir die Elemente noch richtig an, bevor wir uns an das Aussehen des Suchfeldes machen.

Das Ganze sollte in etwa so aussehen, nicht schrecken, ich habe zur besseren Übersichtlichkeit die Ebenen umbenannt und in Ebenensets strukturiert (kann ich übrigens für angenehmes Arbeiten nur jedem empfehlen).





Wie versprochen bekommt nun das eben erstellte Suchfeld ein wenig mehr Eleganz. Ändern wir zuerst die Farbe dieser Formebene auf ein helles grün, bei mir ist es #C2CFB8. Doppelklick zum Öffnen der Ebeneneffekte, unser Suchfeld bekommt folgende Eigenschaften:

Schlagschatten:

• Deckkraft: 50%


• Abstand: 0 px


• Größe: 5 px

Verlaufsüberlagerung:



Falls du dich jetzt fragst, wie man diesen Verlauf erstellt, das ist ganz einfach: Es gibt zwei Farbregler, einen Schwarz, und einen Weiß, und beide liegen bei „Position“ auf 50 %. Dadurch bekommt der Verlauf diese harte Kante ;)

Kontur:

• Größe: 1 px


• Farbe: #293D34

Zum Schluss habe ich noch zwei schließende eckige Klammern (>>) als „Beschriftung“ für den Suchbutton verwendet, mit dem selben Ebenenstil wie die anderen Textebenen. Außerdem habe ich nach dem gleichen Schema wie das Suchfeld noch eine Login-Box hinzugefügt, die im wesentlichen aus duplizierten Ebenen des Suchfeldes besteht.

Ich komme nun zu folgendem Ergebnis:



Ich hoffe, ich konnte etwas neues beibringen, war für die Anfänger nicht zu schnell und für die Fortgeschrittenen nicht zu langsam.

Als Fortsetzung dieses Tutorials werde ich die Umsetzung dieser Navigation in XHTML und CSS erklären, also, bis bald!






>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!