Animationen mit Photoshop erstellen

Basis für die spätere Animation: eine Hintergrund- und eine Textebene.

Da Animationen im Webdesign weit verbreitet sind, stellt auch eine Profi-Bildbearbeitung wie Photoshop spezielle Bearbeitungsfunktionen dafür zur Verfügung. Eine praxistaugliche Schnittstelle ist seit Version CS3 das Bedienfeld “Animationen”. Einschränkend hinzuzufügen ist allerdings: Professionelle, auch für Videoschnitt und Movie-Nachbearbeitung geeignete Bearbeitungsfunktionen liefert diese Schnittstelle nur in der Programmvariante Extended.

Anders als in der Standardversion bietet “Animationen” hier einen zusätzlichen Bearbeitungsmodus namens “Animationen (Zeitleiste)”. Photoshop-Anwender ohne Extended müssen sich auf den Arbeitsmodus “Animationen (Frames)” beschränken. Eine essentielle Einschränkung ist dieser Basic-Arbeitsmodus jedoch nicht. Da bei Animationen meist kleine nette Bewegungsgrafik-Gimmicks gefragt sind, reicht das Arbeiten mit der Frameleiste in vielen Fällen aus.

Die Arbeitsweise erschließt sich vergleichsweise rasch. Da das Bedienfeld “Ebenen” ein erstrangiger Zulieferer bei der Animationserstellung ist, arbeitet man auch bei der Animationserstellung meist in der alten, vertrauten Bildbearbeitungsumgebung. Nur das Arrangieren der einzelnen Frames zu einer funktionierenden Animation erfordert Funktions-Know-How.

In der folgenden Bildergalerie zeigen wir, wie man Animationen Schritt für Schritt erzeugt:

01sc_schritt1 — Den eigentlichen Animationseffekt legt man im Bedienfeld “Ebenen” an. Und zwar im ersten Schritt als eine Textebene mit dem kompletten Schriftzug. Hauptattribute im dargestellten Beispiel sind folgende: Schrift ist Myriad Condensed Black. Text der Ebene: “Macwelt”. Schriftfarbe ist ein einfaches Schwarz; den zweiten Teil des Wortes “welt” färben wir rot ein. Als Ebeneneffekt kommt ein dezenter weicher Schlagschatten hinzu. Vorbemerkung: Wird die Animation in Photoshop Extended erstellt, sollte man sicherstellen, dass sich das Bedienfeld “Animationen” im Modus “Animation (Frames)” befindet – und nicht im Modus “Animation (Zeitleiste)”. Umstellen kann man das über den Konvertierungsbutton in der Fußleiste rechts.

02sc_schritt2 — Im konkreten Fall genügt es, die Textebene sechsmal zu duplizieren und im Anschluss, bei der untersten Textebene beginnend, Zeichen wegzulöschen. Die Textinhalte von unten nach oben: M, Ma, Mac, Macw, Macwe, Macwel und Macwelt. Gimmick: Die Zeichen w, e, l und t erscheinen auf Grund der unterschiedlichen Einfärbung in Schritt 1 nicht in Schwarz, sondern in Rot.

03sc_schritt3a — War zuvor nur ein Frame zu sehen mit der kompletten Bildkonstellation, sind nun acht Frames vorhanden: einer mit der Hintergrundfarbe, der der Hintergrundebene entspricht, und sieben mit den einzelnen Zeichen des Schriftzugs – entsprechend den sieben angelegten Textebenen. Da der transparente Hintergrund der sieben Textebenen natürlich durch die Hintergrundfarbe in der Hintergrundebene ersetzt werden soll, muss man eine entsprechende Definition vornehmen. Dazu empfiehlt sich folgende Vorgehensweise: Auswahl der Hintergrundebene im Bedienfeld Ebenen, anschließend den Befehl “Ebenen in allen Frames anpassen” im Bedienfeldmenü von Animationen aktivieren und die anschließend auftauchenden Anpassungsoptionen mit “OK” bestätigen. Dadurch erhalten alle Textframes die Hintergrundfarbe Hellblau. Zum Abschluss löscht man den Hintergrundebenenframe durch einen Klick auf das Papierkorbsymbol in der Leiste mit den Funktions-Buttons unten links; für die eigentliche Animation ist er allerdings nicht mehr nötig.

04sc_schritt4 — Da dies zunächst nicht beabsichtigt ist, genügt es, den Befehl “Alle Frames auswählen” im Bedienfeldmenü aufzurufen und für die nun ausgewählten Frames die Optionseinstellungen vorzunehmen. Dies ist zum einen das Zeitintervall, innerhalb dessen ein einzelner Frame präsent sein soll, zum anderen die Anzahl der Wiederholungen für das Abspielen der Gesamtsequenz. Die Sequenz-Wiederholungseinstellung findet sich sich im Aufklappfeld rechts unten außen, die Einstellung für die Framedauer direkt unter den einzelnen Frames. Im Beispiel wurde die Framedauer auf 0,5 Sekunden gesetzt, die Abspielrate auf “Unbegrenzt”. Die Animation ist nun fertig. Über den Abspiel-Button links unten im Funktionsfeld kann sie jederzeit abgespielt werden.

05sc_schritt5a_gif — Im Menü Datei den Befehl “Für Geräte und Web speichern” auswählen, dort die nötigen Optionseinstellungen treffen und auf “Speichern” klicken. So kann man über die Vorschau das Funktionieren des Animationseffekts prüfen. Ebenfalls möglich ist der Export als Quicktime-Movie oder als Flash-Datei. Das Feature “Video rendern” unter “Datei / Exportieren stellt nicht nur zusätzliche Feineinstellungsoptionen zur Verfügung, sondern auch unterschiedliche Videoformate.

06sc_schritt6 — Eine ganz simple Variante wäre beispielsweise eine Veränderung der Farbe für die Hintergrundebene, andere Farbzuweisungen für die einzelnen Zeichen oder andere Ebeneneffekte als (nur) der aktuelle Schlagschatten. Die Umsetzung lässt sich ganz einfach über das Ebenenbedienfeld bewerkstelligen. Die sicherste Vorgehensweise im Bedienfeld “Animation” ist die, die vorhandenen Frames zu löschen und die in den Schritten 2 und 3 beschriebenen Zuweisungen erneut zu tätigen. So lassen sich ohne großen Aufwand Text-inhalt, Textfarbe, Hintergrundfarbe und vieles mehr ändern.

07sc_schritt7 — Im konkreten Fall wird die Animation um folgende Ebenen oder Frames erweitert: Macwel, Macwe, Macw, Mac, Ma, M und eine leere Ebene. Die vorgenommene Ergänzung trägt der Tatsache Rechnung, dass es bei vielen Animationen sinnvoll ist, einen dramaturgischen Anschluss an das erste Bild der Sequenz zu finden und auf diese Weise eine in sich stimmige Endlosschleife zu erzeugen. Das Animationsskript in der erweiterten Variante sieht vor, dass sich der Schriftzug Buchstabe für Buchstabe aufbaut. Anschließend geht er wieder Buchstabe für Buchstabe zurück – bis zur Ausgangssituation. Um den Abspielrhythmus etwas zu variieren, setzen wir in unserem Beispiel die Framerate der zweiten Hälfte niedriger, nämlich auf den Wert 0,1 Sekunden herab.

08sc_schritt8b — Über das Werkzeug zum Einfügen von Frames in der Fußleiste des Bedienfelds Animationen (drittes von rechts) lassen sich auf einfache Weise zusätzliche Frames erzeugen. Vorgehensweise hier: Markieren der beiden letzten Frames (“Macwelt” und leere Ebene), anschließend ein Klick auf den Knopf “Frames einfügen”, Anzahl der einzufügenden Frames bestimmen und auf “OK” bestätigen. Gut geeignet ist dieses Feature vor allem beim Anlegen von Animationen, die auf Fotomaterial basieren.

Das hier vorgestellte Textbeispiel verdeutlicht die typische Arbeitsprozedur. Die Beispielanimation besteht aus dem Text “Macwelt”. Die einzelnen Buchstaben M, a, c, w, e, l und t erscheinen nicht auf einmal, sondern nacheinander – ein einfacher Animationseffekt, der die Spannung beim Lesen der Headline erhöhen soll. Die ersten Schritte beschreiben die Erstellung der Animation und den Export. Der letzte Schritt geht auf die Frage geeigneter Anschlüsse bei stetig wiederholten Abspielungen ein.

Weitere Animationsideen

In Bewegung setzen lassen sich nicht nur Grafiken und Überschriften, sondern auch Fotos. Etwa ein Farbfoto, das sich im Verlauf der Animation in Schwarz-Weiß wandelt. Um bei der Endlosabspielung einer Animation Bruchstellen zu vermeiden, empfiehlt es sich, Anfang und Ende aufeinander abzustimmen. Das aufgeführte Farbbild, das schwarz-weiß wird, müsste man dann so anlegen, dass die Schwarz-Weiß-Version wieder zur ursprünglichen Farbversion zurückführt – eine einfache Variante, die sich durch einfaches Erzeugen und Anordnen von Ebenenkopien leicht umsetzen lässt (siehe auch Schritt 7 auf der nächsten Doppelseite).

Der Fantasie sind hier keine Grenzen gesetzt. Ein recht praktisches Werkzeug für das Anlegen von Übergängen ist das in Schritt 8 aufgeführte Werkzeug zum Erzeugen von Übergangsframes. Es eignet sich nicht nur sehr gut für Diashows, sondern auch für Effekte, die langsam in einen Hintergrund ausgeblendet werden sollen. Mit Verzerrungsfiltern und/oder Skalierungs-Werkzeugen lassen sich sogar bewegungsähnliche Effekte erzeugen. Beispiel: Eine Sequenz mit einem Foto, das in jeder Ebene beziehungsweise in jedem Frame minimal vergrößert wird. Eine weitere Idee: Grafiken, die in Illustrator erstellt, dort in Ebenen angeordnet und ins Photoshop-Format exportiert werden.

Link: Videoworkshops zu Photoshop CS4