Crear un GIF de demostración de aplicación para usar en un sitio web

Estoy tratando de crear un GIF de 8 segundos de duración que muestre 3 páginas diferentes de una aplicación que he creado. Estoy usando Relector 2 para grabar, y luego uso Quicktime para grabar solo la pantalla (Reflector graba con el dispositivo bordeándolo). A partir de ahí, he usado varias herramientas de mp4 a GIF, pero el archivo todavía pesa alrededor de 4 mb. Supongo que vale la pena mencionarlo, las dimensiones de mi imagen son alrededor de 300 px de ancho y 700 px de alto.

¿Algún consejo sobre la mejor manera de crear o guardar GIF como estos para usar en el sitio web?

¡Gracias!

¿Qué FPS estás buscando obtener? ¿Necesitas editar el metraje después de grabarlo? ¿De qué maneras?

Respuestas (3)

Si no necesita usar gestos, puede usar el simulador de iOS para presentar la aplicación y algo como Screenflick para grabarla. Screenflick también puede eliminar el cursor del mouse de la grabación u, opcionalmente, mostrar dónde se hicieron clics y toques (también se pueden usar otras aplicaciones de grabación de pantalla, incluido QuickTime). Esto significa que no necesita un dispositivo iOS físico o Reflector para grabar la aplicación. Sin embargo, necesitará el código fuente, por lo que puede ejecutar la aplicación en el simulador de iOS.

Si está mostrando algo remotamente complejo, podría valer la pena considerar usar un archivo de video en el sitio web, en lugar de un GIF. Los archivos de video generalmente terminan siendo más pequeños y de mejor calidad para contenido más largo y más grande.

Si realmente quieres un GIF, creo que Photoshop es la mejor manera de optimizar, generalmente usando estas técnicas y pasos.

  1. File→ Import→ Video Frames to Layers.
  2. Si el archivo de video grabado es de 60 fps o 30 fps, puede decirle a Photoshop que solo use cada nthcuadro al importar. También puede recortar la parte superior y la cola del video al importar.
  3. Eliminar fotogramas que son idénticos y establecer un retraso de fotogramas en su lugar puede ayudar a reducir la cantidad de fotogramas en el GIF.
  4. Al guardar, use File→ Export→ Save For Web (Legacy)y experimente con la cantidad de colores utilizados. Si la aplicación tiene grandes áreas del mismo color, es posible que pueda usar 128, 64 o incluso 32 colores.

Si su .gif es demasiado grande, deberá reducir el FPS o la resolución. Dado que 700x300 es bastante pequeño, debe verificar que el FPS sea bastante bajo (dependiendo de su animación, 15-20 fps debería estar bien).

Puede usar un .mp4 con codificación H.264 en lugar de .gif para obtener una mejor calidad y tal vez incluso un tamaño de archivo más pequeño.

Gracias por la respuesta, jugué con el FPS en la etapa de conversión de mp4 a GIF, incluso lo reduje a 8 FPS, pero aún así no pude bajar de 4 MB.
Si ese es el caso y usar .mp4 no ayuda, deberá considerar tener un archivo de 4 MB.
@KCW, tal vez podría guardar imágenes fijas y animar usando css3 o javascript.

Puede intentar comprimir el GIF usando ImageMagick, gifsicle o http://ezgif.com/optimize

Si se trata de un GIF que muestra una aplicación, es probable que haya grandes áreas del gif que no cambien en cada cuadro, por lo que lo primero que podría probar es la opción "Optimizar transparencia" con un factor de borrosidad del 3 % o 5 %. Funciona de maravilla para algunas imágenes, pero los resultados dependen mucho de la imagen en particular. Después de eso, puede probar la compresión con pérdida en la imagen resultante.

Si puede proporcionar un enlace al video, puedo tratar de encontrar el mejor método.

Crear un GIF de demostración de aplicación para usar en un sitio web
RespuestasAquíPolítica de privacidad1y, 0v