Esta es una guía para hacer buenos GIFS en loop o cinemagraphs. El proceso es una combinación de dos disciplinas: hacer el loop y hacer el GIF.
Es importante tener en cuenta que en esta guía, ambos pasos se realizan con el software Adobe Creative Suite. Cualquier software de edición de video de nivel prosumidor o mejor debería ser capaz de hacer el loop con la lógica presentada aquí. Voy a utilizar Photoshop para hacer el GIF, ya que me parece la herramienta más completa. Otros generadores de GIFs posibilitan menos control pero tienen opciones similares, por lo que puedes experimentar con ellos si no tienes Photoshop.
Pero primero demos un poco de contexto. La idea de usar un video en loop es presentar un momento intemporal con un poco de magia. También me parece que este formato se presta a ciertos temas.
Hay algunas cosas a tener en cuenta antes de empezar. Como formato, los GIFs no son la manera más limpia de presentar el movimientos en loop en la web. Para que se cargue con una velocidad fiable, la imagen debe ser inferior a 1 MB, lo que a menudo significa que la animación está limitada a 20 fotogramas, el tamaño del fotograma está limitado a 600 píxeles, y la imagen estará sujeta a compresión.
Entonces, ¿por qué molestarse en trabajar en este formato? Por su accesibilidad. En el momento de escribir este documento, el GIF es el único formato de archivo que se reproducirá automáticamente en cualquier navegador. El video HTML5 permite realizar loops de mayor resolución con duraciones más largas, pero los dispositivos móviles de Apple específicamente prohíben la reproducción automática de cualquier tipo de video. Esto significa que una gran porción de tu audiencia podría perderse lo que se supone que es una sutil y mágica adición de movimiento a tu historia.
Recuerda que el GIF es solo la mitad del proceso; se trata realmente solo del método de creación del loop.
Hacer un buen loop:
- Todo empieza en la cámara.
Lo principal que necesitas aquí es brevedad y estabilidad. Cuando filmes, busca movimientos recursivos. Podría ser el viento que hace crujir un árbol, el humo que se levanta, alguien que parpadea o los coches que pasan cerca. Mantente inmóvil*. Lo mejor es usar un trípode, pero las manos firmes y un estabilizador de imagen en la lente suelen ser suficientes. Los loops decentes también suelen emerger orgánicamente del rodaje de historias en video, por ejemplo, del tiempo de inactividad entre las preguntas de una entrevista.
* Hay algunos casos en los que esta regla puede romperse
Lleva los clips a un programa de edición no lineal (yo uso Premiere).
Busca el loop más completo
Esto varía según el tema, y hay dos tipos de movimientos a buscar: el cíclico y el oscilante. Has visto a estos últimos como boomerangs; no suelen ser efectivos para hacer un loop sutil y por lo general alargarán tu clip, lo que afecta el tamaño eventual del archivo GIF. El primero es mucho mejor para hacer un gran loop.
Cíclico: busca momentos al principio y al final del clip que sean iguales.
Oscilante: encuentra momentos con movimiento que permitan ocultar la repentina inversión. Los retratos suelen hacerse solo con este método.
Construye el loop
Cíclico
- Copia y pega el clip para que se superponga a sí mismo.
- Añade una transición. La función “dissolve” suele conseguirlo.
- Recorta el extremo final y, a continuación, retira la misma longitud del extremo del inicio. Esto hará que el final del loop coincida con el inicio.
- Trabaja en él. Si vez un salto, tal vez puedes cambiar el timing para hacer una transición más suave.
Oscilante
- Copia y pega el clip uno tras otro.
- Retrocede el segundo clip.
- Quita un cuadro del final de cada clip. Ahora el principio y el final de cada clip tiene el mismo cuadro. Esto significa que el mismo cuadro se reproducirá dos veces seguidas y dará lugar a una pausa.
** En algunos movimientos el borrado puede funcionar mejor.
Prueba
En este punto, podrás copiar y pegar tu secuencia para revelar la naturaleza de tu loop. Si se ve bien, funcionará sin problemas cuando lo subas. A veces encontrarás movimientos irreconciliables en el fondo que tendrás que detener después.
Exporta
Me gusta exportar en full HD, aunque empaquetarlo como GIF lo romperá. Nunca sabrás cuándo vendrá un archivo de tamaño completo que se reproduzca automáticamente (o si alguna vez quieres hacer un loop offline).
Aquí hay una carrete de archivos en loop procesados para darte una idea de cuán breves que pueden ser. Haz clic aquí para ver todas las imágenes finales.
Exportar como GIF:
Uso el Photoshop CC 2016, pero cualquier versión funcionará.
File > Import > Video Frames to Layers
Elige tu archivo de video. Toma nota de la duración del clip.
Selecciona el rango
Mi regla de oro es "limítate a cada" número de fotogramas en función de la duración del clip. Tomo generalmente la duración y agrego uno, a menos que el clip sea realmente breve. En ese caso, un segundo es lo suficientemente breve como para importarlo de principio a fin. Recuerda que en esta etapa estamos trabajando para limitar el tamaño del archivo. La duración del clip es el factor más relevante en el tamaño del archivo y, como resultado, debemos limitar el número de fotogramas.
Reduce el tamaño del archivo
En esta etapa tenemos algunas opciones para disminuir anticipadamente el tamaño eventual del archivo (para mantenerlo menor a 1 MB).
- Congela el movimiento copiando y pegando áreas fijas de la imagen. Asegúrate de aumentar los espacios para recortar tu selección y de que la capa pegada esté por encima.
- Elimina fotogramas. La cantidad máxima de fotogramas depende del porcentaje de tu imagen que se pueda congelar. Con la mayor parte de la imagen cubierta en este caso voy a adivinar que los 15 originales están bien. Nunca he ido por encima de los 20 sin tener que usar la compresión, que más tarde resulta ser muy perjudicial.
Establece el timing
El timing puede ser un paso un tanto difícil porque los diferentes navegadores reproducen a diferentes velocidades. Dicho esto, funcionará apenas un poco más rápido online de lo que ves en Photoshop, de modo que un poco de lentitud en el programa no es mala.
Layer > New Adjustment Layer
Es buena idea consolidar tus negros y blancos con una capa de "niveles", ya que la compresión posterior limitará el rango de colores.
File > Export > Save For Web (Legacy)
Este es el paso final y posiblemente el más complicado. Estas opciones en la ventana controlan varias características de tu nuevo GIF:
Todo esto es cálculo, algo así como: File size = Loop Length x Image Size x Colors x Dither x Lossy
El primer paso es cambiar el tamaño de la imagen. Yo uso 600px.
A continuación hay tres valores cuya importancia varía según la imagen. Los siguientes son ejemplos de GIFs exportados con cada opción explicada para mostrarte lo que sucede.
-Lossy: esta es la compresión general. Cero (0) significa que no hay compresión y cada valor creciente supone una imagen más borrosa. Cambiar de 0 a 5 puede hacer una gran diferencia en el tamaño del archivo, sin comprometer mucho la calidad. Este es un ejemplo de 60 con pérdidas solo para demostrar lo difuso que puede ser.
- Dither: esto determina qué tan puntillados pueden ser los colores. 100% es el más puntillado. Cualquier cosa inferior revelará bandas donde debería existir un gradiente.
-Colores: limitados a 250. Te sorprenderás de los pocos que necesitas. Este GIF tiene 100% Dither, 0 Lossy y 40 colores.
Debido a que escogí un clip muy corto, este GIF podría ser exportado sin comprometer ninguno de los controles de imagen. Aquí está en 0 Lossy, 100% dither y 256 colores. Es de 882KB.
Aprieta “save” y ya está. Si deseas ver más posibilidades entra en gifumentarian.tumblr.com/archive.
Todos los cinemagraphs usados en este post fueron producidos para Denverite.com.
Imagen con licencia Creative Commons en Flickr, vía Andrew Hitchcock.