Cinemagrafen sind eine faszinierende Mischung aus Fotografie und Video, die statische Bilder mit subtilen, sich wiederholenden Bewegungen versehen. Sie verleihen Webseiten eine elegante und ansprechende Ästhetik, ohne die Ladezeiten durch große Videodateien zu beeinträchtigen. Die Erstellung eines Cinemagrafen ist oft einfacher als gedacht. Diese Anleitung führt Sie durch den Prozess, um Ihre eigenen Cinemagrafen mit Photoshop zu erstellen.
1. Das richtige Videomaterial wählen
Der erste Schritt zur Erstellung eines Cinemagrafen ist die Auswahl eines geeigneten Videoclips. Idealerweise drehen Sie das Video selbst, um es perfekt auf Ihre Marke abzustimmen. Für Experimente eignen sich jedoch auch Stock-Videos. Für dieses Tutorial verwenden wir ein Video eines Jenga-Turms vor einem blauen Hintergrund.
Bei der Auswahl des Videos sollten Sie Folgendes beachten:
- Kamerastabilität: Die Kamera muss während der gesamten Aufnahme absolut ruhig stehen. Ein Stativ ist hier unerlässlich.
- Isolierbare Bewegung: Die gewünschte Bewegung sollte leicht vom Rest des Bildes zu trennen sein. Komplexe Überlappungen oder schnelle Bewegungen im Hintergrund erschweren die Bearbeitung.
- Schleifenfähigkeit (Looping): Ein guter Cinemagraf sollte nahtlos wiederholbar sein. Ein Video, das sich gut loopen lässt, erleichtert diesen Prozess erheblich.
Nachdem Sie das passende Video ausgewählt haben, kann es in Photoshop geladen werden.
Jenga-Turm vor blauem Hintergrund
2. Video in Photoshop importieren
Öffnen Sie Photoshop und wählen Sie Datei > Öffnen, um Ihre Videodatei auszuwählen. Das Video wird als Ebene angezeigt. Stellen Sie sicher, dass das Zeitachsenfenster sichtbar ist (Fenster > Zeitleiste), da es für die Bearbeitung unerlässlich ist.
Bearbeitungszeitleiste in Photoshop
Das Video wird standardmäßig in einer Gruppe namens “Video-Gruppe 1” platziert. Diese Gruppe ist nicht zwingend erforderlich und kann bei Bedarf aufgelöst werden.
3. Die Zeitleiste bereinigen
Spielen Sie das Video ab und entscheiden Sie, welcher Ausschnitt für Ihren Cinemagraf verwendet werden soll. Entfernen Sie überflüssige Teile am Anfang oder Ende des Videos, indem Sie die Kanten der Videodatei in der Zeitleiste ziehen. Mit der Skalierungsfunktion am unteren Rand des Fensters können Sie hinein- und herauszoomen, um präziser zu arbeiten.
Zeitleiste in Photoshop bereinigen
Im Beispiel wurde das Ende des Videos, an dem der Jenga-Turm umfällt, abgeschnitten, da dies das Looping erschwert hätte.
4. Maskierungsebene erstellen
Nun wird der “Foto”-Aspekt des Cinemagrafen geschaffen. Pausieren Sie das Video an dem Frame, den Sie als Grundlage verwenden möchten, und kopieren Sie diesen Bereich in eine neue Ebene. Diese statische Ebene wird über der Videodatei liegen.
Eine Maskierungsebene erstellen
Um die gewünschte Bewegung sichtbar zu machen, fügen Sie der statischen Ebene eine Ebenenmaske hinzu (Ebene > Ebenenmaske > Alles einblenden).
Ebenenmaske einblenden
5. Die Bewegung isolieren
Wählen Sie die Maske aus (nicht die Ebene selbst) und greifen Sie zum Pinsel-Werkzeug. Malen Sie mit Schwarz auf der Maske, um Bereiche zu verbergen und Inhalte aus der darunterliegenden Videobene sichtbar zu machen. Mit Weiß malen Sie, um die Maske wiederherzustellen und den darunterliegenden Inhalt zu verbergen.
Im Tutorial-Beispiel wurden die Hände des Spielers weiß gelassen (statisch), während der Jenga-Turm schwarz bemalt wurde, um dessen Bewegung sichtbar zu machen.
Bewegung in Photoshop isolieren
So isolieren Sie gezielt die Bewegung, die im fertigen Cinemagraf erscheinen soll, während der Rest des Bildes eingefroren bleibt.
6. Als GIF exportieren
Wenn Sie mit dem Ergebnis zufrieden sind, exportieren Sie das Bild als GIF. Gehen Sie zu Datei > Exportieren > Für Web speichern (Legacy). Achten Sie auf folgende Einstellungen:
- Wählen Sie als Dateiformat
GIF. - Stellen Sie die Schleifenoptionen auf
Immer(oderForever).
GIF des wackelnden Jenga-Turms
Experimentieren Sie mit den verschiedenen Qualitätseinstellungen, um eine optimale Balance zwischen Dateigröße und Bildqualität zu finden. Damit haben Sie Ihren ersten Cinemagraf erstellt.
Verwendung der Photoshop-Datei
Die bereitgestellte Photoshop-Datei zeigt das fertige Cinemagraf und kann zur Untersuchung der einzelnen Schritte verwendet werden. Durch das Ausblenden von Ebenen und Masken können Sie nachvollziehen, wie die Bewegung isoliert und die statischen Elemente beibehalten wurden. Anpassungen an Farben und Schleifen sind jederzeit möglich.
Um sicherzustellen, dass Ihr Cinemagraf schnell und korrekt auf Ihrer Webseite geladen wird, empfiehlt sich ein leistungsstarkes WordPress-Hosting.