Anzeige
Anzeige
Tool-Tipp
Artikel merken

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.

Von Moritz Stückler
5 Min. Lesezeit
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
  • 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.

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
12 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
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
Sebastian

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

Antworten
HamuSumo

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

Antworten
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

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige