Illustrator: Animationen

von Christina Taupe

Animationen im Illustrator? Kein Problem! Schauen Sie, wie wir einen Fisch zum Blubbern bringen.

Beginnen wir mit unserem schuppigen Freund in Blau:

Animation

So könnte eine kleine Animation am Rand einer Homepage aussehen. Klein, fein und nett gemacht!

Grundgrafik erstellen
Wir haben für unser Beispiel einen bereits vorhandenen Fisch aus der Symbol-Palette verwendet.

Tipp: Sie finden diese Vorlage unter > Fenster > Symbole. Weitere Beispiele sind unter >Fenster > Symbol-Bibliotheken zu finden.

Klicken Sie einfach auf ein Symbol und ziehen Sie es auf die Arbeitsfläche.

Startgrafik

Wir haben die Vorlage proportional vergrößert, indem wir sie bei gedrückter Umschalt-Taste skaliert haben.

Animation erstellen und vorbereiten
Um eine Animation erzeugen zu können, brauchen Sie bekannterweise mehrere Bilder. Jede Bewegung muss sich in einer eigenen Ebene befinden. Wir haben uns hier auf die Erstellung von Luftblasen festgelegt.

Wie Sie sehen, befindet sich der Fisch in jeder Ebene und wird auch nicht weiter verändert. Am einfachsten kommen Sie ans Ziel, wenn Sie die Ausgangsebene immer wieder kopieren (d.h. die Ebene auf das Blattsymbol im Ebenenfenster ziehen) und lediglich die Blase verändern. So bleibt der Fisch immer an seiner Ausgangsposition, und das Bild fängt nicht an zu “zittern”.

Fertige Erstellung in Illustrator

Auf der Arbeitsfläche sehen Sie alle Bilder der Animation zusammengefügt. Wenn Sie die vielen Grafiken stören, brauchen Sie diese nur auszublenden, indem Sie auf die Augen der einzelnen Ebenen im Ebenenfenster klicken.

Wichtig: Die Animation wird nach der in Illustrator festgelegten Reihenfolge der Ebenen abgespielt. Das erste Bild stellt die zu unterst dargestellte Ebene dar (siehe roter Pfeil oben). Bevor Sie die “Animation” exportieren, sollten Sie daher die Reihenfolge der Ebenen festlegen.

Exportieren der Animation
Da in ImageReady keine Illustrator-Dateien geöffnet werden können, muss diese erst exportiert werden.

Speichern Sie die nun fertige Datei in Illustrator ab. Klicken Sie anschließend auf >Datei > Exportieren. Wählen Sie nun “Photoshop .PSD” aus.

Export-Format auswählen

Klicken Sie anschließend auf “Speichern”. Nun öffnet sich ein Optionsfenster. Wählen Sie hier die gewünschte Auflösung und kontrollieren Sie nochmals, ob als Farbmodell RGB ausgewählt ist. Für das Internet reicht eine Auflösung von 72 ppi aus.

Export-Optionen

ImageReady
Wie sagt man so schön? “Nun geht es an´s Eingemachte”…

Öffnen Sie die exportierte Datei im Programm ImageReady. Nun benötigen sie die “Animations-Palette”, um weiter arbeiten zu können. Wenn diese nicht auf Ihrer Arbeitsfläche eingeblendet ist, finden Sie sie unter > Fenster > Animation > einblenden.

Animations-Palette

Vorerst können Sie nur ein Bild sehen, da die anderen Frames erst aus den bestehenden Ebenen erstellt werden müssen.

Frames erstellen und Abspielgeschwindigkeit festlegen
Hierzu müssen Sie auf den Pfeil am rechten Rand der Animations-Palette klicken und > Frames aus Ebenen erstellen auswählen.

Frames erstellen

Wenn Sie nun auf das “Play” Symbol in der Animations-Palette klicken, wird die Animation auf der Arbeitsfläche abgespielt. Uns war die Animation zu schnell, deshalb haben wir eine Verzögerung eingebaut.

Abspielgeschwindigkeit

Wenn Sie die Verzögerung allen Frames hinzufügen möchten, müssen Sie alle Frames auswählen. Klicken Sie hierfür zuerst auf den ersten Frame in der Animations-Palette und dann bei gedrückter Umschalt-Taste auf den letzten Frame. Nun klicken Sie auf den kleinen Pfeil neben “0,0″ (unter den Frames), die nun in Weiß dargestellt werden. Hier können Sie nun eine Verzögerung auswählen oder unter “Andere” selbst eine Zeitangabe festlegen.

Wenn Sie die Animation nur ein einziges Mal abspielen möchten, sollten Sie auf “Unbegrenzt” (links unten in der Animations-Palette) klicken und dort “Einmal” auswählen. Sie können natürlich auch unter “Andere” eine andere Anzahl für Wiederholungen angeben.

Animation optimieren
Dieser Schritt beschränkt sich auf drei einfache Klicks: Zuerst auf den Erweiterungs-Pfeil in der Animations-Palette klicken, dort > Animation optimieren auswählen, im sich öffnenden Fenster bei Felder angehakt lassen und auf OK klicken.

Für das Web speichern
Um die nun erstellte GIF-Animation für das Internet zu optimieren, klicken Sie bitte auf der Arbeitsfläche auf den Optimiert-Register und nehmen Sie in der Optimiert-Palette Ihre Einstellungen vor.

Optimieren fürs Web

Wir haben uns für “GIF 32 Dithering” entschieden. Nun brauchen Sie diese Einstellungen nur noch unter > Datei > Optimierte Version speichern unter… abzuspeichern.

Um die Animation in Ihre Seite einzufügen, müssen Sie die optimierte Version lediglich als Bildquelle angeben.

Wir hoffen, unser Trick hat Ihnen gefallen und regt Sie zu weiteren Versuchen an.

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.