Idee
Während des Lockdowns hat sich meine Kommunikation mit Freunden und Familie fast komplett auf Skype und Messenger Apps wie Telegram oder WhatsApp beschränkt. Gerade bei Letzteren ist es ganz praktisch, wenn man schriftlichen Botschaften mit Emojis oder Stickern unterstreichen kann, schliesslich fällt dort die nonverbale Kommunikation komplett weg, was schnell mal zu Missverständnissen führt. Und so flogen in den letzten Monaten unzählige Sticker und Emojis über meinen Bildschirm, was mich schliesslich auf die Idee brachte, mich selbst einmal an einem Sticker Pack zu versuchen.
Da wir in Branded Motion dieses Jahr mit Duik Bassel arbeiten, war dies ausserdem die perfekte Gelegenheit, um das AE Toolset besser kennenzulernen.
Umsetzung & Herausforderungen
01 | Skizzen & Illustrator
Als Erstes galt es, einen Charakter zu entwerfen. Dabei habe ich darauf geachtet, dass das Design nicht allzu detailliert wird, damit ich später nicht zu viele Probleme beim Animieren habe. Nach einigen Skizzen ist schliesslich Percy, der Pinguin entstanden. Anschliessend machte ich mich daran, Ideen für die Darstellung der gängigsten Emojis zu entwickeln. Dieser Teil hat so viel Spass gemacht, dass ich am Ende viel zu viele Ideen hatte, die ich zeitlich nie alle hätte umsetzen können, wenn ich genau arbeiten wollte. Also habe ich mir die besten neun davon ausgesucht und sie anschliessend in Illustrator vektorisiert.
02 | After Effects
Um die Sticker am Ende in Telegram installieren zu können, müssen sie in einem speziellen Dateiformat abgespeichert werden. Für den Export hat Telegram daher ein Lottie-basiertes AE-Plugin entwickelt, dass Vektoranimationen als Code in einer .TGS-Datei speichert. Dies, um bestmögliche Qualität bei geringer Dateigrösse gewährleisten zu können. Auf diese Weise verbrauchen Telegram-Nutzer nicht ihr gesamtes Datenvolumen, wenn sie viele Sticker versenden.
Damit der Export mit dem Telegram-Plugin auch reibungslos klappt, schreibt Telegram eine ganze Reihe von technischen Voraussetzungen für die Animation vor: Die Sticker dürfen nicht grösser als 512x512 px sein, müssen entweder 30 oder 60 fps aufweisen und die Animation darf max. 3s dauern. Ausserdem sollte man auf AE-Funktionen wie Expressions, Masks, Images, Solids, 3D Layers, Layer Effects etc. verzichten. Als ich dies gelesen habe, dachte ich schon, dass das wohl doch nichts wird mit meinem Vorhaben. Trotzdem habe ich erstmal einen Schnelltest gemacht: Einen springenden Ball mit Maske und Expressions von Duik animiert, exportiert und schliesslich in Telegram versendet. Dies funktionierte einwandfrei.
Also habe ich angefangen, für die verschiedenen Pinguine ein Face- und Body-Rig anzulegen. Anfangs hatte ich vor, diese Rigs für alle neun Animationen wiederzuverwenden, jedoch musste ich bei einigen Stickern am Ende doch ein paar Anpassungen vornehmen oder gar ein ganz neues Rig erstellen.
Bei Animieren habe ich versucht, so gut wie möglich auf die wichtigsten der 12 Animationsprinzipien zu achten, wie Follow Through, Slow in/Slow out, Arc, Exaggeration oder Squash and Stretch. Bei Letzterem hatte ich am Anfang ziemlich Mühe, da ich keine Ahnung hatte, wie man am besten an das Ganze rangeht, ohne dass bei der Grundanimation etwas kaputtgeht. Zum Glück bin ich irgendwann auf das Plugin Squash & Stretch gestossen, bei dem glücklicherweise auch die Gratisversion recht hilfreich ist.
Auch beim Animationsprinzip Exaggeration fiel es mir schwer, das richtige – und dann bei allen Stickern gleichbleibende – Mass zu finden. V.a. weil die Animation in klein wieder ganz anders wirkt als im grossen Preview-Fenster von After Effects.
Ansonsten war die grösste Herausforderung wahrscheinlich die, dass es ziemlich schwierig ist, Gesichtsausdrücke ohne einen richtigen Mund darzustellen. Denn Percy dazu zu bewegen, seinen Schnabel zu öffnen, habe ich nicht geschafft.
Nachdem die erste Animation fertig war, stellte sich leider heraus, dass der Export diesmal doch nicht so einwandfrei funktionierte, wie bei meinem Schnelltest zu Beginn des Projekts. Selbst wenn ich auf das Body-Rig von Duik verzichtete, nur mit Connectors arbeitete und die daraus entstandenen Expressions am Ende in Keyframes umwandelte, kam nach dem Export ins .TGS-Format jedes Mal ein komplett verschobener Pinguin heraus, den man bestenfalls noch als moderne Kunst hätte beschreiben können. Als selbst eine intensive Google Recherche keine Lösung für mein Problem fand, musste ich schliesslich einsehen, dass das mit dem Sticker Pack für Telegram wohl doch nichts werden wird. Zumal ich auch keine Ahnung hatte, wie ich ohne Expressions einen Charakter in After Effects riggen könnte.
Trotzdem habe ich mich dazu entschlossen, auch den Rest der Sticker zu erstellen, da das Animieren einer Figur in After Effects (statt wie in meinem letzten Projekt mit Adobe Character Animator) eine gute Übung für mich war.
03 | Website
Da der Export ins Telegram-Dateiformat leider nicht geklappt hat, musste schnell eine andere Möglichkeit her, die Sticker präsentieren zu können. Also habe ich eine kleine Website programmiert, mit der es mir möglich war, die Sticker so zu präsentieren, wie sie auch auf der Website von Telegram dargestellt worden wären. Die Website ist bewusst sehr simpel gehalten, damit nichts von den Animationen ablenkt.
Fazit
Bei einem nächsten Projekt werde ich mich definitiv schon zu Beginn intensiver mit den technischen Details auseinandersetzen und einen gründlicheren Testlauf durchführen.
Doch auch wenn das Projekt am Ende wohl eher ein Misserfolg war, hat es mir Spass gemacht Percy zum Leben zu erwecken und diesmal bewusster auf die Umsetzung der 12 Animationsprinzipien zu achten. Oder zumindest auf ein paar davon. Ausserdem habe ich jetzt etwas mehr Routine im Umgang mit Duik Bassel bekommen (v.a. was das Rigging betrifft), auch wenn ich wahrscheinlich noch längst nicht alle Funktionen dieses Plugins kenne.
