Heute möchte ich euch gerne kurz erklären, wie Ihr in Adobe Fireworks einen runden Button oder ein Logo mit dem beliebten Glossy Effekt erstellt. Glossy bedeutet “glänzend” bzw. “spiegelnd” und lässt den Button bzw. das Logo so wirken, als wäre es mit einer Glasoberfläche überzogen, die durch das eintretende Licht an einigen Stellen glänzt.
Das Tutorial wurde in Fireworks CS5 erstellt, sollte jedoch auch in älteren Versionen anwendbar sein.
1. Schritt:
Legt eine neue Datei an, gebt der Leinwand eine Hintergrundfarbe, ich habe #999999 gewählt. Die Größe spielt keine Rolle – es sollte nur genügend Platz für den Button/das Logo eingeplant werden. Ich hab meine Datei in der Größe 1024 x 678 Pixel angelegt.Speichert eure neue Datei anschließend als Fireworks PNG Datei ab(STRG + S), so bleiben die Ebenen erhalten und können jeder Zeit erneut bearbeitet werden.
2. Schritt: (optional, kann auch übersprungen werden)
Erstellt ein Rechteck mit der Größe eurer Leinwand an und wählt als Füllung der Fläche “Linear”, also ein linearer Verlauf von Farbe A zu Farbe B. Wählt eine etwas dunklere Farbe A, z.B. #666666, und lasst Farbe B über die Deckkraft Einstellung transparent auslaufen. Dazu müsst Ihr den oberen Marker über Farbe B auswählen und bei Deckkraft(Opacity) den Wert 0 auswählen.
Dieser Schritt ist nicht wirklich notwendig, sieht aber meiner Meinung nach etwas besser aus.
3. Schritt:
Legt nun ein einen Kreis bzw. eine Ellipse an, Größe entscheidet Ihr wieder selbst – ich hab mich für die Größe 342 x 342 Pixel entschieden. Ich hab mir dabei aber auch nicht wirklich etwas gedacht. Außerdem könnt Ihr euer fertiges Logo oder euren fertigen Button später ohnehin belieblig skalieren.
Gebt der Ellipse eine radiale Füllung und wählt eine helle und eine dunkle Farbe aus. Beispielsweise #FF3366 (helle Farbe) und #990033 (dunkle Farbe).
4. Schritt:
Gebt euren Kreis nun über die Filter ein “Glühen”(Filter: ‘+’ -> ‘Schatten und Glühen’ -> ‘Glühen’). Als Farbe habe ich #FFFFFF(Weiß) gewählt, mit einer Breite (Width) von ’4′, einer Deckkraft von ’20%’ und ’12′ als Wert bei der Weichheit.
5. Schritt:
Gebt dem Kreis ein “Inneres Glühen”(Filter: ‘+’ -> ‘Schatten und Glühen’ -> ‘Inneres Glühen’). Als Farbe habe ich #000000 (Schwarz) gewählt, mit einer Breite(Width) von ’10′, einer Deckkraft von ’65%’ und einer Weichheit von ’4′.
6. Schritt:
Dupliziert euren Kreis nun mit “STRG+ALT+D” und gibt diesem Kreis einen linearen Verlauf mit der hellen Farbe die Ihr vorhin ausgewählt habt als Farbe A und Farbe B in in Weiß(#FFFFFF). Farbe B wird nun wieder transparent gemacht – dazu muss bei der Deckkraft (Opacity) wieder der Wert ’0′ eingegeben werden.
7. Schritt:
Fügt nun einen Text oder ein Symbol ein. Achtet jedoch darauf, dass euer Logo bzw. Schriftzug skalierbar bleibt. Es sollte also vorzugsweise ein Vektorelement sein.
8. Schritt:
Gebt nun auch eurem Symbol oder Text ein “Glühen”(Filter: ‘+’ -> ‘Schatten und Glühen’ -> ‘Glühen’). Als Farbe habe ich #FFFFFF (Weiß) ausgewählt, als Deckkraft ’50%’, als Breite(Width) ’3′ und als Weichheit hab ich den Wert ’12′ genommen.
9. Schritt:
Erstellt einen weiteren Kreis (Ellipse), der etwas kleiner(z.B. 312 x 312 Pixel) ist als der Vorherige und füllt diesen mit #FFFFFF (Weiß). Platziert diesen nun zentriert über dem anderen Kreis.
10. Schritt:
Nehmt nun das Unterauswahlwerkzeug (Subselection Tool – weißer Pfeil) und wählt den unteren Punkt der Ellipse die Ihr soeben erstellt habt aus und entfernt diesen über die “Entf”-Taste. Euer Kreis sollte nun so wie im Bild aussehen – nämlich nicht mehr wie ein Kreis!
11. Schritt:
Gebt diesem Kreis wieder einen linearen Verlauf. Beide Farben (A und B) sollten Weiß (#FFFFFF) sein und eine davon sollte die Deckkraft (Opacity) ’0′ haben, damit der verformte Kreis transparent ausläuft. Anschließend stellt Ihr die Deckkraft des Objekts auf ’50%’.
12. Schritt:
Dupliziert den eben angepassten Kreis mit “STRG+ALT+D”, invertiert den Verlauf und ändert die Farbe von Weiß (#FFFFFF) in Schwarz (#000000).
13. Schritt:
Spiegelt euren Kreis nun vertikal, damit die schwarze Seite unten ist und die transparente Seite oben. Vergrößert den Kreis, damit er bündig mit dem Ursprungskreis im Hintergrund ist. In meinem Beispiel bedeutet das eine Größe von 342 x 242 Pixel.
14. Schritt:
Dreht den Verlauf nun um ca. 30 -45° mit Hilfe des Verlauf-Werkzeuges nach links, damit die dunkle Fläche von unten rechts nach links oben ausläuft.
Fertig ist euer Button bzw. Logo mit Glossy-Effekt!
Ihr könnt den Effekt natürlich auch erweitern oder optimieren in dem Ihr einfach weitere Kreise oder andere beliebige Formen einsetzt.
Hintergrund:
Damit der Effekt noch besser rauskommt, können wir jetzt noch den Hintergrund bearbeiten. Passend dazu ist beispielsweise ein Hintergrund im Grunge-Stil, der von diagionalen Streifen überlagert wird. Ich habe dazu einfach die frei verfügbaren Grunge Paper Textures von Fudge Graphics verwendet und die in Fireworks bereits vorhandenen “Stile”.
Da der Hintergrund hier mit diesem Tutorial aber nicht wirklich etwas zu tun hat, möchte ich an dieser Stelle auch gar nicht näher drauf eingehen. Wer sich dennoch dafür interessiert, kann sich gerne meine Beispieldatei herunterladen, dort ist der Hintergrund in der endgültigen Form enthalten.
Beispieldatei runterladen (Fireworks PNG)