Wie du GIFS richtig speicherst – und hochlädst

Was macht ein großartiges GIF aus?

Animated GIF-downsized_large.gif

Bevor es jetzt gleich richtig losgeht, müssen wir eine wichtige Frage klären. Heißt es jetzt GIF oder JIF? Der Erfinder des GIFS Steve Wilhite spricht es JIF aus. (Mit einem weichen J) Der Großteil der Internetgemeinde allerdings nennt es GIF. (Mit einem harten G) Ich bin auch im Team GIF, aber es bleibt dir selbst überlassen, ob du es nun GIF oder JIF nennst. :-)

Was funktioniert für GIFS am Besten?
Hierfür gibt es eine einfache Regel. Ein GIF sollte KURZ, EINFACH und so KLEIN wie möglich sein. Wofür du sie verwendest? Dazu habe ich einen Blogartikel über 5 Ideen für die Verwendung von GIFs verfasst.

Je länger ein GIF ist, desto größer wird auch die Datei. Da das GIF ein sehr komprimiertes Format ist, das ausgelegt ist für eine kleine Dateigrößen, würde ich dir immer empfehlen ein GIF so kurz wie möglich zu halten. Die meisten GIFS werden deswegen als kurzer Loop angelegt. Das heißt, die Bilder wiederholen sich in Endlosschleife.

Wenn du nun versuchst eine komplexe 3D Grafik mit Textur und Schatten als GIF zu speichern, wirst du mit dem Ergebnis wahrscheinlich nicht sehr zufrieden sein. Das Dateiformat GIF komprimiert deine Bilder so sehr, dass es am Ende nicht besonders gut aussehen wird. Einfach gezeichnete Bilder oder Grafiken mit wenig Farben funktionieren also am Besten für GIFS und helfen dir dabei die Dokumentengröße klein zu halten.

Unser Ziel ist dabei immer, eine hohe Qualität bei kleiner Dateigröße zu erhalten. Du legst also am Besten deine Animation in einer hohen Auflösung an und komprimierst diese anschließend mit meinen 3 liebsten Tools zu einem GIF. Meine Animationen lege ich in der Regel immer in der Größe 1088 x 1088 für Instagram oder 1920 x 1080 für Videoformate an. Da ein GIF gerne kleiner sein kann, komprimiere ich diese Größe dann auf 800 x 800 bzw. 800 x 600 px.

Ich stelle euch hier 3 verschiedene
Wege vor ein GIF zu exportieren:

Wenn du wie ich, deine handgezeichneten Animationen mit Roughanimator erstellst, würde ich dir nicht empfehlen dein GIF direkt aus dem Programm zu exportieren. Leider bekommst du hier nicht das beste Ergebnis und die Farben werden meist nicht besonders schön dargestellt.

Wenn du bisher noch nichts von der App Roughanimator gehört hast, kann ich dir empfehlen, dich für meinen Mini E-Mailkurs animieren mit Roughanimator anzumelden:

Um nun ein perfektes GIF zu erstellen probierst du am Besten dafür folgende 3 Methoden aus:

Methode 1: Photoshop

Die professionellste Methode ist es, direkt in Photoshop zu arbeiten und dort dein hochauflösendes GIF zu erstellen. Zunächst rechnen wir uns hierfür aus der App Roughanimator ein .mov Video heraus. Du kannst natürlich auch in jedem anderen Programmen ein .mov Video erstellen.

Wir speichern dann im nächsten Schritt das .mov Video auf unseren Desktop und laden es direkt in Photoshop hoch. Dies machst du, in dem du auf Datei - Öffnen klickst und dort dein Video auswählst. Es kann ein wenig dauern, bis das Video in Photoshop hochgeladen wird, je nach Größe deines Dokuments.

Sobald dein Video hochgeladen ist, siehst du unten in der Timeline dein .mov Video. Diese kannst du nun durch den Play Button direkt in Photoshop abspielen.

Um daraus ein GIF zu exportieren, klickst du auf Datei - Exportieren - Für Web speichern (Legacy). Ich benutze Photoshop CC, wenn du eine ältere Version des Programm hast kann es sein, dass du diese Einstellung direkt unter Datei findest.

Das Erste was wir nun machen, ist in der Vorgabe - GIF 128 Dithering einzustellen. Jetzt befinden wir uns im Menü für die GIF Einstellungen. Ganz unten im Menü kannst du die Bildgröße einstellen. Da ich das .mov Video direkt aus Roughanimator herausgespeichert habe, sind hier 1088x1088 px voreingestellt. Diese Größe können wir jetzt auf 800x800 px verringern. Sofort ändert sich die Dateigröße auf wenige MBs.

Das gute an Photoshop ist, dass wir hier kontrollieren können, wieviele Farben für das GIF eingesetzt werden. Um nun unsere Dokumentengröße noch kleiner zu bekommen, können wir zum Beispiel die Farben von 128 auf eine kleinere Zahl abändern. Wenn du das GIF also beispielsweise auf 8 Farben umstellt, siehst du, dass sich die Dateigröße deutlich ändert. Allerdings leidet nun auch die Qualität des GIFS. Da wir dies ja vermeiden wollen, ist es in den meisten Fällen optimal bei 128 Farben zu bleiben. Aber probier hier einfach einmal aus, was für deine Animation am Besten funktioniert.

Jetzt müssen wir nur noch die Funktionen für Schleifenwiedergabe abändern von Einmal auf Unbegrenzt. Dann kannst du auf Speichern klicken und den Dokument auf dem Schreibtisch sichern.

Fertig ist dein perfektes GIF.

Die Vorteile von Photoshop: Maximale Kontrolle über die Dateigröße & Farben deines GIFS.Nachteil: Photoshop ist leider kein kostenloses Programm.

Methode 2: Die Plattform Giphy.com

Mit dieser Variante benutzt du die Online Plattform Giphy.com um dein GIF umzuwandeln. Du kannst hier dein .mov Video direkt auf der Plattform hochladen. Dafür klickst du auf der Startseite auf UPLOAD und dann auf BROWSE und importierst dein Video. Wenn du nun planst dein GIF auf der Plattform zu veröffentlichen, kannst du hier Tags und die Quelle deines Dokuments mit angeben. Das musst du allerdings nicht tun, du kannst auch alles auf privat stellen und die Plattform nur für das reine umwandeln in ein GIF verwenden. Wenn du alles fertig eingestellt hast, klickst du auf Upload GIFS. Das kann nun eine Weile dauern. Wenn das geklappt hat, wird deine Animation automatisch im Browserfenster abgespielt.

Bei manchen Videos kann es nun sein, dass das GIF keine besonders hohe Qualität hat und die Farben stark von deiner Animation abweichen. Leider hast du auf Giphy.com keine Kontrolle über die Farben und Größen, du kannst also leider nicht kontrollieren, wie dein GIF am Ende aussehen wird.

Um dein GIF nun von Giphy auf deinem Desktop zu speichern, klickst du auf im Menü unten auf Advanced und kannst dort unter GIF Download dein GIF direkt auf deinen PC herunterladen. Der Vorteil von Giphy ist, dass du schnell und kostenlos aus deinen Videos GIFS erstellen kannst. Der Nachteil ist hier allerdings der Qualitätsverlust.

Bildschirmfoto 2019-04-01 um 15.57.22.png

Methode 3: Die App IMG Play

Ich habe aktuell die App IMG Play für mich entdeckt. Wenn du auf schnelle Art und Weise ein GIF auf dem Handy erstellen willst ohne den Umweg über den Rechner, kann ich dir die App IMG Play wirklich ans Herz legen. Die App ist super simpel aufgebaut. Du lädst hier direkt dein Video in die App hoch und diese komprimiert dir deine Animation als GIF. Allerdings kannst du hier einstellen, in welcher Qualität dein GIF gespeichert werden soll. Du lädst dein Bild hoch und kommst in den Bearbeitungsmodus. Hier kannst du verschiedene Einstellungen vornehmen. Du kannst die Richtung ändern, die Größe deiner Leinwand anpassen und sogar noch einmal die Farben und den Hintergrund verändern. Ausserdem kannst du hier die Framerate kontrollieren und zum Beispiel wieder zurück auf die ursprünglich 24 Frames per Second ändern.

Wenn du nun fertig mit der Bearbeitung bist, klickst du oben auf Nächster und du kannst von hier nun dein GIF in den Fotos speichern. Ausserdem hast du hier die Möglichkeit die GIF Größe einzustellen und die Looping-Optionen von unendlich auf 1, 3 oder 5 zu stellen.

Die App ist leider nur kostenlos, wenn man das Wasserzeichen in Kauf nimmt. Dafür bekommst du hier hochauflösende Gifs, in der richtigen Framerate und mit tollen Farben.

IMG_Play.jpg

Du siehst, es gibt verschiedene Arten GIFS zu erstellen und jede hat Vor- und Nachteile. Aber GIFS zu erstellen macht Spaß und da sollte einen die Technik nicht abschrecken. Wenn du willst, kannst du dir gerne das Video zum Tutorial auf IG TV anschauen.

Frage an dich:

Mit welchem Programm hast du bisher die Besten Erfahrungen gemacht um GIFS zu speichern?

Merke dir diesen Beitrag auf Pinterest!

 
MotionMontag-Tutorial1.png
 
giphy.gif
Sophia Dei

Hey, ich bin Sophia! Danke, dass du hier auf meinem Blog vorbeischaust. Wenn du mehr über Procreate, Animation & Tipps für kreative Unternehmen erfahren möchtest, dann bist du hier genau richtig!

https://www.studio-umi.de
Zurück
Zurück

Animierte Letterings - Wie du deine Handletterings animierst

Weiter
Weiter

5 Tipps, wie du handgezeichnete Animationen nutzen kannst