Ich zeige hier, wie man so
Zunächst muß man ein neues Bild erstellen, ich nehme dazu transparenten Hintergrund:
Nun zeichne ich die Grundform, ein Rechteck mit abgerundeten Ecken. Dazu nehme ich das Rechteck-Werkzeug (Tastaturkürzel R) und zeichne eben ein Rechteck. Man sieht nur die dünnen Markierungslinien auf dem Schachbrettmuster:
Nun suche ich mir eine passende Vordergrundfarbe aus (ein Blau mit dem Wert 237bfd) und klicke mit dem Füllwerkzeug (der auslaufende Eimer) in das eben markierte Rechteck.
Nun komme ich zum typischen Web2.0 Farbverlauf: der Rand bleibt, wie eben eingefärbt aber das innere des Buttons verläuft von der originalfarbe hin zu einem helleren Wert.
Als erstes verkleinere ich die Auswahl, sodass der dunkle Rand gleich in
der gewählten Farbe stehen bleiben wird. Das geht mit dem Menüpunkt Auswahl -> verkleinern.
Dazu brauche ich die Originalfarbe als Vordergrund und Weiß als Hintergrund. Mit dem Gradient Werkzeug Stelle ich nun den Farbverlauf stelle ich Vordergrund nach Hintergrund ein und ziehe einen geraden Verlauf von etwa der Unterkante des Buttons zur Oberkante.
Auf einer neuen (transparenten) Ebene schreibe ich nun den Buttontext und verschiebe ihn in etwa passend im Button:
Die Dialogschritte dazu sieht man im Detail hier.
Für den typischen Schatten werde ich eine etwas hellere Vordergrundfarbe wählen, z.B. 3d8afd.
Für Schlagschatten gibt einen eigenen Filter, den man unter Filter -> Licht und Schatten -> Schlagschatten
findet. Dazu mache ich alle anderen Ebenen unsichtbar (einfach die Augensymbole im Ebenendialog für die
anderen Ebenen wegklicken).
Mit den Defaultwerten sieht das dann bei mir so aus. Wenn man den Versatz und den Weichzeichner variiert, dann kann man den gefühlten Abstand des Textes vom Hintergrund und die Stärke des Schattens verändern. Fertig sieht das dann so aus:
Die Dialogschritte dazu sieht man im Detail hier.
Nun kann man den Button noch mit einer weißen Ebene Hinterlegen. Dazu im Ebenen Dialog
eine neue Ebene mit der Farbe Weiß einfügen. Die neue Ebene kann man im Ebenendialog
noch nach ganz hinten legen (Pfeil nach unten Symbol im Ebenendialog).
Die Dialogschritte dazu sieht man im Detail hier.
Nun kann man den Knopf noch - mit oder ohne den weißen Hintergrund - ausschneiden und als png oder jpeg abspeichern.
Wenn man dieses Bild nun als Button einbindet, dann sollte man den Rand noch
wegdefinieren, indem man border="0" angibt:
Fragen oder Feedback gerne an joerg@joergbeyer.com