zurück zu den Anleitungen

Gif Animation

In diesem Tutorial machen wir eine Gif Animation mit Photoshop.

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. Sie können mit dem Farbverlaufswerkzeug einen Farbverlauf erzeugen, oder auch die Fläche füllen mit Alt- Entf oder Strg Entf. Füge Bilder und Ebenen ein, die in der Animation erscheinen sollen.

Anschließend erstellen wir uns mit dem Textwerkzeug ein Logo.

Wähle das Auswahlwerkzeug und ziehe das Logo aus dem Sichtbereich, damit man eine Bewegungsanimation erstellen kann, wobei das Logo sich in den Sichtbereich bewegt.
fig 1

Nun beginnt unsere eigentliche Animation. Sämtliche Einstellungen werden in der Animationspalette vorgenommenFenster / Zeitleiste. In der Mitte des Zeitleistenfenster klickt man auf den Pfeil und wählt Frame-Animation erstellen, anstatt Videozeitleiste erstellten. Dann klickt man auf Frame-Animation erstellen.

Nun hat man eine Ansicht, die der Ansicht oben sehr ähnlich sieht.

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 Symbol unten "Fügt Animationsframes ein Tweening" 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 / Exportieren / Für Web Speichern Dort wähle 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