Ihr alle habt sicherlich schon mal ein Cinemagraph auf einer Webseite gesehen, also ein Standbild welches oft kleine, sich wiederholende Bewegung enthält. Nachdem es lange Zeit ruhig um die flippigen GIF-Dateien aus den Neunzigern geworden war, erleben die auf Deutsch „Cinemagramm“ genannten Animationen seit geraumer Zeit eine Renaissance. Ich zeige euch im folgenden Tutorial, wie ihr euch mit Hilfe von Photoshop solch ein kleines Endlosfilmchen erstellen könnt. Dieses könnt ihr euren Freunden anschließend auf einer Webseite oder in den sozialen Netzwerken präsentieren.
Damit ihr euch in etwa vorstellen könnt, was mit einem Cinemagraph überhaupt gemeint ist, schaut euch doch dieses hübsche Kätzchen mal ganz genau an und achtet dabei auf die Ohren.
© Wenn ihr ein gutes Cinemagraph aus einer Video-Sequenz erstellen wollt, solltet ihr auf ein paar wichtige Grundvoraussetzungen bei eurem Ausgangsmaterial achten. Die folgenden 5 Tipps habe ich für euch.
- Ganz wichtig ist, dass euer Film frei von Verwackelungen ist. Er sollte also möglichst mit Hilfe eines Stativs aufgenommen werden, denn ein aus der Hand gedrehtes und somit meist verwackeltes Video eignet sich demnach nicht so gut.
- Ihr solltet auch darauf achtgeben, dass in der Sequenz aus welcher ihr später das GIF erstellen wollt, nicht zu schnell und zu stark gezoomt wurde.
- Der Hintergrund in eurem Videomaterial sollte zudem nicht zu diffus sein und sich nicht schnell bewegen. Aufnahmen vor vielen Bäumen die sich schnell im Wind bewegen sind genauso ungeeignet, wie eine Szene die vor schnell vorbeiziehenden Wolken gedreht wurde.
- Ihr solltet auch am besten schon vor der Aufnahme wissen, welcher Teil des Bildes (im oberen GIF zum Beispiel die Ohren der Katze) sich anschließend im GIF bewegen soll. Ideal ist es, wenn sich der restliche Teil des Motives nicht weiter bewegt.
- Achtet auf eine gute Ausgangsauflösung des Videos. Idealerweise nehmt ihr eure Filmsequenz in FullHD, also 1080p auf, so wie es ja heutzutage bei vielen Kameras bereits Standard ist.
Step 1
Bevor ihr mit dem Erstellen des Cinemagraphs beginnt, müsst ihr noch checken, ob eure Version von Adobe Photoshop auch Videos bearbeiten kann. Möglich ist dies ab der Version CS5. In den vorherigen Versionen war es nur möglich, ein GIF aus vielen verschiedenen, einzeln aufgenommenen Bildern zu erstellen. Nun aber ab zum Video. Ich habe hier iStocks Video des Monats von Yongyuan Dai als MOV-Datei in „HD 1080“ heruntergeladen. Über den Menüpunkt Datei / Öffnen ruft ihr die gespeicherte Datei vom Speicherort auf. Um das Video nun optimal bearbeiten zu können, solltet ihr euren Arbeitsbereich auf „Bewegung“ umstellen. Ihr könnt optional aber auch nur das Fenster Animation (Fenster / Animation) aufrufen.
Step 2
Da ihr natürlich nicht den ganzen Film, sondern nur eine bestimmte Sequenz in ein GIF umwandeln wollt, müsst ihr nun zunächst mit Hilfe des Schiebereglers den Anfangspunkt eures Filmausschnitts festlegen. Um genauer arbeiten zu können, solltet ihr den Zoomfaktor der Leiste verändern. Das macht ihr, indem ihr den Regler, den ich für euch unten im Screenshot markiert habe, verschiebt. Wenn ihr den Anfang eurer Sequenz gefunden habt, lasst ihr den Schieberegler oben in der Zeitleiste los und geht im Bedienfeldmenü des Animations-Fensters auf „Anfang des Arbeitsbereiches festlegen“. Es wird sofort automatisch ein Anfangsmarker auf die Stelle gesetzt, an der euer Schieberegler steht.
Step 3
Genauso verfahrt ihr jetzt mit dem Endpunkt. Schieberegler solange verschieben, bis ihr das gewünschte Ende eurer Sequenz erreicht habt und dann den Schieberegler loslassen. Im Bedienfeldmenü geht ihr nun auf „Ende des Arbeitsbereiches festlegen“.
Step 4
Um eure Dateigröße jetzt gleich etwas zu verringern, könnt ihr wenn ihr euch ganz sicher seid, dass ihr euren Arbeitsbereich nun exakt festgelegt habt, im Bedienfeldmenü auf „Dauer des Dokumentes auf Arbeitsbereich zuschneiden“ gehen. Somit bleibt dann nur noch der von euch definierte Arbeitsbereich übrig und ihr müsst nicht mehr den kompletten Film abspeichern.
Step 5
Jetzt kommt auch schon der „Magic Step“ bei der Erstellung eures Cinemagraphs. Ihr fügt euch ganz normal eine neue Ebene über der Filmebene ein (Ebene / Neu / Ebene oder optional Shortcut Umschalt + Strg + Alt + N). Danach kopiert ihr mit Umschalt + Strg + Alt + E alle sichtbaren Ebenen (in diesem Fall natürlich nur die Eine) in die neue Ebene. Dieser neuen Ebene fügt ihr nun eine Ebenenmaske hinzu. In dieser Maske wendet ihr dann einen harten, schwarzen Pinsel an. Den Bereich, in dem der Kaffee auf die Oberfläche des schon in der Tasse enthaltenen Kaffees trifft, könnt ihr dann aber zu einem etwas weicheren Pinsel greifen, damit ihr den Übergang etwas weicher freistellen könnt. Dabei ist es wichtig, dass ihr für jeden einzelnen Bildframe überprüft, ob ihr auch alle Bildbereiche, die sich später in eurem GIF bewegen sollen, mit dem Pinsel maskiert habt. Damit ihr noch einmal genau seht, welche Bildbereiche ich maskiert habe, sind diese hier ausgewählt.
Step 6
Ihr könnt eure Ergebnisse immer durch Klick auf die Play-Taste (oder durch Drücken der Leertaste) überprüfen. Wenn ihr einmal zu viel mit der Maske freigestellt haben solltet, so könnt ihr euren Fehler ganz einfach beheben, in dem ihr die betreffende Stelle wieder mit einem weißen Pinsel übermalt. Zwischen Schwarz und Weiß als Vordergrundfarbe könnt ihr ganz einfach mit dem Shortcut X hin- und herwechseln.
Step 7
Auch wenn es sich hier um ein Video handelt, könnt ihr euer GIF ganz normal wie jedes andere Foto in Photoshop auch mithilfe der Korrekturebenen bearbeiten. Ihr könnt also auch hier die Tonwerte korrigieren, Farbton/Sättigung anpassen oder auch aus dem Farbbild ein Schwarzweißbild machen. Ihr könnt natürlich genauso auch die Bildgröße ändern.
Step 8
Um euer Cinemagraph nun für die Verwendung im Webbrowser abzuspeichern, müsst ihr auf Datei / Für Web und Geräte speichern gehen. Dort wählt ihr oben als Vorgabe GIF aus und stellt die hier zu sehenden Einstellungen ein. Ich habe diese auf mein hier verwendetes Ausgangsvideo optimiert. Eure Einstellungen können ganz andere sein, je nachdem wie euer Ursprungsfilm aussieht. Genaue Infos zu den Einstellmöglichkeiten findet ihr bei Adobe. Um das Ausgangs- und das Endergebnis vergleichen zu können, geht ihr oben links in diesem Fenster auf „2-fach“. Unten links könnt ihr die Zoomstufe wählen, um die Qualität noch besser beurteilen zu können.
Fertig!
Das fertige Ergebnis könnt ihr euch hier ansehen und natürlich wie immer auch kostenlos herunterladen. Ich würde mich freuen, wenn ihr eure erstellten Cinemagraphs unten in den Kommentaren verlinkt!
Weitere Beispiele für tolle Cinemagraphs
An dieser Stelle habe ich nun für euch noch einige Beispiele für besonders gelungene Cinemagraphs herausgesucht. Lasst euch auch hier etwas für eure eigenen Arbeiten inspirieren.
© 
© 
© cinemagraphical.com
Hinter den folgenden Links warten noch weitere großartige Cinemagraphs.
2 Kommentare
allo, wollt mich für das tolle Tutorial Bedanken.
Gruß aus Hamburg
Achim
Hallo Achim,
aber gerne doch. Schön, wenn dir unsere Beiträge so gut gefallen.
Viele Grüße,
Thomas