Inkscape

Wie ich bereits berichtet habe, bin ich in einem Counter Strike Clan aktiv und seit längerer Zeit dort auch für die Betreuung des Game- und des Webserver verantwortlich. Da mir das alte Clanlogo nicht wirklich gefiel, entschied ich mich für meine Freunde ein neues Logo zu basteln.

Von der Vorlage bis zum fertigen Gif, möchte ich euch hier meine Arbeitsschritte mit den kostenlosen Programmen Inkscape, Blender und Animake zeigen.

Als kleine Anmerkung vorweg, ich bin auch nur ein Einsteiger in diesen Programmen, aber ich möchte hier zeigen, wie man trotzdem als Anfänger brauchbare Resultate erzeugen kann. Auf die genaue Bedienung der Programme werde ich im Detail nicht eingehen (können), da es den Rahmen sprengen würde. Entsprechende Anleitungen und Tutorials findet man 1. auf den offiziellen Webseiten der Programme (Links dazu stehen am Ende des Artikels) und 2. liefert eine Recherche im Internet viele Ergebnisse. Für den Einsatz im Professionellen Bereich kommen sicherlich meist kommerzielle Programmalternativen in Frage, aber es geht eher um den Weg, wie so etwas vom Prinzip her entstehen kann.

1. Die Vorlage

Ich wollte das Logo nicht komplett neu erstellen, sondern einfach optisch etwas aufwerten, da es leider auch sehr schlecht zu lesen war.

Was uns allgemein fehlte, war eine frei skalierbare Vektorgrafik des Logos.  Aus diesem Grund beschäftigte ich mich mit Inkscape. Natürlich kann man für die Erstellung eines Logos auch Programme wie GIMP usw. benutzen, nur ist dieses nicht dazu geeignet Vektorgrafiken zu erstellen. Wer jedoch eine Grafik erstellenmöchte, um diese nur als Vorlage zu verwenden, der kann natürlich auch GIMP nutzen.

Was ist besser als sich alles in einem Programm neu zu zeichenen? Richtig! Man nimmt sich eine Vorlage.  Deshalb habe ich mir das alte Logo in Inkscape importiert, um das Logo einfach nachzuzeichnen.

Es gibt auch eine Funktion in Inkspace unter “Pfad” -> “Bitmap vektorisieren” , die eine normale Grafik in Vektoren umwandelt. Leider ist das nur hilfreich, wenn die Vorlage gut genug ist. Leider war dies bei mir nicht der Fall, ausserdem wollte ich wissen, wie es auch manuell funktioniert. Also musste ich es doch per Hand nachziehen. So begann ich fröhlich meine Bezierkurven zu ziehen. Für jedes Element legte ich mir eine eigene Ebene an, damit ich diese komplett ein und ausblenden konnte.

Das Logo ist sicherlich keine Meisterleistung, denn es besteht nur aus wenigen Objekten mit maximal jeweils einem Farbverlauf  für einen leichten Glanzeffekt. Zum Schluss hatte ich das Logo als normales JPG exportiert.

2. Blender – aus 2D wird 3D

Ich hatte gelesen, dass man Dateien aus Inkscape und weiteren Formaten (z.B. ps, eps, GIMP etc.) direkt importieren kann. Leider war die Darstellung nicht sehr genau und ich hätte wahrscheinlich länger für die Korrektur benötigt, als es selber wieder von einer Vorlage nachzubauen. Also hatte ich mein zuvor als JPG aus Inkscape exportiertes Logo als Hintergrundbild in Blender geladen und es angefangen dort mit Bezierkurven alles nachzuzeichnen. Dann gab ich allen Objekten eine Farbe und gab ihnen mit der “extrude” Funktion eine Tiefe. Dann wurden alle Objekte zu einer Gruppe zusammengefaßt.

Wie man sieht, unterscheidet sich das 3D Objekt ein wenig von der Vorlage. So habe ich die Position und Skalierung der Texte leicht geändert, sowie keine sichtbaren Glanzeffekte. Diese Anpassungen waren notwendig, da 1. Blender mit Lichtquellen arbeitet, die bei den enstprechenden Einstellungen Oberflächen glänzen lassen und 2. sah die Rotation mit dem Text “Treme” direkt an dem “X” nicht so schön aus. So etwas sieht man aber meist erst, wenn die Szene gerendert wird.

Im Anschluss habe ich die Animation mit 80 Bildern in einer Aufläsung von 800 x 600 Pixel (mit 50 %)  als JPG rendern lassen. Ich hatte es etwas kleiner probiert, jedoch war dadurch die Qualiät beim Verkleinern nicht mehr überzeugend.

Ich habe auch ein kleines Tutorialvideo für euch erstellt, wo ich zeige, wie man mit Inkscape und Blender einfache Formen und Logos in ein 3D Objekt einfach automatisch umwandeln lassen kann.

3. Aus der Animation ein Gif erstellen

Die aus Blender exportierten Einzelbilder wurden jetzt in Animake geladen. Dort kann man die Anzeigedauer jedes einzelnen Bildes in Millisekunden bestimmen. So habe ich z.B. das erste Bild wesentlich verlängert, damit es so ausschaut, als ob die Drehung kurz stoppt.

In Animake hat man dann auch die Möglichkeit, sich die später fertige Animation anzeigen zu lassen und die Bilder zu verkleinern. Möchte man das Ganze dann als GIF abspeichern (dazu müssen alle Bilder ausgewählt werden die in der Animation enthalten sein sollen), gibt es auch die Option die enthaltenen Farben als gemeinsame Palette erkennen zu lassen. Das reduziert noch einmal die entgültige Größe. Die Zusammenstellung lässt sich auch als Projekt abspeichern. So lässt es sich auch später noch einmal aufrufen, um es mit veränderten Einstellungen erneut zu exportieren.

4. Das Ergebnis

Ich präsentierte das fertige GIF im Forum unseres Clans und unser Clanleader (unser “Häuptling”) baute es sofort ein (obwohl ich eigentlich erst einmal eine Meinung hören wollte). Jetzt ziert es als Avatar die Beiträge unserer Clanmitglieder.

Da es als Avatar dienen sollte, habe ich es auf 100 x 75 verkleinert. Damit die Dateigröße jedoch nicht zu unverschämt groß ist, reduzierte ich die Anzahl der Frames um die Hälfte und ergöhte gleichzeitig die Anzeigedauer der einzelnen Bilder in Animake. Damit ist die Animation nicht mehr ganz so flüssig wie gewollt, jedoch immer noch akzeptabel und hat “nur” noch eine Größe von 217 KB.

5. Links

Inkscape: www.inkscape.org

Blender: www.blender.org (englisch)

Animake: www.animake.de (für private Nutzung kostenlos)