Profi-Tipps für GIFs in der Technischen Redaktion
Am Anfang war die Auswahl des Tools für die GIF-Erstellung. Und das ist eigentlich auch der entscheidende Knackpunkt der ganzen Geschichte. Die Vorgeschichte dazu gibt's im letzten Blog-Artikel.
Aufnahme des Videos
Aber von vorn. Zu Beginn steht erst einmal die Aufnahme des Videos. Und bereits hier entscheidet sich einiges, wenn man mit GIFs arbeiten möchte – man sollte bereits die i.d.R. geringe Auflösung des am Ende entstehenden GIFs berücksichtigen. Also: Immer so filmen, dass Dinge sehr leicht erkennbar und bereits im Video gut kontrastiert sind.
Weiterer Knackpunkt: Das GIF bietet nur 256 Farben. Die Qualität ist also nicht mit einem normalen Video vergleichbar. Woran man meist auch erst zu spät denkt: Gewisse Handlungsanweisungen im Video sollten langsamer und gleichmäßiger erfolgen, als die natürliche Handlung ist. Diese könnten sonst bei der geringen Framerate des GIFs untergehen. Problematisch dabei ist zum Beispiel das Herausfallen der Mine im Beispiel. Im GIF kann es so wirken, als würde die Mine plötzlich auftauchen und nicht flüssig aus dem Stift herausfallen. Einziges Heilmittel hierfür: Im Bearbeitungsprogramm Hand anlegen und die Frames des GIFs strecken (ScreenToGif: MS-Zahl an der Stelle höher setzen) oder das Video an dieser Stelle in Zeitlupe laufen lassen (Adobe Premiere/After Effects). Da liegt auch ein weiteres Problem der GIF-Herstellung, welches jedes Programm erstmal hat – es legt selbst fest, wann welches Bild gemacht wird. Das ist einerseits logisch und unabdingbar, andererseits kann es teilweise etwas tricky werden. Logisch, weil: Wir haben zum Beispiel 5 Sekunden Video und machen daraus 20 Frames GIF. Dann ist es klar, dass die „Taktung“ ist:
00,00s -> Bild 1
00,25s -> Bild 2
00,50s -> Bild 3
und so weiter. In den meisten Fällen auch kein Problem. Aber besonders bei GIFs mit geringeren Framerates oder sehr schnellen und abrupten Handlungen kann genau der Frame des Videos übersprungen werden, in dem die Action passiert. Wie zum Beispiel der Frame, in dem die Mine aus dem Druckbleistift fällt.
Toolauswahl für die GIF-Erstellung
Nun noch einmal zur Toolauswahl. Die Entscheidung, ob Adobe Premiere/After Effects oder ScreenToGif ist eine Wahl zwischen komplex oder einfach. Die Vorteile von Adobe Premiere und After Effects: Völlige künstlerische Freiheit, komplette Anpassung ans Corporate Design kein Problem. Die Kehrseite der Medaille? Ein gleichwertiges, simples Ergebnis dauert hier länger als bei ScreenToGif.
ScreenToGif – quick and not so dirty? Einfach geht zwar schneller, bietet aber auch nur die begrenzte Palette des ScreenToGif. Für die einfache GIF-Erstellung wie im Prototyp reicht jedoch ScreenToGif vollkommen aus. Will man mehr, stößt man schnell an die Grenzen des Programms. Einheitliche Pfeile in allen GIFs? Keine Chance. Kritzeleien, einfacher Text – geht.
Umsetzung als HTML-Anleitung
Die Umsetzung habe ich via Axure gelöst. Einem Prototyping Tool, das auch HTML ausgeben kann, jedoch keine Framework-Funktionalität bietet, wie es bei der Videoanleitung der Fall ist. Solche Prototypen sind hiermit schnell umgesetzt und können gleichzeitig komplexe Use-Cases abbilden (z.B. entscheidet die Wahl über „Anfänger“ und „Fortgeschrittener“ darüber, welche Inhalte man in welchem Umfang angezeigt bekommt). Man könnte so aber problemlos ein Framework entwickeln, das die Einbindung der GIFs in HTML ähnlich der Videoanleitung ermöglicht.
Weitere Vorteil des GIFs im Vergleich zum Video: Das GIF ist sehr kompatibel, fast jedes Gerät und jeder Browser kann damit umgehen und es anzeigen. Ebenso benötigt man keinen Videoplayer. Das ist Vor- und Nachteil zugleich. Vorteil: Man spart sich Interaktion, das GIF beginnt direkt beim Laden der Website – aber auch hier kann man tricksen und ein GIF auf Klick/Tap starten lassen. Der Nachteil des GIFs ist aber folgender: Es wird beim Laden der Website direkt mitgeladen. Sicher ließe sich das auch programmiertechnisch umgehen, aber wir gehen hier einfach mal vom Normalfall aus. Und da bieten die meisten Videoplayer an, dass das Video erst „on-click“ vom Server geladen wird. Das lässt sich aber mit einem pfiffigen Programmierer alles selbst basteln. Aber es ist eben im ersten Moment mehr Bastelaufwand.
Conclusio
Es ist viel möglich im GIF: Vom simplen GIF bis hin zu Animationen, Pfeilen, Schrift und Effekten. Man muss nur wissen, was man für welchen Anwendungsfall braucht. Die Möglichkeiten sind bei Adobe Premiere in Kombination mit After Effects fast unbegrenzt, dafür dauert‘s länger. Die Schnittstelle zum Einbinden in HTML stellt die zweite Hürde dar – schnell mit Axure, aber nicht auf Basis der Wiederverwendung bzw. des einfachen Einpflegens. Oder mit mehr Entwicklungszeit und Programmierung, dafür mit einem einfachen Einpflegen der GIFs.
Kommentar schreiben
Kommentare
Kommentare
Keine Kommentare
Kommentar schreiben