Ein Button bildet neben dem Icon das kleinste Element einer grafischen Benutzeroberfläche. So werden etwa im Webdesign Formularbuttons oder Links grafisch aufgewertet oder Programme zum Download angeboten. Die Varianten sind zahlreich und unterscheiden sich in Größe, Farbe und der Grundform. Mit der richtigen Technik können schnell und verlustfrei Änderungen vorgenommen werden.

Glänzender Button

1. Grundform

Mit dem "Abgerundeten-Rechteck"-Werkzeug und einer beliebigen Vordergrundfarbe zieht man die Grundform des Buttons auf. In der Optionsleiste kann die Abrundung der Kante bei »Radius« angegeben werden. Hier wurde eine Rundung von 5 Pixel verwendet. Die Farbe kommt nun über einen Verlauf ins Spiel. Zunächst wird jedoch die Vorder- und Hintergrundfarbe definiert.

Im Beispiel waren das #1166bb (RGB 17, 102, 187) und #1144aa (RGB 17, 68, 170). Man klickt im Menü auf »Ebene ↔ Ebenenstile« und in der Auswahl auf »Verlaufsüberlagerung «. Bei Verlauf wird "Vordergrund-Hintergrund" angewählt und der Winkel auf -90 Grad eingestellt.

2. Glanz

Ein »Schlagschatten« hebt den Button etwas vom Hintergrund ab. Dieser wird ebenso als Ebenenstil aktiviert. Die Deckkraft steht dabei auf 40%, der Winkel auf 120 Grad und die Distanz auf 2 Pixel. Ein »Schatten nach innen« ermöglich den leichten Glanz auf den Button.

Die Füllmethode sollte dazu auf »Überlagern«, die Deckkraft auf 40%, der Winkel auf 90 Grad, die Distanz auf 6 und die Größe auf 12 Pixel stehen. Natürlich muss die Farbe über den Farbwähler noch auf weiß abgeändert werden. Um Farbvariationen zu erzeugen, muss man einzig die beiden Farben von dem Verlauf anpassen.

Rechteckiger Button

1. Form mit Kontur

Damit im Hintergrund etwas mehr Substanz ist, wird dieser mit einem Verlauf von #eeddcc (RGB 238, 221, 204) nach weiß gefüllt. Die Grundform des Buttons wird nun mit dem Abgerundeten-Rechteck-Werkzeug, der Vordergrundfarbe #ff9933 (RGB 255, 153, 51) und einem Radius von 2 Pixel (den man zuvor in den Optionen eingestellt hat) aufgezogen. Über »Ebene ↔ Ebenenstil« fügt man eine Kontur mit Größe: 1 Pixel, Deckkraft: 80% und der Farbe #bb8855 (RGB 187, 136, 85) hinzu.

2. 3D-Effekt

Der »Ebenenstil ↔ Schlagschatten« sorgt wieder dafür, dass der Button vom Untergrund gelöst erscheint. In den Optionen wird die Deckkraft auf 30%, die Distanz auf 2 Pixel und die Größe auf 3 Pixel festgelegt. Für einen leichten 3D-Effekt aktiviert man zusätzlich den »Ebenenstil ↔ Verlaufsüberlagerung« mit einem Verlauf von Schwarz nach Weiß.

Die Füllmethode wird hierbei auf »Umgekehrt multiplizieren«, die Deckkraft auf 20% und der Winkel auf 90 Grad eingestellt. Der 3D-Effekt wird mit dem »Ebenenstil ↔ Abgeflachte Kante und Relief« verstärkt. Die Farbtiefe sollte dabei auf 50%, die Größe auf 5 Pixel und Weichzeichnen auf 0 Pixel stehen. Jetzt kann der Button beschriftet oder ein Symbol darüber gelegt werden.

Riesenbuttons

1. Website-Grundlage

Eine Button-Reihe kann natürlich auch als Interface auf einer Website eingesetzt werden. Hier wurde im Hintergrund passend zum Thema Fußball eine Rasenfläche angelegt. Eine weiße Fläche mit leichtem Schattenwurf sorgt darüber für eine Grundlage, auf der drei große Buttons entstehen sollen. Mit dem Rechteck-Werkzeug und der Vordergrundfarbe #ff8822 (RGB 255, 136, 34) zieht man die erste Button-Fläche auf.

Die Ebene wird durch »Ebene ↔ Neu ↔ Ebene durch Kopie« oder Strg+J kopiert, mit dem Verschieben-Werkzeug positioniert und die Farbe auf #3399dd (RGB 51, 153, 221) abgeändert. Dafür reicht ein Doppelklick auf die Ebenenminiatur und die Eingabe im nun geöffneten Farbwähler. Die dritte Buttonfläche entsteht auf gleiche Weise, nur das dieses Mal als Farbe #55cc55 (RGB 85, 204, 85) eingegeben wird.

2. Glanzeffekt

Für den Glanz wird über einer neuen Ebene mit dem Auswahlrechteck eine Auswahl aufgezogen, die mit der Auswahl-Ellipse, gedrückter Shift- und Alt-Taste so bearbeitet wird, dass die Form der Reflexion dabei herauskommt. Durch Drücken der beiden Tasten wird die Schnittmenge der Auswahl gebildet.

Das Verlaufswerkzeug mit einem Verlauf von Weiß zu Transparent und die Änderung der Ebenendeckkraft auf 50% sorgt für die Illusion einer Reflexion. Die Auswahl wird aufgehoben. Diese Ebene mit "Glanzeffekt" wird zweimal so kopiert und positioniert, dass jeder Button eine eigene Reflexion besitzt.

3. Button-Menü

Der Button wird mit dem Textwerkzeug beschriftet. Diese Variante bietet genügend Platz, um neben der passenden Beschriftung auch eine kurze Erklärung anzufügen. Neben dem Interface kommt eine passende Textur zum Einsatz, um das Thema weiter zu betonen.

Button mit Icon

1. Im Hintergrund

Für dieses von Adobe inspirierte Beispiel benötigen wir zunächst eine Button-Grundlage im Hintergrund. Man könnte dazu zum Beispiel die Ebene mit #111111 (RGB 17, 17, 17) füllen und mit dem Auswahl-Rechteck einen Bereich selektieren. Dieser wird mit der Farbe #454545 (RGB 69, 69, 69) gefüllt, dann die Auswahl aufgehoben.

Zur Abgrenzung könnte noch oberhalb mit dem Buntstift und #686868 (RGB 104, 104, 104) eine Linie gezogen werden. Für gerade Striche hält man die Shift-Taste gedrückt. Ein weiterer Bereich wird mit dem Auswahl-Rechteck selektiert und mit einem Verlauf von #454545 (RGB 69, 69, 69) nach #686868 (RGB 104, 104, 104) gefüllt.

2. Button und Icons

Auch für den Button nutzt man das Auswahl-Rechteck auf einer eigenen Ebene. Hier kommt ein Verlauf von Weiß nach #eeeeee (RGB 238, 238, 238) zum Einsatz. Ein Klick auf »Bearbeiten ↔ Kontur füllen« mit der Farbe #dbdbdb (RGB 219, 219, 219), einer Breite von einem Pixel und Position: "Außen" rahmt die Fläche ein. Jetzt kann der Button beschriftet und ein Icon angefügt werden.

Weiteres Beispiel

Natürlich kann so eine »Button/Icon«-Kombination auch noch weitaus präsenter dargestellt werden. Zunächst füllen wir aber den Hintergrund mit einem dezenten Verlauf von #1166aa (RGB 17, 102, 170) nach #2266aa (RGB 34, 102, 170). Wieder zieht man mit dem Abgerundeten-Rechteck-Werkzeug und einem Radius von 5 Pixeln die Grundform auf.

Sehr oft werden - wie in den hier vorgestellten Beispielen - Verläufe und Schlagschatten verwendet, um dem Button etwas Substanz zu geben. So auch hier. Man aktiviert den »Ebenenstil ↔ Verlaufsüberlagerung«. Als Farben könnten etwa Weiß und #d6d6d6 (RGB 214, 214, 214) eingesetzt werden. Auch ein »Schlagschatten« mit Deckkraft: 20%, Distanz: 2 und Größe: 5 Pixel darf nicht fehlen. Der Button wird beschriftet und das Icon eingefügt. (tm)

Verwandte Artikel

• Webgrafik: Landschaften, Diagramme und Photoshop (1)
• Symbole, Buttons und Icons zum Download (98)
• Schwarz-Weiß, aber richtig (0)
• Schwarz, Streng oder Schlicht: Neue Icons (6)
• Photoshop: Grunge Buttons (0)
• Photoshop: Ebenen-Effekte-Button (0)
• Photoshop: Buchgrundlage (0)