Im folgenden Tutorial geht es erneut um den Einsatz von Adobe Fireworks - bei mir in der Version CS4. Dieses Tutorial wird euch zeigen, wie ihr coole Buttons mit Reflektion erstellt - Web 2.0 getreu versteht sich.

Schritt 1

Ihr legt ein neues Dokument (300×300 im Beispiel) an und wählt eine Hintergrundfarbe, vorzugsweise Schwarz. In diesem Dokument erstellen wir nun mit dem abgerundeten Rechteck-Werkzeug eine weiße Form, wie im Bild zu sehen. Die Maße betragen in etwa 175×30 px - ist jedoch geschmackssache.

Schritt 2

Unser abgerundetes Rechteck bekommt nun einen Farbverlauf von einem dunkleren Türkis (#0099CC) in ein helleres Türkis (#00CCFF).

Schritt 3

Unser abgerundetes Rechteck erhält nun noch den Filter “Inneres Glühen” mit den angegebenen Werten und als Farbe #006699

Schritt 4

Das abgerundete Rechteck wird nun dupliziert

Die Ecken müssen etwas spitzer gemacht werden, damit wir es schmaler machen können.

Nun nehmen wir noch die den Farbverlauf heraus, setzen die Farbe auf weiß und löschen den “Inneres Glühen”-Filter. Die Ecken rundet Ihr wieder ab.

Schritt 5

Nun bekommt unser kleineres abgerundetes Rechteck die Option “Ausblendbild”

Der Verlauf darf nicht ganz senkrecht sein, sondern muss ganz leicht schräg sein, sodass man am rechten Ende des Rechteckes noch etwas Weiß sieht. Den Mischmodus stellt Ihr nun auf “Überlagerung” bzw. “Ineinanderkopieren” in älteren Fireworks Versionen.

Schritt 6

Nun erstellen wir mit dem Ellipsen-Werkzeug eine Ellipse mit folgender Form und geben ihr einen Feder-Rand mit dem Wert “30″ und einer Opazität (Transparenz) von “40%”.

Wenn wir die Elipse in den Ebenen nun noch in die Mitte packen, sind wir mit diesem Schritt fertig.

Schritt 7

Wir duplizieren unser großes abgerundetes Rechteck erneut, stellen als Farbe weiß (#FFFFFF) ein und entfernen den “Inneres Glühen”-Filter.

Mit dem Pfad-Werkzeug erstellen wir nun erstmal solch eine simple Form über die Hälfte des weißen Rechteckes.

Wenn wir fertig sind wählen wir kurz den weißen Mauszeiger, markieren die Form und wählen erneut das Pfad-Werkzeug, um in der Mitte des unteren Randes einen neuen Punkt hinzuzufügen.

Nun ziehen wir diesen Punkt mit dem weißen Mauszeiger noch etwas zurecht und verschieben das Rechteck etwas nach links, wie im Bild zu sehen.

Wir markieren beide Objekte und wählen “Modifizieren” -> “Pfade Kombinieren” “Überschneiden” aus.

Schritt 8

Das entstandene Objekt bekommt einen Verlauf - oben weiß und unten ein helles Türkis.
Wir legen es jetzt über unser Button und geben der Form noch eine Opazität (Transparenz) von 25%.

Schritt 9

Dieser Schritt ist recht spontan entstanden und im Button-Überblick ganz oben nicht mit enthalten.
Wir duplizieren unser fundamentales abgerundetes Rechteck erneut, lassen dieses Mal aber Verlauf, Farbe und “Inneres Glühen” drin. Wir verkleinern es von der Breite her ein wenig, geben dem Objekt den Filter “Gauß Verwischen” mit einem Wert von 3.3 und legen es in den Ebenen ganz nach unten.

Schritt 10

Wir markieren nun alle Objekte und gruppieren sie (Str+G).

Schritt 11

Die Gruppierung wird nun dupliziert, vertikal gekippt und bekommt erneut ein “Ausblendbild”

Wir stellen nun noch den Verlauf ein und geben dem Ganzen eine Opazität von 70%.

Fertig ist unser Button im Web 2.0 Style