erstellen Sie Buttons
Machen Sie 3D-Taste Bilder in Fireworks
In diesem Tutorial werden Sie lernen, wie drei glänzende Knopf Effekte mit Adobe Fireworks zu erstellen. Diese Schaltfläche Effekte umfassen:
- Eine grüne Start-Taste, die auf der Ober- und Unterseite leuchtet Fokus auf den Button Text zu zeichnen.
- Eine rote Reset-Taste, die ist ähnlich, aber mit einem Cut-in-Halb glasigen Glanz.
- Eine blaue Submit-Button mit einem erhabenen 3D gedrückt Flüssigkeit Effekt auf die Oberseite.
Die Proben dieser Schaltfläche Effekte, die wir Ihnen beibringen, Schritt-für-Schritt zu erstellen sind unten angegeben.
Start Knopf
den grünen Startknopf Effekt zu entwerfen oben gehen Sie wie folgt dargestellt:
- Schritt 1: ein neues Dokument in Adobe Fireworks öffnen und ein abgerundetes Rechteck zeichnet das abgerundete Rechteck-Werkzeug mit und stellen Sie die Füllfarbe auf eine graduelle Füllung - geht Kategorie zu Füllen >> wählen Gradient >> Wählen Sie Linear Option.
- Schritt 2: Nun die Füllfarbe klicken. und klicken Sie dann auf das kleine Farb Rechteck, das auf der linken Seite ist und die Farbe auf # 15501E.
- Schritt 3: Danach klicken Sie auf das kleine Farb Rechteck, das auf der rechten Seite und stellen Sie die Farbe auf # BAD32F. Geben Sie dies einen 1-Pixel weichen Anschlag mit der Farbe # 9FBB66. Die folgende Abbildung zeigt, wie Sie Ihr abgerundetes Rechteck soll nun angezeigt werden:
Schritt 4: ein weiteres abgerundetes Rechteck zeichnen und über die erste Rechteck mit abgerundeten Ecken platzieren und legen Sie die Füllfarbe auf # 94BE34 und Strichfarbe als keine. Jetzt gilt eine Feder von 5 zu. Dazu klicken Sie auf Rand von Eigenschaftenfenster, Feder auswählen und den Feder Wert auf 5 setzen.
Schritt 5: Nun ein drittes abgerundetes Rechteck zeichnen und es in der letzten gerundeten Rechtecke stellen. Legen Sie die Füllfarbe auf eine graduelle Füllung - Füllen Kategorie >> Gradient wählen >> Wählen Sie Linear Option.
Schritt 6: Jetzt die Füllfarbe klicken. und klicken Sie dann auf das kleine Farb Rechteck, das auf der linken Seite ist und die Farbe auf # FFFFF7. Klicken Sie nun auf das kleine Farb Rechteck, das auf der rechten Seite und stellen Sie die Farbe auf # D4E076. Das Bild unten zeigt, wie Sie Ihre Taste so weit aussehen sollte:
Schritt 7: Schneiden Sie die 3. abgerundetes Rechteck in zwei - etwa 15 Pixel in der Höhe von der Spitze. Dazu wählen Sie das abgerundete Rechteck Teilauswahl-Werkzeug verwendet, dann wählen Sie das Messer-Werkzeug und schneiden Sie das abgerundete Rechteck indem Sie die Cursor von der linken Seite nach rechts ziehen. Nun den linearen Effekt einstellen entsprechend der Höhe des abgerundeten Rechtecks und tragen Sie eine Feder von 2 (klicken Sie auf Edge von Eigenschaftenfenster wählen Feder und stellen Sie die Feder Wert auf 2). Die sich ergebende Schaltfläche aussehen sollte ähnlich dem, was unten ist:
Schritt 8: Kopieren Sie nun und klappen Sie den Schnitt abgerundetes Rechteck vertikal - Kopieren und Einfügen (Strg + C, Strg + V), dann ändern Sie unter >> Transformation >> Vertikal spiegeln. Bewegen Sie das abgerundete Rechteck auf den Boden und tragen Sie eine Feder von 1.
Schritt 9: Nun die Füllfarbe klicken. und klicken Sie dann auf das kleine Farb Rechteck, das auf der linken Seite ist und die Farbe auf # 96C932. Anschließend klicken Sie auf das kleine Farb Rechteck, das auf der rechten Seite und stellen Sie die Farbe auf # ECEC81. Das Bild unten zeigt, wie das umgekehrte abgerundete Rechteck aussehen sollte:
Schritt 10: das Textwerkzeug klicken, wählen Sie Font - Trebuchet MS. Schriftgröße - 20. Farbe - # 003300. Schriftdicke: fett. Anti-Aliasing-Ebene - Smooth Anti-Alias und schreiben Sie "Start" oder eine beliebige andere Taste Text. Ihre Glossy Button ist fertig und sollte nun wie folgt aussehen:
Reset-Knopf
Ähnlich wie bei der oben grünen Start-Taste, indem Sie die 10 Schritte für eine rote Farbpalette statt grün Sie eine glänzende rote Taste erstellen können. Farben, die wir haben, verwendet werden, umfassen: # 510000. # E8201F. # B89762 (Schritt 1: 1px soft Schlaganfall), # E93730. # F0817A. # E93B34 und # F39791. Um einen etwas anderen Effekt zu erzielen, wie in unserem Beispiel roten Knopf angezeigt müssen wir Schritt 7 ein wenig ändern. Anstatt nur einen Teil der oben für die dritte Rechteck mit abgerundeten Ecken schneiden Sie es in zwei Hälften geschnitten sollten wie unten dargestellt. Auch sollte die Deckkraft auf 80 eingestellt werden (ändern 100-80 - Opazität Wert liegt über Filter in Properties Panel).
So, jetzt haben Sie einen brandneuen Schaltfläche Effekt nur durch diese geringfügigen Änderungen zu implementieren. Nach dem Hinzufügen Ihrer ‚Reset‘ -Taste Text: wie diese (Farbe # 330000) Ihre roten Reset-Taste Bild aussehen soll:
Senden-Schaltfläche
Für diese Schaltfläche Effekt, ähnlich wie die grünen Start-und roten Reset-Tasten, müssen wir zuerst eine glänzende blaue Taste folgende Schritte 1 bis 9 mit diesen Farben erstellen: # 103C5A. # 04A5E7. # 0D7EAC (Schritt 1: 1px soft Schlaganfall), # 3799CD. # 80C6EA. # 2D98CC und # 6ACCF3. Nach Abschluss von Schritt 9 gehen Sie folgendermaßen vor:
- Schritt 10. Wir müssen nun das obere Schnitt abgerundete Rechteck hinter den zweiten Rechteck mit abgerundeten Ecken nehmen (die Feder hat 5). Dazu einfach die zweite Rechteck mit abgerundeten Ecken und das untere Schnitt abgerundeten Rechteck (drücken Sie Shift und wählt) auswählen und dann nach vorne bringen (drücken Sie Strg + Shift + Pfeil nach oben). Das Bild unten zeigt, wie Sie Ihre Taste nach dieser Platzierung Änderungen aussehen sollte:
Schritt 11. Nun ein weißer Kreis mit Ellipse-Werkzeug auf dem abgerundetes Rechteck zeichnen (Füllfarbe als #FFFFFF. Stroke Farbe wie keine) und legen Sie seine Opazität als 50. nun eine Feder 10 (klicken Sie auf Edge von Eigenschaftenfenster festgelegt Feder, wählen - Standard Federwert auf 10 sollte angezeigt werden). Dies ist, wie Sie Ihren Knopf fast wie jetzt aussehen sollte - stellen Sie die Ellipse auf der Position unten gezeigt:
Schritt 12. Da die Ellipse hat einen Trübungswert es einige der Schaltfläche Kontur verdeckt. Um dies zu verhindern müssen wir die Ellipse machen nur zum Teil zu zeigen. Um dies zu tun, nur das zweite Rechteck mit abgerundeten Ecken (kopieren und einfügen) duplizieren und Ausschneiden und Einfügen Innerhalb der Ellipse in sie (Strg + X und dann Strg + Umschalt + V). Danach die kopierten abgerundeten Rechtecks getan wird, blaue Füllung zeigen so einfach auswählen und auf Transparent ändern. Nun fügen Sie Ihre Schaltfläche 'Senden' Text (color: # 000033) und Ihre fertige Submit-Button wird wie folgt aussehen:
Benötigte Software
Adobe Fireworks: Da dieses Tutorial eine Kernfunktion von Adobe Fireworks umfasst, jede Version wird es tun.
Kompatible Versionen von Fireworks für dieses Tutorial
In Verbindung stehende Artikel