zurück zu den Anleitungen

Gif Animation

In diesem Tutorial machen wir eine Gif Animation mit Image Ready. Das Programm speziell für Webgrafiken ist ab Photoshop 5 im Programmpaket enthalten.

Zuerst erstellen wir uns ein neues Bild von der Größe 88 x 33 Pixel, denn das ist das Standardmaß für diese kleinen Linkbanner. Wenn wir im Hintergrund einen Farbverlauf haben wollen, müssen wir das in Photoshop mit dem Farbverlaufswerkzeug machen. Man kann über Datei / Springen zu bequem zwischen beiden Programmen hin und her springen.

Anschließend erstellen wir uns mit dem Textwerkzeug ein Logo. Das Textwerkzeug funktioniert etwas anders als in Photoshop, denn der Text kann, ohne ein Menü sofort verändert werden. Weitere Einstellungen nimmt man in der Schriftpalette vor. Ab Photoshop 6 kann man auch oben in der Leiste verschiedene Optionen festlegen. In meinem Beispiel habe ich 7 Textebenen für jedes Wort erstellt. Zwischendurch sollte man sich die Ebenen, die man nicht braucht, ausblenden. Klicken Sie auch immer auf die Hintergrundebene bevor Sie eine neue Textebene erstellen.

In Image ready kann man schon jetzt die Komprimierung festlegen. Wir klicken dazu oben im Bild auf den Karteireiter 4 fach. Nun hat man eine Ansicht, wir wir sie schon von der Funktion für Web speichern unter kennen. In der Optimieren Palette, kann man die gewünschte Komprimierung festlegen. Ich habe Gif, selektiv mit 16 Farben gewählt. Jpg kommt natürlich nicht in Frage, da wir eine Gif Animation erstellen wollen.
fig 1
Nun beginnt unsere eigentliche Animation. Sämtliche Einstellungen werden in der Animationspalette vorgenommenFenster / Animation einblenden. Wir machen nur die Ebenen sichtbar, die im ersten Bild erscheinen sollen. Dann klicken wir in der Animationspalette auf das Symbol , um ein neues Bild oder Frame zu erstellen fig 1. Auch hier werden wieder nur die Ebenen eingeblendet, die in dem gewünschten Frame erscheinen sollen. So erstellen wir nacheinander Bild für Bild unsere Animation. Unten in der Animationspalette haben wir eine Abspielsteuerung fig 1. mit der wir die Animation testen können. Für jedes einzelne Bild kann man eine Abspielzeit festlegen, siehe fig 1. Mit gedrückter Strg Taste kann man auch mehrere Bilder gleichzeitig auswählen, um sie beispielsweise alle zu löschen fig 1 oder die Abspielzeit einzustellen.

fig 2


fig 3

Nun wollen wir noch eine Bewegung erstellen, wobei die Schrift sich einerseits von hier nach da bewegen soll und außerdem während dieser Bewegung langsam erscheinen soll. Ich habe dazu 2 Schriften gewählt. Diese werden in ihre Anfangsposition gebracht fig2. Nun wird in der Animationspalette ein neues Bild eingefügt und die beiden Schriftebenen werden in die Endposition verschoben fig3. Da die Schriften aus dem Nichts auftauchen sollen, gehen wir in der Animationspalette ein Bild zurück und blenden die beiden Schriftebenen in der Ebenenpalette aus. Dann gehen wir in der Animationspalette wieder auf unser letztes Bild. Jetzt müssen wir nur noch den Übergang erstellen. Dazu klicken wir in der Animationspalette auf das kleine Dreieck oben rechts und wählen "Dazwischen einfügen" siehe fig 1. Hier kann man nun einstellen, wieviele Bilder erzeugt werden sollen - Hinzuzufügende Frames , welche Ebeneneffekte berücksichtigt werden sollen - Parameter. Außerdem wählen wir oben alle Ebenen und bei dazwischen einfügen wählen wir voriger Frame. Image Ready erzeugt dann automatisch ein paar Frames für den Übergang. Jedoch sollte man mit der Anzahl vorsichtig sein, da die Dateigröße sehr schnell zu groß für das Internet werden kann.

Nun müssen wir nur noch das Bild mit Datei / Speichern abspeichern und anschließend nocheinmal mit Datei / Optimiert Version speichern als Gif Animation abspeichern. Sollte einem das Ergebnis nicht gefallen, muss man eventuell die Farbanzahl in der Optimieren Palette erhöhen. Um die Dateigröße zu verringern kann man außerdem noch in den Optionen der Animationspalette (oben rechts das kleine Dreieck) Animation optimieren wählen. Durch Datei / Vorschau in kann man sich auch zwischendurch das Ergebnis im Browser anzeigen.



© pastor pixel
h t t p : / / w w w . p a s t o r p i x e l . d e


Datenschutzerklärung