Hier lernt Ihr, wie man einen schlichten aber schönen Button inkl. zwei Stati (Up and Over) in Adobe Fireworks CS3 erstellen könnt. Dieses Tutorial ist auch in anderen Fireworks-Versionen realisierbar. Und los gehts ...

1.

Eine Arbeitsfläche erstellen.


2.

Eine Box in Form und Größe der Arbeitsfläche erstellen und mit einem linearen, vertikalen Verlauf versehen.


3.

Den Verlauf von einem dunklen (z.B. #333333) zu einem mittleren (z.B. #666666) grau fließen lassen.


4.

Eine neue, etwas kleinere Box erstellen und der Box eine leichte Rundung geben.


5.

Die Box mittig positionieren.


6.

Der Box einen weißen Rahmen mit einer Stärke von 3 px geben.


7.

Den Rahmen nun nicht mehr auf der Kante, sondern außerhalb der Kante verlaufen lassen. So können wir später relativ einfach einen weißen Rahmen mit 2px Stärke außen, und einen grauen Rahmen mit 1px Stärke innen bzw. bei der Kante verlaufen lassen.


8.

Zwischenergebnis.


9.

Eine Kopie der Box erstellen.


10.

Dieser neue Box (die automatisch oberhalb der alten Box angeordnet sein sollte und diese exakt überlagert) nun einen Rahmen von 1 px Stärke geben und diesen grau (z.B. #999999) einfärben. So haben wir einen dickeren, weißen Rahmen außen, und einen dünnen Rahmen innen.


11.

Hintere der beiden Boxen selektieren und dieser einen Schlagschatten mit den Werten 0, 100, 6, 315 geben. So hat der Schatten ein Offset von 0 (keinen "Schlag" im "Schlagschatten", ist relativ stark/dicht und hat trotzdem einen weichen Rand.


12.

Zwischenergebnis.


13.

Nun die obere der beiden Boxen selektieren und dieser nun eine "Erhöhung" ("Bevel" mit den entsprechenden Einstellungen verleihen.


14.

Der Button wirkt nun durch den Schatten sowie den Bevel etwas räumlicher.


15.

Nun kann der Button mir einem beliebigen Text versehen werden.
(Damit der Text sichtbar ist unbedingt darauf achten, dass er als oberstes Objekt angeordnet ist.)

Der Hauptbutton, sprich, der "Up"-Status ist jetzt fertig. Nun werden wir uns um den "Over"-Status kümmern.

16.

Die obere der beiden Boxen nun markieren, und wieder an gleicher Stelle einfügen (duplizieren)


17.

Die neu entstandene Box markieren.


18.

Der neuen Box einen leichten Verlauf geben. Diesmal sollte der Verlauf oben dunkler als unten sein.

Falls notwendig nun noch einmal darauf achten, dass der Text passend angeordnet ist, z.B. mittig sitzt.

19.


Nun den Bevel der neuen, obersten Box invertierten. Dies unterstützt den Eindruck, dass der Button beim "Over"-Status "eingedrückt" ist.


20.

Zwischenergebnis.


21.

Nun kann man die obere Box beliebig ein- und ausblenden, und somit die notwendigen Stati in einer Datei gesondert exportieren: