Blog

Animiertes GIF erstellen Teil 1

Ich wurde vor kurzem per Email gefragt wie man ein animiertes GIF mit Photoshop erstellt.

Diese Funktion ist leider ein wenig versteckt und auch nicht ganz selbsterklärend.

Da es ein wenig ausführlicher wird hab ich es aufgeteilt.

Hier der Teil 1:

Die Oberfläche

Der Animator funktioniert eigentlich genauso wie Flash. Also wenn ihr schon in Flash Erfahrung habt,
werdet ihr euch hier sehr leicht tun.

Zuerst öffnen wir ein Dokument mit beliebiger Größe.

Ich fange immer damit an das ich mir die Animation quasi komplett Designe, nur vorerst ohne Bewegung.

Erstellt für jedes Objekt eine neue Ebene.


Wenn ihr euren Banner oder dergleichen fertig Designt habt geht es an die Animation.

Die Animations Zeitleiste findet ihr unter “Fenster – Animation”.

animierttes gif


Jetzt solltet ihr ein neues Fenster sehen.

Dies ist das Animations Zeitleisten Fenster:

animiertes gif


Am Anfang eines neuen Projektes solltet ihr euer Dokument voreinstellen.

Rechts beim Animationsfenster befindet sich ein kleiner Pfeil nach unten.

Diesen Anklicken und die “Dokumenteneinstellungen” aufrufen.

animiertes gif

animiertes gif


Dort könnt ihr nun die Framerate einstellen. Diese Regelt wieviele Frames/Bilder pro Sekunde abgespielt werden.

Hier kann man fürs Web auf 25 Frames runterstellen.

Auserdem könnt ihr noch die Dauer/Länge eurer Animation voreinstellen.

animiertes gif


Nun kommen wir zum Hauptfenster.

In dem gibt es folgende Punkte:

animiertes gif


Ebenen:
Sind die Ebenen die wir vorher Erstellt haben. Somit kann man jede Ebene einzeln Ansprechen und Steuern.

Zwiebelschicht:
Kommt noch aus der Zeit des Trickfilmes. Hier kann man die unteren Ebenen aus und einblenden lassen.
Wie wenn Folien aufeinander liegen und man dadurch die untere Folie sieht.

Die Stopuhr:
Mit dieser kann man Eigenschaftsänderungen aktivieren/deaktivieren.
Auf Deutsch heißt das nichts anderes als wenn man etwas verändert muss man einen Start und Endpunkt setzen.
Dazu später mehr.

Position:
Regelt wo sich etwas auf dem Dokument befindet:

Deckkraft:
Regelt wie der Name schon sagt die Deckkraft. Wird benutzt um fade-in und out Effekte zu erstellen.

Stil:
Hier kann man die Ebenenstile steuern. Sprich Schlagschatten,Kontur,Schein nach au?en usw..

Textumbruch:
Kommt nur bei Text Animation.


Das wars vorerst mal fürs Erste. Teil 2 folgt in kürze, dann geht es an die Animation.

Hier geht es weiter zu Teil 2:
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-2/



Related articles

9 Comments

  1. claudia 14/07/2009 09:34

    hallo,
    irgendwie habe ich das problem das ich keine zeitleiste finden kann, bei mir wird nur eine frameliste eingeblendet. und irgendwie sind meine optionen viel spärlicher als die abgebildeten, kann das an der CS3 version liegen mit der ich arbeite, oder brauche ich bestimmte updates?

    aber trotzdem gut erklärt ^^

    lg me

  2. wario 14/07/2009 10:56

    Du hast anscheinend noch die Frame Ansicht. Klick mal rechts unten auf “In Frame Animation konvertieren”.

    LG
    Mario

  3. claudia 16/07/2009 08:26

    hm hab ich bei mir nicht gefunden, hab nur animation löschen und animation optimieren, ansonsten nichs, ich kann wirklich nur mit den einzelnen frames areiten und da kann man auch nicht so wirklich viel machen.

    lg me

  4. wario 16/07/2009 12:45

    hmmm schick mir mal einen Screenshot. Irgendwie dubios

  5. Animiertes Gif erstellen Teil 3 | www.digital-workshop.at|Photoshop und Web Tutorials 05/08/2009 17:13

    [...] 100% Animiertes GIF erstellen Teil 1 [...]

  6. Andreas 13/03/2010 19:20

    Wie ist nun das Problem von Claudia gelöst worden? Bei mir ist es das selbe.

  7. wario 13/03/2010 21:01

    Anscheinend liegt das an der Version von CS3. Man benötigt CS3 Extended

  8. Andreas 23/03/2010 11:57

    Hm. Ok. Hab zwar die CS4… Aber auch nicht Extended.

  9. Webseiten-Tipp: Digital-workshop.at « Foto[gen]erell 13/12/2010 20:32

    [...] Tutorials wie man den Lomo-Effekt nachträglich einbauen kann oder ein animiertes GIF erstellt, bietet Digital-Workshop.at aber auch nützliche Tipps, wie die 20 wichtigsten Shortcuts in [...]

Kommentar:!

Deine Email Adresse wird nicht angezeigt.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>