Configuración de la grabación de ScreenFlow.

Primero, asegúrate de que tienes tu prototipo en pantalla. Luego, selecciona la pantalla que vas a grabar y pulsa el botón rojo para empezar a grabar toda la pantalla. En este tutorial, voy a grabar una interacción hecha en Framer, por lo que mi ventana de vista previa se establece en pantalla completa. Es posible recortar la grabación al tamaño perfecto más tarde.

Crear un bucle perfecto

Una cosa que siempre nos esforzamos por conseguir es un GIF con un bucle perfecto, y una buena manera de ejecutar esto es asegurarse de que el último fotograma de su GIF es exactamente el mismo que el primer fotograma. Esto evita los saltos, lo que hace que el GIF fluya correctamente cuando se reproduce en repetición.

Si tu animación contiene un cursor de ratón y tienes una mano firme, puedes crear fácilmente un bucle perfecto posicionando el cursor del ratón a mano. Utiliza señales visuales para recordar dónde has empezado y dónde tienes que terminar.

En mi ejemplo he hecho uso de un cursor táctil animado para obtener el mejor resultado justo dentro del prototipo real que voy a grabar. Descarga este ejemplo para ver cómo puedes añadir un cursor táctil animado a tus propios prototipos utilizando Framer.

Estados activo e inactivo para el cursor táctil.

Añadir efectos para aderezarlo

Ahora que has hecho tu grabación en ScreenFlow, puede que quieras ajustarla para centrarte en lo que quieres destacar en el GIF. Para ello, ve a Archivo > Ajustes del documento. En este tutorial, vamos a compartir a Dribbble en la Web, por lo que 800×600 es el tamaño óptimo. Verás que las dimensiones de la grabación realizada anteriormente son demasiado grandes. Para jugar con la escala de la grabación, selecciona el clip y haz clic en la parte superior derecha de ScreenFlow.

Escala tu clip para que se ajuste al tamaño del documento usando el deslizador de escala.

Una vez que su grabación esté en su lugar, asegúrese de recortar el principio y el final arrastrando el clip (recuerde, ¡queremos crear el bucle perfecto!).

En este punto su vídeo está listo para ser exportado tal cual, aunque le recomendamos que añada algunos toques finales. ScreenFlow le permite añadir un efecto de zoom suave para resaltar detalles específicos en su vídeo. Para ello, coloca el depurador de vídeo sobre el punto en el que quieras añadir un efecto de zoom. A continuación, haz clic en el botón de acción de vídeo en la esquina superior derecha de Screenflow y haz clic en + Action. Seleccione un buen estado inicial y final para la acción utilizando los controles de escala que utilizamos anteriormente. Asegúrese de repetir estos pasos para el efecto de zoom out.

Defina animaciones como el zoom añadiendo acciones de vídeo.

Pro-tip: Cuando compartas un GIF en sitios como Dribbble, ten en cuenta que el primer fotograma de tu GIF se mostrará como la miniatura de la publicación, así que asegúrate de utilizar el fotograma más interesante visualmente.

Exportación desde ScreenFlow

Ahora que nuestro clip está pulido y perfeccionado, es el momento de exportarlo. Screenflow ofrece un preajuste para exportar el clip directamente como un GIF, aunque sugerimos evitar esta ruta porque su GIF terminará como un archivo de gran tamaño muy comprimido.

En su lugar, vamos a exportar un archivo .mov sin pérdidas. Vaya a Archivo > Exportar > Preajuste > Sin pérdidas – ProRes con Alpha.

Activar el desenfoque de movimiento a menudo puede hacer que su GIF se sienta aún más suave, especialmente con el efecto de zoom que aplicamos.

Desenfoque vs. Desenfoque. Sin desenfoque

Optimización con Claquette

Claquette al igual que Screenflow ofrece la posibilidad de grabar todo o cualquier parte de tu escritorio y recortar, cortar y exportar esas grabaciones a formatos GIF o de vídeo. Puedes comprar Claquette en la Mac App Store por 9,99 dólares

La mayor ventaja de Claquette sobre Screenflow es que te da un control granular sobre la calidad de tu GIF y por tanto un mejor tamaño de archivo con una compresión increíble. Esto le permitirá crear GIFs de alta calidad que tienen un tamaño de archivo óptimo.

Al igual que hicimos en Screenflow, seleccione la pantalla que va a grabar y pulse grabar en Claquette. Reproduce el vídeo que acabas de exportar en QuickTime y pulsa CMD + 1 para reproducir el vídeo en su tamaño real.

Configuración de la grabación en Claquette.

Cuando el clip termine de reproducirse, detén la grabación para empezar a recortarlo. Mueva el control deslizante a la izquierda y a la derecha del clip hasta el principio y el final del mismo. En cuanto al tamaño de recorte, utilice el tamaño que también eligió para su clip en Screenflow: 800 x 600. Mueve el área de recorte al centro x:0 y:0 y pulsa recortar.

Recortar y recortar clips en Claquette.

Encontrar el equilibrio adecuado

Aquí hay tres cualidades del GIF que tienen una gran influencia en el tamaño del archivo:

• Cantidad de colores
• Cantidad de movimiento
• Duración

En la mayoría de los casos, si su GIF sólo contiene una de estas cualidades, puede aumentar la calidad. Asegúrese de establecer la anchura y la altura al 100% y de realizar un bucle continuo. Si tu GIF contiene muchos colores, te recomiendo encarecidamente que mantengas los colores a 256 y reduzcas otros aspectos como los FPS o la calidad de cuantificación.

Configuración de exportación de Claquette.

No hay un verdadero santo grial para estos ajustes, así que cuando compartimos en Dribbble (máximo 8mb) siempre intentamos subirlos a los ajustes más altos posibles, luego exportamos y vemos con qué tenemos que trabajar. Sigue repitiendo ese proceso de exportación hasta que encuentres un equilibrio entre tamaño y calidad que se adapte a tus necesidades.

Pro-tip: Aunque Dribbble dice que el límite de tamaño es de 8mb, en realidad es de 8,3mb. Cuando trabajes con gifs grandes y coloridos, descubrirás rápidamente por qué 0,3mb son importantes.

Ahora que has leído la guía, esperamos que te ayude a convertir tus animaciones de Framer en los mejores GIFs posibles para presentar tu trabajo en tu portafolio, Dribbble y otros lugares. No podemos esperar a ver lo que creas, así que asegúrate de etiquetar tu publicación con #MadeWithFramer para tener la oportunidad de aparecer en nuestro boletín semanal. Feliz creación

Mira el resultado final en Dribbble