Animierte Grafik

Ok, sicher habt Ihr Euch schon des Öfteren gefragt, wie man mit Adobe eine animierte Grafik, z.B. einen Button, erstellt.

Dieser Workshop soll Euch dabei helfen, das ganz leicht durchzuführen.

Ich bin von meinen Programmen ausgegangen, daher sind zur Ausführung erforderlich :
- Adobe Photoshop 5.0 und höher
- Adobe Image Ready 2.0 und höher


1. Schritt :

Zuerst erstellt Ihr mit dem Adobe Photoshop ( hier : PS ) für jeden späteren Teil der Animation eine eigene Grafik, entweder als Button in der Größe 100x35 Pixel oder 88x31 Pixel oder als Banner in der Größe 468x60 Pixel oder 400x40 Pixel. Dies sind die beiden gängigsten Größen. Für normale Grafiken setzt Ihr die Größe einfach beliebig ein, je nachdem, wie groß oder klein Eure Animation werden soll.

Außerdem sollten sie, wenn mit Rand, jeweils den gleichen Rand haben ( Farbe, Form ) und nicht darin variieren, es sei denn, dies ist beabsichtigt.

2. Übertragen :

Nachdem das geschafft ist, öffnet ihr das Programm Adobe Image Ready ( hier : IR ). Beim Starten erscheint unten eine Art Fenster mit 3 Auswahlmöglichkeiten : "Frame", "Slice" und "Rollover". ( Wenn nicht, dann unter "Fenster" -> "Animation einblenden" auswählen )

Ihr geht zurück in PS und kopiert den ersten Teil Eures später animierten Buttons ( Strg A ( markieren ), danach Strg C ( kopieren )).

Wieder rüber in IR und dort links oben auf "Datei" klicken und "Neu" auswählen. Daraufhin erscheint ein Fenster mit den schon vorgegebenen Größeneinstellungen. ( Kürzer geht es über Strg N )

Einfach bestätigen und die Kombination Strg V drücken, um den vorher kopierten Button aus der Zwischenablage in das Bild zu kopieren.

Nun dürfte der erste Teil Eures Buttons nicht nur in diesem neuen Bild erscheinen, sondern auch unten in dem Auswahlfenster als Frame.

Nachdem dies geschafft ist, geht Ihr wieder rüber in den PS, wählt mit Strg A und Strg C den nächsten Teil aus.
Ihr geht rüber in IR und unten in dem Framefenster geht ihr auf den rechten Pfeil und wählt "Neuer Frame" aus. Daraufhin erscheint neben dem bereits vorhandenen Frame, in dem sich Euer erster Button befindet, ein neuer, in den Ihr mit Strg V die zweite Auswahl hineinkopiert. Das hier beschriebene macht Ihr nun mit jedem weiteren Button, den Ihr für die Animation erstellt habt.

Besteht die Animation z.B. aus 5 verschiedenen Buttons, so müßtet Ihr zum Schluß 5 Frames vor Euch "liegen" haben.

3. Erstellen der Animation :

Unter jedem der Frames seht Ihr eine Zahlenangabe ( Standard : 0,00 s ... ). Hier könnt Ihr die Verzögerung einstellen, d.h. wieviel Zeit vergehen soll, bevor der nächste Button eingeblendet wird. Das solltet Ihr bei jedem für die Animation erstellten Frame machen. Eine Verzögerung von 0,2 Sekunden zwischen zwei Bildern ist in Ordnung, wer es langsamer haben will, sollte 0,5 Sekunden wählen. Natürlich könnt Ihr das von Frame zu Frame verschieden einstellen, je nach Belieben, so daß z.B. von Frame 1 zu 2 schneller oder langsamer umgeschaltet wird, als z.B. von Frame 2 zu 3.

4. Wiederholung der Animation :

In der unteren Statuszeile dieses Frame- Fensters seht Ihr mehrere Auswahlmöglichkeiten, unter anderem rechts einen Papierkorb, links eine Auswahl "Unbegrenzt" und in der Mitte so eine Art Playertasten. Der Papierkorb ist dafür da, später doch nicht benötigte Frames wegzuwerfen. Unter "Unbegrenzt" könnt Ihr auswählen, wie oft die Animation wiederholt werden soll, entweder 1x oder unendlich oder eine eigene Einstellung wählen.

Die Playertasten sind dafür da, Eure Animation ablaufen zu lassen, so daß Ihr jederzeit das spätere Aussehen kontrollieren und gegebenenfalls Änderungen vornehmen könnt.

5. Abspeichern der Animation :

Oben in der Leiste gibt es ein Menü namens "Fenster", in dem Ihr "Optimieren einblenden" auswählt, falls es nicht schon rechts oben als eigenes Fenster vorhanden sein sollte. Dort stellt Ihr Eure Optionen ein. Ich für meinen Teil wähle unter Einstellungen meistens einfach nur "GIF 64 Dithering" aus.
So, nun seid Ihr eigentlich schon fertig und könnt den Button abspeichern. Dazu geht Ihr einfach links oben auf "Datei" und wählt die Option "Optimiert-Version speichern unter ..." aus, dann das entsprechende Verzeichnis und den Dateinamen.

So das war’s auch schon. Und nun viel Spaß mit Eurem animierten Button.