gimp Button Tutorial
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.
1. gimp Button Tutorial: 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.
2. gimp Button Tutorial: 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.
3. gimp Button Tutorial: 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.
3. gimp Button Tutorial: 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.
4. gimp Button Tutorial: 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.
