GIMP Tutorial #3 – Nützliche Web 2.0 Buttons

In Zeiten des Web 2.0 sind vor allem Icons und Buttons beliebt geworden.

Da die meisten Tutorials für Photoshop gemacht wurden, darf hier ein Tutorial für GIMP natürlich nicht fehlen.

In diesem Tutorial zeige ich, wie man in wenigen Schritten und mit sehr geringem Aufwand einfache Web 2.0 Icons erstellen kann, die sich besonders für neue Projekte/Produkte eignen (z.B. die bekannten "BETA" Buttons).

Los geht's

Zuerst erstellen ein neues Bild mit einer beliebigen Größe (z.B. 400 x 400 Pixel).

Da wir in diesem Tutorial einen Button mit Zacken bzw. Spitzen erstellen werden, erstellen wir einen neuen Pinsel. Dazu klicken wir im Pinseldialog unten auf das Symbol.

Jetzt öffnet sich der Pinseleditor. Dort nehmen wir folgende Einstellungen vor:

• Form: Karo
• Radius: 100,0
• Spitzen: 20
• Härte: 1,00

Nun wählen wir die Vordergrundfarbe aus, die der Button haben soll.

Danach erstellen wir eine neue transparente Ebene, wählen das Pinselwerkzeug mit unseren eben erstellten Pinsel und klicken einmal ins Bild.

Nun machen wir eine Auswahl vom Button (Rechtsklick auf die Ebene > Auswahl aus Alphakanal) und verkleinern sie um 2 Pixel (Auswahl > Verkleinern...).

Danach erstellen wir eine neue transparente Ebene.

Als nächstes stellen wir die Vordergrundfarbe auf weiß, wählen das Verlaufswerkzeug, setzen den Farbverlauf auf "VG nach Transparent" und ziehen den Verlauf auf der Auswahl von oben nach unten. Die Deckkraft setzen wir auf ca. 85%.

Nun erstellen wir wieder eine neue transparente Ebene und umranden die Auswahl (Auswahl > Rand ...). Dort geben wir 1 Pixel an.

Jetzt wiederholen wir den Schritt von eben. Mit dem Verlaufswerkzeug ziehen wir einen Verlauf von oben nach unten (VG nach Transparent). Anschließend heben wir die Auswahl wieder auf und wenden den graußschen Weichzeichner mit 1 Pixel an (Filter > Weichzeichnen > Graußscher Weichzeichner ...).

Je nach Farbe kann die Deckkraft noch etwas runtergeschraubt werden.

Zum Schluss erstellen wir dann noch einen Text und das war's schon.

Das Ergebnis

Das Ergebnis kann sich für den geringen Aufwand doch sehen lassen: