Icons automatisch erstellen

Sowohl in der Softwareentwicklung, beim Erstellen von Präsentation wie auch bei der Gestaltung von Websiten wie dieser, benötige ich immer wieder Icons. Die Icons zu zeichnen ist ein Teil des Aufwandes, ein anderer Teil ist es, diese in verschiedenen Größen und Kombination mit verschiedenen Hintergründen zu erzeugen. Der folgenden Artikel zeigt Dir, wie du mit dem Tool “auszogne” tausende von Icons automatisch ohne Aufwand erstellen kannst. Das Setup der Lösung kostet dich maximal ne Stunde.

Problem

Nehmen wir alleine das Frickeldave-Icon als Beispiel. Ich wollte das in folgenden Kombinationen haben:

  • Alleinstehend in weiß-türkis
  • Alleinstehend in schwarz-türkis
  • Mit schwarzem gefüllten Kasten als Hintergrund
  • Mit weißem gefüllten Kasten als Hintergrund
  • Mit schwarzen nicht gefüllten Kasten
  • Mit weißem nicht gefüllten Kasten
  • Mit schwarzen gefüllten Kreis als Hintergrund
  • Mit weißen gefüllten Kreis als Hintergrund
  • Mit schwarzen nicht gefüllten Kreis
  • Mit weißem nicht gefüllten Kreis

Die Hintergründe natürlich jeweils nur zum passenden Logo, ein schwarzer Hintergrund mit schwarzer Schrift, macht keinen Sinn, einen leeren Rahmen will ich aber wiederum mit beiden Varianten des Logos. Das ergibt schon alleine 14 Bilder. Die wichtigsten Maße sind:

  • 2000 Pixel
  • 512 Pixel
  • 256 Pixel
  • 128 Pixel
  • 64 Pixel
  • 48 Pixel
  • 32 Pixel
  • 16 Pixel

Multipliziert mit den zuvor genannten Optionen kommen wir für ein einziges Bild auf 114 Dateien und da sind jetzt nur die PNGs als Zielformat eingerechnet. Vielleicht will ich noch verschiedene Schattenarten, etc. Du siehst, das hört nicht mehr auf. Wenn das zeichnen der Bilder ja noch irgendwie Spaß macht, das Erzeugen der Dateien gehört nicht zum spaßigen Teil. Daher habe ich mich entschlossen, am Wochenende ein wenig was mit der bash zu basteln um meine Icons automatisch zu erstellen, was ich in diesem Artikel vorstellen möchte. Übrigens, wer jetzt vor einem Windows System sitzt und meint aufhören können zu lesen, dem empfehle ich diesen Artikel. Hier zeige ich dir, wie du ruckzuck mit der WSL2 ein Linux Image an den Start bekommst, was sich nahtlos in dein Windows System integriert.

Design decisions

Ich will gar nicht behaupten, dass ich mir wahnsinnig viel Gedanken gemacht habe, ein paar aber schon:

  1. Ich will nicht mehrere Dateien pflegen müssen. Alle Bilder müssen in einer GIMP Datei als Layer enthalten sein.
  2. Alle Bildinformationen müssen in der GIMP-Datei enthalten sein. Aus diesen Informationen sollen sowohl die Vernüpfung zwischen Vorder- und Hintergrund kommen, als auch der Zieldateiname.
  3. Die Bilder sollen in irgendeiner logischen Verzeichnissstruktur liegen, die aber auch nicht zu tief verkapselt ist.
  4. Performance ist mit schnuppe, wegen mir kann das Script ne Weile laufen (z.B. nächtlich in irgendeiner Toolchain).
  5. Ich will keine höhere Programmiersprache verwenden. Es reicht einfache Bash-Logik mit simplen Fehlermanagement. Wenn Fehler auftreten, kann man direkt im Script schauen, wir bauen hier ja (noch 😉 ) keine Enterprise Lösung.
  6. Ich setze voraus, das alle Bilder quadratisch mit einer Ausgangauflösung von 2000×2000 Pixeln erzeugt werden. Andere Formate sind hier nicht im Fokus.

Beschreibung der Lösung

Du findest alle hier beschriebenen Sourcen auf meinem github Account. Das folgende Beispiel beschreibt die Gestaltung des Frickeldave-Logo mit ein paar verschiedenen Hintergründen.

Klonen des git repos

Als erstes kopierst du dir das Git-Repository auf deine lokale Maschine. Ein Git-Client sollte (z.B. in deiner WSL Umgebung) vorinstalliert sein. Wechsel hierzu in ein Verzeichnis deiner Wahl und führe das folgende Kommando aus.

git clone https://github.com/Frickeldave/auszogne.git

Dort findest du nun folgende Dateien vor:

  • auszogne.sh
    Das eigentliche Script
  • frickeldave.xcf
    Die Beispiel GIMP-Datei
  • README.md
    Eine paar Basisinfos

Editieren der GIMP Datei

Du kannst mit der beigelegten “frickeldave.xcf” starten. Benötigt zum editieren wird das freie Grafikbearbeitungstools “GIMP“.

Layerstruktur in GIMP

Die Namen der Layer sind nach einem festen Konzept aufgebaut.

Hintergrundlayer
<Back>#<Name>#<Background Index>
Vordergrundlayer
<Front>#<Name>#<List of background layer>

Das Prinzip sollte klar sein. Alle Vordergrundlayer beginnen mit “Front”, alle Hintergrundlayer mit “Back”. Die Hintergründe werden mit einem Index versehen, bei den Vordergründen wird hinten angegeben, mit welchen Hintergründen die Vordergründe verknüpft werden sollen. So kannst du nun frei entscheiden, welche Vorder- zu welchen Hintergründen passen (Schatten nur zu schatten, weiß nicht auf weiß, und so weiter).

Wichtig ist noch folgendes:

  • Alle Layer müssen im RGB Farbraum abgespeichert werden
  • Alle Layer müssen exakt 2000×2000 Pixel groß sein (Layer -> Layer to image size)
  • Die linke oberen Ecke des Layers muss sich auf Position 0,0 (X,Y) befinden.

Sollte eine der Bedingungen nicht erfüllt sein, wird der Layer übersprungen, aber das Script läuft weiter.

Ausführen des Scripts

Hast du die Datei erstellt, kannst du auch schon loslegen. Editiere als erstes die Datei “auszogne.sh” (Das wird später nicht mehr nötig, wenn ich parameter eingebaut habe, aktualisiere ich diesen Artikel) und lass uns einen Blick auf die folgenden Variablen werfen:

ASZ_SOURCEFOLDER=$(dirname "$(readlink -f "$0")")
ASZ_BASEFOLDER=/mnt/c/temp
ASZ_GIMPFILE=${ASZ_SOURCEFOLDER}/frickeldave.xcf
ASZ_DEBUG="false"

  • ASZ_SOURCEFOLDER definiert das Verzeichnis in dem die GIMP Datei liegt. Mit der Vorbelegung sucht das Script diese im Speicherort des Scriptes.
  • ASZ_BASEFOLDER ist der Pfad in dem Bilder exportiert werden. Der Vorbelegte Pfad geht davon aus, dass du das Script in einer WSL Umgebung ausführst und auf dem Windows Client unter c:\temp die Bilddateien speichern möchtest.
  • ASZ_GIMPFILE spezifiziert den Dateinamen für die GIMP-Datei
  • ASZ_DEBUG kannst du auf “true” stellen, wenn du SEHR ausführliche Ausgebinformationen benötigst (Diese Ausgebe ist auch hilfreich, wenn du einen Issue reporten willst).

Sind alle Variablen befüllt, kannst du das script in einer bash ausführen um deine Icons automatisch zu erstellen. In der Ausgabe erhälst du nun alle Informationen zum Export Vorgang.

root@wsl:/home/dave/dev/Auszogne# ./auszogne.sh
21:00:26.921 INFO: Create working directory.
21:00:26.925 INFO: Create workdir "/mnt/c/temp/exportfolder/export_21_00_26_923".
21:00:26.932 INFO: Workdir successful created.
21:00:26.934 INFO: Read out all gimp layers into local cache.
21:00:26.983 INFO: Found 10 layers in source file.
21:00:27.045 INFO: Successful imported 8 layers, devided into 4 background layers and 4 foreground layers.
21:00:27.046 INFO: export images
21:00:27.050 INFO: Try to export 1 images for layer "FrickeldaveWhiteFlat"
21:00:28.433 INFO: Try to export 3 images for layer "FrickeldaveBlackFlat"
21:00:32.790 INFO: Try to export 1 images for layer "FrickeldaveWhiteShadow"
21:00:34.613 INFO: Try to export 3 images for layer "FrickeldaveBlackShadow"
21:00:39.075 INFO: -------------------------------------------
21:00:39.076 INFO: Images exported: 8
21:00:39.077 INFO: Images created: 64
21:00:39.078 INFO: Starttime: 2021-02-15_21:00:26
21:00:39.079 INFO: Endtime: 2021-02-15_21:00:39
21:00:39.080 INFO: Seconds elapsed: 13
21:00:39.081 INFO: -------------------------------------------

Das script legt in dem von Dir definierten Exportfolder je Hintergrundlayer einen Ordner an und legt die Bilder mit den verschiedenen Größen dort ab.

Die erzeugte Verzeichnisstruktur

Weitere Ideen

Gerne kannst du mir Ideen zur Weiterentwicklung hier unten an den Artikel anhängen, ich werde diese Liste dann gerne erweitern. Folgende Dinge habe ich aktuell noch vor:

  • auszogne.sh muss parametrisierbar sein, so dass die Datei nicht mehr editiert werden muss.
  • Das script muss mit mehr Distributionen getestet werden (aktuell Debian 10 auf WSL2)
  • GIMP Layer groups müssen unterstützt werden (habe ich noch nicht getestet, könnte aber der Übersicht zum Vorteil gereichen)
  • Alleinstehende Bilder müssen heute mit einem leeren “Fake” Hintergrund erzeugt werden, der dann auch überall verknüpft werden muss. Schön wäre es, den Vorderung immer auch alleinstehend zu erzeugen (oder mit Parameter?!)
  • Das ganze als Docker Image wäre natürlich auch nice.
  • –h / –help muss eingebaut werden

Fazit

Aktuell ist das Script ein “MVP”. Im großen und ganzen ist das Ziel erreicht, du kannst deine Icons automatisch erstellen und sparst jede Menge Zeit. Ob das überall und jederzeit schon funktioniert? Mmh, eber fraglich, da hoffe ich nun auf euer Community Feedback. Weitere Verbesserungen werde ich über die Zeit einbauen. Schön finde ich auch, dass das Script super lokal funktioniert und sich perfekt in eine Buildchain einbauen lässt (um z.B. nachtsüber zu laufen). Mit dem Beispiel benötigt unsere “Auszogne” 13 Sekunden, ich habe das mal mit 200 Layern und 12 verschiedenen Hintergründen probiert, da kann es dann schon mal eine gute Stunde dauern bis alle Bilder erzeugt wurden.

Ein letztes Wort zum Namen: Eine “Auszogene” wird von der Mitte zum Rand “ausgezogen”. Das gleiche macht unser Script hier. Eine fette GIMP Datei in der Mitte, wird zu einem Wulst (unsere tausenden von Bildern) “extrahiert”. Mein Tool, mein Name ;-).

Schreibe einen Kommentar

WordPress Cookie Hinweis von Real Cookie Banner