GIFs erstellen

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

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
Beispiel-GIF, aufgenommen in GIPHY CAPTURE

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

  1. Sie als Ebenen in eine einzige Photoshop-Datei legen
  2. Das Zeitleistenband öffnen und eine Keyframe-Animation erstellen
  3. Einen Keyframe für jede Ebene erstellen, in dem nur diese Ebene aktiviert ist
  4. Die Timing- und Einstellungen anpassen
  5. Für Web speichern

Dieses Beispiel hat Folgendes erzeugt

Ein 16 Sekunden langes GIF mit 800x582 bei nur 137K ist nicht schlecht.

Optimieren

Unabhängig davon, wie ich das GIF erstelle, jage ich es immer durch ImageOptim.