Buttons erstellen

Speziell im Bereich der grafischen Anwendungsentwicklung oder in der Websitegestaltung braucht man immer wieder Buttons. Wer mit dem Grafikprogramm gimp arbeitet, muss nicht darauf verzichten Buttons professionell zu erstellen. Daher möchte ich im folgenden Tutorial kurz vorstellen, wie Sie Ihre Buttons selbständig in gimp erstellen können.

Datei Neu gimp1. neuen Button erstellen

Zu allererst sollten Sie ermitteln, wie groß die Buttons werden sollen. Messen Sie dazu die Größen Ihrer Website etc. ab. Ist dieser Schritt getan, so können Sie ein neues Bild in gimp erstellen, und dort die ermittelten Größen eingeben. Als Hintergrundfarbe wählen Sie am besten die Farbe, die auf Ihrer Website dominiert, bzw. die dort den Hintergrund bildet. Dazu klicken Sie auf "Datei" > "Neu" oder "Strg + N" und nehmen dort die Größenangaben vor.



Auswahl verkleinern2.  Größe des Buttons bestimmen

Nun wird im nächsten Schritt der eigentliche Button erstellt. Dazu legt man eine Auswahl an, welche in Größe und Form angepasst wird und den eigentlichen Button darstellen soll. Hierzu markiert man mit dem Auswahlwerkzeug den kompletten Bildbereich (wenn der Button so groß werden soll ) oder man klickt auf „Strg + A“ (über das Menü wählt man „Auswahl“ > „Alles auswählen“). Anschließend sollte Ihr Bild mit einer Markierung am gesamten Rand versehen sein.

Anschließend wird die Auswahl verkleinert. Dazu im Menü auf „Auswahl“ >  „Verkleinern“ klicken. Dort wird angegeben, um wie viel kleiner der Button im Vergleich zum Bild werden soll. Soll ein größerer Abstand von Button zu Button untereinander sein, so wird die Zahl beim Verkleinern größer angegeben, bei kleinen Abständen dementsprechend kleiner eingeben. In unserem Beispiel gehe ich von einer Pixelzahl von 4 aus. D.h. Der Button wird um 4 Pixel keiner als der ganze Bildbereich.


abgerundete Auswahl gimp3. Form des Buttons festlegen

Im nächsten Schritt wird nun die Form des Buttons festgelegt. Sie können Ihre Buttons prinzipiell eckig darstellen. Dann wird die Auswahl nicht mehr abgerundet und Sie können diesen Schritt einfach überspringen. Möchten Sie Ihr Button jedoch etwas abgerundet haben, oder gar ganz rund haben, so sollten Sie nun die Rundung bearbeiten.

Dazu gehen Sie wie folgt vor: die vorab eingestellte Auswahl sollte noch aktiv sein! Wenn das der Fall ist, dann klicken Sie auf den Menüpunkt „Auswahl “ >  „Abgerundetes Rechteck“. Dort geben Sie den Wert ein, der Ihnen zusagt. In meinem Beispiel bin ich von einem Radiuswert von 85 % ausgegangen. Je höher der Wert, desto runder wird Ihr Button, je niedriger desto eckiger. Möchten Sie also einen kreisrunden Button, so können Sie hier 100 % eingeben.

Am besten, Sie testen etwas diese Wert aus, in dem Sie einen Wert eingeben und dann wieder das Ergebnis "rückgängig machen", bis Ihnen das Ergebnis zusagt.


4. Rand und Farbe des Buttons festlegen

Im nächsten Schritt geht es darum, die eigentliche Button-Farbe zu vergeben. Füllen Sie daher mit dem „Füllen“- Werkzeug die Auswahl mit der gewünschten Farbe aus. Ist das geschehen, so lassen Sie die Auswahl noch aktiv und fügen dem Button noch eine weiße Umrandung hinzu. Das können Sie bewerkstelligen, indem Sie eine Ebene über die aktive Auswahl legen, weiß befüllen, diese um einen Pixel verkleinern und anschließend löschen.

Der weiße Rand soll natürlich nicht weiß bleiben, sondern lediglich als Ebene dienen, die nach belieben farblich verändert werden kann. Dazu wird im nächsten Schritt die Ebene mit dem weißen Rand in der Transparenz geändert. Setzten Sie diese auf einen Wert zwischen 50 und 60 Prozent. Auch die Einstellung der weißen Kanten, kann zur Weichzeichnung und somit Verbesserung beifügen.


5. Beschriftung und Glanzlichter

Haben Sie Ihren eigentlichen Button nun soweit fertig gestellt, so können Sie an die Feinarbeit gehen. Verwenden Sie nun das Text- Werkzeug, um die Buttons zu beschriften. Achten Sie darauf, dass Sie den Text eventuell etwas nach rechts versetzten, damit Sie links vom Text noch einen Pfeil, Kreis etc. als Aufzählungszeichen einfügen können, wenn Sie es möchten.

Moderne Buttons haben die Eigenschaft, dass sie einen hellen Glanz aufweisen. Diesen bekommt man, indem man wieder eine neue Ebene über den Button legt, welcher wiederum kleiner ist, als der eigentliche Button – also Auswahl um einen Pixel verkleinern. Anschließend wird diese Glanz-Ebenen mit dem Farbverlauf „Farbe nach Transparenz“ befüllt. Beim Befüllen muss man darauf achten, dass der Farbverlauf nur bis zur Mitte des Bildes gezogen wird.


Einfache Buttons erstellen

Mit der elliptischen Auswahl hingegen kann man in gimp sehr leicht Buttons mahlen. Dafür wird im ersten Schritt eine kreisrunde Auswahl in einem leeren Dokument erstellt. Diese Auswahl sollte man im nächsten Schritt mit einer Umrandung „nachziehen“. Das geht über den Menüpunkt „Bearbeiten“ >> „Auswahl nachziehen“. Auch eine Füllung braucht so ein Button. In dem Fall wähle ich einen Farbverlauf von Blau nach weiß in der Form „Kreisförmig“. So bekommt der Button einen rundlicheren Farbverlauf.

Im Großen und Ganzen wäre mein Button nun fertig. Um aber etwas die harten Kanten abzurunden kann man den Button noch etwas „Weichzeichnen“. Diese Möglichkeit bietet sich über dem Menüpunkt „Filter„ > „Weichzeichnen“ > „Weichzeichnen“.

Wem diese Funktion ein Zuviel an Unschärfe bietet, der erstellt sich vor dem Weichzeichnen eine Kopie seiner aktuellen Button-Ebene und bearbeitet den Hintergrund mit der Weichzeichen-Funktion. Die erstellte Kopie liegt in der Ebenenauflistung natürlich über dem Hintergrund. Nun kann man mit der Deckkraft der Kopie spielen und dort die ursprüngliche Schärfe durchscheinen lassen.

Denn letzten Schliff kann man dem Button mit einer Linsenreflektion verpassen. Button in gimp Dazu in den Menüpunkt „Filter“ > „Licht und Schatten“ > „Linsenreflex“ klicken. Dort die entsprechende Einstellung wählen und den Lichtpunkt an der richtigen Stelle im Button auswählen. Auf die Webgestaltung und Webdesign möchte ich jedoch in einem eigenen gimp Tutorial eingehen. Anhand dieses Beispiels sollen nur die Anwendungsmöglichkeiten der „Elliptischen Auswahl“ dargestellt werden.