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.
- Download von The GIMP for Windows und GTK+ 2 Runtime Environment bei Sourceforge
- Zuerst GTK +2 und anschließend The Gimp installieren
- 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”.

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.

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.

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.


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.

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.

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

Hierdurch wird der folgende Effekt erzeugt.

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”.

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.


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.

Natürlich kann dieses HowTo auch genutzt werden, um Icons zu erstellen.
Popularity: 13% [?]





10 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
Vielen Dank!
Sehr gutes Tutorial!
das ist super !
please make some more about web 2.0 logos and banners with GIMP !! n if possible in english also
thanke
Hi, frage, bei mir ist gfig geyed-out, wo kann ich das her bekommen?
danke
Gruesse
anja
@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.
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.
Hm, irgendwie spinnen da bei mir die Grafiken…?
Continuing the Discussion