Im Laufe der Jahre haben wir viele Fragen darüber erhalten, wie wir GIFs erstellen. Wir lieben GIFs, weil sie einfach weiterzugeben sind, in allen Browsern funktionieren und man sie in einer Schleife laufen lassen kann! Auf vielfachen Wunsch geben wir hier einen Überblick über unsere beiden bevorzugten GIF-Erstellungstools und unsere Arbeitsabläufe.

Bildschirm aufnehmen

Es gibt einige großartige Tools zur Bildschirmaufnahme. Wenn Sie einen Mac haben, können Sie Quicktime verwenden, das völlig kostenlos ist. In diesem Artikel werden wir ScreenFlow verwenden, eine kostenpflichtige Anwendung von Telestream.

ScreenFlow ist eine großartige Option für die Aufnahme, da es einen leistungsstarken Editor enthält, mit dem Sie Ihr GIF detailliert steuern können. Wenn Sie ScreenFlow öffnen oder auf „Aufnahme konfigurieren“ klicken, sehen Sie diesen Bildschirm.

Stellen Sie zunächst sicher, dass Sie Ihren Prototyp auf dem Bildschirm haben. Wählen Sie dann die Anzeige aus, die Sie aufzeichnen möchten, und drücken Sie die rote Taste, um die Aufzeichnung des gesamten Bildschirms zu starten. In diesem Tutorial nehme ich eine in Framer erstellte Interaktion auf, daher ist das Vorschaufenster auf Vollbild eingestellt. Es ist möglich, die Aufnahme später auf die perfekte Größe zuzuschneiden.

Erstelle eine perfekte Schleife

Eine Sache, die wir immer anstreben, ist ein perfektes Schleifen-GIF, und ein guter Weg, dies auszuführen, ist, sicherzustellen, dass das letzte Bild deines GIFs genau das gleiche ist wie das erste Bild. Das verhindert Sprünge und sorgt dafür, dass das GIF bei der Wiederholung richtig fließt.

Wenn Ihre Animation einen Mauszeiger enthält und Sie eine ruhige Hand haben, können Sie leicht eine perfekte Schleife erstellen, indem Sie den Mauszeiger von Hand positionieren. Verwenden Sie visuelle Hinweise, um sich daran zu erinnern, wo Sie angefangen haben und wo Sie enden müssen.

In meinem Beispiel habe ich einen animierten Touch-Cursor verwendet, um das beste Ergebnis direkt in dem Prototyp zu erzielen, den ich aufnehmen werde. Laden Sie dieses Beispiel herunter, um zu sehen, wie Sie mit Framer einen animierten Touch-Cursor zu Ihren eigenen Prototypen hinzufügen können.

Effekte hinzufügen, um die Aufnahme aufzupeppen

Nachdem Sie Ihre Aufnahme in ScreenFlow gemacht haben, möchten Sie sie vielleicht anpassen, um sich auf das zu konzentrieren, was Sie im GIF zeigen möchten. Gehen Sie dazu auf Datei > Dokumenteinstellungen. In diesem Lernprogramm werden wir das Bild auf Dribbble im Web veröffentlichen, daher ist 800×600 die optimale Größe. Sie werden feststellen, dass die Abmessungen der zuvor erstellten Aufnahme zu groß sind. Um die Skalierung der Aufnahme zu ändern, wählen Sie den Clip aus und klicken Sie auf die obere rechte Ecke von ScreenFlow.

Nachdem Sie die Aufnahme erstellt haben, schneiden Sie den Anfang und das Ende des Clips zu (denken Sie daran, dass wir eine perfekte Schleife erstellen wollen!).

An diesem Punkt ist Ihr Video bereit für den Export, obwohl wir empfehlen, ihm noch den letzten Schliff zu geben. ScreenFlow ermöglicht es Ihnen, einen sanften Zoom-Effekt hinzuzufügen, um bestimmte Details in Ihrem Video hervorzuheben. Positionieren Sie dazu den Video-Scrubber über dem Punkt, an dem Sie einen Zoomeffekt hinzufügen möchten. Klicken Sie dann auf die Schaltfläche Videoaktion in der oberen rechten Ecke von Screenflow und dann auf + Action. Wählen Sie mit den Skalierungssteuerelementen, die wir zuvor verwendet haben, einen schönen Anfangs- und Endzustand für die Aktion aus. Wiederholen Sie diese Schritte für den Auszoom-Effekt.

Pro-Tipp: Wenn Sie ein GIF auf Websites wie Dribbble teilen, denken Sie daran, dass das erste Bild Ihres GIFs als Miniaturansicht des Beitrags angezeigt wird. Stellen Sie also sicher, dass Sie das optisch interessanteste Bild verwenden.

Exportieren aus ScreenFlow

Nun, da unser Clip ausgefeilt und perfektioniert ist, ist es Zeit, ihn zu exportieren. Screenflow bietet eine Voreinstellung, um den Clip direkt als GIF zu exportieren. Wir empfehlen jedoch, diesen Weg zu vermeiden, da Ihr GIF als stark komprimierte, große Datei enden wird.

Stattdessen werden wir eine verlustfreie .mov-Datei exportieren. Navigieren Sie zu Datei > Exportieren > Voreinstellung > Verlustfrei – ProRes mit Alpha.

Wenn Sie die Bewegungsunschärfe aktivieren, wirkt Ihr GIF oft noch glatter, vor allem mit dem von uns angewandten Zoomeffekt.

Optimieren mit Claquette

Claquette bietet genau wie Screenflow die Möglichkeit, den gesamten oder einen Teil des Desktops aufzunehmen und diese Aufnahmen zu trimmen, zu schneiden und in GIF- oder Videoformate zu exportieren. Sie können Claquette im Mac App Store für $9.99

Der größte Vorteil von Claquette gegenüber Screenflow ist, dass es Ihnen eine granulare Kontrolle über Ihre GIF-Qualität und somit eine bessere Dateigröße mit erstaunlicher Kompression bietet. So können Sie qualitativ hochwertige GIFs mit optimaler Dateigröße erstellen.

Wie in Screenflow wählen Sie die Anzeige aus, die Sie aufnehmen möchten, und drücken in Claquette auf „Aufnehmen“. Spielen Sie das soeben exportierte Video in QuickTime ab und drücken Sie CMD + 1, um das Video in seiner tatsächlichen Größe abzuspielen.

Wenn der Clip fertig abgespielt ist, stoppen Sie die Aufnahme, um mit dem Zuschneiden zu beginnen. Bewegen Sie den Schieberegler links und rechts des Clips auf den Anfang und das Ende des Clips. Verwenden Sie für den Zuschnitt die Größe, die Sie auch für Ihren Clip in Screenflow gewählt haben: 800 x 600. Bewegen Sie den Zuschneidebereich in die Mitte x:0 y:0 und klicken Sie auf „Zuschneiden“.

Die richtige Balance finden

Hier sind drei GIF-Eigenschaften, die einen großen Einfluss auf die Dateigröße haben:

• Anzahl der Farben
• Anzahl der Bewegungen
• Duration

In den meisten Fällen, wenn Ihr GIF nur eine dieser Qualitäten enthält, können Sie die Qualität erhöhen. Stellen Sie sicher, dass Sie Breite und Höhe auf 100 % setzen und eine Endlosschleife durchführen. Wenn Ihr GIF viele Farben enthält, empfehle ich dringend, die Farben auf 256 zu halten und andere Aspekte wie FPS oder Quantisierungsqualität zu reduzieren.

Es gibt keinen wirklichen heiligen Gral für diese Einstellungen, daher versuchen wir beim Teilen auf Dribbble (max. 8mb) immer, die höchstmöglichen Einstellungen zu wählen, dann zu exportieren und zu sehen, womit wir arbeiten können. Wiederholen Sie den Exportvorgang so lange, bis Sie ein ausgewogenes Verhältnis zwischen Größe und Qualität gefunden haben, das Ihren Anforderungen entspricht.

Pro-Tipp: Auch wenn Dribbble eine Größenbegrenzung von 8 MB angibt, sind es tatsächlich 8,3 MB. Wenn du mit großen, bunten GIFs arbeitest, wirst du schnell herausfinden, warum 0,3 MB wichtig sind.

Nachdem du diesen Leitfaden durchgelesen hast, hoffen wir, dass er dir hilft, deine Framer-Animationen in die bestmöglichen GIFs zu verwandeln, um deine Arbeit in deinem Portfolio, auf Dribbble und anderswo zu präsentieren. Wir können es kaum erwarten zu sehen, was du kreierst, also stelle sicher, dass du deinen Beitrag mit #MadeWithFramer taggst, um die Chance zu haben, in unserem wöchentlichen Newsletter vorgestellt zu werden. Viel Spaß beim Gestalten!

Sehen Sie sich das Endergebnis auf Dribbble an