Animierte GIFs in Photoshop erstellen: Der ultimative Guide für 2024

Von Stefan Turiak
Aktualisiert am 05.01.2024 | Lesezeit ca. Min.

Sogenannte GIFs (kurz für: Graphics Interchange Format) erfreuen sich auf diversen Social-Media-Plattformen, WhatsApp- oder Slack-Chats schon lange großer Beliebtheit. Besser als mit jedem Emoji oder ellenlangen Text lassen sich mit den animierten Bildern auf simple Weise Emotionen, Ideen oder auch humorvolle Gedanken ausdrücken.

Welche Funktion erfüllen GIFs im Internet?

Nicht nur für den privaten Gebrauch, sondern auch um eine Marketingbotschaft zu transportieren bzw. zu unterstreichen, eignen sich die bewegten Bilder bestens. Eine entsprechende Kampagne oder zwischendurch eingestreute GIFs, z. B. auf dem firmeneigenen Social-Media-Account, Blog oder innerhalb eines E-Mail-Newsletters, lassen das dazugehörige Unternehmen sympathisch oder sogar humorvoll erscheinen.

Zusätzlich generiert die Firma Aufmerksamkeit bei bestehenden Followern und Nicht-Followern. Das hat einfache Gründe:

  1. GIFs machen der Zielgruppe Spaß beim Interagieren mit deiner Marke
  2. Insbesondere auf dem schnelllebigen Informations-Highway des Internets stechen GIFs mit reizvoller visuellen Stimulation hervor. Werden GIFs richtig angewandt, können Informationen schneller aufgenommen und verarbeitet werden.  
  3. Bei GIFs handelt es sich um eine Smartphone-freundliche Marketingmethode – während Bilder recht statisch daherkommen, belasten insbesondere Videos mit hoher Qualität das Datenvolumen von Smartphone-Nutzern. GIFs stellen einen effektiven Mittelweg dar. In Zeiten, in denen das Smartphone häufiger als der Computer genutzt wird, ein wichtiger Vorteil.

Das GIF-Format entstand schon Ende der 80er. Auch wenn es wie ein Video wirkt, handelt es sich um ein bescheideneres Mittel der Bewegtbild-Präsentation. Die Bildqualität ist meist geringer als bei High Resolution-Videos. Andererseits ist auch die Framerate kleiner, also die Anzahl der pro Sekunde gezeigten Bilder.

icon

Welche Framerate eignet sich bei GIFs?

Während sich beim Video 24 Frames per Second (FPS) als Standard eingependelt hat, gibt es für das GIF keine grundsätzliche Richtlinie. Trotzdem sollten GIF-Produzenten sich für eine Framerate entscheiden, die für das menschliche Auge nachvollziehbar bleibt. Ab einer Framerate von 14 bis 16 Bildern pro Sekunde können wir flüssige Bewegungen erkennen. Probiere am besten aus, welche Framerate zu deinem GIF am besten passt. Bedenke aber, dass eine höhere Bildanzahl pro Sekunde zu einer größeren Dateigröße führt.

Wie werden GIFs hergestellt und genutzt?

Es gibt drei Möglichkeiten, GIFs zu produzieren bzw. zu implementieren:

  • Bereits von anderen Parteien hergestellte GIFs verwenden
  • Ein Video in ein GIF umwandeln
  • Mehrere Standbilder für ein GIF aneinanderreihen

Insbesondere wenn es schnell gehen soll, reicht ein GIF aus, das du auf diversen Social-Media-Portalen wie X (vormals Twitter) oder Facebook bzw. auf Webseiten wie Giphy oder Imgur findest. Für eine individuellere und persönlichere Botschaft lohnt es sich jedoch, die eigene Kreativität spielen zu lassen und ein eigenes GIF herzustellen. Photoshop stellt dafür ein effektives Werkzeug dar.

Hinweis: Egal, für welche Form du dich entscheidest, eine Regel solltest du immer im Hinterkopf behalten: GIFs sollten keine komplexe Story erzählen. Vielmehr geht es darum, einfache Informationen, Situationskomik oder eine kurze Handlung mit einem simplen Dialog oder Monolog (als Untertitel) zu verbinden. Kaum jemand folgt auf einer Social-Media-Plattform einem 2-Stunden-Epos.

GIF aus einem Video erstellen

Wenn du aus einem Videoclip ein GIF erstellen möchtest, nutze dafür die folgende Schritt-für-Schritt-Anleitung:

Schritt 1: Video auswählen

Wähle einen Videoclip aus dem Internet oder nutze einen selbst erstellten Videoclip für die GIF-Produktion.

Achtung: Auch bei GIFs solltest du Bildrechte äußerst ernst nehmen. Das gilt nicht nur für Videos, die du im Netz findest, sondern auch für eigens angefertigte Clips. Hierauf können z. B. Privatpersonen abgebildet sein, die einer Weiterverbreitung nicht zugestimmt haben.

Schritt 2: Video auf Festplatte ablegen und kürzen

Ein von dir erstelltes Video befindet sich wahrscheinlich schon auf deiner Festplatte. Ein YouTube-Video kannst du z. B. über einen entsprechenden Converter herunterladen.

Bestenfalls sollte es sich um einen kurzen Videoclip handeln, der von vornherein eine Laufzeit zwischen zwei oder allerhöchstens fünf Sekunden aufweist. Zur Not solltest du den Clip an bestimmten Stellen kürzen, die du für nicht notwendig erachtest.

Es gilt immer: Weniger ist mehr. Deine Botschaft sollte in so wenigen Bildern wie möglich für den Zuseher verständlich sein.

Schritt 3: Video importieren

Wähle in der Menüleiste „Datei“  und anschließend im Dropdown-Menü „Importieren“ > „Videoframes in Ebenen“ aus. Nachdem du das Video ausgesucht hast, sollte sich ein weiteres Fenster öffnen. Hierüber kannst du einen zu importierenden Bereich des Videos mithilfe eines Sliders festlegen und eine bestimmte Auswahl treffen.

animierte GIFs Screenshot

Da das GIF aus Platzgründen und der Einfachheit halber sehr kurz und klein sein muss, solltest du die Bildauswahl möglichst einschränken. Ein Import von Videos mit einer langen Laufzeit ist möglicherweise sowieso nicht möglich. Auch die Möglichkeit, nur jedes zweite oder dritte Bild des Videos zu importieren, ist hier gegeben. Auf diese Weise lässt sich die Framerate direkt verringern. Wenn du alle Voreinstellungen durchgeführt hast, klicke auf „OK“

Hinweis: Mit manchen Videoformaten kommt Photoshop nicht zurecht, sodass vor dem Import eine Konvertierung notwendig ist. Einen Überblick über die unterstützten Formate gibt es hier. Andere, nicht unterstützte Formate lassen sich mit kostenlosen Tools aus dem Internet leicht konvertieren

Schritt 4: GIF mithilfe von Ebenen erstellen

Nun sollte Photoshop alle Einzelbilder des ausgewählten Video-Bereichs als Ebenen anzeigen und das erste Bild dieser Reihe im Hauptfenster.

animierte GIFs Screenshot

Wähle beim Dropdown-Menü unter „Fenster“ den Punkt „Zeitleiste“ aus. Am unteren Bildschirmrand erscheint ein Fenster mit dem Titel „Zeitleiste“. In der Mitte befindet sich ein weiteres kleines Menü mit zwei Punkten zur Auswahl. Hier klickst du „Frame-Animation erstellen“ an.

animierte GIFs Screenshot

Oben rechts beim „Zeitleiste“-Fenster klickst du nun ein kleines Icon an. Ein weiteres Menü sollte sich jetzt öffnen, bei dem du auf den Punkt „Frames aus Ebenen erstellen“ wählen solltest. Nun erscheinen alle ausgewählten Bilder in der Reihenfolge, die du festgelegt hast, im „Zeitleisten“-Fenster.

animierte GIFs Screenshot
animierte GIFs Screenshot

Am unteren Rand siehst du außerdem ein weiteres, kleines Menü mit einem Play-Icon und mehreren anderen Icons. Auch ein weiteres kleines Dropdown-Menü, bei dem die drei Optionen „Einmal“, „3 Mal“ und „Unbegrenzt“ aussuchen kannst. Klicke Letzteres an, damit eine Endschlosschleife entsteht. Auf diese Weise wiederholt sich die Animation immer wieder aufs Neue.

animierte GIFs Screenshot

Wenn du nun auf den Play-Button klickst, spielt Photoshop deine Bilderreihe ab und du erhältst schon einmal einen Vorgeschmack auf dein fertiges GIF.

Schritt 5: GIF bearbeiten

Wie bei einem normalen Standbild kannst du dein GIF bearbeiten und deinen Wünschen anpassen. Veränderungen der Farben, der Helligkeit, Bildgröße etc. sind problemlos möglich.

Die Einstellungen, die du bei der ersten Ebene vornimmst, beeinflussen alle darunter liegenden Ebenen. Auf diese Weise musst du nicht jedes Einzelbild individuell bearbeiten.

Sobald du deine Bearbeitungen abgeschlossen hast, wähle „Datei“ und im Dropdown-Menü „für Web speichern“.

animierte GIFs Screenshot

Schritt 6: Dateigröße verringern

Im darauf folgenden Fenster kannst du weitere Einstellungen vornehmen. Insbesondere wenn du die Dateigröße deines GIF verringern möchtest, findest du hier noch einmal einige hilfreiche Funktionen. Ein kleineres GIF kannst du z. B. schneller uploaden.

animierte GIFs Screenshot

Selbstverständlich sollte für den Zuschauer/Leser weiterhin erkennbar sein, was das GIF zeigt. Die höchste Bildqualität ist dafür allerdings nicht erforderlich.

Folgende Anpassungen kannst du vornehmen, um die Zielgröße deiner Datei zu erreichen:

Bildgröße An dieser Stelle kannst du die Dimensionen deines GIFs ebenfalls noch einschränken, um die Dateigröße zu verringern.  
Verlustbehaftete Kompression Wie der Name bereits andeutet, gehen bei der verlustbehafteten Kompression einige Bilddaten bzw. -informationen verloren. Sie eignet sich daher wunderbar, um die Dateigröße zu verringern. Du solltest sie aber vorsichtig umsetzen.

Aber Vorsicht: Einmal angewandt, ist es nicht möglich, diesen Prozess wieder umzukehren!
Dithering Um nicht vorhandene Farben nachzuahmen, wird diese Funktion eingesetzt. Hierbei werden nah beieinander liegende Pixel mit unterschiedlichen Farben zusammengefügt. Ein gewisses Maß an Dithering muss immer vorhanden sein. Dieses Maß lässt sich aber reduzieren, um wiederum die Dateigröße zu verkleinern.
Farbanzahl reduzieren Je mehr Farben deine GIF enthält, desto größer ist auch die Datei. Die höchste Farbanzahl eines Bildes beträgt 256. In manchen Fällen kannst du diese Zahl guten Gewissens auf 64 Farben verkleinern.

Diese Maßnahmen sollten dir helfen, die Dateigröße auf ein gesundes Maß zusammen zu schrumpfen. 1 MB für ein GIF stellt dabei ein gutes Richtmaß dar.

Schritt 7: GIF hochladen und einbetten

Speichere das GIF ab und verbreite es weiter. Dazu stehen dir einige bereits genannte Plattformen wie Imgur zur Verfügung. Hier kannst du deine GIF-Kreation kostenlos hochladen und in deinen Blog, deine Webseite, deine Social Media-Kanäle usw. einbetten.

GIFs aus einer Fotostrecke erstellen

Neben einem GIF aus einem Video kannst du auch aus einer eigenen Fotostrecke ein GIF erstellen. Folgende Step-by-Step-Anleitung hilft dir dabei:

Schritt 1: Bilderreihe sammeln und importieren

Sammle die Bilderreihe, die du in ein GIF umwandeln möchtest, am besten in einem Ordner. Wähle „Datei“ und im Dropdown-Menü „Skripten“ > „Dateien in Stapel laden …“ aus.

Anschließend öffnet sich ein Fenster mit der Überschrift „Ebenen laden“, wo du auf „Durchsuchen“ klicken musst. Öffne den zuvor erstellten Ordner und markiere die für dein GIF ausgewählten Bilder.

Klicke auf „OK“ und Photoshop stellt deine Bildkomposition zusammen und zeigt die verschiedenen Bilder als Ebenen an.

Optional kannst du jede Ebene auch einzeln anlegen. Bewege den Cursor einfach auf „Datei“ > „Neu“. Anschließend kannst du die hintere Ebene öffnen, indem du doppelt auf das Schloss bei den Ebenen klickst. Anschließend kannst du die Bilder und Ebenen deinen Vorstellungen entsprechend gestalten.

animierte GIFs Screenshot

Schritt 2: Zeitleiste und Frame-Animation aus Standbildern erstellen

Sobald du die verschiedenen Ebenen deinen Wünschen entsprechend sortiert hast, klicke wieder auf den Punkt „Zeitleiste“ beim Dropdown-Menü unter „Fenster“. Wie bei der GIF-Umwandlung eines Videos wählst du im Zeitleisten-Fenster nun „Frame-Animation“ erstellen“ und anschließend „Frame-Animation erstellen“ aus. 

Deine ausgewählten Standbilder erscheinen in der zuvor festgelegten Reihenfolge. Wenn du jetzt nur noch mithilfe des Punktes „Unbegrenzt“ eine Endlosschleife erstellst, kann du das GIF austesten.

Schritt 3: GIF abschließen

Wie bei dem GIF, das du aus dem Video erstellt hast, kannst du nun die Bilderreihe bearbeiten und anschließend speichern. Klicke dazu wieder beim Dropdown-Menü unter „Datei“ auf „für Web speichern“. Nimm die nötigen Anpassungen wie Dithering, Farbanzahl reduzieren, Verlustbehaftete Kompression und Bildgröße reduzieren vor, um die Dateigröße zu verkleinern.

Dein GIF ist nun bereit für den Upload und Webeinsatz!

FAQ

An dieser Stelle möchten wir die häufigsten Fragen zum Thema animierte GIFs beantworten.

Weitere Artikel