Kurze Animationen – schnell und effizient erstellt

Die Aufmerksamkeitsspanne im Internet wird immer kürzer und textlastige Websites können mühsam für die Besucher*innen sein. Eine kleine Bewegung fängt die Aufmerksamkeit der Betrachter*innen schnell wieder ein und lockert das Erlebnis auf. Damit Sie nicht unzählige Stunden für Animationen aufwenden müssen, zeigen wir Ihnen, wie man mit ein paar simplen Tricks aus einer Illustration eine bewegte GIF-Animation macht.

1. Zeichnen in Procreate

Will man aus einer Illustration später eine Animation erstellen, muss man bereits während des Zeichnungsprozesses einiges beachten. Damit spart man später enorm viel Zeit. Wichtig ist, dass man alle Elemente, die man bewegen will, auf separaten Ebenen (Layers) zeichnet. Die Zeichnungsapp Procreate unterstützt, wie die meisten anderen professionellen Zeichnungsapps, das Arbeiten mit mehreren Ebenen. Die Anzahl der zur Verfügung stehenden Ebenen hängt von der Leistungsstärke des iPads ab, auf dem gezeichnet wird.

Im animierten Beispiel bewegt sich der linke Arm des Mannes, der rechte Arm der Frau und die Giesskanne. Weiter kommen Wassertropfen aus der Giesskanne. Es müssen also mindestens diese Elemente freigestellt sein. Freigestellt heisst, dass sich nur dieses Element mit transparentem Hintergrund auf einer Ebene befindet. Wichtig ist auch, dass Hintergrund, Texturen, etc. nicht auf dem gleichen Layer, wie die bewegten Elemente sind. Ist man mit Illustrieren fertig, benennt man die Ebenen sinnvoll, damit man sie später einfacher findet.

2. Überprüfung in Photoshop

Arbeitet man mit Apple Geräten, kann man sich die Illustration direkt aus Procreate via AirDrop als Photoshop File auf den Mac senden. Arbeitet man mit Windows weiter, kann man die Illustration auch als .PSD-File in die Cloud speichern und so auf den PC übertragen. Verfügt man nicht über eine Cloud, kann man sich das File auch via Mail direkt aus der App senden. Wichtig ist für die Weiterarbeit allerdings, dass man die Illustration mit all ihren Ebenen als Photoshop-Datei (Dateiendung .PSD) aus der Procreate App exportiert. Nur so kann man sie anschliessend mit Adobe Programmen weiterverwenden.

Hat man die Illustration auf den Mac oder PC übertragen, öffnet man sie in Adobe Photoshop zur Überprüfung. Wurden alle Ebenen korrekt übertragen? Falls nicht, empfiehlt es sich, die Ebenen zu bereinigen und zuzuschneiden.

3. Animation mit Adobe After Effects

Anschliessend wird die Photoshop-Datei in Adobe After Effects importiert. Adobe After Effects ist ein Programm, das in der Adobe Creative Suite enthalten ist und zur professionellen Animation und Videobearbeitung eingesetzt wird. In After Effects kann man nun die einzelnen Ebenen bewegen, rotieren und skalieren. Ein sogenanntes Keyframe bestimmt jeweils den Anfangs- respektive Endpunkt einer Bewegung. Man definiert also im After Effects, dass z.B. der Arm zwischen zwei Punkten (respektive Keyframes) eine bestimmte Bewegung machen soll.

Da sich ein GIF unendlich wiederholt, muss man dazu einen Loop also eine Schleife erstellen. Für einen nahtlosen Loop muss der Anfang und das Ende der Animation genau gleich sein. Am konkreten Beispiel des Armes heisst das, der Arm muss am Ende der Bewegung wieder an seinen Ausgangspunkt zurück. Er muss somit eine Pendelbewegung machen.

Da GIF-Dateien schnell sehr gross werden und es sich für Webseiten empfiehlt, Dateigrössen möglichst klein zu halten, sollte die Animation deshalb nicht länger als drei Sekunden sein.

Eine simple, drei-sekündige Animation wie diese kommt meistens mit wenigen, einfachen Bewegungen aus. Weniger Bewegungen bedeuten weniger Keyframes, die es zu setzen gilt. Und das wiederum heisst, dass man weniger Zeit zum Animieren braucht.

4. Export als Video mit Transparenz

Hat man alle Keyframes gesetzt und die Animation zu einem sauberen Loop gemacht, muss man sie exportieren.

Da wir die Animation auf einer Website platzieren wollen, exportieren wir sie mit einem transparenten Hintergrund. So kann man das Bild überall auf der Webseite platzieren, egal welche Farbe der Hintergrund hat. Man vermeidet damit, dass die Animation vor einem weissen Viereck erscheint. Um einen transparenten Hintergrund zu erhalten, schaltet man die Hintergrundebene vor dem Export aus. Einen transparenten Hintergrund bekommt man beim Export, indem man beim Video Output als Channels «RGB+Alpha» exportiert. RGB steht hier für die Farben rot, grün und blau. Alpha bestimmt, wo Transparenz ist und wo die Farben gesehen werden. Wenn man beim Export als Format QuickTime auswählt, wird die Animation nun als .mov Video-Datei gespeichert.

5. Export als GIF

Jetzt ist es Zeit, zurück ins Adobe Photoshop zu wechseln. In Adobe Photoshop importiert man die .mov Videodatei. Photoshop macht aus den Videoframes (Standbildern des Videos) einzelne Layers.

In Photoshop muss man das Video aber gar nicht mehr bearbeitet, denn Photoshop wird in diesem Fall nur benutzt, um das Video als GIF zu exportieren. Photoshop gibt einem viele Optionen, um ein Video als GIF zu exportieren. Diese Optionen sind wichtig, um das gewünschte Resultat zu erhalten.

In der Exportansicht kann man die Animation noch einmal abspielen, bevor man das GIF exportiert, und zudem wird die ungefähre Dateigrösse abgeschätzt. Dies hilft einem dabei, die Exporteinstellungen anzupassen. Man kann bestimmen, mit welchen Abmessungen die Animation ausgespielt werden soll, wie viele Farben das GIF haben soll und es gibt noch einige andere Einstellungen für den Export des GIFs.

Um die GIF Dateigrösse möglichst klein zu halten, empfiehlt es sich, die Farbanzahl zu reduzieren. Die maximale Anzahl Farben, die eine GIF-Datei unterstützt, sind 265. Mit 265 Farben ist ein GIF-File aber oft etwas zu gross. Es empfiehlt sich also, die Farbanzahl zu verkleinern. Im Vorschaufenster sieht man jeweils, wie dies das Resultat beeinflusst. Ziel ist es, einen möglichst schönen Look zu behalten, aber die Farbanzahl auch zu reduzieren. Eine weitere Möglichkeit, Platz zu sparen, ist, die Abmessung des Bildes zu verkleinern. Ein 500 x 500 Pixel GIF braucht natürlich viel weniger Speicherplatz als ein 1000x1000 Pixel grosses Bild. Je kleiner die Dateigrösse, desto schneller lädt das Bild später auf der Website. Idealerweise ist das GIF kleiner als 2MB, damit die Webseite dieses schnell laden kann.

Mit diesen wenigen Schritten kann man somit eine Animation erstellen, welche die Besucher*innen Ihrer Webseite in ihren Bann zieht.