Tabla de Contenidos
¡Los GIFs no son solo para gatos! En Baremetrics, usamos GIFs para anunciar y explicar nuevas funciones en Twitter e Intercom. Sígueme y te mostraré, de principio a fin, cómo crearlos para tu propio producto.
Esto no es territorio nuevo–otras empresas como Slack y Invision han estado creando GIFs increíbles por un tiempo y me sirvieron como inspiración para entrar en el juego también.
¿Por qué GIFs?
Entonces, ¿por qué usar GIFs para anunciar nuevas funciones? Simple–tienen una barrera de entrada baja. En Twitter, ver un GIF solo requiere un clic o un toque.
En Intercom, se reproducen automáticamente, lo que es una excelente manera de lograr que un usuario mejore tu mensaje en la aplicación.
Encontramos que incluir un GIF nos brinda mayor engagement en Twitter e Intercom, lo que la convierte en una excelente manera de llamar la atención sobre nuevas funciones y comprometer mejor a tus usuarios. ¡Hurra!
Está bien, estoy convencido. ¿Ahora qué?!
Para comenzar, necesitas tres cosas: Screenflow, Photoshop y una función nueva o existente para destacar.
Para mostrarte mi proceso para estos, te guiaré a través de la creación de un GIF de anuncio de función de cuenta. Estamos a punto de lanzar una función muy solicitada en Baremetrics: Cohortes de clientes (que puedes ver en acción en nuestro demo). ¡Vamos a comenzar y te mostraré el proceso que uso y algunos de los efectos que empleo para hacer un GIF súper increíble!
Preparándose para hacer tu GIF
Hay dos cosas básicas que necesitas hacer para prepararte para hacer un GIF excelente.
Elimina cosas innecesarias
Usa las herramientas de desarrollo de Chrome para eliminar los elementos de UI innecesarios para atraer mejor la atención del espectador a donde debe estar. Así es como hice el GIF del selector de fechas donde el calendario parece flotar en el espacio sin los elementos de UI circundantes.
Captura el video
A continuación: ¡captura el video! Esto es para lo que necesitas Screenflow.
¡Ten en cuenta los requisitos del GIF!
Lo sé, lo sé... quieres pasar a la parte divertida de la edición. Pero antes de que lo hagas, necesitas ser consciente de bastantes limitaciones del formato GIF.
Aprendí muchas de las lecciones de la manera difícil, pasando horas editando videos que se veían increíbles solo para descubrir que no se ven tan bien cuando intenté meterlos en un archivo GIF de 5MB. Ah sí, Twitter tiene un límite de 5MB para GIFs. Así que estos pasos son importantes.
- Usa la menor cantidad de colores posible. Por consideraciones de tamaño de archivo, tu GIF solo va a tener 256 colores para trabajar. Aislar el elemento de UI que deseas destacar en el paso anterior es útil aquí, ya que es probable que luego limites la cantidad de colores en el GIF.
- Evita transiciones que alteren los colores. Las transiciones que desvanecen elementos dentro/fuera lo hacen cambiando el color. Cuando desvaneces algo que es "azul", en realidad va a ser un montón de diferentes tonos de azul.
- Mantenlo bajo 10 segundos. No hay una regla estricta aquí, pero se vuelve difícil mantenerse bajo el límite de 5MB para Twitter una vez que superas 10 segundos.
¡Hora de editar!
¡Está bien! Es hora de tomar el metraje de captura de pantalla sin procesar y hacerlo bonito. Te voy a mostrar algunos de mis efectos favoritos que hago en Screenflow.
Estos se crean usando Video Actions. Piénsalo como si fueras un director de fotografía con una cámara de video. Estableces dónde deseas que la cámara comience el movimiento y dónde deseas que esté cuando termina. Esto te permite desplazarte por la pantalla o hacer zoom rápidamente en algo en lo que deseas enfocar la atención del espectador.
Zoom Zoom Zoom
El pan y la mantequilla de las capturas de pantalla: el zoom. Amplía para destacar algo en particular y hacerlo más visible para el usuario. Me gusta que mis zooms sean rápidos y ágiles y generalmente los configuro con una duración de 0.3 segundos.
La Revelación
Imagina a Vanna White revelando el Wheel of Fortune tablero. Así: 💁. Esencialmente eso es lo que estás haciendo aquí. Desplázate por lo que sea que estés destacando. Siéntete libre de hacer sonidos de "oooh" y "ahhh" mientras lo haces.
Perspectiva Sesgada
Usa esto con moderación. Es una herramienta en tu caja de herramientas y he notado que la gente tiende a exagerarla un poco. Quieres atraer la atención hacia tu contenido, no hacer que el espectador sienta que tiene la cabeza ladeada dentro de una Casa de Espejos.
Texto con Zoom
Ahora estamos comenzando a ponernos elegantes. Esta es una forma divertida de agregar un toque visual mientras aún no se agregan colores adicionales (y por lo tanto, tamaño de archivo).
Transición de Zoom a Color
¡Más toque visual divertido!
La gran revelación…
Y aquí está el producto final, que utiliza todos los efectos que detallé anteriormente.
Convertir a GIF
El siguiente paso es convertir tu archivo de video en un GIF. Estoy usando el método de Photoshop descrito por Andy Orsow en Invision quien preparó un excelente artículo sobre el tema, junto con otros consejos para hacer el GIF en sí. Te recomiendo que también lo consultes.
Importar a Capas de Video
Ve al Menú Archivo y elige Importar > Fotogramas de Video a Capas.
Selecciona Desde el Principio hasta el Final en el área Rango para Importar y asegúrate de que "Crear Animación de Fotogramas" esté marcada. Haz clic en Aceptar.
¡Exporta esa cosa!
El siguiente paso es ir al Menú Archivo Menú nuevamente y elegirExportar > Guardar para Web . En las versiones más nuevas de Photoshop tendrá Legacy
entre paréntesis. ¡Advertencia! Photoshop está a punto de volverse dolorosamente lento. Supongo que por eso esta función ahora se considera "Legacy".
Hay algunos ajustes con los que puedes jugar para ajustar el tamaño del archivo: Tamaño de Imagen y Colores siendo mis principales opciones.
Para Tamaño de Imagen Twitter redimensiona horizontalmente y recorta verticalmente todas las vistas previas de imágenes a una resolución de 440×220, así que no tiene sentido hacer tu GIF mucho más grande que eso. En este caso, elegí un ancho de 500 píxeles para que el GIF fuera un poco más grande cuando se use fuera de Twitter.
Si tuviste cuidado en mantener la duración de tu clip bastante corta, deberías poder establecer Color al máximo de 256. Reducir eso a 128 es una opción si tu GIF es una opción, pero resultará en un GIF de mucha menor calidad.
A medida que realizas ajustes en la configuración de exportación, puedes ver cuán grande será tu GIF final en la esquina inferior izquierda de la ventana. ¿Solo 2.2MB? ¡Excelente!
Cuando estés listo, haz clic en el gran botón azul Guardar .
Consejos y Recursos Adicionales
Los GIFs son una herramienta fantástica, pero no siempre son la mejor opción. Si, por ejemplo, estás incrustando clips cortos en tu sitio web o en una entrada de blog, tu mejor opción es algo como un vídeo de Wistia. Si hubiera usado GIFs para este post, habría tenido unos 50MB—no exactamente viable.
Aquí hay algunos otros recursos e inspiración para consultar.
- Documentación y tutoriales de Screenflow
- 7 consejos para diseñar GIFs animados impresionantes
- Tweet de GIF del Selector de fechas
- Tweet de GIF de desglose de ingresos
- Tweet de GIF de intervalos de datos
- Tweet de GIF de planes de archivo
- Tweet de GIF de anotaciones
