Photoshop GIF Animation – HowTo

Mit Photoshop kann man wirklich vieles machen, was die Bildbearbeitung angeht. Mit der Zeit hat sich Photoshop von Adobe wirklich zu einem sehr umfangreichen Tool entwickelt. Man kann natürlich Bilder bearbeiten, jedoch verwenden immer mehr Webdesigner Photoshop beispielsweise auch zum Gestalten ihrer Webseiten.

Eine Funktion, die schon recht lange in Photoshop integriert ist, jedoch relativ vielen Benutzern unbekannt ist, ist die Funktion, dass man mit Photoshop GIF Animationen erstellen kann.

Exkurs: Warum GIF Animationen?

Früher (vor dem Jahr 2000) waren GIF Animationen sehr beliebt. Auf vielen Webseiten fand man kleine, animierte Grafiken, die schön aussehen sollten, jedoch den User eigentlich nur verwirrt haben. Mittlerweile liegen GIF Animationen wieder voll im Trend, dank Tumblr & Co.

Aber auch Banner werden zum Teil mit einer GIF Animation versehen. GIF Animationen sollte man dezent einsetzen, manchmal kann eine kleine Animation jedoch auch Sinn machen.

Außerdem sollte man beachten, dass, gerade weil es ein relativ veraltetes Dateiformat ist, die Animationen (und generell auch Grafiken) sehr beschränkt sind. GIF ist in erster Linie für Grafiken gedacht, also gibt es dank des Dateiformats eine Beschränkung, was die Farben einer GIF Datei angeht. Deswegen sehen GIF-Animationen, die Videos darstellen, auch immer so eigenartig aus, was die Farben angeht. Außerdem ist die Dateigröße, die die Animation am Ende besitzt, verhältnismäßig groß.

Twitter hat vor Kurzem die Möglichkeit der Integration von GIF-Videos ermöglicht. Es sind aber keine GIF Videos, die dem User ausgeliefert werden: Twitter wandelt intern die Animationen in .mp4 Videos um. So wird die Dateigröße enorm verkleinert, was Twitter in Sachen Bandbreite sehr viel Traffic einsparen wird.

Animationen im Web

Man kann mittlerweile animierte Dinge weitaus effektiver umsetzen, als durch eine animierte GIF-Datei. Heute gibt es z.B. jQuery und HTML5, die einen dabei behilflich sein können (siehe auch Twitter..).

Da es das Dateiformat GIF aber schon seit 1987 gibt (Animationen kamen ca. 1-2 Jahre später hinzu), unterstützen sehr viele Ausgabemedien das Forma. Sie funktionieren auf dem neuen Smartphone, aber auch auf älteren PCs mit noch älteren Browsern.

Neue Möglichkeiten setzen z.B. die Aktivierung von Java (bei jQuery) voraus, die Installation eines Plugins (bei Flash Animationen) oder grundsätzliche neue Browser (HTML5). GIF Animationen laufen eigentlich überall. Wahrscheinlich einer der Gründe, warum viele auch heute noch auf eine GIF Animation zurückgreifen.

Mit Photoshop GIF Animation erstellen

Wo wir wieder beim Anfang wären: Wie erstellt man mit Photoshop eine GIF Animation?

GIF Animationen arbeiten mit Frames. Jedes Frame (also jedes Bild) der Animation muss man zu Beginn in Photoshop auf einer einzelnen Ebene zur Verfügung haben.
man benötigt das Zeitleiste-Fenster (Fenster -> Zeitleiste)
durch Klick auf den Button Videozeitleiste erstellen erscheinen die einzelnen Ebenen in der Zeitleiste. Man kann diese jetzt beliebig variieren, sodass man die Länge, die das einzelne Frame angezeigt werden soll, verändern kann.
Ist man zufrieden (durch den Play-Button kann man immer eine Vorschau begutachten), klickt man auf Datei -> Für Web speichern unter und wählt natürlich als Format eins der GIF-Vorgaben aus. Ganz unten kann man noch Optionen zur Animation definieren, wie z.B. die Anzahl der Wiederholungen.

Das war’s schon 🙂