Web-Animation aus Photoshop und Illustrator
Animationen haben im Web ihren festen Platz erobert und sich auch als Werbeträger unersetzlich gemacht. Wir beleuchten mehrere Methoden, wie Sie professionelle Web-Animationen ins Leben rufen.
- Web-Animation aus Photoshop und Illustrator
- Ausgabe von Web-Animationen
- Angleichungen von Formen
Der klassische Weg zur Erstellung von Web-Animationen führt über den Einsatz von Flash-Werkzeugen wie Adobe Flash Professional CS5 oder die vielen verschiedenen Flash-Tools von Drittherstellern. Doch auch Benutzer von Photoshop und Illustrator können ihre Grafiken als Web-Animationen zum Leben er...
Der klassische Weg zur Erstellung von Web-Animationen führt über den Einsatz von Flash-Werkzeugen wie Adobe Flash Professional CS5 oder die vielen verschiedenen Flash-Tools von Drittherstellern. Doch auch Benutzer von Photoshop und Illustrator können ihre Grafiken als Web-Animationen zum Leben erwecken, ohne Flash-Werkzeuge zu bemühen.Für eine ansprechende Animation braucht man nicht viel: Das beste Ausgangsmaterial stellt immer eine gute Idee dar. Videomaterial, rein statische Bilder, Vektorzeichnungen, ja sogar reiner Text und natürlich auch Audiomaterial lassen sich zu ansprechenden Animationen verweben. Zu den eindrucksvollsten Animationen zählen oft jene, die lediglich aus bloßen Textzeichen bestehen (typografische Animation oder auch kinetische Typografie).
Zwei alternative Arbeitsweisen
Adobe Photoshop CS5 Extended verfügt über zwei verschiedene Zeitleisten, die sehr unterschiedliche Arbeitsweisen unterstützen: die klassische Photoshop-Timeline für Ebenen-basierte Animation und die Premiere-Timeline für Keyframe-zu-Keyframe- Animation. Zwischen diesen beiden Arbeitsmodi des Bedienfeldes Animation kann der Benutzer mittels einer Schaltfläche in der rechten unteren Ecke der Zeitleiste umschalten.
Ebenensichtbarkeit
Auf der klassischen Photoshop-Zeitleiste (Schaltfläche In Frame-Animation konvertieren) lässt sich eine Animation auf Basis der Sichtbarkeit (jedoch nicht der Opazität) von Photoshop-Ebenen gestalten. Einem aktiven Frame wird hier jeweils die aktuelle Einstellung der Ebenensichtbarkeit - entweder sichtbar oder nicht sichtbar zugeordnet.Mit dem Befehl Frames aus Ebenen erstellen aus dem Optionen-Menü der Palette Animation in diesem Arbeitsmodus entstehen aus den einzelnen Photoshop-Ebenen separate Frames. Sie können auch aus bestehenden Frames der Animation mit einem Mausklick auf das Symbol Dupliziert ausgewählte Frames in der unteren Leiste der Palette Animation neue Frames generieren und dann gegebenfalls die Sichtbarkeit der Ebenen anpassen. Diese Arbeitsweise eignet sich besonders dazu, um den groben Verlauf einer Web- Animation festzulegen. Feinere Optimierungen können Sie dann mit der Premiere- Zeitleiste in Photoshop auf Basis von Schlüsselbildern umsetzen.
Schlüsselbilder
Auf Photoshops Schlüsselbild-basierter Zeitleiste (Schaltfläche In zeitleistenbasierte Animation konvertieren) können Sie die Position, die Deckkraft, Stil sowie globales Licht animieren. In diesem Arbeitsmodus wird die Sichtbarkeit von Elementen nicht durch das Ein- und Ausblenden von Ebenen festgelegt, sondern durch das Anlegen von Schlüsselbildern, die den Anfang und das Ende der Ebene auf einen definierten Zeitpunkt festlegen.
Das Formgitter
Die Funktion Formgitter debütierte ursprünglich in Adobe After Effects; dort wurde sie auf den Namen Marionettenverkrümmung (Puppet Warp) getauft. Seit der Version CS5 macht diese Funktion auch endlich in Photoshop eine gute Figur und zwar im doppelten Sinne: Mithilfe der Marionettenverkrümmung können Sie die Körperposition einer Person oder etwa den Gesichtsausdruck anpassen.Nach demselben Prinzip können Sie Gebäude und Gegenstände jeder Art bearbeiten, sei es um Fehler zu berichtigen oder um die im Foto eingefangene Realität Ihrer künstlerischen Vorstellungskraft zu fügen. Wenn Sie diesen Vorgang auf mehreren Duplikaten Ihrer Ausgangsebene wiederholen, können Sie aus einem einzigen Ausgangsfoto genügend Bildmaterial erzeugen, um eine ganze Animation auf Basis einzelner Ebenen als Frames ins Leben zu rufen.
Der Pionier
Die Bewegung von Bildern und Fotografien fasziniert die Menschen schon lange. Bereits gegen Ende des 19. Jahrhunderts hatte der britische Fotograf Eadweard Muybridge seinen Bildern mehr Leben eingehaucht, indem er Einzelbilder in Bewegung zeigte. Er gilt damit als einer der Pioniere der Fototechnologie. Die "Chronofotografie" genannte Technik versuchte mit in Serie aufgenommenen Momentfotografien bewegte Objekte einzufangen und lieferte so wichtige Impulse für die Entwicklung des späteren Kinofilms.
Im Beispiel diente ein einziges Foto, welches einen galoppierenden Pony in einer statischen Körperhaltung eingefangen hatte, um den gesamten Verlauf der Bewegung als eine Photoshop-Animation wiederherzustellen. Diese Arbeitsweise erlaubt es Ihnen im Gegensatz zu einer reinen Videoaufnahme, eine liebenswürdige Karikatur Ihres ursprünglichen Motivs zum Leben zu erwecken.Für den Einsatz des Formgitters (der Marionettenverkrümmung) müssen Sie an Ihrem Motiv einige Vorarbeit leisten. Diese umfasst die Vorbereitung Ihres Motivs zum Anlegen des Formgitters und das Anheften strategisch positionierter Stecknadeln. Die Entstehung der eigentlichen Animation erfordert etwa die folgenden Arbeitsschritte.SCHRITT 1.
Trennen Sie das Motiv im Vordergrund von der Szene mit einer präzisen Freistellung und legen Sie es auf einer separaten Ebene ab. Falls Sie den Hintergrund verwenden möchten, können Sie die Lücke in der Regel mittels der Funktion Inhaltssensitives Füllen glaubwürdig entfernen. So liegen das Vordergrundmotiv und der Hintergrund auf separaten Ebenen.SCHRITT 2.
Konvertieren Sie jede Ebene, welche mit Hilfe des Formgitters transformiert werden soll, in ein SmartObject. Dadurch merkt sich Photoshop CS5 die Position der Stecknadeln und Sie können jede Ihrer Ebenen- Frames mehrmals nachbearbeiten, ohne dabei einen Qualitätsverlust in Kauf nehmen zu müssen.SCHRITT 3.
Duplizieren Sie die erste Ebene mit dem Vordergrundmotiv, wählen Sie diese aus und rufen Sie dann den Befehl Formgitter aus dem Menü Bearbeiten auf. Stellen Sie die Parameter des Formgitters ein, platzieren Sie die Stecknadeln und beginnen Sie, das Bild auf der Ebene schrittweise zu verformen (lesen Sie dazu den Kasten "Formgitter in Photoshop CS5"). Wenn Sie fertig sind, drücken Sie einfach die Eingabetaste.SCHRITT 4.
Duplizieren Sie die zuletzt verformte Ebene, wählen Sie die Kopie aus und verformen Sie das Motiv auf dieser Ebene mit der Funktion Marionettenverkrümmung bis die so erzeugte neue Form auf dieser Ebene den nächsten Frame Ihrer Animation hergibt. Wiederholen Sie diese Vorgehensweise für so viele Ebenen, wie viele separate Frames Sie manuell erzeugen möchten.
