Banner erstellen: Animate vs. After Effects vs. Google Web Designer

Ich kann mich noch an eine Begebenheit erinnern, als ich Anfang der 90er mit meinem Vater in Ungarn unterwegs war, um ein Scharnier für eine Holztür zu besorgen. Wir zogen los und begannen unsere Shopping-Tour im Eisenwaren-Kleinteile-Handel.

Der Eisenwaren-Kleinteile-Handel hatte kein solches Scharnier und schickte uns deshalb zum Schrauben-Fachgeschäft. Dort hiess es: «Versuchen Sie es im Tür- und Tor-Fachhandel». Dieser wiederum empfahl uns den Eisenwaren-Kleinteile-Handel um die Ecke.

Wir waren wieder da, wo wir begonnen hatten.

Es war ein toller Ausflug für mich als Teenager, da wir jedesmal an einer der beiden Eisdielen des Städtchens vorbeikamen, wenn wir den Laden wechselten.

Was Werbebanner mit Scharnieren zu tun haben

Die Geschichte oben kommt mir in den Sinn, wenn mich Kursteilnehmende fragen, welches das beste Werkzeug, welches die beste Software sei, wenn es um HIER DÜRFEN SIE GERN SELBER EINE HERAUSFORDERUNG EINFÜGEN geht und wie vorzugehen sei. Im Geschäft habe man eben X, ein Freund empfehle aber Y und ich als Kursleiter habe jetzt gerade etwas von Z erzählt.

Gehen wir für diesen Blog-Beitrag davon aus, dass die Herausforderung folgendermassen lautet: Erstellung eines animierten Werbe-Banners.

Dann sind (in beliebig austauschbarer Reihenfolge) X, Y und Z häufig:

• Google Web Designer
• Adobe Animate
• Adobe After Effects

Wenn ich also vor der Herausforderung stehe, ein animiertes Werbebanner zu erstellen, stellt sich die Frage, welches dieser drei Tools denn am besten geeignet dafür ist, diese Art von Banner zu erstellen.

Das ist wie bei der Scharnier-Shopping-Tour: mein Vater und ich haben uns vorab überlegt, in welchem Geschäft wir wohl ein entsprechendes Scharnier bekommen.

Ok, mein Vater mehr als ich. Ich habe dafür mehr Eis gegessen.

Eine falsch herum gestellte Frage

Nochmals die Frage: Welches Tool eignet sich am besten, um ein animiertes Werbe-Banner zu erstellen: Adobe After Effects, Adobe Animate oder Google Web Designer?

Als mir diese Frage zum ersten Mal gestellt wurde, habe ich mir überlegt: Was haben die drei Werkzeuge gemeinsam?

Nur am Rande: als mir die Frage zum x-ten Mal gestellt wurde, entschied ich mich, diesen Blog-Beitrag zu schreiben. 😉

Die Antwort lautete: Alle drei sind Werkzeuge in denen man Animationen erstellen kann, was ja auch der ausschlaggebende Punkt für die Verwirrung der Fragenden war.

Ich merkte, dass die Frage falsch herum gestellt war.

Statt zu fragen, welches der drei Softwareprodukte man nutzen muss, um ein Werbebanner zu erstellen, könnte man ja auch folgende Frage stellen: Wie erstellen die einzelnen Software-Produkte animierte Werbebanner? Was sind die Stärken? Wo sind die Grenzen? Was sind die Gemeinsamkeiten und was die Unterschiede?

Wenn die Frage so herum gestellt wird, kann nämlich nachher entschieden werden, welches Tool wann eingesetzt wird.

Mein Vater und ich hätten uns auch zuerst in allen drei Läden umsehen können. Aufgrund des Angebots hätten wir dann bei einem gemeinsamen Eis besprechen können, wie wir die Herausforderung mit dem bestehenden Angebot lösen.

Also, machen wir uns auf, die Konzepte, Stärken sowie Schwächen, die Grenzen und die Unterschiede von Adobe After Effects, Adobe Animate und Google Web Designer etwas zu beleuchten.

Welches Format hätten’s denn gern…?

Last things first: in welchem Format soll das animierte Werbebanner denn exportiert werden?

Die Antwort auf diese Frage ist von diversen Kriterien abhängig und es gibt Export-Formate wie Sand am Meer. Schliesslich und endlich lassen sich aber zwei grundlegende Arten von Export-Formaten unterscheiden: Video und HTML5.

Wenn Sie am Hauptbahnhof Zürich auf der gespürt 100m breiten Leinwand die neuesten Autos angepriesen bekommen, sind das Videos.

Wenn Sie auf News-Websites surfen, sind jene Werbungen, die schnell geladen werden, HTML5-Banner.

Wie die Übersicht zeigt, scheidet Adobe After Effects aus, wenn das animierte Banner als HTML5 exportiert werden soll.

Wer den Unterschied zwischen Pixeln und Vektoren (schon) kennt wird folgenden Merksatz mögen.

Merksatz: Was Photoshop (pixel-basiert) und Illustrator (vektor-basiert) für statische Bilder sind, sind After Effects (pixel-basiert) und Animate (vektor-basiert) für bewegte Bilder.

Ja, beim Merksatz wird nicht auf Google Web Designer eingegangen! Lesen Sie weiter, um zu verstehen, warum.

Animationen vs. Effekte

Mit dieser Unterscheidung und der nachfolgenden Zuteilung begebe ich mich (bewusst) auf dünnes Eis. Aber ich bin ja ein mutiger Blog-Schreiber und freue mich auf Ihre Kommentare.

Mein Vorschlag lautet nämlich, eine Unterscheidung zwischen Animation und Effekt zu machen.

Dabei verstehe ich unter einer Animation das Verändern von Eigenschaften von Objekten über die Zeit.

Idee: wir verändern die Drehung (=Eigenschaft) eines Bildes (=Objekt) von anfangs (=Zeit) 0° auf später (=Zeit) 15° und dann (=Zeit) auf -15° und wieder (=Zeit) auf 0° und erhalten so ein Wackeln als Animation.

Hier ein Beispiel:

Unter einem Effekt verstehe ich dagegen das Verändern des Objekts selbst.

Beispielsweise möchte ich, dass das Auto oben anfängt zu brennen und dann explodiert.

Unrealistisch? Ganz und gar nicht! Wenn Sie wüssten, was Teilnehmende in von mir geleiteten Kursen schon alles für Effekte angewendet haben, fänden Sie ein explodierendes Auto Pipifax.

Als Beispiele und kleine Auflockerung empfehle ich Ihnen die Videos von Action Movie Kid.

Doch zurück zu Adobe After Effects, Adobe Animate und Google Web Designer. Wer kann denn nun was?

Wie Sie in der Zusammenstellung sehen, hat mich meine Unterscheidung von Animation und Effekt schon in Teufels Küche gebracht.

Wenn es nämlich für Adobe After Effects (der Name ist Programm) klar ist, dass explodierende Autos möglich sind und Google Web Designer beim Wackeln bleibt, ist die Antwort für Adobe Animate nicht ganz einfach.

Kurz: Adobe Animate kennt zwar gewisse Effekte wie Schlagschatten oder Bewegungsunschärfe. Diese drosseln aber die Performace von HTML5-Bannern und erhöhen deren Dateigrösse unverhältnismässig. Deshalb finden Sie in Animate eher selten Verwendung.

Und ja: natürlich kann man auch mit Animationen tolle Effekte erreichen, wie z.B. das Rigging-Tutorial von Adobe schön zeigt.

Merksatz: Adobe Animate hat seine Stärke beim Erstellen von Animationen. Adobe After Effects hat seine Stärke im Anwenden von Effekten.

Ja, schon wieder geht der Merksatz nicht auf Google Web Designer ein! Noch ein bisschen Geduld, bitte.

Die Idee hinter dem Werkzeug

Hier löst sich auf, warum auch Google Web Designer in diesem Blog-Beitrag mitmachen darf, ja sogar soll.

Schauen wir uns die Idee hinter den Werkzeugen und deren Entstehungsgeschichte etwas an.

Adobe After Effects

Adobe After Effects war und ist das Flaggschiff unter den Video-Nachbearbeitungs-Werkzeugen.

Und wenn ihr Ziel-Format ein Video ist, freut es Sie vielleicht zu lesen, dass sich Adobe Animate Animationen nahtlos in After Effects Kompositionen verwenden lassen. Das ist so ähnlich wie wenn Sie Illustrator Elemente in Photoshop verwenden.

Das Zusammenspiel zeigt sich z.B. sehr schön in der Anwendung bei der Erstellung von Erklärfilmen, wie ich es gern im Kurs «Anspruchsvolle Erklärfilme mit After Effects (AFTS)» zeige.

Adobe Animate

Adobe Animate hiess früher Macromedia Flash und war dazu da, Animationen zu erstellen.

Diese konnten dann z.B. als EXE-Datei exportiert und auf CD-ROM gebrannt werden, um sie an Messen zu verteilen.

Heute hat mein Laptop nicht mal mehr einen CD-Brenner, Dateien laden heute schneller vom Internet runter als von CD. Und niemand startet mehr einfach so eine EXE-Datei… hoffentlich!

Flash war also schon beinahe tot geglaubt, als es plötzlich mit dem neuen Namen Animate und der Möglichkeit aufwartete, HTML5-Canvas-Animationen zu exportieren.

Endlich gab es eine Möglichkeit, animierte HTML5-Banner mit einem Werkzeug zu erstellen. Doch (leider) blieb Animate dabei, den HTML5-Canvas mittels JavaScript zu bespielen.

Vor 5 Jahren habe selbst ich noch Werbung für das HTML5-Canvas gemacht. Aber die Zeiten ändern sich und es gibt heute viel schlankere (in Kilobyte gemessen) Ansätze für Animationen.

Und so kommen wir last not least zum …

Google Web Designer

Google Web Designer ist der jüngste im Bunde.

Und wie das jüngste Geschwister von den älteren Brüdern und Schwester profitieren kann, konnte Google mit dem Web Designer ein Tool entstehen lassen, welches auf die Erfahrung anderer aufbauen konnte, ohne dabei daran gebunden zu sein, Gewohntes beibehalten zu müssen.

Und: Google Web Designer fügt sich nahtlos in die Google-Produkte-Familie ein.

Wer also mit Google Drive arbeitet und/oder seine Werbung auf Google Display & Video 360 bzw. Google Ads ausliefern lassen will, wird von Google Web Designer beinahe auf Händen getragen.

Aber bitte dran denken, der Google Web Designer hat es mehr mit den Animationen als mit den Effekten.

Zum Schluss

Wenn in 5 Jahren oder so etwas von dem, was ich heute geschrieben habe, obsolet geworden sein sollte, verkrafte ich das. Veränderung gehört zur IT dazu. Es wird bestimmt was Neues geben, worüber es zu schreiben lohnt.

Heute gibt es nämlich auch weder den Eisenwaren-Kleinteile-Handel, noch das Schrauben-Fachgeschäft, noch den Tür- und Tor-Fachhandel mehr in dem ich und mein Vater das Scharnier gesucht haben.

Heute steht ein grosser Baumarkt etwas ausserhalb des Städtchens.

Dort gibt es alles, auch Eis.