Idee
Die Idee, Gifs für verschiedene Feiertage zu gestalten, entstand letzte Weihnachten. Wie mittlerweile jedes Jahr erhielt ich die meisten Weihnachtsgrüsse über Social Media Plattformen oder Whatsapp – das digitale Zeitalter lässt grüssen! Und wie jedes Jahr fiel es mir schwer, ein passendes Bild oder Gif zu finden, um zu antworten. V.a. sehen die meisten Gifs relativ veraltet aus und und lassen sich oft nur durch ein bisschen schimmerndes Kerzenlicht als Animation klassifizieren. Deshalb habe ich beschlossen, mich einmal an ein paar eigenen digitalen Feiertags-Postkarten zu versuchen, wodurch dieses Gifcard-Projekt entstand.
Konzept
Bevor ich mit der technischen Produktion begann, habe ich mir ein Design-Konzept für die Gifs überlegt, damit die verschiedenen Animationen zu den unterschiedlichen Feiertagen etwas vereinheitlicht werden und als Serie erkennbar sind. Relativ schnell war klar, dass das Kernstück jeder Gifcard ein passender Tier-Charakter sein sollte, der den Empfänger des Gifs direkt anspricht. Dazu ein einfarbiger Hintergrund und eine einheitliche Schriftart. Bei Letzterer habe ich mich für «Amatic SC» von Google Fonts entschieden, da diese Schrift mit ihrem verspielten Design recht gut zum Gesamtkonzept passt.
Bezüglich der Feiertage, für die ich ein Gif erstellen wollte, habe ich mich auf sechs der bekanntesten festgelegt, zu denen man sich – jedenfalls meiner Erfahrung nach – am ehesten gratuliert oder eine Textnachricht schreibt. Und zwar sind dies: Valentinstag, Ostern, Geburtstag, Halloween, Weihnachten, Neujahr.
Am Ende sollte zusätzlich eine Website entstehen, auf der man die Gifcards anschauen, teilen und downloaden kann.
Umsetzung & Herausforderungen
Animationen
Zu Beginn fertigte ich verschiedene Ideenskizzen für jedes Gif an. Sobald ich mich für eine Skizze entschieden hatte, folgte das Anlegen einer Farbpalette und das Erarbeiten des Charakterdesigns in Illustrator. Da ich zuvor kaum über das Benutzen der Basisformen herausgekommen bin, war es für mich eine Herausforderung, im Umgang mit dem Pen Tool so gut zu werden, dass ich meine Vorstellungen einigermassen umsetzen konnte. V.a. bei den ersten Gifs musste ich deshalb meine Skizzen entsprechend vereinfachen.
Das anschliessende Animieren wollte ich ursprünglich komplett in After Effects vornehmen, da ich letztes Semester schon ein wenig Erfahrung mit diesem Programm sammeln konnte. Nach langem Googeln und einigen Youtube-Tutorials bin ich auf das AE Plugin Duik Bassel gestossen, das den Rigging Prozess der Charaktere wesentlich vereinfachen sollte. Doch schon nach den ersten Versuchen stellte ich fest, dass ich mit diesem Keyframe-basierten Plugin nicht die flüssige Animation hinbekommen würde, die ich mir erhofft hatte. Auf der Suche nach einer Alternative bin ich letztendlich auf Adobe Character Animator gestossen – ein Programm, das mit Gesichtserkennung und Triggers an Stelle von Keyframes arbeitet. Nach mehreren Tutorials zu diesem Programm hatte ich die Basics verstanden und begann, meinen ersten Charakter damit zu animieren. Leider musste ich dafür die Illustrator-Datei bzgl. Ebenen und deren Benennung komplett überarbeiten, was einiges an Zeit kostete. Hinzu kamen neue Elemente, die zusätzlich erstellt werden mussten: z.B. verschiedene Münder, um den Charakter reden zu lassen oder Augen, die blinzeln konnten. Doch nach mehreren Startschwierigkeiten und erneuter Suche nach Tutorials beim ersten Charakter ging die Animation bei den restlichen relativ schnell voran.
Als nächstes wurden alle Charaktere in After Effects importiert. Dort habe ich dann auch die kleineren Animationen, wie das Feuerwerk im Neujahrs-GIF, die Übergänge am Ende jedes GIFs oder die Schriftanimation vorgenommen. Auch hier habe ich mir mein Wissen mithilfe von Tutorials angeeignet.
Letztendlich musste das Ganze noch ins GIF-Format gebracht werden. Dafür habe ich die Animationen als Videodatei exportiert und in Photoshop die Grösse sowie die Anzahl Farben reduziert, bevor sie mithilfe der PS Exportfunktion "Save for Web (Legacy)" in ein GIF verwandelt wurden. Leider sind die meisten GIFs durch die eher aufwendigen Animationen ziemlich gross geraten und es war schwierig, einen Kompromiss zwischen Qualität und File-Grösse zu finden. Hie und da musste ich etwas Dithering/Noise in Kauf nehmen.
Website
Bei der Website handelt es sich um einen Onepager, welchen ich mit Bootstrap erstellt habe. Für die Animation des Like-Buttons sowie des Titels im Header habe ich "Lottie" von Airbnb verwendet, wodurch es mir möglich war, die Animationen in After Effects zu erstellen und mithilfe des AE Plugins "Bodymovin"als json zu exportieren. Da ich zuvor weder mit Bootstrap noch mit Lottie gearbeitet habe und dies überhaupt erst die zweite Website ist, die ich je erstellt habe, musste ich auch hier relativ viel Zeit in Recherche investieren und ansonsten auf die Trial&Error Methode setzen.
Besonders das Programmieren des Like-Buttons erwies sich als schwierig, schliesslich sollte der Button auch nach erneutem Laden der Seite aktiviert bleiben. So richtig funktioniert dies auch jetzt noch nicht, denn ich habe es lediglich geschafft, den Klick auf den Button mithilfe von jQuery im localStorage zu speichern, sodass er nur aktiviert bleibt, wenn man die Website auf demselben Computer im selben Browser neu lädt.
Learnings
Ich habe gelernt, dass das Erstellen von Animationen viel mehr Zeit in Anspruch nimmt, als anfänglich gedacht. Besonders dann, wenn mein Laptop bereits bei der Preview-Funktion in After Effects so sehr an seine Grenzen stösst, dass aus 25fps plötzlich 0.5 fps werden.
Ausserdem habe ich gemerkt, wie wichtig es ist, sich zu Beginn eines Projektes umfassend darüber zu informieren, welche Optionen es bzgl. Umsetzung gibt. Denn wäre ich bei Duik Bassel, der ersten recherchierten Möglichkeit, geblieben, selbst als klar wurde, dass ich meine Vorstellungen damit nicht ganz hätte umsetzen können, hätte ich mehr Zeit für ein schlechteres Ergebnis investiert.
Fazit
Insgesamt bin ich mit dem Projekt ganz zufrieden. Zwar ist am Ende nicht alles so herausgekommen, wie ich es mir vorgestellt habe, jedoch konnte ich die Hauptidee erfolgreich umsetzen. Und auch wenn es bei meinen Animationen definitiv noch Luft nach oben gibt, so finde ich sie für den Anfang ganz gelungen. Besonders gefreut hat mich bei diesem Projekt allerdings sowieso nicht das Ergebnis, sondern, dass ich die Möglichkeit hatte, viele verschiedene Programme, Techniken und Plugins rund ums Animieren kennen zu lernen und auszuprobieren.
