Dies sind die Methoden, mit denen ich GIFs erstelle. Manchmal für Blogbeiträge. Manchmal für Tweets. Manchmal für Dokumentationen. Manchmal zum Spaß. GIFs können äußerst nützlich sein und die Kommunikation in manchen Situationen besser als ein statisches Bild oder sogar Video ermöglichen.
Ich benutze einen Mac, daher sind dies hauptsächlich Mac-spezifische Dinge.
GIPHY CAPTURE
Im App Store erhältlich, GIPHY CAPTURE hat eine extrem einfache Benutzeroberfläche. Positionieren Sie es über dem Bereich, den Sie aufnehmen möchten, klicken Sie auf Aufnahme, klicken Sie auf Stopp.

Jedes Mal, wenn Sie die App öffnen, ist es wie eine Sitzung. Aufgenommene GIFs werden in der unteren Leiste angezeigt. Nachdem Sie eines aufgenommen haben, klicken Sie auf dessen Symbol, um diesen Bildschirm zu öffnen.

Sie können es auf GIPHY hochladen, was nützlich ist, wenn Sie Online-Speicher dafür benötigen, aber Sie können es auch lokal speichern. Sie können es auch bearbeiten, bevor Sie es hochladen oder speichern, und können
- Den Anfang/das Ende zuschneiden
- Wählen, wie es sich wiederholt
- Auf eine Breite von 640px, 480px oder 320px (die einzigen Optionen) skalieren
- Eine Beschriftung hinzufügen

Anscheinend ist diese App eine Weiterentwicklung von GifGrabber, und die Leute, die das liebten, hassen diese hier, aber so ist das Internet eben.
Dies ist meine meistgenutzte GIF-Erstellungs-App heutzutage, aber die begrenzten Optionen, wie z. B. die fehlende Möglichkeit, die Dateigröße stark zu beeinflussen, treiben mich manchmal zu anderen Apps.
LICEcap
LICEcap hat eine minimale Benutzeroberfläche. Es ist ein transparentes Fenster, das Sie über den zu aufzunehmenden Bereich positionieren, Aufnahme drücken, Stopp drücken. Sie können das Fenster zum Skalieren ziehen oder exakte Werte festlegen.

Ich mag es, dass man sie in jeder gewünschten Größe erstellen kann. Wenn Sie etwas Kleineres oder Größeres benötigen, können Sie den Browser normalerweise vorher hinein- oder herauszoomen, um dies zu ermöglichen. Das Beste daran ist jedoch, dass Sie die FPS (Frames Per Second) einstellen können, was einen enormen Einfluss auf die Dateigröße hat. Wenn Sie etwas zeigen, das eine ziemlich flüssige Animation erfordert, können Sie sie hochdrehen. Wenn Sie etwas zeigen, das sofort Zustände wechselt, können Sie sie herunterdrehen. Es ist ziemlich befriedigend, GIFs zu erstellen, die die Aufgabe mit einer winzigen Dateigröße erledigen, wenn man es kann.
Heiße Tipp: Sie können das Fenster selbst während der Aufnahme ziehen.

Photoshop
Photoshop kann für bestehende GIFs nützlich sein, da Sie sie öffnen und dann unter Für Web speichern bearbeiten können, wo Sie die Größe ändern und Dinge wie Farbinformationen ändern können, die sich alle auf die Dateigröße auswirken.

Aber Photoshop kann tatsächlich auch GIFs *erstellen*. Ich greife darauf zurück, wenn ich ein GIF erstellen möchte, bei dem *ich jeden Frame sehr spezifisch kontrolliere*. Zum Beispiel könnte ich eine Reihe von Bildschirmaufnahmen desselben Fensters machen, die Schritt für Schritt zeigen, wie etwas gemacht wird. Dann werde ich
- Sie als Ebenen in eine einzige Photoshop-Datei legen
- Das Zeitleistenband öffnen und eine Keyframe-Animation erstellen
- Einen Keyframe für jede Ebene erstellen, in dem nur diese Ebene aktiviert ist
- Die Timing- und Einstellungen anpassen
- Für Web speichern

Dieses Beispiel hat Folgendes erzeugt

Optimieren
Unabhängig davon, wie ich das GIF erstelle, jage ich es immer durch ImageOptim.
ScreenToGif ist auch hervorragend!
Danke! Stimmt dir zu.
Am besten für Windows
Bitte: Nicht.
GIF ist das ineffizienteste Format für animierte Bilder. Versuchen Sie mal, eine Giphy-“verseuchte” Seite mit einem iPad 2 zu besuchen.
Verwenden Sie stattdessen normale Videos. Das Hosten könnte aufgrund der Browserkompatibilität etwas knifflig sein, aber der Traffic-Overhead ist viel geringer.
Manchmal sind GIFs eine schnelle Möglichkeit, Entwicklern einen Effekt zu zeigen. Man sieht viele Beispiele auf Dribbble.
Um fair zu sein, es kommt wirklich auf den Verwendungszweck an. Wir verwenden GIF-Aufnahme-Tools ständig, um anderen Teammitgliedern QA-Probleme zu veranschaulichen. Sie sind eine schnelle Methode, um kurze, kleine, leicht zugängliche und teilbare bewegte Bilder zu erstellen, die gut mit den meisten Geschäftskommunikationstools funktionieren. Und wie Chris gezeigt hat, können sie sogar nachträglich in Tools wie Photoshop bearbeitet werden, man muss keine Videobearbeitungstools verwenden.
Zugegeben, GIF mag kein besonders effizientes Format für animierte Bilder sein, aber das bedeutet nicht, dass wir keine GIFs verwenden sollten, sie können unglaublich nützlich sein.
Was fotobasierte GIFs angeht, da stimme ich dir zu.
Ich habe gerade letzte Woche diesen Artikel gelesen, der die massive Reduzierung des Seiten-Overheads durch die Verwendung von Webm als Alternative in Fällen zeigt, in denen mehrere animierte Bilder verwendet werden. Für animierte Bilder mit fotografischen Qualitäten scheint dies ein No-Brainer zu sein – die Endergebnisse sind kaum zu unterscheiden. Für kürzere „vektorbasierte“ Animationen fand ich GIFs jedoch schärfer und mit akzeptabler Dateigröße. Wie Chuck erwähnte, kommt es also auf den Verwendungszweck an.
Es gibt jedoch einige Vorbehalte bei Webm, hauptsächlich in Bezug auf die Unterstützung des Formats und die „Teilbarkeit“ von Webm gegenüber GIF (praktisch dasselbe Problem). Es gibt auch das Problem, dass die automatische Wiedergabe von HTML5-Videos von den meisten mobilen Browsern blockiert/deaktiviert wird, was einige Tricks erfordert.
Für Interessierte: Ich habe versucht, gifsicle zu verwenden (über das Grunt-Plugin grunt-contrib-imagemin), sah aber nur minimale Reduzierungen der Dateigrößen und habe aufgegeben. Ich habe *ziemlich große Reduzierungen der GIF-Dateigröße mit geringen oder gar keinen Qualitätseinbußen* mit diesem GIF-Optimierungstool gesehen (einige bis zu 75 % und es stellt Photoshop in den Schatten). Wenn Sie die Dateigröße einiger GIFs reduzieren möchten, kann ich es wärmstens empfehlen, aber es ist natürlich nicht ideal für die Stapeloptimierung.
Ah, und wenn Sie wirklich etwas Ähnliches wie eine Diashow benötigen, sollten Sie Ihre Ebenen zu einer einzigen PNG- oder JPEG-Datei zusammenfügen. Legen Sie sie in ein Div mit overflow:hidden und verwenden Sie einige JS- oder CSS3-Animationen zum Neupositionieren. Es ist nicht sehr schwer zu implementieren. Die resultierende Bildgröße ist auf einigen Plattformen begrenzt, daher sollten Sie nicht zu viele Frames verwenden oder die gesamte Lösung in mehrere Sprites aufteilen.
Der Stitching-Ansatz optimiert die Komprimierung und den Reduzierungsaufwand. Probieren Sie es aus: Nehmen Sie fünf Folien und vergleichen Sie die zusammengesetzte Dateigröße mit der Summe der fünf einzelnen Größen.
Plus: Diese Technologie stürzt automatisch ab, wenn kein JS oder CSS3-Animationen vorhanden sind (sie zeigt immer den ersten Frame).
Wenn Sie wirklich auf etwas Seltsames stehen, können Sie eine rein CSS-basierte Navigation mit Labels, versteckten Radio-Buttons und dem „~“-Selektor (auch „CSS-Only-Diashow“) hinzufügen.
Viel schöner als GIF.
Sie können es jedoch nicht einfach als einzelnes Mediendatei in WordPress importieren.
Google Fotos hat auch ein ziemlich einfaches Animationstool.
Auch erwähnenswert: ImageMagick
Es gibt viele verschiedene Kompressionsfilter, die Sie auf Bilder anwenden können, um das beste Verhältnis von Größe zu Qualität zu erzielen. Plus, es kann mit einigen Bash-Skripten ziemlich schnell automatisiert werden.
Toller Beitrag!
Ich würde auch GIFBrew empfehlen, womit ich GIFs erstelle. Es bietet viele Optionen, um das GIF auf die richtige Größe/Qualität abzustimmen.
https://geo.itunes.apple.com/us/app/gif-brewery-3-video-to-gif/id1081413713?mt=12&at=11lMug&ct=jns-linkshare
WebKit und Chrome erlauben nun die automatische Wiedergabe von Videos auf Mobilgeräten, wenn das Attribut
mutedgesetzt ist, was Phil in etwa einem Jahr freuen dürfte.Guter Artikel Chris.
Seit Wes Bos ein Video über seinen GIF-Workflow veröffentlicht hat, benutze ich ScreenFlow zum Bearbeiten und Erstellen von animierten GIFs.
http://wesbos.com/animated-gif-workflow/
Sehr bald wurde ScreenFlow aktualisiert und exportiert nun animierte GIFs.
http://www.telestream.net/screenflow/whats-new.htm
Wann immer ich kann, bevorzuge ich kleine MP4s anstelle von GIFs. Wie immer, es kommt darauf an...
Wenn Sie eine ziemlich nette Web-Oberfläche für Webcam-GIFs oder zum Remixen anderer GIFs wünschen, gibt es immer https://giflr.com. Es erlaubt Ihnen, zu zeichnen oder Beschriftungen hinzuzufügen.
Was ist mit GIF-Software wie GIF Movie Gear und GIFmation passiert? Alle GIF-Apps sind jetzt nur noch Filmkonverter und einfache Animatoren wie Photoshop. Es gibt keine Möglichkeit, die einzelnen Eigenschaften jedes Frames wie lokale Paletten und Frame-Disposal zu bearbeiten, was es Ihnen ermöglicht, die volle Kraft von GIFs bei geringerer Dateigröße zu nutzen.
Wenn Sie, wie ich, unter Windows arbeiten, können Sie RecordIt verwenden, das auch für Mac verfügbar ist http://recordit.co/
+1 Ich liebe Recordit, und übrigens, ich bin auf Mac
Ooh Recordit sieht tatsächlich ziemlich gut aus. Danke fürs Teilen!
+1 für Recordit, nutze es auf Mac und Pic.
Ich werde jedoch LICEcap ausprobieren, da es manchmal praktisch ist, das Fenster zu bewegen, anstatt ein größeres GIF mit redundanten Bereichen zu erstellen
Ich fühle mich verpflichtet, den OG der GIF-Erstellung zu teilen, Microsoft GIF Creator https://en.wikipedia.org/wiki/Microsoft_GIF_Animator
Großartig. Super cool, jetzt habe ich alles, was ich brauche, um mit Gifs „gruseliger“ zu sein!!
Wie wäre es mit Infografiken ... Denken Sie, Sie können etwas über Infografiken machen?
Hallo Chris — was ist mit GIFV??? Sieht aus wie eine sehr gute Option, die 2014 von Imgur eingeführt wurde, aber es gibt sehr wenig darüber… hat mp4 und webm Fallbacks integriert, scheint effizient… warum die mangelnde Aufmerksamkeit?
Einführung durch Imgur: http://blog.imgur.com/2014/10/09/introducing-gifv/
Ein bisschen mehr darüber von Reddit: https://np.reddit.com/r/HighQualityGifs/comments/4qxl6o/are_you_ready/d4x5xj1?context=3
Ich sehe keine Links zum eigentlichen Projekt oder Software oder Repository oder irgendetwas in diesem Artikel. Scheint aber einige clevere Ideen zu geben.