Gesas Lichtschriften

Vom animierten GIF zum Cinemagraph

Making of Pageturner

GIF ist ein Dateiformat, das vor allem in den Anfängen des Internets benutzt wurde, um kleine Animationen, wie z.B. Werbebanner in Websites zu integrieren. Es hat die Vorteile,

• dass es eine verlustfreie Kompression und kleine Dateien liefert,
• dass transparente Bereiche dargestellt werden können – leider nur schlecht als Farbverlauf,
• dass mehrere Bilder in einer Datei gespeichert werden können, so dass Animationen möglich sind.

Allerdings können Bilder im GIF-Format nur mit einer geringen Farbtiefe von maximal 256 verschiedene Farben pro Einzelbild dargestellt werden. Wenn die Bilder zu viele unterschiedliche Farben enthalten, kann es unschöne Artefakte geben. Daher probiert am Schluss beim Abspeichern › in dem entsprechenden Dialog mit der Farbmischung herum oder versucht mit möglichst monochromen Bildern zu arbeiten.

Letztes Jahr wurde dieses alte Dateiformat wieder entstaubt. Vor allem Modefotografen haben es aufgegriffen und in sogenannten Cinemagraphs ihren Aufnahmen Leben eingehaucht. Ein Cinemagraph (auch Cinemagram oder Cinematograph) steht ein wenig zwischen Bild und Film. Es ist ein Standbild, in dem nur ein kleiner Ausschnitt, z.B. eine Haarsträhne oder Zweige im Wind, manchmal auch komplexere Bewegungsabläufe animiert sind. Hier ein paar ausgefeilte Beispiele:

• Cinemagraph
• From Me to You
• Feingut
• Beitrag zu Cinemagraphs auf dem Netzfilmblog von Zeit-Online

Wie groß die animierten Bereiche sein sollen, hängt vom Motiv und vom persönlichen Geschmack ab. Subtile Regungen können genauso eindrucksvoll wie großflächige Abläufe sein. Wichtig ist, dass sich die Bewegung als Endlosschleife darstellen lässt. Ggf. ist es möglich, die Sequenz ein Mal vorwärts, ein Mal rückwärts ablaufen zu lassen, um einen optischen Loop zu kreieren.

Was müsst ihr tun, um selbst ein Cinemagraph zu kreiren? Wenn ihr mit einem Smartphone unterwegs seit, könnt ihr hierfür inzwischen eine App benutzen. Wer sich die Mühe machen möchte, selbst die Bilder zu animieren, kann dafür ein spezielles Animationsprogramm benutzen, u.a. den Animationsdialog von Photoshop. Für ein manuell animiertes Cinemagraph gibt es zwei Ausgangsmaterialien:

• Eine kurze Videosequenz von wenigen Sekunden: In Photoshop kann eine eine Videosequenz in eine Bilddatei umgewandelt werden. Jeder einzelne Frame wird dann in eine Ebene eingefügt. Im Animationsdialog ist zu sehen, dass jedem Frame automatisch eine Dauer zugewiesen wurde.
• Ein in Serie fotografierter Bewegungsablauf: Aufgrund der niedrigeren Bildrate im Vergleich zu einer gefilmten Bildsequenz, bekommt euer Ergebnis dann einen Stopmotion-Charakter. Je höher die Bildfrequenz bei der Aufnahme ist, umso flüssiger kann später die Bewegung dargestellt werden.

Der kleine Selbstversuch aus dem vorangegangen Post basiert auf einer Videosequenz, die ich mit meiner Webcam aufgenommen habe: Ich blättere ca. 20 Sekunden lang in einem Buch. Für ein Cinemagraph sind allerdings nur ein bis zwei Sekunden notwendig. Schaut euch deshalb euer Videomaterial in Ruhe an, um den richtigen Augenblick zu finden. In diesem Beispiel habe ich mich für einen Moment gegen Ende des Videos entschieden.

In Photoshop kann die Videosquenz über Menü: Datei → Import → Videoframes in Ebenen geöffnet werden. Wichtig: Photoshop muss als 32bit-Variante geöffnet sein. Im Importassistent wird das Video auf den gewünschten Zeitabschnitt eingegrenzt. Das ausgewählte Bildmaterial wird in eine Datei mit mehreren Ebenen geladen. Der Animationsdialog befindet sich unter Menü: Fenster → Animation. Über ein kleines Symbol in der rechten unteren Ecke des Dialogfensters kann zwischen der Zeitleistenansicht und der Frameansicht hin und her geschaltet werden. Für Cinemagraphs eignet sich die Frameansicht. Bevor ihr mit der weiteren Bearbeitung beginnt, prüft, ob ihr wirklich alle importierten Frames braucht, indem ihr die Sequenz in einer Endlosschleife mehrmals durchlaufen lasst. Wenn die überflüssigen gelöscht sind, könnt ihr mit der Animation beginnen:

• Um nur einen Bildausschnitt zu animieren, müsst ihr zunächst eine Ebene als Basisbild aussuchen und bei den anderen Ebenen den zu animierenden Ausschnitt mit Hilfe einer Ebenenmaske auswählen.
• Das Basisbild könnt ihr nach Bedarf bearbeiten.
• Pro Frame könnt ihr festlegen, welche Ebene sichtbar sein soll, indem ihr die Ebenen mit dem Augensymbol einblendet. In jedem Frame muss das Basisbild sichtbar sein. Zusätzlich wird von Frame zu Frame immer der nächste Bildausschnitt zu sehen sein, sprich:
  Frame 1 – nur das Basisbild,
  Frame 2 – Basisbild und Ebene 2 mit Ebenenmaske,
  Frame 3 – Basisbild und Ebene 3 mit Ebenenmaske,
  …
• Zusätzlich könnt ihr über alle Bildebenen Einstellebenen legen, mit denen ihr bestimmte Bildeffekte erzeugen könnt, z.B. Gradationskurven, Körnungsebenen, Farblooks. Die Einstellebenen müssen in jedem Frame eingeblendet sein.
• Lasst die Animation noch mal durchlaufen und prüft, ob die Geschwindigkeit stimmt. Ggf. könnt ihr noch die Dauer pro Frame hoch oder runter setzen.
• Eure Arbeitsdatei speichert ihr in einem Dateiformat ab, das Ebenen unterstützt, z.B. TIFF oder PSD.

Screenshot

Um ein animiertes GIF abzuspeichern, geht ihr über Menü: Datei → ‹ Für Web und Geräte speichern → Einstellungen für Anzahl der Farben und Art der Farbmischung (Dither) festlegen → Speichern. Die Animation könnt ihr dann in einem Internetbrowser eurer Wahl anschauen.

Ergebnis

Zurück zum Artikelanfang ›