GIMP Tutorial #3 – Nützliche Web 2.0 Icons


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 (beliebt sind z.B. die bekannten “BETA”, “NEU” oder “HOT” Icons).

Los geht’s

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

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

GIMP - Neuer Pinsel

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

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

GIMP Pinseleditor

Nun wählen wir die Vordergrundfarbe aus, die das Icon haben soll.

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

Einfacher Pinsel

Nun machen wir eine Auswahl vom Icon (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.

GIMP - Umrandung hinzufügen

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:

Web 2.0 Icons mit GIMP