Erstellen eines App-Demo-GIFs zur Verwendung auf einer Website

Ich versuche, ein 8 Sekunden langes GIF zu erstellen, das 3 verschiedene Seiten einer von mir erstellten App zeigt. Ich benutze Reflektor 2 zum Aufnehmen und dann Quicktime, um nur den Bildschirm aufzuzeichnen (Reflektor nimmt mit dem umrandeten Gerät auf). Von dort aus habe ich mehrere MP4-zu-GIF-Tools verwendet, aber die Datei ist immer noch etwa 4 MB groß. Ich nehme an, es ist erwähnenswert, dass meine Bildabmessungen etwa 300 px breit und 700 px hoch sind.

Irgendwelche Tipps zum Erstellen oder Speichern solcher GIFs für die Website-Nutzung?

Danke schön!

Welche FPS möchtest du erreichen? Müssen Sie das Filmmaterial nach der Aufnahme bearbeiten? Auf welche Weise?

Antworten (3)

Wenn Sie keine Gesten verwenden müssen, können Sie den iOS-Simulator verwenden, um die App zu präsentieren, und etwas wie Screenflick , um sie aufzuzeichnen. Screenflick kann auch den Mauszeiger aus der Aufnahme entfernen oder optional anzeigen, wo geklickt und getippt wurde (andere Bildschirmaufzeichnungs-Apps können ebenfalls verwendet werden, einschließlich QuickTime). Das bedeutet, dass Sie kein physisches iOS-Gerät oder Reflector benötigen, um die App aufzuzeichnen. Sie benötigen den Quellcode, damit Sie die App jedoch im iOS-Simulator ausführen können.

Wenn Sie etwas auch nur im Entferntesten Komplexes zeigen, könnte es sich lohnen, eine Videodatei auf der Website anstelle eines GIFs zu verwenden. Videodateien werden in der Regel kleiner und haben eine bessere Qualität für längere und größere Inhalte.

Wenn Sie wirklich ein GIF möchten, ist Photoshop meiner Meinung nach der beste Weg zur Optimierung, normalerweise mit diesen Techniken und Schritten.

  1. File→ Import→ Video Frames to Layers.
  2. Wenn die aufgezeichnete Videodatei 60 fps oder 30 fps hat, können Sie Photoshop anweisen, nthbeim Importieren nur jeden Frame zu verwenden. Sie können beim Importieren auch den Anfang und das Ende des Videos zuschneiden.
  3. Das Löschen identischer Frames und das Festlegen einer Frame-Verzögerung kann dazu beitragen, die Anzahl der Frames im GIF zu reduzieren.
  4. Verwenden Sie beim Speichern File→ Export→ Save For Web (Legacy)und experimentieren Sie mit der Anzahl der verwendeten Farben. Wenn die App große Flächen mit der gleichen Farbe hat, kommen Sie vielleicht mit 128, 64 oder sogar 32 Farben davon.

Wenn Ihr .gif zu groß ist, müssen Sie entweder die FPS oder die Auflösung verringern. Da 700x300 ziemlich klein ist, sollten Sie überprüfen, ob die FPS ziemlich niedrig sind (abhängig von Ihrer Animation sollten 15-20 fps in Ordnung sein).

Sie könnten eine .mp4 mit H.264-Kodierung anstelle von .gif verwenden, um eine bessere Qualität und vielleicht sogar eine kleinere Dateigröße zu erhalten.

Danke für die Antwort, ich habe mit den FPS in der Konvertierungsphase von mp4 zu GIF herumgespielt und sie sogar auf 8 FPS heruntergeregelt, konnte sie aber immer noch nicht unter 4 MB bringen.
Wenn dies der Fall ist und die Verwendung von .mp4 nicht hilft, müssen Sie eine 4-MB-Datei in Betracht ziehen.
@KCW, Sie könnten vielleicht Standbilder speichern und mit CSS3 oder Javascript animieren.

Sie können versuchen, das GIF mit ImageMagick, gifsicle oder http://ezgif.com/optimize zu komprimieren

Wenn es sich um ein GIF handelt, das eine App zeigt, gibt es wahrscheinlich große Bereiche des GIFs, die sich nicht in jedem Bild ändern, also könnten Sie als Erstes die Option „Transparenz optimieren“ mit einem Fuzz-Faktor von 3 % oder 5 % ausprobieren. Bei einigen Bildern wirkt es Wunder, aber die Ergebnisse hängen stark vom jeweiligen Bild ab. Danach können Sie die verlustbehaftete Komprimierung des resultierenden Bildes ausprobieren.

Wenn Sie einen Link zu dem Video bereitstellen können, kann ich versuchen, die beste Methode herauszufinden.

Erstellen eines App-Demo-GIFs zur Verwendung auf einer Website
AntwortenHierDatenschutz-Bestimmungen1y, 0v