En esta entrada voy a hacer una pequeña guía o tutorial para explicar cómo crear GIFs animados a partir de vídeos, ya sea la secuencia completa o sólo una parte de la misma, y sin tener siquiera que descargar el vídeo. Es decir, veremos cómo “extraer” o “sacar” un momento concreto de un vídeo cualquiera que veamos en internet, de YouTube por ejemplo o de cualquier otro sitio, obteniendo dicha secuencia en formato GIF. Es algo muy usado actualmente de cara a compartir momentos especiales o divertidos en las redes sociales. Y todo ello con software 100% gratuito, sin coste alguno por nuestra parte.
Pequeña introducción sobre el formato GIF.
Actualmente el formato GIF está viviendo una segunda juventud, tras su gran éxito en los comienzos de la era de internet a finales del siglo pasado. El motivo de esta renovada utilización de los GIF no es otro que su excelente compatibilidad: casi todos los navegadores, incluyendo los de móviles (smartphones, tablets, etc…) lo soportan.
El motivo de ello ya está comentado, y se debe a la gran antigüedad de este tipo de archivos de imagen. Como ya vimos en el artículo “Qué formato o tipo de imagen es mejor para cada trabajo gráfico”, el formato GIF no es más que un formato de imagen, como los famosos JPG, PNG, etc… (ver artículo antes señalado). Un GIF no es más que una imagen ordinaria, que en caso de estar animada lo que hace es mostrar una tras otra las imágenes que contenga. Es por tanto una especie de galería de imágenes con reproducción automática.
Al ser un formato tan antiguo, de los primeros que aparecieron (fue creado por la empresa CompuServe en 1987, siendo incluso anterior a los JPG si no recuerdo mal), su compatibilidad es casi total. Los navegadores llevan décadas usando los GIF, por lo que se mostrarán sin problemas en casi cualquier lugar de internet. Sólo algunos navegadores para móviles muy concretos podrían no soportarlos (y no hay duda de que estarán trabajando en solucionarlo).
En esto el GIF animado presenta una enorme ventaja respecto al vídeo FLV (animaciones de Flash muy habituales en los banners o anuncios publicitarios de las páginas web). El formato FLV es mucho menos compatible, pues precisa la instalación de complementos (el famoso aviso de “vd. necesita actualizar su versión de Flash”), y esto no ocurre con el GIF. Como digo es como si fueran imágenes JPG “corrientes y molientes”. No se precisará nunca ninguna actualización, pues todos los navegadores lo soportan de forma nativa. De hecho y por eso mismo, el formato GIF es también muy habitual en los ads publicitarios, siendo todavía 20 años después uno de los más usados (y no me extraña dadas sus ventajas).
Lo mismo puede decirse de los GIF respecto al vídeo HTML5 o cualquier otro formato de vídeo puro. Siempre serán menos compatibles.
Los GIF animados, tras su gran éxito inicial en los ‘90, pasaron de moda debido a la mala fama de “horteras” que se crearon. Pero esto no fue culpa de los GIF, por supuesto, sino del diseño web poco profesionalizado de la época (nada que ver con la actualidad). Todos los que tengan ciertos años recordarán aquellas viejas páginas web, llenas de colores estridentes y animaciones horribles (pequeños gatitos girando, lucecitas, estrellitas, etc…). Todas esas imágenes eran gifs animados. El abuso totalmente kitsch de esos pequeños elementos condujo directamente al auge de las animaciones en Flash que vinieron después. ¿Se acuerdan de esas páginas web enteramente hechas en Flash, aquellas pesadas interfaces gráficas? Eso sí que ha caído en desuso de forma casi absoluta, pues todo eran inconvenientes (mucho peso, los buscadores no podían acceder, etc…).
Además de al mal gusto, aquellos pequeños gifs horteras (los gatitos, estrellitas y demás), se debían a la limitada cantidad de KB que podía usarse, dadas las precarias conexiones por módem telefónico de la época (aquellos gifs eran imágenes muy pequeñitas). Actualmente en cambio, dados los anchos de banda que se han alcanzado, ya pueden usarse imágenes mucho más grandes, de varios MB incluso, lo que ha traído de vuelta el uso del GIF. Pero ahora no tienen nada de “horteras”, todo lo contrario. Ya podemos poner por ejemplo un fragmento de una película concreta o ese famoso chiste que tanta gracia nos hizo, y además con un tamaño de imagen respetable. Se han abierto por tanto de forma completa a la libre creatividad, diseño y arte más avanzados. Puede decirse que únicamente les falta el sonido, en lo demás es un formato redondo.
Pueden verse muchos ejemplos de GIFs animados de calidad en muchos sitios, como EliteGIF y otros, así como por supuesto en las redes sociales. Especialmente en G+ pueden verse muchísimos GIFs, siendo esto sin duda uno de los puntos fuertes de dicha red social (comparada por ejemplo con Facebook).
Eso sí, tal y como vamos a ver, el tamaño final en KB del GIF es una parámetro fundamental, pues aunque los anchos de banda han mejorado exponencialmente, todo tiene sus límites. Además de ello, el tiempo de carga de una página web es un parámetro importante de cara al SEO o posicionamiento en los buscadores (si nuestra web tarda mucho en cargar caerá en la lista de resultados, al dar una peor experiencia al usuario). Así pues, aunque a día de hoy pueden hacerse –y se hacen- maravillas con los gifs, siempre habremos de optimizar al máximo su tamaño (en dimensiones y duración). No recomiendo en ningún caso usar animaciones de más de 2-3MB. Incluso para compartir en las redes sociales.
En este tutorial, que empieza a continuación, tendremos muy en cuenta este aspecto, no os preocupéis.
Tutorial para crear GIFs animados a partir de vídeos (completos o fragmentos), usando software gratis y sin tener que descargar el vídeo.
Bien, de todas las herramientas que he probado –y han sido bastantes- la que voy a recomendar es GifCam, un pequeño programita muy sencillo de usar y totalmente gratuito. Me gustan de él dos cosas (además del hecho de que sea gratis): viene ya optimizado “de fábrica” y su uso es sencillísimo. Como ya he comentado no será necesario descargar el vídeo en cuestión, sencillamente podremos capturar la parte que nos interesa (incluso centrándonos en una zona concreta de la pantalla). Esto hace que crear un GIF con esta aplicación gratuita sea una tarea muy rápida y práctica.
GifCam es un programita muy sencillo, de apenas 700kb, obra del desarrollador bahraniapps.
El enlace anterior es hacia su blog. Para ver el artículo concreto en el que explica todo lo relacionado con el programa y contesta a las preguntas de los usuarios, usar este: GifCam.
Dado que dicha explicación, así como la conversación con los usuarios, está íntegramente en inglés, aportaremos aquí un tutorial breve sobre el programa en español. Para el que no encuentre el enlace de descarga (está al final del texto explicativo), puede usar también el siguiente enlace, facilitado por el propio autor en su web: descargar GifCam. Tal y como el propio bahraniapps comenta, dicho enlace es el oficial y el mejor para descargar la aplicación, pues en otros sitios (estilo Softonic, etc…) puede incluir elementos ajenos (como barras para el navegador que se instalan solas, etc…). Como digo este programa es muy sencillo, de menos de 1MB, y no requiere siquiera instalación. Sencillamente hacemos clic en el ejecutable y arrancará, sin más (es compatible con Windows XP, 7 y 8).
Así pues, basta con descargar el archivo y ejecutarlo. Se nos abrirá entonces una ventana con el siguiente aspecto:
La interfaz presenta diversos botones, pero como digo ya está muy bien optimizado “de fábrica” en cuanto a la calidad del GIF resultante. He hecho muchas pruebas y lo he comprobado; no recomiendo modificar los parámetros por defecto. De esta forma, en la mayoría de ocasiones bastará con pulsar el botón de “Rec” para empezar a grabar, y el de “Stop”, que aparece en el mismo sitio tras pulsar “Rec”, cuando queramos parar.
Téngase en cuenta que lo que se ve arriba en la pantalla del programa es el fondo de mi escritorio, puesto que en realidad ésta es transparente. Simplemente se ve lo que haya detrás. Esto está pensado para ponerlo sobre el vídeo que nos interese (por ejemplo de YouTube o cualquier otro sitio), ajustar el tamaño de la ventana, y empezar a grabar directamente. Sencillo, ¿verdad? Ya dije que era un programa útil y práctico.
El tamaño de la ventana en píxeles aparece en los números de arriba, junto al nombre de la aplicación. En la imagen anterior, por ejemplo, puede verse que la ventana ocupa 294×233 píxeles. Este número cambiará si modificamos el tamaño de la ventana. Es muy importante este dato, puesto que dicho tamaño en píxeles será el tamaño del gif resultante, lo que junto a la duración de la animación determinará el tamaño final del gif en Kb (o megas, si hacemos un GIF muy grande y largo, cosa que no recomiendo por las razones de tiempo de carga antes señaladas).
Así pues, para hacer nuestro GIF a partir de un vídeo, bastará con situar la ventana de GifCam sobre el mismo, ajustar el tamaño y empezar a grabar. Por ejemplo, si sitúo la aplicación sobre mi blog (concretamente en una entrada que muestra un vídeo de YouTube), quedaría algo como esto:
Una vez ajustada la ventana (en este caso es de 425×232 píxeles), solo queda darle a “Rec” y luego a “Stop” (mismo botón). Si nos equivocamos no pasa nada, podemos volver a repetir el proceso eligiendo «New».
El siguiente paso será darle a “Save”, para guardar el archivo de formato GIF a partir de lo capturado. Si desplegamos las opciones podremos ver que hay varias (mayor o menor cantidad de colores, escala de grises, FPS o frames por segundo, etc…). Como he dicho el programa está bien optimizado, de forma que si quitamos colores o frames (fotogramas)/segundo tampoco ahorraremos muchos KB (es mejor hacer animaciones más cortas y a menores tamaños de ventana para eso).
*Nota: Un GIF animado no es más que una sucesión de imágenes en formato GIF, todas con el mismo tamaño, que van apareciendo una tras otra. Si elegimos una gran cantidad de fotogramas/segundo o FPS añadiremos muchas imágenes casi iguales a la serie, con lo que aumentará mucho el tamaño de archivo en KB o “peso” del mismo. En la mayoría de ocasiones el resultado será inapreciable, con lo que no tendrá sentido hacer esto.
Así pues, bastará con darle a “Save” y guardar nuestro archivo, que será ya un GIF animado sacado de la escena capturada, listo para publicar en las redes sociales, páginas web, foros, blogs, etc… Por ejemplo yo he hecho éste:
Como puede verse, se trata de una animación de unos 3-4 segundos, con un tamaño de 250×200 píxeles. El archivo pesa 266 Kb, lo que está bien pues es moderadamente ligero y no retrasará mucho el tiempo de carga de la página. Se puede jugar con todos estos parámetros, pero en líneas generales no recomiendo hacer animaciones de más de 5 segundos, así como no usar tamaños mayores a los 400×400 píxeles (o superficie equivalente). Como digo, archivos de más de 2-3MB deberíamos pensar bien si ponerlos o no (especialmente si hay varios GIF).
*Nota2: Incluso las redes sociales más robustas se resentirán en el tiempo de carga si aparecen juntos varios GIF muy grandes. Por cierto, actualmente hay todavía redes sociales que no soportan el formato GIF animado, como por ejemplo Facebook. Otras como Google+ los soportaron desde el principio, y es un gran factor de éxito para ellos pues son muy populares y usados allí. Si el gif es para colocar en una web o blog, el tema del tiempo de carga se torna vital. No se debe perder de vista si no queremos que el visitante se aburra de esperar y abandone la página, cayendo además el posicionamiento de la misma en los buscadores.