Moderne Navigation mit Fireworks gestalten

von Benjamin Hartmann | 2 | 7168 Aufrufe

Anzeige Hier werben

Im Folgenden sehen wir die Navigation, die wir am Ende erhalten wollen. Arbeiten werden wir ausschließlich mit dem Rechteck-Werkzeug, linearen Verläufen sowie mit dem Text-Werkzeug.

Bild zu Moderne Navigation mit Fireworks gestalten

Zu Beginn habe ich daher eine Farbpalette mit den Farbcodes angefertigt, die wir brauchen werden. Der letzte Grauton beziehungsweise der letzte Orangeton stellt die Rahmenfarbe dar, während die Farb- und Grautöne davor für den Verlauf bereit stehen.

Bild zu Moderne Navigation mit Fireworks gestalten

Auf geht's. Wir legen zunächst mit dem Rechteck-Werkzeug ein neues Rechteck an. Für die Höhe nahm ich 24px, die Breite kann man beliebig wählen. Dieses Rechteck bekommt zunächst den letzten Grauton (#313131) als Rahmen. Anschließend wählen wir als Füllung einen linearen Verlauf. Für den Verlauf benötigen wir, wie im Bild zu sehen, 5 Farben. Diese sind von Links nach Rechts die Grautöne aus der angelegten Palette von Oben nach Unten (#CCCCCC ... #161616). Die Punkte richten wir in etwa so aus, wie im Bild zu erkennen ist.

Bild zu Moderne Navigation mit Fireworks gestalten

Nun schieben wir die Regler, die dicht beieinander liegen, so eng zusammen, dass der Übergang nicht weich ist, sondern eine scharfe Kante darstellt. Dies erfordert beim ersten Mal ein wenig Fingerspitzengefühl, ist sonst jedoch nicht sonderlich schwierig zu bewältigen.

Bild zu Moderne Navigation mit Fireworks gestalten

Dieses Rechteck bekommt noch eine Rundung von 3px, anschließend wird es dupliziert.

Bild zu Moderne Navigation mit Fireworks gestalten

Das duplizierte Rechteck bekommt nun unsere Orangetöne. Wie man sieht, brauch man nur in der bekannten Reihenfolge die Farben austauschen. Die Position der Schieberegler bleibt identisch. Später wird dieses Rechteck den Zustand darstellen, wenn man über ein Navigationspunkt scrollt.

Bild zu Moderne Navigation mit Fireworks gestalten

Nun duplizieren wird das Rechteck mit den Grauverläufen erneut und stellen die Rundung sowie die Breite des orangen und des duplizierten Rechteckes auf 0px beziehungsweise auf 80px.

Bild zu Moderne Navigation mit Fireworks gestalten

Was nun kommt, müssen wir bei den kleinen sowie bei dem großen Rechteck machen. Wir wählen die Rechtecke einzeln mit dem schwarzen Zeiger an und verschieben den Verlauf so, dass wir diesen hellen dünnen Streifen unter dem schwarzen Rand sehen.

Bild zu Moderne Navigation mit Fireworks gestalten

Das kleine graue Rechteck wird nun mehrfach dupliziert und über unsere eigentliche Navigation, nämlich das breite Rechteck, gelegt. Diese kleinen Rechtecke begrenzen unsere Navigationspunkte.

Bild zu Moderne Navigation mit Fireworks gestalten

Als nächstes positionieren wir unser oranges Rechteck über einen beliebigen Navigationspunkt, ändern die Höhe auf 23px und die Breite auf 78px.

Bild zu Moderne Navigation mit Fireworks gestalten

Zuletzt legen wir noch unsere Navigationspunkte mit dem Textwerkzeug rüber. Damit wäre die Navigation in Fireworks fertig. Die Beschriftung kann alternativ auch nach der Umsetzung in HTML als Text durchgeführt werden, wenn keine besonderen Effekte (z.B. Konturen) gewünscht sind.

Bild zu Moderne Navigation mit Fireworks gestalten

Ein weiterer Artikel verdeutlicht, wie Menüs in XHTML und CSS sinnvoll umgesetzt werden können. Die erstellten Grafiken können dort als Hintergrundbilder eingesetzt werden. Die Punkte 3.1 und 3.2 erläutern dort die Umsetzung eines horizontalen Menüs, wie es oben dargestellt ist.

Über den Autor: Benjamin Hartmann
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten