Author: dominik.bluemel

Nach der Einführung in Post 02.02, in der zwei große Starttutorials ihren Weg in mein Hirn fanden, folgen nun in diesem und im nächsten Post die restlichen Kurztutorials in Modul 1, die sich genauer mit gewissen Themen beschäftigen. Zu jedem dieser Tutorials möchte ich kurz die wichtigsten Dinge festhalten und Tricks, die ich noch nicht kannte mit euch teilen. Die jeweiligen Tutorials findet ihr in Modul 1 des Kurses.

Shape Layer Tricks

• Rotobezier: Rotobezier ist quasi autosmooth für Shape Layer. Man kann es mit Rechtsklick auf die Shape unter Mask and Shape Path finden und es lässt die Handles aller Knotenpunkte verschwinden und smoothed sie stattdessen automatisch aus. Der Path bleibt aber trotzdem animierbar.
• Gruppieren: CMD+G kann einem das ganze Projekt wirklich extrem gut aufräumen, da man damit innerhalb einer Shape Layer verschiedene Paths gruppieren kann.
• Convert Vertex Tool: Sollte man die Handles eines Knotenpunkts mal nicht sehen kann man sie damit zurückholen. Man findet es durch Altklicks auf das Pen-Tool.
• Convert to Bezier: Auch “normale” Shapes wie Quader kann man durch Rechtsklick in der Composition in Bezier Paths umwandeln um mehr Gestaltungsmöglichkeiten zu haben.

Vector Trick

• Continuously Rasterize: Damit kann man das leidige Problem von Vektor Grafiken in After Effects lösen. So lange man Vektoren nämlich direkt scaled berechnet AE die Pixel immer neu und alles bleibt scharf, Pre-Comped man das Ganze aber und scaled dann die Pre-Comp passiert das nicht mehr. Damit das passiert muss man bei den Switches der Pre-Comp den kleinen Stern aktivieren und schon berechnet AE auch wieder alles vektorbarsiert… crazy.

Graph Editor Hacks

• Multi-Tasking: Für manche vielleicht offensichtlich, aber ein brutaler Aha-Moment war für mich, dass ich gleichzeitig mit dem Pen-Tool im Ansichtsfenster Paths verschieben kann und einfach in der unteren Ansicht im Graph Editor parallel das Easing kontrollieren kann.
• Value-Graph: Als jemand der mit Keyframes zum ersten mal in DaVinci zu tun hatte (und dort den Spline Editor kennt) habe ich in After Effects im Grunde eigentlich nur mit dem Speed Graph gearbeitet, der dasselbe in Grün ist. In zwei Szenarien kann der Value Graph aber bedeutend mehr: Bei Bounces ist er einfach viel logischer und bei so klassischen Overshoot-Reaktionen (die in Davinci einfach super easy mit der Out-Back-Cubic Easing Funktion von alleine passieren) macht er auch extrem Sinn.
• Hold-Keyframes: Wenn man nicht möchte, dass die Zeit zwischen zwei Keyframes animiert wird kann man das stoppen. Geht mit Rechtsklick auf den Keyframe.
• Motion-Paths? WTF?!: Also das ist das mit Abstand gestörteste was ich in meinem Leben jemals gesehen habe. Kurz von Anfang an: Ich habe immer gedacht wenn ich ein Objekt auf einer gewissen Bahn bewegen will, muss ich zuerst die Bahn zeichnen, zb mit dem Pen-Tool, dann diese Bahn tracken, ein Null-Objekt anheften und dann mein Objekt ans Null-Objekt parenten. Wenn ich dann etwas an der Bahn ändern will, alles gleich nochmal. Fuck it! Es is einfach unfassbar, aber ich glaubs nicht. Wenn man einfach grundsätzlich zwei Position-Keyframes erstellt, egal wo, erhält man in der Anzeige diese blaue Linie, die repräsentiert zwischen welchen Punkten sich das Objekt bewegt. Und jetzt kommts. DIE KANN MAN BEARBEITEN. Verzieht man das Objekt, erstellt es automatisch einen neuen Keyframe und ändert die blaue Linie… und nimmt man das Pen-Tool kann man diese auch noch abrunden. Mein Leben bisher war sinnlos. Tschau.
• Rove-Across-Time: Und es wird immer gestörter. Ich kann After Effects einfach mit Rechtsklick sagen, dass es mir den Wert mancher Keyframes einfach automatisch berechnen soll, wenn ich andere bewege. So kann ich nur meine “Hauptpunkte” easen und alles dazwischen macht AE. Ich bin sprachlos.

Wie bereits im letzten BlogPost gezeigt habe ich in den letzten Wochen an Versuchen mit Gradients gearbeitet. Auch wenn es eigentlich nicht Teil des angestrebten Kurses ist, habe ich daraufhin viel Zeit damit verbracht diese Gradients in After Effects auf Sound und Musik hin reagieren zu lassen. Deshalb wollte ich es mir nicht nehmen lassen meine Erkenntnisse auch hier schriftlich festzuhalten. Skills sind Skills.

Im Grunde geht es in diesem Blogpost um dasselbe Projekt wie im letzten, nur nun eben audioreaktiv. Die angewandte Methode funktioniert aber natürlich gleichsam auf allen möglichen Shape Layern, nicht nur auf meinen Gradients.

Schritt 1: Audio Loopen

Um eine saubere Basis für die weiteren Schritte zu haben, empfiehlt es sich einen Loop des Audios zu machen. Das funktioniert meiner Meinung nach direkt beim Import bzw. bei den Importeinstellungen am besten. Diese findet man mit Rechtsklick auf das Audio, jedoch nicht unten in den Compositions sondern nur oben im Projektmenü. Unter “Interpret Footage” und “Main” kann man ganz unten dann die Häufigkeit einstellen mit der das Material geloopt werden soll. Damit muss man das Audio nicht mehrfach einfügen, verschieben oder irgendwie anders pfuschen.

Schritt 2: Keyframes aus dem Beat erzeugen

Zieht man sich diesen Audioloop dann in die Timeline, könnte man natürlich manuell auf Beats oder andere Änderungen Keyframes setzen und die Werte verändern, dies geht aber auch automatisch. Über Rechtsklick “Keyframe-Assistant” und “Convert Audio to Keyframes” macht After Effects nämlich genau das von selbst. Ehrlicherweise habe ich auch nach diversen Versuchen mit verschiedenen Tracks noch immer keine Ahnung auf welcher Basis After Effects das berechnet und wie diese Keyframes zustande kommen…. unterm Strich funktionierts aber und AE erstellt einem auf einer eigenen Layer drei Channels mit drei Slidern und Keyframes für jeden einzelnen Frame mit (meiner Meinung nach) zufälligen Werten, die aber bestimmt irgendwie mit Lautstärke oder ähnlichem der Musik zusammenhängen. Diese drei Slider werden nachfolgend dann verwendet um die Shapes reaktiv zu machen.

Schritt 3: Verbinden der Keyframes mit anderen Werten

In meinen Beispielen nehmen die Slider für jeden Frame einen Wert irgendwo zwischen 0 und ungefähr 60 an. In der Theorie kann man nun einfach seine Shape nehmen und den Wert seiner Wahl (z.B. scale) über das Pickwhip-Tool an den Slider linken und schon verändert sich die Größe des Objekts mit dem Beat. So einfach das klingt ist es aber leider nur selten, da die Werte-Range (wir erinnern uns 0-60) im Beispiel der Größe einfach viel zu starke Sprünge macht und das Shape so in einem Frame 0% groß ist und im nächsten vielleicht gleich 60. Daher muss man sich hier mit Expressions behelfen. Auch ist nicht immer die Größe der sinnvollste Wert, um ihn an das Audio zu linken. Daher hier meine Erfahrungen:

Welche Werte man am besten linken kann

Im Grunde bietet sich natürlich der scale am besten für die Verbindung zum Audio an, da auch wirklich jedes Objekt diesen besitzt. Neben dem scale der ganzen Layer kann hierbei zum Beispiel auch nur die Größe des Repeater Effekts (in meinem Fall) oder eines anderen Generators. Neben der Scale bieten sich aber auch einige andere Eigenschaften gut an. In meinen Tests hat zum Beispiel alles was eine “Evolution” Einstellung hat immer sehr gut mit dieser funktioniert. Sinnvoll kann aber auch ein eigener Effekt sein den man nur zu diesem Zwecke verwendet. In meinen Fällen hat da zum Beispiel “Color Balance HLS” sehr gut funktioniert um kleine Farbverschiebungen auf den Takt der Musik möglich zu machen. Hat man beispielsweise über der gesamten Compostion eine Adjustment Layer mit Effekten, kann es auch gut funktionieren diese Effekte an den Slider zu koppeln. Die Möglichkeiten sind aber natürlich grenzenlos.

Wie man sinnvolle Ergebnisse erhält

Um das oben geschilderte Problem (dass die automatisch generierten Werte der Keyframes für die verlinkte Eigenschaft einfach zu extrem sind, oder einfach keinen Sinn ergeben) muss man kreativ werden. Ich habe, um beim scale zu bleiben, meist mit einer Art Basis gearbeitet. Statt also den Scale direkt an die einzelnen Keyframes zu linken und damit extreme Schwankungen zwischen den einzelnen Frames zu haben, habe ich in den Expressions mit verschiedenen Varianten gespielt. Oft bestand die Expression dann aus der Basis (z.B. 60% scale) plus die Werte aus dem Slider. Diese habe ich dann häufig noch durch fünf oder zehn geteilt, einfach um die Auswirkungen des Sliders etwas abzuschwächen.

Fazit

Audioreaktive Animationen in After Effects sind tatsächlich leichter als gedacht. Jedoch gibt es oft keine schnelle Lösung und man muss einfach verschiedene Werte mit verschiedenen Expressions durchprobieren bis man etwas visuell ansprechendes erhält.

Nach der doch ausführlichen Einführung (was für ein Wortspiel) im letzten Post habe ich mich seither stark auf eine sehr spezielle Design-Entscheidung innerhalb der Motion Graphics spezialisiert: dem Design mit Gradients. Das und noch viel mehr heute, hier, im besten Blog der Welt. Nur ein Spot, dann gehts los.

Da ich, wie bereits angekündigt, nicht mehr ausnahmslos alle Lessons des Kurses machen werde, waren nun als erstes die Einheiten zu Gradients dran. Dabei ist mir bewusst geworden, dass Gradients im Grunde sehr leicht zu erstellen sind. Die einfachste Methode für Text oder Shapes ist dabei direkt in den Fill-Einstellungen, für Dinge wie Solids ist aber auch der Effekt 4-Colour-Gradient sehr hilfreich.

Will man diese basic Gradients besser gestalten kommen dann meist Effekte über eine Adjustment Layer ins Spiel, dabei besonders hilfreich: verschiedene Arten von Blur (directional, radial, gaussion) oder Effekte wie Twirl, Posterize oder Glow lassen Gradients direkt geschmeidiger aussehen.

Um Gradients zu animieren gibt es mehrere Möglichkeiten, ich habe mich jedoch dafür entschieden bereits gelerntes aus den Basics anzuwenden und meine Shapes über Paths zu animieren, damit sich diese bewegen. Das Verziehen der Anchor Points im 4-Color-Gradient geht aber auch sehr gut.

Mit diesem Wissen habe ich mich dann gleich an mein erstes eigenes After Effects Projekt gesetzt, ohne einfach nur stur ein Tutorial nachzubauen. Ziel war eine ansprechende Visualisierung mit verschiedenen Gradient-Effekten. Dafür habe ich im Grunde all das kombiniert was in bisherigen Posts von mir zu lesen war. Das Ergebnis ist dieser Loop:

Im nächsten Schritt möchte ich weiter auf smoothe Easings sowie speziellere Anwendungsfälle für die Datenvisualisierung eingehen, um dann am Ende für meinen Prototyp gut gerüstet zu sein.

Nach Absolvierung der ersten beiden “Lessons” des ausgewählten Kurses halte ich es jetzt mal für angebracht im ersten echten Blogpost ein kleines Zwischenfazit zu ziehen und meine Key-Learnings festzuhalten.

Insgesamt haben mich die beiden großen Eingangs-Tutorials nun eine gute Woche gekostet, wodurch ich auch zum Schluss gekommen, nicht den gesamten Kurs zu absolvieren, da mich damit wohl im vierten Semester noch nicht fertig wäre, sondern nur mehr ausgewählte Lessons zu machen und danach hier darüber zu berichten. Aber jetzt medias in res.

Lesson 1: Track Mattes, Masken und erste Paths

Im ersten, kürzeren Tutorial, ging es um die echten Basics von After Effects. Gottseidank bedeutete dies für mich, dass nicht allzu viel neues auf mich zu kam – anderenfalls müsste man auch meinen bisherigen Studienerfolg in Frage stellen. Zu den Key-Learnings zählt aber definitiv die Animation von Masken-Paths, von der ich nichts wusste, da diese meiner Meinung nach auch relativ versteckt ist. Damit ist es aber z.B. sehr einfach gelungen die im zweiten Shot sichtbaren Balken zu animieren, die, einen Schritt weitergedacht, im Grunde für Balkendiagramme genauso verwendet werden können. Außerdem gab es auch bereits eine Einführung in den Graph Editor und Dinge wie Easy Ease um schnell coolere Ergebnisse zu erzielen, die richtige Keyframe Action begann aber erst in Lesson 2.

Für mich außerdem interessant war die Verwendung von Blend-Modes mithilfe derer man im Grunde aus allen Bildern, die irgendeine Textur haben, diese z.B. auf den Hintergrund übertragen kann. Ich bin zwar noch nicht schlau daraus geworden was genau welches Modus jetzt macht, aber sich einfach durchzuklicken, bis einem etwas gefällt kostet auch nicht zu viel Zeit. Das Ergebnis des gesamten Tutorials ist nett, stellt aber wirklich nur eine grobe Einführung dar.

Lesson 2: Ich glaub´ ich kann jetzt alles

So einfach und anfängerfreundlich die erste Lektion auch wahr, richtige Motion Graphic Action gab es erste in Lesson 2, dafür dort aber richtig. Gefühlt kann ich schon nach dieser Einheit die Welt zerreissen und es ist irre wieviele verschiedene Techniken in gerade einmal 2,5h Einheit verpackt sind (auch wenn man beim Nachmachen sicher ein paar Tage dafür benötigt). Die wichtigen Learnings sind kaum an einer Hand abzählbar, deswegen hier ein Best-Of:

• Der einfachste Weg um Text oder Zahlen zu erstellen, die man dann als Shapes auch manipulieren kann ist nicht durch Shapes selbst, sondern durch das Text Tool. Mit nur einem Klick (create shapes from text) kann man den dann nämlich umwandeln.
• Über Null-Objekte auf welche man andere parented kann man super schnell eine ganze Gruppe kontrollieren ohne noch einmal zu precomposen.
• Key-Frame Manipulation im Graph Editor funktioniert im Grunde immer gleich. Zieht man den die Geschwindigkeitskurve zu Beginn auf volle Kanne und dann immer lamgsamer, hat man in 90% der Fälle einen super smoothen look. Falls nicht, einfach umkehren, eins von den beiden ists immer.
• Der einfachste Weg Objekte über einen definierten Pfad zu bewegen ist diesen mit dem Pen-Tool zu ziehen und dann mit “create nulls from path” direkt ein sich darauf bewegendes Null zu erzeugen, das auch gleich automatisch einen Progress Slider hat. Dieses dann einfach parenten und fertig.
• Bounce Animations sind brutal scheisse und aufwendig wenn man sie mit einzelnen Keyframes macht, gibt´s da vielleicht etwas einfacheres???? Hilfe!!!!!

Das ganze Video, das sich meiner Meinung nach wirklich sehen lassen kann sieht nun so aus und beinhaltet meiner Meinung nach wirklich alle essenziellen Techniken für smoothe Motion Graphics:

Fazit

Da ich mit diesen beiden Einstiegskursen bereits das Gefühl habe gut dabei zu sein, werde ich mich in Zukunft mehr auf einzelne brauchbare Tutorials beschränken statt den gesamten Kurs zu machen, und bald davon berichten.

Der Sinn dieser Blog-Post-Serie im zweiten Semester ist einfach wie eingänglich: Man soll etwas lernen… aber was? Rückblickend auf die ersten zehn Blogposts aus dem vergangenen Semester war das für mich recht klar: Ich möchte meine Datenvisualisierungen auf das nächste Level bringen. Dazu braucht es aber zweierlei, mit dem ich mich in den nächsten neun Blogposts befassen werde.

Einerseits muss die Basis einer jeden guten Datenvisualisierung wissenschaftlich evident gemacht werden. Dazu möchte ich mich durch verschiedenste Fachliteratur kämpfen, um herauszufinden warum manche Visualisierungen funktionieren und manche schlicht nicht. Basisliteratur soll das umfassende (und mir glücklicherweise vom besten Major-Leiter des Instituts zur Verfügung gestellte) Werk “Show Me The Numbers” werden, jedoch möchte ich einen Blogpost auch weiterer Fachliteratur zum Thema widmen.

Um mit diesem Wissen dann aber auch ordnungsgerecht umgehen zu können, muss natürlich eins her: After Effects. Wie bereits in meiner Themenvorstellung vor ein paar Wochen angekündigt möchte ich dazu einen online Kurs belegen. Welcher das jedoch sein wird, war in den letzten Tagen Kern angeregter Diskussionen zwischen mir und meinen drei anderen Persönlichkeiten (sowie meinen Studienkollegen natürlich). Dabei gibt es zwei große Überlegungen: Einerseits gibt es Kurse speziell für Datenvisualisierungen, diese sind aber eher nieschig, oft bereits älter und nicht von renommierten Lehrern oder Bildungshäusern, hätten aber natürlich den Vorteil genauer auf meine Bedürfnisse einzugehen. Andererseits gäbe es aber natürlich auch allgemeinere After Effects oder im speziellen Motion Design Kurse, deren Skills sicher gut auf Datenvisualisierungen umzumünzen wären.

Gerade in Hinblick auf andere Kurse in diesem Semester – ich denke da vor allem an Green Utopia sowie Moya – habe ich entschieden, dass es definitiv mehr Sinn machen würde einen allgemeineren Motion Design Kurs zu belegen, da ich die Fähigkeiten definitiv noch an der ein oder anderen Stelle brauchen werde. Stellt sich also nur die Frage welchen…

Die Auswahl dahingehend ist ja bekanntlich riesig, nicht nur auf Lernplattformen wie Udemy oder Skillshare, sondern auch bei privaten Anbietern. Die beiden Goldstandards in Sachen Motion Design scheinen dabei einerseits der Motion Beast Course und andererseits Design Breakthrough by Ben Marriott zu sein. Beide dieser Kurse warten aber mit horrenden Preisen auf (350 bzw 500 Euro), die ich ehrlicherweise im Moment nicht gewillt bin zu zahlen, auch wenn man mit Investitionen in die eigene Bildung ja eigentlich nie was falsch machen kann. (Ich muss ja auch was essen…) Daher habe ich mich in verschiedenen Foren auf die Suche nach einem preiswerten Ersatz gemacht und bin dabei auf die Seite https://www.learnto.day/aftereffects gestoßen, die im Endeffekt eine Zusammenstellung aller guten kostenfreien Ressourcen und Kurse zum Thema Motion Design darstellt und in einem großen Curriculum einen volleinheitlichen Kurs nachbilden soll. Da laut diverser Forenmitglieder darin mindestens gleich viel, wenn nicht sogar mehr gutes Wissen vorhanden sein soll, als in vielen pay-per-view Kursen habe ich mich schlussendlich dafür entschieden dieses Curriculum auch genau so durchzuarbeiten.

Zusammenfassend lässt sich also sagen, dass das restliche Semester DesRes für mich klar strukturiert ist. Nachfolgend wird es hier mit Ausschnitten und meinen Key-Learnings aus dem After Effects Curriculum weitergehen, da ich dieses Wissen wohl schon eher früher als später auch in anderen Kurse brauchen werde. Danach folgt die Fachliteratur, um am Ende mit all dem gelernten auch ein ansprechendes Werkstück gestalten zu können.

In den letzten Monaten, vorallem aber der letzten Woche, habe ich experimentiert was das Zeug hält. Ich habe nach Tools gesucht, sie ausprobiert, bin oft gescheitert, verzweifelt, habe publiziert und wieder runtergenommen, aber am Ende immer noch das gefunden, was ich gesucht habe. Und dafür war dieser Blog da. Mit Flourish und Vev habe ich, soweit ich das heute beurteilen kann, zwei kostengünstige und unfassbar gut funktionierende Tools gefunden, mit denen ich alles und mehr machen kann als ich eigentlich je wollte. Damit endet dieses Kapitel, aber das nächste steht schon vor den Toren.

Wo bleibt After Effects?

Gute Frage, bessere Antwort: Ich habe bewusst auf andere Varianten zur Datenvisualiserung verzichtet – eigentlich sollten neben Plug and Play-Lösungen ja nicht nur AE sondern auch Coding zum Einsatz kommen – da sich im Verlauf des Semesters meine Ansichten etwas geändert haben. Einerseits war der Processing Kurs leider nicht darauf ausgelegt wirklich sinnhafte Visualisierungen herzustellen, sondern einfach nur randomisierte Zeichnungen zu coden. Das mag schön und nett sein, hilft mir in meinem weiteren Arbeitsleben nur leider nicht weiter. Da ich aber nicht einmal die randomisierten Zeichnungen verstanden habe, bin ich zum Entschluss gekommen gänzlich auf Coding als Visualisierungsmöglichkeit zu verzichten. Nicht nur Processing sondern auch R, die Programmiersprache mit der wir im Bachelor gearbeitet haben, liefert mit gleichem Aufwand einfach nie derart gute Ergebnisse wie die von mir ausprobierten Tools.

Die Entscheidung auch auf After Effects zu verzichten, kam mit der Entdeckung von Flourish. Bis dahin war mir nämlich nicht bewusst, dass es ein derart starkes Tool einfach kostenlos im Internet gibt. Es gibt nichts was Flourish nicht kann, nichts was sich nicht bearbeiten ließe und nichts was sich nicht visualieren ließe – und das innerhalb von Minuten. Deshalb macht es für mich einfach keinen Sinn Stunden in Datenvisualisierungen in After Effects zu stecken, die gerade bei meinem Können, nie so gut aussehen werden wie jene von Flourish. Für mich, der sich eigentlich mit dem schreiben von Geschichten beschäftigt und nicht mit dem Design, ist Flourish einfach genial.

Wie gehts jetzt weiter?

Jetzt wo die technische Komponente soweit geklärt ist, geht es an die Theorie. Wann machen Datenvisualisierungen Sinn? Wieviel kann man mit Text erklären, wofür braucht man Grafik? Was kann welches Diagramm? Welche Prinzipien gelten für Diagramme? Und so weiter. Alle diese Fragen brauchen handfeste Antworten auf Basis von Fachliteratur, wenn sie in meiner künftigen Masterarbeit beantwortet werden wollen. Sollte dieser Blog also im zweiten oder gar auch dritten Semester fortgeführt werden, so ist das der nächste Schritt: Die Theorie hinter der Praxis zu erkunden.

Bis dahin fließt aber noch viel Wasser die Mur hinunter und auch ich habe noch viel Zeit mich noch genauer mit Vev und Flourish auseinander zu setzen, denn Daten sind meine Leidenschaft. Nichts kann Geschichten so genau erzählen wie Daten und nichts kann so außergewöhnliche Geschichten erzählen wie Daten. Außer vielleicht Video. Das kann das auch.