Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Anleitung: So erstellst du animierte GIFs

Das Dateiformat GIF erlebt in den letzten Jahren eine große Renaissance. Obwohl es technisch längst überholt ist, werden täglich Hunderttausende neue Animationen in diesem Format geschaffen und über die sozialen Adern des Internets in Form von 4chan, tumblr und reddit getauscht. Wir zeigen euch, wie ihr die Kult-Grafiken selber erstellen könnt.

Das Internet gilt weitläufig als sehr fortschrittlich. Im Gegensatz zum „Real Life“ gibt es im Netz fast keinen Platz für das Alte oder Konservative. Durch unsere ständige Update-Kultur hat sich der Grundsatz „Neuer ist besser“ in die Köpfe der Digital Natives eingebrannt. Aber es gibt ein Phänomen in den Weiten des Internets, welches dieser Prämisse trotzt: das GIF-Format.

Gif: In den Urzeiten des Internets geschaffen

Das Dateiformat GIF wurde, wie es der Name „Graphics Interchange Format“ verrät, zum Austausch von Grafiken geschaffen, und zwar bereits Ende der 80er Jahre. Damals ließ sich noch niemand erträumen, dass wir einmal ganze Internetseiten nur mit bunten, hochauflösenden Bildern und Grafiken füllen würden. Entsprechend wurde das Format auch für die Bedürfnisse der Internet-Gründerväter gestaltet. Maximal 256 Farben pro Bild erschienen damals beispielsweise als vollkommen ausreichend.

Als das GIF-Format geschaffen wurde, waren 256 Farben mehr als ausreichend. (Foto: blakespot / flickr.com, Lizenz: CC-BY)

Zur Speicherung und zum Austausch von Fotos löste das neue JPEG-Format GIF am Anfang der 90er Jahre sehr schnell ab. Da GIF im Gegensatz zu JPEG aber Transparenz unterstützt führte das Format weiterhin eine bedeutende Existenz im Bereich des Webdesign - und tut es auch immer noch. Eine weitere Besonderheit des Formats ist die Tatsache, dass mehrere Bilder in einer Datei gespeichert und anschließend nacheinander wiedergegeben werden können – das ermöglicht bis heute simple Animationen in jedem Webbrowser ohne zusätzliche Plugins.

Renaissance bei reddit, tumblr und 4chan

Genau deswegen erlebt das Format seit wenigen Jahren eine ungeheure Renaissance, nämlich in den sozialen Lebensadern des Internet-Organismus, namentlich bekannt als 4chan, reddit, tumblr und Co. Hier sind die kurzen animierten Clips inzwischen obligatorisch. Meistens zeigen sie lustige Szenen aus YouTube-Clips, Spielfilmen oder Serien, welche oft mit einem kurzen Text untertitelt werden und ein Thema meist auf witzige Weise kommentieren und illustrieren. Wir zeigen euch in diesem Artikel, wie ihr selbst eine individuelle animierte GIF-Grafik erschaffen könnt.

GIF mit einem Online-Dienst erstellen

Die leichteste Methode ist es eine animierte GIF-Grafik zu erstellen, wenn es das entsprechende Ausgangsvideo auf YouTube gibt, oder dieses bereits passend gekürzt offline vorliegt. In diesem Fall könnt ihr nämlich einfach einen von vielen Internet-Diensten anstrengen. Dort fügt ihr einfach die URL zum gewünschten Video ein oder ladet euren zugeschnittenen Clip hoch. Beim Transfer von YouTube könnt ihr noch Anfangs- und Endzeit der Animation einsetzen. Anschließend braucht der Server einige Sekunden bis Minuten zum Dekodieren des Clips. Am Ende erhaltet ihr die gewünschte GIF und könnt sie direkt eurem digitalen, sozialen Umfeld zum Fraß vorwerfen.

Der schnellste Weg zur animierten GIF ist ein Online-Editor, wie hier im Bild der imgflip Animated GIF Generator.
Der schnellste Weg zur animierten GIF ist ein Online-Editor, wie hier im Bild der imgflip Animated GIF Generator.

Die Online-Dienste haben ihre Einschränkungen in Bezug auf die Optionen bei der GIF-Erstellung. Effekte und Untertitelungen sind nur bei manchen Plattformen möglich, es gibt strikte Anforderungen an die Ausgangs-Videoformate und oft sind die GIF-Dateien am Ende mehrere Megabyte groß, und damit nicht ideal für die Verbreitung auf sozialen Plattformen geeignet.

  • Youtube to GIF: Kostenlos und ohne Anmeldung. Maximal 10 Minuten Videolänge.
  • imgflip Animated GIF Generator: Kostenlos und ohne Anmeldung. Viele Optionen und Einstellungen. Verarbeitet auch Offline-Videodateien.
  • GIFsForum.com: Kostenlos und ohne Anmeldung. Viele Optionen und Einstellungen.

Manuelle Erstellung von GIFs mittels Photoshop

Wer die Animationen anpassen und mit Effekten versehen möchte, der kommt an einer manuellen Bearbeitung nicht vorbei. Dafür gibt es viele Möglichkeiten und Wege, je nach verwendetem Betriebssystem. Üblicherweise müssen dazu aber mindestens zwei verschiedene Tools angestrengt werden. Eins, welches aus dem Ursprungs-Videomaterial das gewünschte Stück herausschneidet und daraus einzelne Bildframes erstellt. Und schließlich ein zweites Programm zum Bearbeiten der Frames und zum letztendlichen Erzeugen der GIF-Animation.

Selbst ist der Nerd: Photoshop ist nach wie vor der Königsweg zur animierten GIF.
Selbst ist der Nerd: Photoshop ist nach wie vor der Königsweg zur animierten GIF.

Als eine der wenigen Anwendungen beherrscht Adobe Photoshop beide Aufgaben. Über die Import-Funktion (Datei -> Importieren -> Video Frames in Ebenen) kann Photoshop aus einem Video unmittelbar eine GIF-Animation erstellen, die anschließend nur noch bearbeitet und optimiert werden muss. Im Import-Dialog kann mit zwei einfachen Schiebereglern der Anfang und das Ende des gewünschten Ausschnitts selektiert werden. Außerdem kann Photoshop beim Import direkt die Anzahl der Frames reduzieren. Videodateien verfügen normalerweise über mindestens 24 Bilder pro Sekunde. Würde man eine Sekunde eines Videos also als GIF wiedergeben wären 24 Einzelbilder nötig, was bereits relativ viel Speicherplatz kosten würde. Deswegen lohnt es sich hier bereits nur jeden 2. oder 3. Frame zu importieren.

Bereits beim Import bietet Photoshop vielfältige Möglichkeiten, um eine ideale GIF erstellen zu können.
Bereits beim Import bietet Photoshop vielfältige Möglichkeiten, um eine ideale GIF erstellen zu können.

Alle wichtigen Funktionen zur Anpassung der Animation befinden sich in der Zeitleiste im unteren Bereich des Photoshop-Arbeitsbereichs. Weist eine Sequenz nur wenig oder keine Bewegung auf, macht es keinen Sinn, mehrere Frames mit einem nur marginal unterschiedlichen Bildinhalt auszugeben. Hier sollte man lieber die Verweildauer des ersten betroffenen Frames erhöhen und die folgenden Einzelbilder löschen. Das spart Speicherplatz! Da die Ausgangs-Videos meistens nur wenige Sekunden oder Bruchteile davon andauern, lohnt es sich meistens auch, die Sequenz etwas zu verlangsamen. Dazu kann einfach die Verweildauer der einzelnen Frames heraufgesetzt werden. Um eine halbwegs flüssige Bewegung darzustellen, sollte der Wert allerdings maximal bei etwa 0,2 Sekunden (ergibt 5 Frames/Sekunde) liegen.

Nun kann man sich Effekten, Untertiteln und Co. zuwenden. Dazu steht natürlich das gesamte Arsenal an Photoshop-Funktionen zur Verfügung, wie auch bei der Bearbeitung von Standbildern. Um dem Internet-Meme-Stil treu zu bleiben, sollte man natürlich einen Untertitel in Schriftart „Impact“ in weißer Farbe mit schwarzer Kontur nicht vergessen. Ein Blink-Effekt lässt sich ganz einfach erstellen, wenn man die betreffende Schrift-Ebene über einen Klick auf das Augen-Symbol nur in jedem zweiten Frame einblendet.

Beim finalen Export geht es vor allem darum, eine möglichst kleine Datei zu erzeugen. Im Idealfall bleibt eine animierte GIF im Bereich unter einem Megabyte.
Beim finalen Export geht es vor allem darum, eine möglichst kleine Datei zu erzeugen. Im Idealfall bleibt eine animierte GIF im Bereich unter einem Megabyte.

Und die Größe zählt doch

Am Schluss geht es an die Erstellung der GIF-Datei. Dabei sollte das oberste Ziel sein, eine möglichst kleine GIF-Datei zu erstellen. Dateigrößen überhalb von 2 Megabyte werden meistens nicht gerne gesehen. Im Idealfall sollte eine GIF sogar kleiner als ein Megabyte sein. Dazu sollte zunächst eine vernünftige Bildgröße gewählt werden. Die längste Seite der Animation sollte in der Region von 500 Pixeln liegen - mehr Platz bieten die wenigsten sozialen Plattformen. Anschließend sollte die Anzahl der Farben reduziert werden. Je nach gezeigter Szene können bereits mit 50 Farben ordentliche Ergebnisse erzielt werden. Auch das Aktivieren der Transparenz-Einstellungen kann wertvollen Speicherplatz sparen. Photoshop zeigt stets die prognostizierte Dateigröße im Export-Fenster an. Somit kann man so lange mit den Parametern herumspielen, bis das gewünschte Ergebnis erzielt wird. Und dann ab damit zu tumblr.

Das Ergebnis der Mühen: eine mehr oder minder lustige Animation für die unendlichen weiten des Internets.
Das Ergebnis der Mühen: eine hoffentlich lustige GIF-Animation für die unendlichen weiten des Internets.

Vielleicht auch interessant: Hier findet ihr eine Auswahl von Tools für den perfekten Screenshot auf eurem Mac.

Weiterführende Links

Bitte beachte unsere Community-Richtlinien

5 Reaktionen
Alexandra87

Leider kann man auf den oben genannten Seiten ohne einen Pro-Account zu kaufen, nur relativ kleine Gifs erstellen. Zudem wird einfach ein Watermark mit dem Text "imgflip.com" ins Bild eingebaut, was zumindest für mich diese Seite uninteressant macht, da ich ab und zu gifs auch beruflich verwende und da kann ich nicht mit Werbung im Bild ankommen. Für mich kommt daher nur die deutsche Alternative zu diesen Seiten in Frage: http://gif-erstellen.com

Antworten
HamuSumo

Sebastian: Nö, bestimmt nicht. Aber hat mich bislang auch nicht vorrangig interessiert. ;) Aber nichtsdestotrotz danke für den Link. :)

Antworten
Sebastian

@HamuSumo: Ein Tutorial für GIMP-GIFs zu finden, ist aber ebenfalls nicht schwer ;-) http://youtu.be/6NtARJGzhaY

Antworten
HamuSumo

So richtig tiefgreifend ist der Artikel leider nicht. Ein Online-Tool zu finden ist nun nicht so schwer und die Do-it-yourself-Methode braucht eine sündhaft teure Software wie Photoshop, die ich mir gewiss nicht besorge, auch wenn gefühlt das halbe Internet eine gecrackte Version bei sich auf dem Rechner liegen hat. Wie man animierte GIFs mit günstigerer Software wie beispielsweise GIMP erstellt, hätte ich daher toll gefunden.

Antworten
DerFreeman

Was Ihr in Eurem Artikel leider vergessen habt zu erwähnen ist, dass das GIF-Format eigentlich lizenzrechtlich geschützt ist und nicht verwendet werden darf, ohne Copyright-Vermerk.
Siehe Wikipedia:
Das von Steve Wilhite entwickelte GIF wurde 1987 von dem US-Online-Dienst CompuServe als Farbformat eingeführt, um das vorher benutzte RLE-Format zu ersetzen, das nur Schwarzweißbilder darstellen konnte. GIF wurde vor allem wegen seiner effizienten Kompression LZW populär. Die entstandenen Bilddateien benötigten deutlich weniger Speicherplatz als andere zu der Zeit übliche Grafikformate wie PCX oder MacPaint. Selbst große Bilder konnten so in vernünftiger Zeit übertragen werden, auch mit langsamen Modems. Zudem ermöglichte die offene Lizenz-Politik von CompuServe jedem Programmierer, GIF für eigene Anwendungen kostenlos zu implementieren, sofern dieser einen Hinweis auf das Urheberrecht des Online-Dienstes anbrachte.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.