Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

Cómo crear GIF animados sin morir en el intento

GIF animados: Un repaso al formato, programas para crear GIF animados, capturar regiones de pantalla o incluso optimizarlos y reducir su tamaño.

Probablemente, Compuserve nunca imaginó que su antiguo formato GIF iba a resurgir de las cenizas y volver a ponerse de moda en Internet y redes sociales más de 25 años después de su creación.

Y es que, actualmente, el formato GIF tiene varias desventajas respecto a otros: cantidad de colores limitada, tamaño en disco mayor al de otros formatos de imagen, etc. Sin embargo, hay una simple característica que ha hecho que siga siendo único: puede mostrar imágenes animadas.

Eso, y por supuesto el hecho de estar tan extendido. Prácticamente cualquier programa reconoce este formato, a pesar de existir formatos alternativos más recientes y eficientes que también soportan animaciones, pero que por razones «políticas» no tuvieron tanta suerte en su extensión, como APNG o MNG.

Más info | La guía definitiva para reducir el tamaño de las imágenes

1. Introducción a los GIF animados

Los GIF animados fueron muy populares en la Internet de la época de los 90, con sus arrobas girando y carteles de «sitio web en construcción». Por aquel entonces, el formato GIF se vió envuelto en un problema de patentes, debido a que su implementación más común utilizaba el algoritmo LZW, que analizaba cadenas de texto para reducir el tamaño del archivo evitando las que se repetían más frecuentemente, algoritmo que suele ser utilizado muy a menudo en diferentes formatos de compresión.

Una vez caducada la patente, GIF quedó en tierra de nadie pero tampoco habían muchas razones para seguir utilizando un formato que se iba quedando obsoleto, por lo que fue perdiendo fuerza hasta los tiempos actuales, que se ha vuelto a popularizar, principalmente gracias a redes como Tumblr o Google+.

Un pequeño ejemplo de GIF animado sería el siguiente:

Un ejemplo de GIF animado con 16 una imagen que utiliza 16 colores: Leisure Suit Larry

Básicamente, un GIF animado está compuesto por varias imágenes (frames o fotogramas) con una duración establecida para cada uno. Además, también está la opción de que la animación se repita un número de veces determinado, ninguna o indefinidamente.

Otro detalle interesante de los GIF animados es que es posible definir un color como color transparente (en la imagen, ejemplificado en verde). Esto se aprovecha bastante bien en las animaciones, puesto que una forma de reducir el tamaño de la imagen es añadir en cada fotograma sólo las partes que cambian respecto a su fotograma anterior. De esta forma, toda esa información omitida reduce considerablemente el tamaño final del archivo.

Diferentes frames o fotogramas de un GIF animado: Varía el personaje, el cartel o el coche...

Obviamente, esta característica también es la culpable de que muchos visores de imágenes o aplicaciones (incorrectamente diseñados) no sean capaces de mostrar la animación del GIF de forma correcta, mostrando en su lugar líneas o cambios extraños.

Te preguntarás ¿Y cómo puedo crear un GIF animado?. Existen muchas y muy variadas aplicaciones para ello, sin embargo voy a basarme en una, que desde mi punto de vista es la más interesante, y luego ofreceré algunas alternativas:

2. Cómo crear un GIF animado con GIFCam

GifCam es una pequeña aplicación portable (no necesita instalación) que podemos utilizar a modo de «cámara de video». Todo lo que entre dentro de la región de su ventana, será capturado y guardado a GIF. Por supuesto, la ventana es redimensionable y podemos darle el tamaño que queramos, lo que lo hace muy práctico:

GIFCam captura al más puro estilo de otros programas para crear screencasts.

El control del programa es muy sencillo. A parte de redimensionar la ventana, tenemos cuatro botones, con los que podemos especificar ciertos parámetros o acciones:

  • Rec/Stop: Comienza o detiene la grabación. Si pulsamos en la flecha derecha nos aparecerá un menú donde podemos:
    • New/Open: Empieza una nueva grabación o abre un GIF ya existente.
    • 33/16/10 FPS: Velocidad a la que grabará la animación (Frames Por Segundo). Cuanto más alto, más suave la animación y más tamaño ocupará.
    • Full Screen: Captura la pantalla completa.
    • Capture Cursor: Permite o impide que aparezca el cursor del ratón.
  • Frame: Este botón permite aumentar la duración (FPS) de cada fotograma.
  • Edit: Abre el editor de fotogramas (ver más abajo).
  • Save: Guarda el GIF animado capturado ajustando el número de colores.
    • Quantize: Guarda el GIF aplicando una cuantización (la aconsejada).
    • Nearest: Reduce los colores del GIF al más cercano de la paleta.
    • 256/20 colores: Reduce los colores del GIF a 256 ó 20 colores.
    • GrayScale/Monochrome: Convierte a escala de grises o blanco y negro.
    • Preview: Previsualiza el GIF resultante (y su tamaño en la barra de título).
    • Export to AVI: Guarda en video la imagen (sin comprimir).

Internamente, durante una grabación, si existen varios fotogramas idénticos, GIFCam se encarga de eliminar los repetidos, manteniendo sólo uno y variando su duración, optimizando al máximo el tamaño del GIF.

Editor de frames (fotogramas)

Además, GifCam incluye un simple pero excelente editor de fotogramas. Con él, puedes eliminar frames (o series de frames), variar la duración de ciertos fotogramas, añadir texto, redimensionar la imagen, conseguir efecto Yo-yo (ida y vuelta) o incluso marcar zonas con el ratón como transparentes, algo muy útil para crear cinemagraphs.

Consejo: Puedes variar la duración de un frame, haciendo clic en delay y moviendo el ratón.

En definitiva, una gran cantidad de funcionalidades interesantes en un programa de apenas 1,5MB, lo que lo convierte en una de las mejores alternativas para la creación de GIF animados.

URL | GifCam

3. Otros programas para crear GIF animados

Instagiffer

Instagiffer es un programa muy similar a GIFCam, quizás menos práctico y versátil, pero con algunas funcionalidades que pueden interesar, como variar el brillo o la velocidad de los fotogramas, añadir efectos o incluso utilizar un video de Youtube para crear el GIF animado.

Al igual que GifCam, permite capturar regiones de pantalla, aunque su rendimiento es ligeramente inferior. Eso sí, posee una integración muy fuerte con Internet, mostrando avisos de límites de Tumblr o permitiendo subir el GIF a Imgur desde la propia aplicación.

La opción «Capture Screen» de Instagiffer es muy interesante..

El programa es freeware y está disponible para Windows y Mac.

URL | Instagiffer

QGifer

Otra alternativa muy interesante es QGifer, software libre multiplataforma con el que podremos editar vídeos y extraer fragmentos para crear nuestros propios GIF animados. Proporciona un control más avanzado sobre los fotogramas (al más puro estilo de un editor de video) a la vez que permite un gran número de funcionalidades, incluido el uso de ImageMagick como optimizador externo de imágenes si lo tenemos instalado. Es ideal para convertir desde videos.

Con QGifer podrás crear galerías originales como esta.

Tanto QGifer como Instagiffer tienen también una funcionalidad interesante: guardar sólo los fotogramas impares. Cómo los videos suelen tener una tasa de FPS alta, no se pierde demasiada información y se consigue ahorrar en el tamaño final.

URL | QGifer

AnimateGIF

Si acostumbras a utilizar IrfanView, Paint.NET, Adobe Photoshop o cualquier otro tipo de editor de imágenes, quizás prefieras un programa que simplemente una las diferentes imágenes en un sólo GIF animado. Existen programas como UnFreez, pero desde mi punto de vista, está algo obsoleto y es fácilmente reemplazable por AnimateGIF, el cuál soporta imágenes que no sean GIF para añadir, realizando la conversión de una forma más cómoda para el usuario.

Por otra parte, si quieres profundizar un poco sobre el formato APNG anteriormente mencionado, puedes utilizar GIF2APNG para convertir las imágenes, aunque desgraciadamente, el soporte de este formato es bastante reducido y no parece que vaya a cambiar demasiado en los próximos años.

URL | AnimateGIF
URL | Editores gráficos gratuitos

Virtualdub

Otro método para crear GIF animados es utilizar uno de los editores de video preferidos por muchos: VirtualDub. A pesar de ser un programa orientado a la edición multimedia de video, también podemos elegir la opción Exportar / Animated GIF, para exportar videos editados con este potente programa.

URL | VirtualDub

Byzanz

Por último, no me olvido de los usuarios avanzados de GNU/Linux, los cuales probablemente utilicen byzanz, que permite, cómodamente, desde línea de comandos, capturar cualquier tipo de actividad en pantalla y exportarla a un GIF animado.

Un ejemplo sería utilizar la siguiente línea de comandos, que captura una imagen de 700x400 píxeles desde el punto (320,150) de la pantalla en un GIF con 3 segundos de duración:

byzanz-record --cursor -x 320 -y 150 -w 700 -h 400 -d 3 capture.gif

Existen otros programas similares, como ffmpeg, recordmydesktop o kazam, que también sirven, entre otras cosas, para exportar a GIF.

4. Optimización de GIF animados

Aunque ya he hablado varias veces de cómo optimizar imágenes (imágenes en general), es un buen momento de mencionar dos programas que servirán para reducir el tamaño de nuestros GIF animados:

Sheldon Cooper (Big Bang Theory) al estilo Leisure Suit Larry. Creado con Grafx2.

A modo de ejemplo, la imagen superior fue creada con un tamaño resultante de 78KB. Si le aplicamos el parámetro optimizador de nivel 3 de gifsicle podemos reducirlo hasta 9KB. Obviamente, esto funciona mejor en los GIF animados con menos colores, para los que estén basados en películas o similares, aconsejo el segundo método.

URL | Programas para crear imágenes Pixel Art

GifSicle

GifSicle es un programa en línea de comandos que nos permite manipular y hacer casi cualquier cosa con un GIF animado: añadir, eliminar o reemplazar frames, recortar regiones, voltear, rotar, operaciones de transparencia, añadir metadatos, redimensionar tamaño, modificar la duración de los frames, optimizar o incluso «desoptimizar» un GIF animado.

Quizás, una de las cosas más interesantes sea la de optimizar una imagen. Para ello, escribiremos la siguiente línea de comandos:

gifsicle original.gif -O3 -o optimizado.gif

URL | GifSicle

ImageMagick

Si gifsicle puede parecer potente, ImageMagick lo es aún más, aunque su uso es un poco más complejo. Es uno de los sistemas más utilizados por desarrolladores para manipular imágenes en el lado del servidor, y permite prácticamente un abanico de posibilidades infinitas.

En esta ocasión nos centraremos en la optimización de los frames de un GIF animado basado en un video o película, en la que no importa si perdemos algo de calidad. Para ello, escribimos la siguiente línea:

convert original.gif -fuzz 5% -layers Optimize optimizado.gif

Con ello conseguiremos que, aplicando un 5% en el parámetro de Fuzzy Distance, los colores dentro de ese rango de similitud, sean considerados el mismo, y por lo tanto, reduzca el tamaño. El porcentaje se puede ir variando a gusto personal.

URL | ImageMagick

Escrito por Manz, el , en software. Comentarios recibidos: 12.

12 comentarios de lectores
Manz
Manz
1

Algunas anotaciones rápidas: - Subir GIF animados: Imgur (máx: 2MB/imagen). - Buscar GIF animados: Google imágenes / Herram. de búsqueda / Tipo / Animadas. - Buscar GIF animados: Mediante trucos de búsqueda de Google. - Editar GIF vía web: GifMaker o EzGIF.

  • 1
Javier
Javier
2

Te recomiendo que pruebes Video Avatar, siempre lo uso para crear GIFs animados.

Juanjo Ironforge
Juanjo Ironforge
3

Mmmmm... interesante... Anteriormente, yo realizaba GIFs animados con GIFCam, o transformando pequeñas escenas de vídeo en GIF animado con FormatFactory (desde Windows). Por cierto, ¿has cambiado los formularios de comentarios? Que curioso

  • 1
Andrés Viedma
Andrés Viedma
4

@Manz: otra forma de capturar GIFs animados a partir de las acciones, vídeos o contenido en general de páginas web es con la extensión de Chrome "Super Gif Capture". Tiene la ventaja de ser multiplataforma y de no necesitar una instalación en el sistema operativo (muy útil para ordenadores en los que no tienes permiso para instalar aplicaciones). https://chrome.google.com/webstore/detail/super-gif-capture/algmheobonijciecgfbapkhoonnhlnpe?hl=es

L. Gómez
L. Gómez
5

Muy explicado, un proceso que no parece muy complejo pero al que hay que echarle paciencia.

julio
julio
6

Ami se me hace un poco imposible hacer el gif, pero gracias por el aporte

Adri-T
Adri-T
7

Yo soy de los que usan mucho tumblr (tengo uno) y en mi opinión es donde más famosos son los gifs. Soy bastante de ver animes y series y me gusta hacer gifs siempre que veo un momento o escena que me llama la atención para después subirlo a mi tumblr. En mi caso, uso MPC-HC para sacar las capturas/frames, luego las cargo al Photoshop en pila, elimino capas, reduzco dimensiones, añado marca de agua... vamos, lo dejo como quiero y al guardarlo le reduzco el peso quitandole calidad, colores, etc.... para que no supere 1MB que es el maximo que te permite tumblr en un gif subido en un post como imagen (en texto te deja de más)

  • 1
Youtube2Gif
Youtube2Gif
8

Hola fanáticos del GIF, también escribí un programa de ventana haciendo GIFs de video. En mi opinión, se crea el archivo GIF más pequeñas que otras herramientas. Sería bueno si se le da una oportunidad. App es Youtube2GIF Maker (http://www.youtube2gif.com) gracias

GENNDA
GENNDA
9

Saludos... Jooo jo jo, el png animado es el futuro, los colores que se pueden mostrar y el suavizado en los bordes transparentes son una maravillas, supongo que somos nosotros, los usuarios de internet lo que tenemos que usarlo sin parar, para que sobreviva. Yo me apunto a hacer emoticones en apng.

GENNDA
GENNDA
10

Lo releí de nuevo todo y tengo una duda, en un Gif, ¿se puede hacer que tenga un bucle infinito pero desde un fotograma especifico, sin volver al fotograma 1? algo así como se hace en muchos de los trackers musicales.

GENNDA
GENNDA
11

@Adri-T: Hola ¿tumblr no te deja enlazar las imágenes con otras webs? de ser así puede usar mi-web.org para guardarlas tiene un limite de 4 Mg por imagen, la vista previa no tiene animación pero al darle click verás que se conserva calidad formato y fotogramas, así podrías mostrarlas en tumblr pero con otra página de almacenamiento.

agenciaDODO
agenciaDODO
12

¡Muy buen tutorial! Ayer mismo publicamos un post en el que recopilamos las mejores herramientas online, Apps para crear Gifs Animados, así como webs donde conseguir estos. Espero que les interese: http://agenciadodo.es/crear-gifs-animados-para-redes-sociales/ Saludos

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.