Wie mein Gif von den Merkel-Obama-Titelseiten entstand

Auf #MerkelMeme am Montag folgte am Dienstag ein wohl einzigartiges Titelseiten-Klonen von Tageszeitungen auf allen Kontinenten und gestern schließlich mein Gif, mit dem ich die Titelseiten von über 30 Tageszeitungen auf das reduzierte, was sie an diesem Tag ausmachte: Das Foto vom G7-Gipfel, auf dem Merkel mit ausgebreiteten Armen vor Obama steht.
Da auf Twitter ein paar Rückfragen dazu kamen, wie und wie lange ich an dem Gif gearbeitet habe, habe ich kurz aufgeschrieben, wie das Gif entstand und woher die Titelseiten kamen.

Das Bildmaterial

Vor zwei Wochen habe ich den Twitter-Account @titelseiten gestartet, auf dem ich Titelseiten näher beleuchten wollte. Durch die Vorarbeiten für @titelseiten hatte ich mich daher schon vor #MerkelMeme auf die Suche nach einer Website gemacht, die die Cover von möglichst vielen Tageszeitungen gesammelt anbietet.

Fündig geworden bin ich dann bei den beiden Websites Newseum und Kiosko, die zusammengenommen einen großen Teil der internationalen Medienlandschaft abdecken und Cover bis hin zur regionalen Ebene anbieten. Leider bieten beide Seiten nicht die Möglichkeit, alle Cover gesammelt auf einer Seite anzuzeigen, sodass man sich durch die einzelnen Kategorien klicken muss.
Dennoch: Die Auswahl ist riesig und die Cover sind hochauflösend und zahlreich vorhanden – das richtige Ausgangsmaterial für so ein Projekt also.

Die Animation

Die eigentliche Animation hat dann vom Arbeitsaufwand gegenüber der Recherche den kleineren Teil ausgemacht. Zum Einsatz kam dabei Adobe Photoshop ohne zusätzlich installierte Aktionen oder Plugins.

Insgesamt bestand der Arbeitsablauf inklusive Speichern aus fĂĽnf Schritten:

  1. Mit Datei→Skripten→Dateien in Stapel laden habe ich alle Bilder in eine Photoshop-Datei geladen, sodass die Bilder auf separaten Ebenen waren. In diesem Schritt kann man über Quellbilder nach Möglichkeit ausrichten die Bilder nach inhaltlichen Übereinstimmungen ausrichten; aus Performance-Gründen habe ich das allerdings in einen Extra-Schritt ausgelagert.
    Screenshot: Bilder auf separate Ebenen verteilen
    Über „Datei→Skripten→Dateien in Stapel laden…“ alle Titelbilder auf separate Ebenen verteilen
  2. Anschließend habe ich alle Ebenen markiert (mit Shift und Mausklick) und dann über Bearbeiten→Ebenen automatisch ausrichten die Arbeit Photoshop überlassen. Dabei kann man mit den Optionen ein wenig spielen, um zu sehen, welche am Besten funktioniert – bei mir war das normale Ausrichten ausreichend, weil das Ausgangsmaterial keine perspektivischen Verzerrungen hatte.
  3. Da die Ebenen immer noch alle markiert sind, konnte ich sie anschließend gesammelt verschieben. Bei meinem Gif habe ich mich dafür entschieden, Obamas Kopf mittig zu positionieren, da der Kopf einen natürlichen Bezugspunkt darstellt und ohnehin relativ mittig im Bild angeordnet war. Anschließend habe ich das Bild noch im 4:3-Verhältnis beschnitten, damit es auf Twitter besser angezeigt wird.
  4. Über Fenster→Animation habe ich anschließend in Adobe Photoshop das Animations-Fenster aufgerufen, in dem einfache Animationen gestaltet werden können. Das Prinzip dahinter entspricht den gängigen Videoschnittprogrammen – gearbeitet wird hauptsächlich mit Keyframes, also bestimmten Zeitpunkten in der Animation, an denen man das Material ändern möchte. In meinem Fall waren das insgesamt 31 Frames, auf denen jeweils nur eine Ebene – also die jeweilige Zeitung – aktiviert war.
    animation-photoshop-keyframes
    Animieren in Photoshop: Etwa so sah meine Zeitleiste exemplarisch fĂĽr zwei Keyframes aus
  5. Anschließend musste die Animation nur noch als Gif exportiert werden. Das geht über Datei→Für Web und Geräte speichern. Dort kann man noch einige Qualitätseinstellungen vornehmen – ansonsten ist das Gif aber fertig und bereit zum Speichern.