Schon seit einiger Zeit hatte ich den Gedanken das Pixelhorse Logo auch tatsächlich zu verpixeln, quasi back to nature. Es wurde dann auch ein bischen überarbeitet, und eine pixelversion erstellt. Dann sollte es auch noch animiert werden, wobei es vielleicht demnächst noch eine weitere Variante geben wird, wo dann das Pferd tatsächlich galoppiert, also aus dem Kopf ein Pferd wird welches galoppiert. Nur so eine Idee. Jetzt habe ich erstmal den Kopf verpixelt und animiert.
So geht’s:
1. Ausgangsbild als Vektorgrafik
Das Ausgangsbild wurde zunächst als Vektorgrafik in Affinity Publisher oder einem vergleichbaren Programm erstellt. Dadurch bleibt die Grafik sauber skalierbar und eignet sich besonders gut für spätere Animationen, ohne dass Qualitätsverluste auftreten. Vektorgrafiken sind dafür die ideale Basis, weil sie aus klaren Formen und Linien bestehen und sich flexibel weiterverarbeiten lassen.
2. Varianten für die Animation
Im nächsten Schritt wurden verschiedene Varianten für die Animation vorbereitet und geprüft. Dabei ging es darum, welche Elemente sich bewegen sollen, wie der Ablauf aussehen kann und welche Animation am besten zur Grafik passt. So entstand eine Grundlage, auf der die spätere Animation gezielt aufgebaut werden konnte.
3. Umsetzung mit LottieFiles
Anschließend ging es für die eigentliche Animation auf LottieFiles.com. Dort wurde die fertige Animation erstellt und später veröffentlicht. Als Exportformat wurde schließlich eine SVG-Animation gespeichert, da bei den kostenlosen Möglichkeiten nur eine reduzierte Version für GIF oder MP4 verfügbar war. Deshalb fiel die Wahl auf SVG, weil sich dieses Format für die weitere Nutzung am besten eignete.
4. SVG-Code im Editor einfügen
Zum Schluss wurde das SVG im Editor geöffnet, um den Code zu kopieren. Das ist wichtig, weil das SVG sonst nur als normales Bild gerendert wird und die Animation nicht korrekt funktioniert. Der kopierte Code wurde anschließend eingefügt, damit die Animation direkt eingebunden und richtig dargestellt werden konnte.