Mit GIMP lassen sich auf einfache Weise glänzende Schaltflächen in allen möglichen Farben und Formen erstellen. Schaltflächen in diesem Stil sind schon seit einiger Zeit sehr populär.

In dieser Anleitung beschreibe ich, wie man solche Schaltflächen erstellt. Dabei stelle ich zwei Methoden vor, eine für abgerundete Schaltflächen, und eine für eckige.

Eckige Schaltfläche erstellen

Die Erstellung einer eckigen Schaltfläche besteht im Wesentlichen aus 4 Arbeitsschritten.

Schritt 1: Rahmen erstellen

Man beginnt damit, eine neue Ebene Rahmen zu erstellen. In dieser neuen Ebene wird mit dem Auswahlwerkzeug eine neue Auswahl mit den Abmessungen der Schaltfläche erstellt. Diese wird anschließend mittels dem Füll-Werkzeug in der gewünschten Farbe des Rahmens eingefärbt.

Wichtig: Die Auswahl noch nicht wegklicken!

Schritt 2: Hintergrund der Schaltfläche

Für den Hintergrund der Schaltfläche kann man ebenfalls eine neue Ebene Schaltflächen-Hintergrund erstellen, das macht es einfacher ihn im Nachhinein noch zu verändern, falls man mit dem Endergebnis nicht ganz zufrieden ist. Nun geht man im Menü auf Auswahl -> Verkleinern, und verkleinert die Auswahl um 1 Pixel. Jetzt wird die Auswahl mit dem Hintergrund der Schaltfläche gefüllt,. Ob dabei ein Farbverlauf oder eine einzige Farbe genommen wird ist Geschmackssache. Im Beispiel verwende ich einen kreisförmigen Farbverlauf.

Schritt 3: Hervorgehobener Rand

Jetzt erstellt man wieder eine neue Ebene Hervorgehobener Rand, deren Ebenenmodus auf Überlagern gestellt wird. Mit Auswahl -> Rand wird nun ein 1 Pixel breiter Streifen um den Rahmen herum erstellt.

Dann wird mit dem Farbverlaufswerkzeug ein linearer Farbverlauf von weiß nach transparent von oben nach unten aufgezogen. (Als Vordergrundfarbe weiß, VG nach Transparent als Farbverlauf).

Anschließend wechselt man die Form des Farbverlaufs auf Kreisförmig, und zieht unten mittig noch einen Farbverlauf auf. Das sieht dann ungefähr so aus:

Schritt 4: Glas-Effekt

Jetzt wird wieder eine neue Ebene Glas-Effekt erstellt, diese bekommt ebenfalls den Ebenenmodus Überlagern zugewiesen, die Deckkraft wird auf 30-70%  (je nach dem wie stark der Effekt sein soll) eingestellt. Dann erstellt man eine neue Auswahl über die ober Hälfte der Schaltfläche, und füllt diese mit weißer Farbe (#FFFFFF).

Das Endergebnis sieht so aus:

Abgerundete Schaltfläche erstellen

Die abgerundete Glas-Schaltfläche wird ähnlich erstellt wie die Rechteckige.

Schritt 1: Rahmen erstellen

Man beginnt wieder mit dem Rahmen, dazu wird zuerst eine neue Ebene Rahmen erstellt, in der eine Auswahl mit den Abmessungen der Schaltfläche aufgezogen wird. Zum Abrunden wird im Auswahl-Werkzeug die Option Abgerundete Ecken aktiviert, der Radius gibt dabei an wie stark die Schaltfläche abgerundet wird. Bei Kanten glätten sollte ebenfalls ein Häkchen sein, dadurch sieht der Rahmen später sauberer aus.

Wichtig: Die Auswahl wird auch bei den nächsten Schritten noch benötigt, also nicht weg klicken!

Andere Möglichkeit: Man kann auch das Elliptische Auswahl-Werkzeug verwenden, wenn man möchte das die Schaltfläche eine solche Form hat.

Die Auswahl füllt man nun mit der gewünschten Rahmenfarbe.

Schritt 2: Hintergrund erstellen

Anschließend wird eine neue Ebene Hintergrund erstellt, und die Auswahl per Auswahl -> Verkleinern um 1 Pixel verkleinert. Die Auswahl wird dann mit dem Farbverlauf-Werkzeug ausgefüllt.

Schritt 3: Rand hervorheben

Danach wird eine neue Ebene Rand-Hervorhebung erstellt. Die Auswahl wird mit dem Fülleimer weiß ausgefüllt, anschließend wird die Auswahl mittels Auswahl -> Verkleinern um 1 Pixel verkleinert, und deren Inhalt gelöscht (ENTF drücken). Es bleibt nur ein weißer Rand übrig.

Danach wird noch der Ebenenmodus auf Überlagern gesetzt, und die Deckkraft auf 70% eingestellt.

Schritt 4: Glas-Effekt

Man erstellt eine neue Ebene Glas-Effekt und stellt den Ebenenmodus ebenfalls auf Überlagern, und die Deckkraft auf 30-80% (je nach Stärke des Effekts). Nun klickt man mit der rechten Maustaste auf die Hintergrund-Ebene (der Schaltfläche) und wählt Auswahl aus Alphakanal. Anschließend wählt man wieder die Glas-Effekt Ebene aus.

Jetzt wird das Auswahl-Werkzeug verwendet um die Auswahl auf die obere Hälfte der Schaltfläche zu begrenzen. Dazu wird zuerst das Häkchen bei Abgerundete Ecken wieder entfernt. Dann wird bei gedrückter STRG-Taste eine Auswahl vom unteren Teil der Schaltfläche aufgezogen (mit gedrückter STRG-Taste werden Teile einer Auswahl subtrahiert, also entfernt.)

Diese Auswahl wird dann mit weißer Farbe gefüllt. Das Endergebnis sieht so aus:

Zum Schluss noch beide Varianten als .xcf:

Rechteckige Schaltfläche
Abgerundete Schaltfläche

• Glas-Text erstellen
• GIMP: Objekte wegretuschieren und Texturen erstellen mit Resynthesizer
• Ebeneneffekte (ähnlich Photoshop) mit GIMP
• Farbkombinationen unter Gnome mit Agave
• Bildschirmfotos unter Linux