Das Graphics Interchange Format

Das Internet scheint beinahe unbegrenzte Möglichkeiten bereitzuhalten. Doch sind seinen Nutzern insbesondere bei Bildern enge Grenzen gesetzt: Im World Wide Web sind mit JPG, PNG und GIF nämlich lediglich drei Bildformate erlaubt.

Im MMP-Studiengang eignen wir uns ein breites Grundwissen über multimediale Inhalte an. Ein Grossteil unserer Ausbildung beinhaltet daher auch die Produktion von Online-Formaten: Wir lernen komplexe auditive, audio-visuelle oder animierte Werke zu konzipieren, zu visualisieren und schliesslich zu erschaffen. Doch was, wenn uns nur «primitive» Kanäle zur Verfügung stehen? Wie können wir ein in Adobe After Effects animiertes Logo «downgraden» und als einfaches Graphics Interchange Format (kurz: GIF) auf der Website unserer Kunden abspielen?

Ich habe am Beispiel einer einfachen Animation des Digezz-Logos das After Effects Plugin «Ouroboros» ausprobiert und zugleich eine GIF-Anleitung hergestellt. Wie das im Detail funktioniert, könnt ihr in der Kritik weiter unten nachlesen. Das Endprodukt selbst seht ihr hier:

Digezz Logo als GIF

(lhu)

Kritik
von Fabian Sude

Vorgehen im After Effects Plugin «Ouroboros»

Als erstes habe ich die Composition in Adobe After Effects den Logo-Anforderungen auf dem Factsheet entsprechend angepasst sprich die Grösse auf 720px Breite sowie 326px Höhe eingestellt.

Dann musste ich einen Ouroboros-Layer sowie einen Text-Layer mit dem Inhalt «Digezz» erstellen. Letzteren Layer galt es in einen Shape-Layer umzuwandeln und mit Hilfe des Plugins «Ouroboros» als Parent-Element zu koppeln (Layer einfach anwählen und auf den Effekt «Ouroboros» klicken). Danach konnte ich den Text-Layer löschen und den Shape-Layer ausblenden.

Anschliessend habe ich im «Ouroboros»-Layer auf «add» geklickt, «offset-paths» ausgewählt, bei «amount» einen optisch ansprechenden Wert gewählt (in meinem Fall den Wert 3) und die Option «Line Join» auf «Round Join» umgestellt. Sollten sich Probleme mit der Liniendicke ergeben, kann ebenfalls mit der Option «stroke width» experimentiert werden.

Mittels «Trim Offset» kann nun bereits der erste Effekt hinzugefügt werden: Einfach alt gedrückt halten, auf den Stoppuhr-Button klicken und bei den Expressions den gewünschten Zeiteffekt eintippen (in meinem Fall habe ich die Expression «time*50» gewählt).

In einem weiteren Schritt können die gewünschten Farben gewählt werden. Um die Anfoderungen des Factsheets zumindest ansatzweise zu erfüllen, habe ich mich für verschiedene Graustufen entschieden.

Um die Möglichkeiten des Plugins noch weiter auszureizen, kann ausserdem nach Belieben mit allen anderen Unterkategorien experimentiert werden. Erlaubt ist, was gefällt.

Zu guter Letzt muss die Animation mittels Media Encoder noch gerendert werden. Da wir das Endprodukt in einem weiteren Schritt ohnehin in ein GIF umwandeln, sind die Output-Einstellungen vernachlässigbar. Wer dennoch korrekt vorgehen will, kann das Video nach dem allgemein gültigen MMP-Standard rendern.

Vorgehen im Photoshop Plugin «Animator's Toolbar»

Um das Video nun in ein Gif umzuwandeln, muss es im Photoshop importiert werden (import as videoframes to layers --> from beginning to end). Da ich mein Video in 24 FPS gerendert habe, wählte ich zusätzlich noch die Option «limit to every 2 frame» aus. Vorausgesetzt man hat die vorgeschriebenen Kriterien bereits im After Effects beachtet, müssen hier keine weiteren Einstellungen vorgenommen werden.

Loop kreieren

Falls man im After Effect noch keinen Loop generiert hat, kann man nun alle Frames bis auf das Erste sowie das Letzte markieren, alt gedrückt halten und die markierten Frames mittels Maus hinter das letzte Frame legen. Nun muss nur noch der Button «reverse Frames» gedrückt werden und der perfekte Loop ist kreiert.

Anschliessend gilt es, das File als GIF zu exportieren (File --> export --> safe for web (legacy)) und die gewünschten Presets auszuwählen. Und fertig ist das GIF!

Konklusion

Das Plugin «Ouroboros» vereinfacht die Arbeit eines Multimedia Producers enorm und bietet unzählige Möglichkeiten, auf einfache Art und Weise schnell Schriftanimationen herzustellen. Die Dateigrösse ist minimal, was den Einsatz als GIF erlaubt und sich gerade für den mobilen Einsatz eignet.

Trotz des vergleichsweise geringen Zeitaufwands kann sich der Digezz-Schriftzug meiner Meinung nach sehen lassen. Da die Animation weder handgezeichnet noch als PNG abgespeichert ist, erfüllt mein Digezz-Logo allerdings die Publikationsvoraussetzungen nicht. Es wird daher wohl nie auf der Website zu sehen sein.

Keine Kommentare

Schreibe einen Kommentar