Motion Graphics: Marke Eigenbau

Computeranimation ist ein Thema – so komplex und vielseitig – das man unmöglich in einem einzelnen Digezz-Beitrag vollständig erklären kann. Mein Ziel ist es vielmehr, auf das wundervolle 2D-Programm «After Effects» einzugehen und alle Leser zu ermutigen, selbst Dinge darin zu erschaffen.

Während des Studiums wird einem bereits früh das Programm «After Effects» schmackhaft gemacht. Nach einem kurzen, innigen Tanz im 1. Semester lässt man das Programm allerdings wieder liegen, es sei denn: Man entscheidet sich für das Minor «Postproduction» oder das Major «Branded Motion». Allerdings geht man auch nach einer genaueren Betrachtung des Programms gerne mit einer gewissen Distanz heran. Vielleicht eingeschüchtert von der Komplexität des Programms, vielleicht aber auch aufgrund mangelnder Ideen. Manche suchen Hilfe in Tutorials, nur um ein Duplikat herzustellen, welches womöglich nicht einmal dem eigenen Stil entspricht. Andere lassen es ganz sein und distanzieren sich von After Effects. Während sich wieder andere an das Programm setzen und mit dem Basteln beginnen. Und genau hier setze ich mit meinem Digezz-Beitrag an.

After Effects ist ein unglaublich komplexes und vielfältiges Programm. Das Schöne daran ist, dass es dir kreative Freiheiten lässt. Die Grenzen bestimmst du und es ist ratsam, diese schrittweise zu vergrössern, denn nur so verlierst du dich nicht in den vielen Möglichkeiten, welche dieses Programm zu bieten hat.

Alles beginnt mit einer Idee, die man umsetzen will. In meinem Fall wollte ich animierte Prototypen von Buffer-Symbolen herstellen, welche man für moderne Websites verwenden könnte. Solche Animationen von Grund auf selber zu erstellen, empfand ich als perfekte Aufgabe, um mein Wissen zu erweitern und gleichzeitig meine eigene Kreativität einfliessen zu lassen. Die folgenden 5 Buffer-Symbole sind alle von mir entwickelt worden und haben dementsprechend eine grosse Planungsphase durchlaufen.

Buffer-Symbol 1: Der Verspielte

Das erste Buffer-Symbol habe ich für eine verspielte und kinderfreundliche Website entwickelt. Die Konsistenz der Kugeln ist eine weiche und formbare Masse, weshalb sich die Kugeln auch leicht trennen lassen und sogar Fäden ziehen. Die Farben sind bewusst in freundlichen Tönen gewählt.

Buffer-Symbol 2: Der Gamer

Als zweites Buffer-Symbol entstand der Play-Buffer, welcher für futuristische Websites mit Videospiel-Content gestaltet wurde. Der spiralförmige Play-Button soll eine hypnotische Wirkung erzeugen, welche den Zuschauer schon vor dem Start des eigentlichen Videos in seinen Bann zieht. Der grauschwarze Hintergrund unter kontrastreichem Weiss unterstützt das schlichte, moderne Design.

Buffer-Symbol 3: Der Präzise

Das dritte Buffer-Symbol steht ganz im Sinne der Präzision. Wie ein Uhrwerk zieht sich der Strich durch die Punkte, die sich mit einer kreisförmigen Welle entladen. Ein Buffer-Zeichen, welches sich besonders für Architekturseiten oder andere Seiten mit exaktem Content eignet. Die Farben sind aufs elementarste herunter gebrochen worden, damit die Animation sauber und exakt wirkt. Der weisse Hintergrund wurde leicht bearbeitet, sodass er weissem Papier gleicht.

Buffer-Symbol 4: Der Dynamische

Futuristisch präsentiert sich auch das vierte Buffer-Symbol. Ähnlich wie «Der Präzise» hat dieser auch etwas von einem Uhrwerk. Diesmal wirkt die gesamte Bewegung allerdings viel geschmeidiger und bricht somit die Statik auf. Ein Buffer-Symbol für Webseiten mit High-Tech-Content. Die Farben können variabel an die eines Unternehmens angepasst werden.

Buffer-Symbol 5: Der Wandelbare

Das letzte Buffer-Symbol schliesst sich dem Ersten an und präsentiert sich auch eher verspielt. Die geleeartige Masse lässt den Würfel/Kreis bei jeder Veränderung der Grösse erzittern, weshalb sich diese Buffer-Animation auch hervorragend für kindergerechte Webseiten eignet. Die Farben sind knallig bunt und sollen dadurch den Blick auf sich ziehen.

(mm)

Kritik
von Noam Pfluger

Ideenfindung

Wie bereits oben erwähnt, spielte der Wunsch das Programm After Effects genauer zu erlernen, sowie die eigene Kreativität darin einfliessen zu lassen, eine zentrale Rolle in meinem neuen Digezz-Projekt. Schon vor meinem MMP-Studium spielte ich gerne in After Effects, indem ich viele Tutorials schaute und den Content kopierte. After Effects war das erste Adobe Programm, welches mir die kreative Vielfalt von digitaler Kunst zeigte und mich deshalb über einen längeren Zeitraum völlig in seinen Bann zog. Während des MMP-Studiums verlor ich allerdings  den Fokus auf das Programm, da viele andere Themen grössere Aufmerksamkeit erforderten. Erst mit dem Auftakt von Brandes Motion, in welchem wir einen Animationsfilm für die Swisscom erstellen durften, kam die Leidenschaft für das 2D Programm wieder auf.

Während des Projekts realisierte ich, wie schön der Arbeitsprozess ist, wenn man seine eigenen Ideen von Grund auf realisiert und das fertige Resultat später in einer Animation betrachten kann. Dies war schlussendlich der entscheidende Punkt, der mich dazu bewogen hat, ein komplettes Digezz-Projekt der Motion Graphic zu widmen. Mir wurde bewusst, dass der beste Lernprozess darin besteht, seine eigenen Ideen zu entwickeln, denn dadurch entsteht automatisch dein eigenes Arbeitsfeld, in welchem du Schrittweise tiefer in die Komplexität des Programms eintauchen kannst.

Seit einiger Zeit ist das sogenannte Flat-Design auch in der Motion Graphic extrem an Beliebtheit gestiegen, denn dadurch werden schöne Animationen auf die elementaren Bestandteile herunter gebrochen, ohne ausgefallene Effekte beizumischen. Diese herunter gebrochene Perfektion fand ich als sehr inspirierende Grundlage, um mein eigenes Projekt zu starten. Denn dadurch lässt sich das Flat-Design, welches bereits auf diversen Internetseiten vorzufinden ist, perfekt mit Flat-Animationen verbinden. Die daraus entstehenden Möglichkeiten reichen natürlich viel weiter, als nur eine neue Form von Buffer-Symbolen. Allerdings wollte ich mich zunächst auf ein zentrales Element beschränken. Im folgenden Teil werde ich nun alle fünf von mir konzipierten Buffer-Symbole erklären und die teilweise lange Konzeptionsphase beschreiben.

Buffer-Symbol 1: Der Verspielte

Die Idee für das erste Buffer-Symbol kam mir während der Erarbeitung meines Projekts in Visualisieren 5. Bereits dort arbeitete ich mit After Effects und dementsprechend lief der kreative Prozess in alle Richtungen. Die Idee bestand darin, eine Kugel dynamisch wandelbar zu animieren und daraus ein Buffer-Symbol zu erstellen. Das Schwierigste in der Konzeptionsphase einer Animation ist nicht der Gedanke auf Papier zu bringen, sondern vielmehr den Gedanken in Form einer Animation zu entwerfen. In der Vorstellung verhält sich eine Animation anders, als schlussendlich in After Effects. Ich musste zunächst die gesamte Animation ohne „fehlende Stellen“ von der Vorstellung auf Papier bringen und dies stellte sich schwieriger heraus, als angenommen. Viele Skizzen wurden von mir entworfen, nur um wieder neu damit zu beginnen, da mir ein Denkfehler unterlaufen ist.

Als ich schlussendlich das Storyboard entworfen habe, ging es an das eigentliche Animieren. Ich wollte die Substanz der Kugel weich entwerfen, da diese in vielen Variationen transformiert werden soll. Damit dieser Effekt entsteht, verwandelte ich die Kugeln in einen sogenannten „Bezier Path“ Somit konnte ich diese Kugelform mittels dem Pathtool so modifizieren, wie ich wollte. Später musste ich allerdings nach einer längerer Fehlersuche feststellen, dass dieser Bezier Path einen Glitch verursacht, indem er die Bewegung falsch einberechnet hat. Da ich zu diesem Zeitpunkt nichts von diesem Glitch wusste, blieb mir nichts anderes übrig, als alle falsch berechneten Bewegungen selber zu korrigieren. Als die Animation schlussendlich von mir fertig gestellt wurde, musste ich feststellen, dass die Pausen zwischen den Keyframes zu lang waren, damit die Buffer-Animation flüssig erscheint. Nach einer längeren Testphase, kam ich auf eine angenehme Lösung. Die Zeit, welche ich für die erste Animation aufbrachte, war viel grösser als ich selber zunächst angenommen habe und doch bin ich froh, so lange an dieser gearbeitet zu haben, denn die Lerneffekte waren dementsprechend riesig.

Buffer-Symbol 2: Der Gamer

Die zweite Buffer-Animation machte mir wieder einmal mehr bewusst, dass auch die simpelste Idee auf Papier, sich digital völlig anders verhält. Als Grundlage dieser Animation diente mir die Spirale als Form. Diese in ein Buffer-Symbol umzuwandeln, war mein erstes Ziel. Doch wie abstrahiert man eine Spirale? Diese Ideenfindung verlief über einen langen Zeitraum, bis ich auf einmal die Ähnlichkeit  eines „Play-Button“ zu einer Spirale erkannte.  Die darauffolgenden Skizzen entstanden dementsprechend schnell. Allerdings hatte ich wieder grössere Mühe, die animierte Version auf Papier zu bringen. Während der Konzeptionsphase hatte ich bereits klare Vorstellungen, wie ich die Animation umsetzen könnte. Jedoch verlief wieder alles anders.

Als ich zu der eigentlichen Animation kam, bemerkte ich bereits nach einer kurzen Zeit, dass ich einen Denkfehler begangen habe. Die Striche der Spirale sind unterschiedlich lang, was bedeutet, dass ich keinen „Stroke-Effekt" oder „Trim: In/Out“ verwenden kann. Jeder Strich würde ein anderes Tempo aufweisen, was der Buffer-Animation die nötige Dynamik nimmt. Die Frustration nach einem ganzen Tag ohne Fortschritt war immens und machte mir einmal mehr bewusst, wie schwer es ist, eine saubere Animation selber zu entwickeln. Ich war schon daran, die gesamte Animation abzubrechen, da kam mir die rettende Idee,  alle Striche ins „Pre-Compose“ zu packen. Dadurch vergrösserten sich wieder meine Möglichkeiten und ich konnte die Striche maskieren. Durch die Masken, konnte ich eine Tempoanpassung vornehmen, welche nur dezent zu erkennen ist und daher angenehm fürs Auge wirkt. Die Anpassung dauerte natürlich auch wieder eine längere Zeit, allerdings war das Gefühl der gefunden Lösung unglaublich schön.

Buffer-Symbol 3: Der Präzise

Meine dritte Buffer-Animation sollte etwas dezentes werden. Mit dieser Idee trat ich in die Konzeptionsphase ein und merkte bereits früh, dass ich in den vergangen zwei Entwicklungsprozessen sehr viel gelernt habe. Vieles lief nun um einiges schnellerer als noch zuvor. So hatte ich relativ schnell eine passende Idee und wie ich diese auf Papier bringen konnte. Zunächst wollte ich zusätzlich eine Entstehung der Kugeln einfliessen lassen, allerdings entschied ich mich später dagegen, da die Animation somit präziser wirkt.

Als ich ans Animieren ging, lief zunächst alles wie geplant. Ich erstellte alles, wie ich es auf dem Storyboard konzipierte und kam daher schnell voran. Als ich nach etwa einem halben Tag Arbeit die Animation abschliessen wollte, bemerkte ich allerdings einen mühseligen Fehler. In meinem Arbeitsprozess ging ich von einer Animation aus, die in einem geschlossenen Zyklus endet und somit looped funktioniert. Dies war allerdings nicht der Fall, denn bei jedem Punkt entsteht ein grösser werdender Kreis, welcher nach einer kurzen Zeit vergeht. Da dieser Kreis bei den letzten Frames abgeschnitten wird, musste ich den gesamten Loop-Cycle neu konzipieren. Dies bedeutet meist sehr viel Risiko, denn man muss hierfür in den Keyframes viel anpassen und dies bedeutet in After Effects oftmals Chaos. Nach einer längerer Experimentierphase konnte ich den Loop allerdings so abändern, sodass dieser flüssig endet.

Buffer-Symbol 4: Der Dynamische

Für die Konzeption dieses Buffer-Symbols hatte ich eine Stoppuhr als Grundlage im Sinn. Natürlich wollte ich diese so weit abstrahieren wie möglich und kam nach längerem Skizzieren auf ein Resultat, das mir sehr gefiel. Während der Herstellung des Storyboards hatte ich grössere Mühen, die Krim: In/Out Animation vorzustellen, weshalb ich dort das erste Mal eher blind ans definitive Animieren ging.

Die Animation verlief zunächst ohne grössere Probleme. Allerdings benötigte ich längere Zeit für einen dynamischen Effekt der Stoppuhr. Das Timing zwischen den In/Out Points hatte ich zu diesem Zeitpunkt nicht besonders im Gefühl, weshalb ich viel experimentieren musste. Damit der Effekt in der Mitte wie ein Timer aussieht, fügte ich Motion Blur hinzu. Grösseren Aufwand hatte ich zudem am schönen Loop-Effekt. Die Pause zwischen dem Start und dem Ende sollte so klein wie möglich sein, weshalb ich viele Variationen testen musste.

Buffer-Symbol 5: Der Wandelbare

Zurück zum Uhrsprung des Flat-Design, dachte ich mir, als ich mit dem Skizzieren begann. Ich wollte wieder etwas verspieltes und lockeres erstellen und wählte daher keine komplexen Zyklen aus, sondern beschränkte mich auf lustige Spielereien, welche man gerne in Motion Graphic sieht.
Das Storyboard wurde mit geringerem Zeitaufwand entwickelt, da die komplexen Zyklen nicht vorhanden waren.

Für die Animation orientierte ich mich an den ursprünglichen Cartoon-Regeln, die bereits von Walt Disney entwickelt wurden. Während de Wachsen und Schrumpfen der Formen hielt ich zum Beispiel immer 4 Frames mit dem Gegenteil entgegen. Damit die Konsistenz der Formen eines Gelees gleicht, wollte ich zunächst ein „Motion Script“ verwenden. Allerdings konnte ich auch nach längerer Suche kein funktionierender Code finden, weshalb ich dieses „wiggle“ artigen Effekt selber animierte.

Fazit

Das gesamte Projekt hat mir selbstverständlich viel Spass bereitet. Ich konnte endlich ein Motion Graphic Projekt von Grund auf selber konzipieren und umsetzen, was ein Lernprozess erzeugte, den ich bereits in der Mitte des Projekts spüren konnte. Als Fazit muss ich anfügen, dass ich den Zeitaufwand für dieses Projekt tiefer eingestuft hatte, als es schlussendlich war. Die Konzeptionsphase war in vielen Fällen mit deutlich mehr Aufwand verbunden, als ich zunächst annahm. Ausserdem entstanden in praktisch jedem Projekt kleine oder grössere Hinternisse, welche teilweise viel Zeitaufwand benötigten, um behoben zu werden. Trotz allem kann ich allerdings erkennen, dass sich mein Anwendungsbereich in After Effects deutlich erhöht hat und das ich viel Spass dabei hatte, diesen zu erreichen. Schlussendlich ist dies ja auch der entscheidende Punkt in der Arbeit - Spass am Weiterentwickeln zu haben.

Keine Kommentare

Schreibe einen Kommentar