Skip to content



HowTo: Web 2.0 Badge mit THE GIMP erstellen

Dieses Howto ist auf die Software The Gimp ausgerichtet und erklärt die Erstellung eines Web2.0 Badge mit The Gimp. Will man zum Beispiel einen Star Bagde erstellen will, wie er auch Be.Ajaxilicoius eingesetzt wird, geht dieses in sehr wenigen Schritten. Zuerst einmal erkläre ich, wie man in wenigen Schritten die Software Gimp installiert. Im Anschluss erkläre ich Schritt für Schritt die Erstellung eines Web2.0 Badges.

The Gimp
Diese kostenlose Software ist frei verfügbar und einfach zu bedienen. Es ist zwar nicht so umfangreich mit Funktionen ausgestattet, wie Photoshop, allerdings bietet es einen guten Ersatz für den nicht-professionellen Einsatz. Im Folgenen habe ich einmal kurz umrissen, wie man The Gimp unter Windows installiert.

  1. Download von The GIMP for Windows und GTK+ 2 Runtime Environment bei Sourceforge
  2. Zuerst GTK +2 und anschließend The Gimp installieren
  3. Fertig!

Nun sollte Gimp in dem Startmenü der Windowsinstalltion auftauchen und gestartet werden können.

Star Badge
Zuerst einmal erstellt man ein neues Bild in der gewünschten Größe mit dem gewünschten Hintergrund. Wir werden hier nun einmal ein Bild der Größe 180×180 px mit der Hintergrundfarbe Weiss erstellen. Dies geht über das Menü “Datei” –> “Neu”.

Gimp - Neues Bild erstellen

Anschließend hat man das erstellte Bild in hewünschter Größe und entsprechenden Hintergrund. Nun wird die Funktion “Gfig” benötigt. Diese wird über das Menü “Filter” –> “Render” –> “Gfig” aufgerufen.

Gimp - Gfig Funktion

Nun muss Werkzeug “Stern erstellen” ausgewählt werden und die Anzahl der Seiten unter Werkzeugoptionen eingestellt werden. Wir haben hier die 13 ausgewählt. Gibt man hier weniger Seiten an, werden die Zacken der Bagde grober.

4.png

Jetzt muss der Stern möglichst zentral in der Mitte des Objekte eingefügt werden. Nun muss im Gfig-Fenster “Durchsuchen” geklickt werden. Dieses öffnet das Fenster “Brush”, in diesem Fenster muss nun der 1×1 px Circle ausgewählt werden. Wählt man einen dickeren Circle als 1×1 px, wird der Rand des Stern entsprechend dicker dargestellt.

22.png

51.png

Aktuell ist der Stern allerdings noch zu spitz. Um dieses zu ändern mus mit dem Werkzeug “Einzelnen Punkt bewegen” muss in eine der inneren Spitzen des Stern geklickt werden und nach außen gezogen werden. Hierdurch verändert sich der Winkel der Spitzen, so dass der Stern nicht mehr so spitz ist. Besitzt das Badge nun die gewünschte Form, kann das Gfig-Fenster geschlossen werden.

6.png

Bisher ist das Badge allerdings noch nicht mit Farbe gefüllt. Da wir allerdings einen schimmernden Effekt erstellen wollen, benötigen wir zwei Farben. Hierzu klicken wir mit dem Werkzeug “Zusammenhängenden Bereich wählen” in das Innere des Sterns. Hierdurch wird der Stern ausgewählt.

Nun müssen die zwei Farben ausgewählt und eingestellt werden. Ich habe die Farben #ea1b1b und #cf3a3a.

7.png

Mit dem Werkzeug “Mit Farbverlauf füllen” muss nun eine Linie innerhalb des Sterns gezogen werden.

8.png

Hierdurch wird der folgende Effekt erzeugt.

9.png

Was jetzt aber noch fehlt ist ein Schatten, der das Badge umrandet und abgrenzt. Um dies zu erreichen klickt man mit dem Werkzeug “Zusammenhängenden Bereich wählen” außerhalb des Sterns und invertiert dies mit “Auswahl” –> “Invertieren”.

 

10.png

Um den Schatten zu erzeugen, wird ein Skript eingesetzt. Dieses aktiviert man über “Skript-Fu” –> “Schatten” –> “Schlagschatten”. Um den Schatten nur gering zu zeigen sind, habe ich die unten aufgeführten Werte ausgewählt und mit “OK” bestätigt.

11.png

 

12.png

Will man nun noch das erzeugte Badge mit einem Text versehen muss mit dem Werkzeug “Text zum Bild hinzufügen” innerhalb des Stern geklickt werden und der entsprechende Text in der gewünschten Schrift hinzugefügt werden.

badge.png

Natürlich kann dieses HowTo auch genutzt werden, um Icons zu erstellen.

Popularity: 13% [?]

Posted in HowTo. Tagged with , , , , .

10 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. vale said

    Vielen Dank!
    Sehr gutes Tutorial!

  2. Janek said

    das ist super !
    please make some more about web 2.0 logos and banners with GIMP !! n if possible in english also ;)
    thanke

  3. Anja said

    Hi, frage, bei mir ist gfig geyed-out, wo kann ich das her bekommen?
    danke
    Gruesse
    anja

  4. @Anja
    Das ist doch eher ungewöhnlich. Hast du schon mal probiert Gimp einfach nochmal zu installieren? Dies würde ich vermutlich als erstes probieren.

  5. Anonymous said

    Hi, habe ich schon mehrfach ausprobiert ;-)
    keine chance, ich hab es auch dann von verschiedenen pages probiert, no chance.
    Ich werd es jetzt mal unter linux probieren, vielleicht geht das dann wenigstens. ;-)

  6. Hm, irgendwie spinnen da bei mir die Grafiken…?

Continuing the Discussion

  1. michfrms Weblog » Blog-Archiv » links for 2007-03-11 linked to this post on 11 März 2007

    [...] HowTo: Web 2.0 Badge mit THE GIMP erstellen | Bloganbieter.de Blog (tags: gimp web2.0 webdesign tutorial) [...]

  2. Highlights Januar 2007 | Bloganbieter.de Blog linked to this post on 22 März 2007

    [...] HowTo: Web 2.0 Badge mit THE GIMP erstellen “Dieses Howto erklärt die Erstellung eines Web2.0 Badge mit The Gimp.” [...]

  3. Badges - endlich modern - marc pentermann.de linked to this post on 17 September 2007

    [...] Kostenlose Vorlagen gibt es bei Deziner Folio und eine Anleitung zum Erstellen mit Gimp hat das Bloganbieter.de Blog. [...]

  4. Badges - endlich modern - Der Webanhalter linked to this post on 3 Januar 2009

    [...] Kostenlose Vorlagen gibt es bei Deziner Folio und eine Anleitung zum Erstellen mit Gimp hat das Bloganbieter.de Blog. [...]