Die Erstellung von Animationen muss nicht immer komplex sein. Manchmal liegt der Schlüssel darin, bereits vorhandene Elemente auf intelligente Weise zu nutzen. Adobe Photoshop, bekannt als mächtiges Werkzeug für Bildbearbeitung, bietet auch grundlegende, aber effektive Funktionen zur Erstellung von Animationen direkt aus Ihren Ebenen. Diese Methode eignet sich hervorragend für einfache Bewegungen, GIF-Animationen oder das Vorbereiten von Assets für komplexere Animationsprogramme wie Adobe Animate. In diesem Artikel tauchen wir tief in den Prozess ein, wie Sie Ihre Photoshop-Ebenen zum Leben erwecken und wie Sie diese vorbereiteten Dateien anschließend für weitere Bearbeitungen nach Animate übertragen können.
https://www.youtube.com/watch?v=0gcJCdgAo7VqN5tD
Animationen direkt aus Photoshop-Ebenen erstellen
Die Idee hinter der Ebenen-basierten Animation in Photoshop ist simpel: Jede Ebene oder eine Kombination von Ebenen repräsentiert ein einzelnes Bild (Frame) in Ihrer Animation. Indem Sie die Sichtbarkeit der Ebenen von Frame zu Frame ändern, erzeugen Sie die Illusion von Bewegung oder Veränderung. Dieser Ansatz ist besonders nützlich für Daumenkino-Effekte, Textanimationen oder das Ein- und Ausblenden von Elementen.
Vorbereitung Ihrer Ebenen in Photoshop
Bevor Sie mit der Animation beginnen, ist eine sorgfältige Organisation Ihrer Ebenen entscheidend. Benennen Sie Ihre Ebenen klar und strukturieren Sie sie gegebenenfalls in Gruppen. Jede Ebene oder Gruppe, die einen Zustand Ihrer Animation darstellen soll, sollte separat vorhanden sein. Wenn Sie beispielsweise eine Figur haben, die blinzelt, benötigen Sie separate Ebenen für die offenen Augen und die geschlossenen Augen.
Die Zeitleiste öffnen
Der zentrale Arbeitsbereich für Animationen in Photoshop ist das Zeitleiste-Bedienfeld. Sie finden es im Menü unter Fenster > Zeitleiste. Wenn Sie es zum ersten Mal öffnen, sehen Sie wahrscheinlich eine Schaltfläche, die Ihnen zwei Optionen anbietet: „Video-Zeitleiste erstellen“ oder „Einzelbild-Animation erstellen“. Für die Animation aus Ebenen wählen Sie die Option „Einzelbild-Animation erstellen“.
Einzelbilder aus Ebenen erstellen
Sobald das Zeitleiste-Bedienfeld im Einzelbild-Modus geöffnet ist, sehen Sie standardmäßig ein einzelnes, leeres Einzelbild. Der Trick besteht nun darin, Photoshop automatisch Einzelbilder basierend auf der Sichtbarkeit Ihrer Ebenen zu erstellen. Im Menü des Zeitleiste-Bedienfelds (das kleine Symbol mit den vier horizontalen Linien in der oberen rechten Ecke des Bedienfelds) finden Sie den Befehl Einzelbilder aus Ebenen erstellen. Wenn Sie diesen Befehl ausführen, erstellt Photoshop für jede sichtbare Ebene im Moment der Ausführung ein separates Einzelbild. Oft müssen Sie jedoch zuvor alle Ebenen unsichtbar machen, um sicherzustellen, dass jedes Einzelbild nur die gewünschten Ebenen enthält, oder Sie verwenden die Funktion mehrfach und passen die Sichtbarkeit manuell an.
Alternativ können Sie auch manuell Einzelbilder hinzufügen (über das Duplizieren-Symbol im Zeitleiste-Bedienfeld) und dann in jedem Einzelbild die Sichtbarkeit der Ebenen im Ebenen-Bedienfeld anpassen, um den gewünschten Zustand für diesen Frame zu erhalten. Dies gibt Ihnen mehr Kontrolle, kann aber bei vielen Frames aufwendiger sein.
Die Dauer der Einzelbilder anpassen
Nachdem Sie Ihre Einzelbilder erstellt haben, möchten Sie wahrscheinlich steuern, wie lange jedes Bild angezeigt wird. Unter jedem Einzelbild in der Zeitleiste gibt es eine kleine Dropdown-Liste, die die aktuelle Anzeigedauer anzeigt (z. B. „0 Sek.“). Sie können die Dauer für jedes Einzelbild einzeln ändern. Um jedoch Zeit zu sparen, insbesondere wenn Sie viele Einzelbilder haben, können Sie die Massenbearbeitung nutzen.
Wählen Sie alle Einzelbilder aus, indem Sie auf das erste klicken, die Umschalttaste gedrückt halten und auf das letzte klicken. Oder verwenden Sie Strg+A (Windows) bzw. Cmd+A (Mac) im Zeitleiste-Bedienfeld. Sobald alle Einzelbilder ausgewählt sind, klicken Sie auf die Dauer-Dropdown-Liste unter *einem beliebigen* der ausgewählten Einzelbilder. Wählen Sie die gewünschte Dauer aus der Liste (z. B. 0,1, 0,2, 0,5 Sekunden) oder wählen Sie „Andere...“, um einen benutzerdefinierten Wert einzugeben. Die von Ihnen gewählte Dauer wird auf *alle* ausgewählten Einzelbilder angewendet. Der Benutzer schlug hier 0,2 Sekunden vor, was oft ein guter Ausgangspunkt für flüssige, aber nicht zu schnelle Animationen ist.
Schleifenoptionen einstellen
Am unteren linken Rand des Zeitleiste-Bedienfelds finden Sie die Optionen für die Wiedergabeschleife. Standardmäßig ist dies möglicherweise auf „Einmal“ eingestellt. Klicken Sie auf diese Option, um sie zu ändern. Sie können „3-mal“ oder, für eine fortlaufende Animation, die Option „Endlos“ wählen. Die Einstellung „Endlos“ sorgt dafür, dass Ihre Animation nach dem Abspielen des letzten Einzelbilds sofort wieder mit dem ersten beginnt und sich unbegrenzt wiederholt. Dies ist typisch für GIF-Animationen, die oft auf Websites oder in sozialen Medien verwendet werden.
Elemente zu allen Einzelbildern hinzufügen (Requisiten)
Oft haben Sie Elemente in Ihrer Animation, die in *jedem* Einzelbild sichtbar sein sollen, wie ein Hintergrund, ein Rahmen oder statische Objekte. Diese werden oft als „Requisiten“ bezeichnet. Wenn Sie diese Ebenen hinzufügen, *nachdem* Sie die Einzelbilder erstellt haben, erscheinen sie standardmäßig möglicherweise nur im aktuell ausgewählten Einzelbild. Um sicherzustellen, dass diese neuen Ebenen in *allen* Einzelbildern Ihrer Animation sichtbar sind, gehen Sie wie folgt vor:
- Fügen Sie die neuen Ebenen (Requisiten) im Ebenen-Bedienfeld hinzu und positionieren Sie sie wie gewünscht.
- Stellen Sie sicher, dass alle Einzelbilder im Zeitleiste-Bedienfeld ausgewählt sind (mit der Umschalttaste oder
Strg/Cmd+A). - Gehen Sie zum Ebenen-Bedienfeld. Stellen Sie sicher, dass die Sichtbarkeit (das Auge-Symbol) für jede der neuen Requisiten-Ebenen aktiviert ist. Da alle Einzelbilder in der Zeitleiste ausgewählt sind, wirkt sich die Änderung der Sichtbarkeit im Ebenen-Bedienfeld auf alle ausgewählten Einzelbilder gleichzeitig aus. Dies ist eine sehr effiziente Methode, um Elemente über die gesamte Animation hinweg zu synchronisieren.
Dieser Schritt ist entscheidend, um einheitliche Hintergründe oder statische Vordergrundelemente in Ihrer Animation zu gewährleisten, ohne jedes Einzelbild einzeln bearbeiten zu müssen. Die Fähigkeit, die Sichtbarkeit synchronisieren über ausgewählte Frames hinweg zu steuern, ist ein mächtiges Werkzeug in Photoshops Animations-Workflow.
Die Animation speichern oder exportieren
Die gängigste Art, eine Einzelbild-Animation aus Photoshop zu exportieren, ist als animiertes GIF. Dies tun Sie über Datei > Exportieren > Für Web speichern (Legacy). In diesem Dialogfeld können Sie verschiedene Einstellungen für die GIF-Optimierung vornehmen, wie z. B. die Anzahl der Farben, Dithering und natürlich nochmals die Schleifenoptionen überprüfen. Stellen Sie sicher, dass die Option „Wiederholungsoptionen“ auf „Endlos“ eingestellt ist, wenn die Animation kontinuierlich laufen soll. GIFs eignen sich gut für einfache Web-Animationen und Social Media, unterstützen aber keine Transparenz mit teilweiser Deckkraft und können bei vielen Farben oder großen Abmessungen sehr groß werden.
Importieren von Photoshop-Ebenen nach Adobe Animate
Für komplexere Animationen, interaktive Inhalte oder wenn Sie mit Vektorgrafiken arbeiten möchten, ist Adobe Animate (früher Flash Professional) das geeignetere Werkzeug. Glücklicherweise ermöglicht Adobe einen relativ nahtlosen Übergang von Photoshop zu Animate, indem Sie Ihre PSD-Dateien direkt importieren können.
Warum PSDs nach Animate importieren?
Photoshop ist exzellent für die Erstellung und Bearbeitung von Rastergrafiken und das Schichten von Elementen. Animate ist spezialisiert auf Zeitachsen-Animationen, Interaktivität und die Arbeit mit Vektorgrafiken (obwohl es auch Rastergrafiken unterstützt). Indem Sie Ihre PSD-Datei nach Animate importieren, können Sie die Ebenenstruktur und die visuellen Assets, die Sie in Photoshop erstellt haben, nutzen und sie dann mit den fortschrittlicheren Animationswerkzeugen von Animate animieren. Sie können Bewegungstweens erstellen, Symbolinstanzen manipulieren, Interaktivität hinzufügen und für verschiedene Plattformen (HTML5 Canvas, WebGL, etc.) publizieren.
Der Importprozess in Animate
In Adobe Animate gibt es zwei Hauptarten, Dateien zu importieren: Datei > Importieren > Auf die Bühne importieren und Datei > Importieren > In Bibliothek importieren. Das Importieren einer PSD-Datei in die Bibliothek ist der empfohlenere Weg für einen organisierten Workflow, da es Ihre Assets als Symbole speichert, die Sie dann beliebig oft auf der Bühne wiederverwenden können. Der Prozess ist dem Import auf die Bühne ähnlich, aber das Ergebnis wird in Ihrer Bibliothek gespeichert.
Wenn Sie eine PSD-Datei in die Bibliothek importieren, erstellt Animate einen Stammordner in der Bibliothek, der standardmäßig den Namen Ihrer PSD-Datei trägt. Dies hilft, Ihre importierten Assets organisiert zu halten. Nach dem Import können Sie den Namen dieses Stammordners ändern oder die darin enthaltenen Ebenen/Assets bei Bedarf in andere Ordner in Ihrer Bibliothek verschieben.
Wie Animate die PSD-Struktur interpretiert
Animate bemüht sich, die hierarchische Gruppierung und Ordnerstruktur Ihrer PSD-Datei beizubehalten. Wenn Sie Ordner in Photoshop verwendet haben, werden diese auch in der Animate-Bibliothek als Ordner dargestellt. Es gibt jedoch eine wichtige Besonderheit: Die Inhalte *innerhalb* der importierten Ordner oder auf der obersten Ebene der importierten Struktur werden in der Animate-Bibliothek alphabetisch sortiert. Das bedeutet, die Reihenfolge, die Sie im Ebenen-Bedienfeld von Photoshop hatten, wird in der Bibliothek von Animate durch eine alphabetische Sortierung ersetzt, während die Ordnerstruktur selbst erhalten bleibt.
Ein weiterer wichtiger Aspekt des PSD-Imports in die Bibliothek ist, dass Animate einen Movieclip erstellt. Dieser Movieclip enthält auf seiner eigenen Zeitachse alle Inhalte der importierten PSD-Datei, so als wären die Ebenen direkt auf die Bühne importiert worden. Die Ebenen aus Photoshop werden zu Ebenen innerhalb der Zeitachse dieses Movieclips. Fast alle Movieclips enthalten Bitmap- oder andere Assets. Um Verwirrung und Benennungskonflikte zu minimieren, speichert Animate diese Assets in einem separaten „Assets“-Ordner innerhalb desselben Ordners in der Bibliothek, in dem sich der Movieclip befindet.
Es ist entscheidend zu verstehen, dass beim Import in die Bibliothek die Inhalte der PSD-Datei auf die Zeitachse des *Movieclips* importiert werden, *nicht* auf die Hauptzeitachse Ihrer Animate-Szene (die sogenannte Bühnen-Zeitachse). Um die importierten Inhalte in Ihrer Animation zu sehen und zu verwenden, müssen Sie das Symbol des erstellten Movieclips aus der Bibliothek auf die Bühne ziehen.
Vergleich: Photoshop GIF-Animation vs. Animate Workflow
Um die Unterschiede und den Nutzen des Imports nach Animate besser zu verstehen, betrachten wir eine kurze Gegenüberstellung:
| Merkmal | Photoshop GIF-Animation | Adobe Animate (nach PSD-Import) |
|---|---|---|
| Komplexität | Einfache Einzelbild-Animationen, Daumenkino-Effekte | Komplexe Zeitachsen-Animationen, Tweens, Interaktivität |
| Grafiktypen | Rastergrafiken | Raster- und Vektorgrafiken |
| Dateiformat | Primär GIF (Pixelbasiert, limitierte Farben, Schleifen) | Vielfältig (HTML5 Canvas, WebGL, Video, etc.) |
| Dateigröße | Kann bei vielen Frames/Farben groß werden | Oft effizienter bei komplexen Animationen durch Symbole |
| Wiederverwendung | Jeder Frame ist ein Unikat | Elemente werden zu Symbolen (Movieclips, Grafiken), leicht wiederverwendbar |
| Animationswerkzeuge | Manuelle Einzelbild-Erstellung, grundlegende Überblendung | Umfassende Tweening-Optionen, Bone-Tool, Code-Integration |
| Workflow | Direkt im Ebenen-Bedienfeld und Zeitleiste | Import der PSD als Basis, Animation auf der Zeitachse des Symbols oder der Bühne |
Wie die Tabelle zeigt, ergänzen sich Photoshop und Animate gut. Photoshop ist der Ort, um Ihre visuellen Elemente zu erstellen und zu organisieren. Animate ist der Ort, um diesen Elementen komplexes Leben einzuhauchen und sie für verschiedene Ausgabezwecke zu optimieren. Der PSD-Import ist die Brücke, die diese beiden mächtigen Programme verbindet.
Häufig gestellte Fragen
Meine Animation in Photoshop spielt nur einmal ab. Wie stelle ich eine Endlosschleife ein?
Unten links im Zeitleiste-Bedienfeld finden Sie die Schleifenoptionen. Klicken Sie darauf und wählen Sie „Endlos“. Stellen Sie beim Export als GIF über „Für Web speichern (Legacy)“ ebenfalls sicher, dass die Wiederholungsoptionen auf „Endlos“ eingestellt sind.
Neue Ebenen, die ich nach dem Erstellen der Einzelbilder hinzufüge, erscheinen nicht in allen Frames. Was mache ich falsch?
Wenn Sie neue Ebenen hinzufügen, während nur ein einzelnes Einzelbild in der Zeitleiste ausgewählt ist, sind diese Ebenen standardmäßig auch nur in diesem einen Einzelbild sichtbar. Um sie in allen Einzelbildern sichtbar zu machen, wählen Sie *alle* Einzelbilder im Zeitleiste-Bedienfeld aus. Gehen Sie dann zum Ebenen-Bedienfeld und aktivieren Sie die Sichtbarkeit (das Auge-Symbol) für die neuen Ebenen. Da alle Einzelbilder ausgewählt sind, wird diese Änderung auf alle angewendet.
Kann ich die Animations-Frames, die ich in Photoshop erstellt habe, direkt nach Animate importieren?
Wenn Sie eine PSD-Datei mit einer Einzelbild-Animation nach Animate importieren (insbesondere in die Bibliothek), werden die Photoshop-Ebenen, die Ihre Frames darstellen, zu Ebenen innerhalb der Zeitachse des erstellten Movieclips. Die Frame-für-Frame-Struktur aus Photoshop wird so auf die Zeitachse des Movieclips übertragen. Sie können dann auf dieser Zeitachse in Animate weiterarbeiten.
Was passiert mit den Ebenenmasken und Effekten aus Photoshop beim Import nach Animate?
Animate unterstützt viele, aber nicht alle Photoshop-Funktionen nativ. Ebenenmasken werden in der Regel korrekt importiert. Komplexere Ebenenstile oder -effekte werden möglicherweise gerastert oder nicht exakt übernommen. Es ist ratsam, die importierten Assets in Animate zu überprüfen und gegebenenfalls Anpassungen vorzunehmen oder komplexe Effekte in Photoshop vor dem Import auf die Ebene anzuwenden (z. B. durch Zusammenfügen von Ebenen).
Warum sind meine Ebenen in Animate alphabetisch sortiert, obwohl sie in Photoshop eine andere Reihenfolge hatten?
Wie erwähnt, sortiert die Animate-Bibliothek die Inhalte innerhalb von Ordnern und auf der obersten Importebene alphabetisch. Die ursprüngliche Ebenenreihenfolge aus Photoshop wird auf der Zeitachse des importierten Movieclips beibehalten, aber die Darstellung der Assets in der Bibliothek selbst folgt der alphabetischen Ordnung.
Zusammenfassend lässt sich sagen, dass sowohl Photoshop als auch Animate leistungsstarke Werkzeuge für die Erstellung von Animationen sind, die unterschiedliche Stärken haben. Die Fähigkeit, Ebenen in Photoshop schnell in Frames umzuwandeln und diese dann nahtlos nach Animate zu importieren, eröffnet einen effizienten Workflow für Kreative. Egal, ob Sie einfache GIFs für das Web erstellen oder komplexe, interaktive Animationen planen, das Verständnis dieser Prozesse ist ein wertvoller Schritt, um Ihre visuellen Ideen zum Leben zu erwecken.
Hat dich der Artikel Animationen: Photoshop Ebenen & Animate Import interessiert? Schau auch in die Kategorie Ogólny rein – dort findest du mehr ähnliche Inhalte!