Timeline & Animation in Photoshop

Das Timeline-Bedienfeld in Adobe Photoshop ermöglicht die Erstellung von Frame-by-Frame-GIF-Animationen, einfachen Videobearbeitungen und Ebenen-basierten Keyframe-Animationen mit Positions-, Opazitäts- und Stilübergängen.

Was ist die Timeline in Photoshop?

Die Timeline (Zeitleiste) in Photoshop ist kein vollständiges Videoschnittprogramm, aber ein mächtiges Werkzeug für:

• GIF-Animationen: Frame-by-Frame-Animationen, klassisch für Web-GIFs.
• Einfache Videobearbeitung: Videoclips importieren, schneiden, Übergänge setzen, Audio einfügen.
• Keyframe-Animation: Ebenen-Eigenschaften (Position, Deckkraft, Stil) über Zeit animieren.
• Cinemagraphs: Teile eines Fotos animieren (z. B. nur das Wasser in einer Landschaft), während der Rest eingefroren bleibt.

Das Timeline-Bedienfeld wird über Fenster → Timeline geöffnet. Es erscheint am unteren Rand des Photoshop-Arbeitsbereichs und zeigt je nach Modus entweder eine Frame-Ansicht (klassische GIF-Animation) oder eine Video-Zeitleiste mit Ebenenspuren.

Erklärung

Zwei Modi der Timeline

Frame-Animation (Klassische GIF-Animation): Jeder Frame entspricht einem Zustand des Ebenenbedienfelds. Der Nutzer legt manuell fest, welche Ebenen in welchem Frame sichtbar sind. Zwischenbilder (Tweening) können für Übergangseffekte wie Überblenden oder Bewegung automatisch generiert werden.

Video-Zeitleiste: Jede Photoshop-Ebene erhält eine eigene Spur. Videodateien werden als Videospur importiert; Bildebenen können mit Keyframes für Bewegung, Deckkraft und Stiltransformationen animiert werden. Unterstützte Formate: MOV, MP4, AVI, MPEG.

Zwischen den Modi wechseln: Hamburger-Menü in der Timeline → „In Frame-Animation konvertieren" oder „In Video-Zeitleiste konvertieren".

Frame-Animation erstellen (GIF)

1. Für jeden Animationsframe eine separate Ebene anlegen (oder Sichtbarkeit bestehender Ebenen nutzen).
2. Fenster → Timeline → „Frame-Animation erstellen" klicken.
3. Frames hinzufügen (Plus-Symbol in der Timeline).
4. Pro Frame Ebensichtbarkeit im Ebenenbedienfeld einstellen.
5. Framerate (Anzeigenzeit pro Frame) einstellen: 0,1 s (10 fps) für flüssige Animationen, 0,5–1 s für Comics/Slideshows.
6. Schleife: Einmal, 3x oder Immer (Für Web-GIFs meist: Immer).
7. Tweening (optional): Zwischen zwei Frames automatisch Übergangsframes einfügen (Überblenden, Bewegen, Deckkraft).
8. Export: Datei → Exportieren → Für Web speichern (Legacy) → Format: GIF.

Video-Zeitleiste – Keyframe-Animation

1. Video-Zeitleiste öffnen: Fenster → Timeline → „Video-Zeitleiste erstellen".
2. Ebene in der Zeitleiste aufklappen: Zeigt animierbare Eigenschaften (Position, Deckkraft, Vektormaske-Position, Stile).
3. Keyframes setzen: Stoppuhr-Symbol links neben der Eigenschaft aktiviert die Keyframe-Aufzeichnung. An Stellen, an denen sich der Wert ändert, werden automatisch Keyframes gesetzt.
4. Abspielkopf zur gewünschten Zeit ziehen, Eigenschaft (z. B. Position) ändern – Keyframe wird automatisch hinzugefügt.
5. Übergänge: Linear (Standard), Kurve einstellbar über Rechtsklick auf Keyframe.

Video importieren und bearbeiten

Videodatei über Datei → Öffnen oder per Drag-and-Drop einfügen. Photoshop erzeugt eine Videospur in der Zeitleiste. Clips können:

• Gekürzt werden (Rand des Videoclips ziehen).
• Mit Übergängen versehen werden (Fade to/from Black, Überblenden).
• Mit Farbanpassungen aus Photoshop: Anpassungsebenen – Nicht-destruktive Farbkorrekturen kombiniert werden.
• Mit Audio unterlegt werden (Audiodatei in Audiospur ziehen).

Export

• GIF: Datei → Exportieren → Für Web speichern (Legacy).
• Video: Datei → Exportieren → Video rendern. Formate: H.264 (MP4), DPX, QuickTime. Qualität und Bitrate einstellbar.
• Einzelframes: Stoppuhr-Symbol auf eine Ebene setzen, dann Datei → Exportieren → Ebenen als Dateien exportieren.

Beispiele

Animiertes GIF für Social Media: Logo mit 5 Frames animieren – Text blendet ein, Icon dreht sich. Export als GIF mit 8 Farben optimiert für kleine Dateigröße.

Cinemagraph: Landschaftsfoto mit Wasserfall. Den Wasserfall-Bereich per Photoshop: Ebenenmasken – Nicht-destruktives Freistellen und Ausblenden ausmaskieren, das Videomaterial des Wasserfalls als Ebene darunter einfügen, Zeitleiste endlos loopen lassen, als GIF exportieren.

Einfaches Produktvideo: Produktfoto als Basisebene; Preisbeschriftung fliegt per Keyframe-Position von links ein; Call-to-Action-Button blendet per Deckkraft auf. Export als MP4.

Animiertes Banner: Klassisches Werbe-Banner mit sequenziell einblendenden Textelementen; jeder Textlayer erhält eigene Keyframes für Deckkraft und Position.

In der Praxis

Profi-Tipp GIF-Optimierung: Die Dateigröße eines GIFs hängt stark von der Farbpalette ab. Im „Für Web speichern"-Dialog: Farben von 256 auf 64 oder weniger reduzieren, Dithering-Methode wählen (Diffusion: gute Qualität; Keine: kleinste Datei bei Grafiken). Bei Fotos ist WebP oder APNG meist die bessere Wahl als GIF.

Profi-Tipp Cinemagraph: Die Maske für das animierte Bereich sollte weiche Kanten haben (Feder-Wert in der Photoshop: Ebenenmasken – Nicht-destruktives Freistellen und Ausblenden). So wirkt der Übergang zwischen statischem Foto und Bewegtbild nahtlos.

Frame-Rate-Empfehlungen:

• Smooth Animation: 24–30 fps (0,033–0,042 s pro Frame)
• Standard Web GIF: 10–15 fps (0,067–0,1 s)
• Diashow: 1–5 fps (0,2–1 s)

Vergleich & Abgrenzung

Photoshop vs. After Effects: Für komplexe Motion-Graphics-Produktionen ist After Effects die richtige Wahl. Photoshop-Timeline eignet sich für einfache Animationen, die aus bestehenden Photoshop-Projekten entstehen, ohne das Programm wechseln zu müssen.

Frame-Animation vs. Video-Zeitleiste: Frame-Animation ist ideal für GIFs und pixelgenaue Frame-by-Frame-Kontrolle; die Video-Zeitleiste bietet zeitbasierte Keyframes und Video-Import für professionellere Bewegtbild-Ergebnisse.

Häufige Fragen (FAQ)

Warum ist mein exportiertes GIF so groß? GIF-Dateigröße skaliert mit Auflösung × Frameanzahl × Farbpalette. Lösungen: Auflösung reduzieren (max. 800 px Breite für Web), Farben auf 64–128 begrenzen, Framerate reduzieren.

Kann ich Audio in einem GIF einbetten? Nein – GIF unterstützt kein Audio. Für animierte Inhalte mit Ton: Video (MP4) oder WebM exportieren.

Unterstützt Photoshop 4K-Videoexport? Ja, Photoshop kann 4K und darüber exportieren, ist aber für sehr hohe Auflösungen ressourcenintensiv. Für professionelle 4K-Workflows ist Premiere Pro besser geeignet.

Wie synchronisiert man Audio mit Animationen? Audiodatei in die Audiospur der Video-Zeitleiste ziehen. Der Abspielkopf zeigt Position in Echtzeit; Keyframes können an Audiotransients gesetzt werden.

Warum funktioniert die Frame-Animation nicht mehr auf meinem Smart Object? Photoshop: Smart Objects – Zerstörungsfreie Bildbearbeitung können in Frame-Animationen genutzt werden; jeder Frame steuert die Sichtbarkeit der Ebene, nicht den internen Zustand des Smart Objects. Für Inhaltsänderungen muss das Smart Object dupliziert und für jeden Frame eine Variante erstellt werden.

Verwandte Einträge

• Photoshop: Ebenenmasken – Nicht-destruktives Freistellen und Ausblenden – Masken für Cinemagraph-Techniken
• Photoshop: Anpassungsebenen – Nicht-destruktive Farbkorrekturen – Farbkorrekturen in Videospuren
• Photoshop: Smart Objects – Zerstörungsfreie Bildbearbeitung – Smart Objects in animierten Projekten
• Füllmethoden (Blend Modes) in Photoshop – Füllmethoden für Animations-Compositing

Weiterführend

• Adobe Help Center: „Create animations in Photoshop" – helpx.adobe.com/photoshop
• Evening, Martin: Adobe Photoshop for Photographers. Focal Press, 2022, Kapitel zu Video und Animation.
• Kelby, Scott: The Adobe Photoshop Book for Digital Photographers. Rocky Nook, 2023 – GIF und Video-Kapitel.
• Adobe: Tutorial-Reihe „Animate a Photo" – adobe.com/creativecloud/photography