Cómo hacer un GIF animado y publicarlo en las redes paso a paso

Siempre hemos sido una cultura muy visual y los GIF (Graphics Interchange Format) han aprovechado ese punto para resaltar sobre otros elementos gráficos. Se trata de imágenes animadas de hasta 256 colores de forma simultánea y limitados a su vez por 16 millones de colores en total. Gracias a las redes sociales, se han hecho virales.

Si te preguntas cómo hacer un GIF animado y cómo publicarlo en Twitter, Facebook o Instagram, has llegado al lugar adecuado. Empezaremos por lo básico, hacer un GIF desde varias imágenes, y tocaremos un poco de animación (poco) y asuntos relacionados con la animación. Después, explicamos la manera de compartir el fichero.

Cómo hacer un GIF capa por capa usando Photoshop

Photoshop es uno de los programas más usados en la red. No solo nos ayuda a quitar granos y arrugas, sino que nos facilita la posibilidad de hacer GIF. Si no tenemos instalado Photoshop, que es de pago, también podemos usar Gimp. La mecánica es la misma.

Para coger varias imágenes, hemos recurrido a la biblioteca de archivos gratuitos Unsplash, hemos buscado por windows y hemos dado con material para GIF:

como hacer un gif

En realidad, cualquier imagen nos sirve para hacer un GIF animado. Como en este primer intento vamos a hacer algo muy sencillo, optamos por una cuadrícula con ventanas. Nuestro objetivo será intercambiarlas entre sí de forma animada, nada complicado.

1. Línea de tiempo, la herramienta de los GIF

Para ello, abrimos la imagen en Photoshop y buscamos la Línea de tiempo, un espacio donde iremos depositando las capas que queremos que se vean. Así, vamos a la opción Ventana y pulsamos sobre Línea de Tiempo y, luego, en Crear animación de cuadro. Cada cuadro será una imagen. Ya tenemos el primer cuadro (1):

como hacer un gif

Pulsando sobre Duplicar (el símbolo de la hoja con la esquina doblada) podemos obtener una copia igualita del cuadro actual. Con esas dos imágenes que tenemos, ya podríamos guardar un GIF. Lo que ocurre es que ambos cuadros muestran lo mismo. ¿Y si duplicamos varias veces el cuadro y cambiamos algunas ventanas en la imagen?

2. Crear cuadros animados en Photoshop

como hacer un gif

Como puede verse en la imagen superior, hemos duplicado algunas de las ventanas de la fotografía en el segundo cuadro. En la imagen se observa cómo tenemos pulsado el cuadro (2). Si ahora guardamos el GIF, nos saldrá una animación en la que aparecen y desaparecen estas ventanas copiadas. Pero hemos decidido complicarlo un poco:

como hacer un gif

Hemos creado cinco cuadros, cada uno de ellos con las ventanas en diferentes posiciones. Recordemos: cada cuadro es una imagen diferente. Ahora seleccionamos todos los cuadros manteniendo pulsada la tecla Shift (la flecha que se sitúa sobre Ctrl) y pulsamos sobre una de las flechas junto a la palabra sec.

como hacer un gif

Este paso es importante porque indicará la duración de cada uno de los cuadros que componen el GIF. Lo cierto es que cada uno de ellos puede ser completamente diferente al resto, pero para el ejemplo hemos elegido un segundo en todos.

3. Guardar un GIF en Photoshop

Una vez hayamos terminado de montar el GIF, vamos a guardarlo. En el ejemplo de las ventanas hay una estructura muy rígida, pero recuerda que puedes colocar todos los elementos que desees: texto, otras imágenes, recortes, eliminar zonas… Para guardar, seguimos la ruta Archivo->Guardar para Web y, en Opciones de Looping, elegimos el número de ciclos que queremos. Por ejemplo, Para siempre.

como hacer un gif

Como puede verse en el ejemplo de las ventanas, hacer un GIF es algo sencillo que solo requiere unos cinco minutos de nuestro tiempo. Lo más complicado de todo es saber qué es lo que queremos mostrar y cómo se visualizará. Para ello, es recomendable el uso de un pequeño guion en papel.

¿Cómo hacer una animación con objetos animados?

Arriba hemos visto cómo crear una animación en la que los objetos cambiaban, pero no se movían. ¿Y si quiero hacer que las ventanas se muevan de un lado a otro o que una nave espacial aterrice en un planeta? Vamos con este segundo ejemplo, para lo cual elegimos una segunda imagen:

como hacer un gif Planeta 1

Abrimos la imagen con Photoshop y buscamos otras dos imágenes, esta vez de naves espaciales en formato PNG. Este formato ayuda a que las imágenes que ponemos por encima de la principal estén “limpias”:

como hacer un gif Planeta 2

Para darle algo de realismo, hemos modificado las sombras de ambas naves de acuerdo a la luz de la estrella del fondo. ¿Cómo? Pulsando dos veces sobre la capa de cada una y escogiendo Efecto de gradiente. Tras un par de minutos seleccionando valores, lograrás la iluminación que buscas.

1. Mover un objeto para un GIF

Una vez que tenemos todos los elementos en una misma imagen, vamos a crear el GIF propiamente dicho. Para ello volvemos a insertar la Línea de tiempo desde la opción Ventana, pero ahora pulsamos sobre el botón que recuadramos en rojo en la imagen inferior. Este nos dará acceso a una línea de tiempo algo más completa, en la que vemos las diferentes capas, a las que hemos llamado ‘Nave 1’ y ‘Nave 2’.

como hacer un gif Planeta 3

La clave para animar objetos en GIF usando Photoshop es, ahora, pulsar sobre la flecha derecha que observamos junto a cada una de las naves (o los objetos que tú tengas). De nuevo, resaltado en rojo en la captura de abajo. Esto nos dará acceso a una herramienta muy interesante que usan todos los programas de animación y que es importante entender bien.

como hacer un gif Planeta 5

En la imagen de arriba vemos en morado la línea temporal del GIF o vídeo. Como podemos observar, se ven las dos naves. De una de ellas, la Nave 1, hemos abierto el panel para mostrar las opciones de transformación, opacidad y estilo. Eso sí, en este artículo solo hablaremos de transformación (mover el objeto por la pantalla y hacerlo más grande o pequeño).

2. Usando marcadores temporales

Al pulsar sobre el reloj de Transformación nos aparecerá un dial amarillo en forma de cuadrado en el segundo 0 de la animación. Es un marcador de posición en este caso. Haciendo esto le decimos a Photoshop “Quiero que la Nave 1 se encuentre exactamente en esa posición, con ese tamaño, con esa opacidad y estilo cuando arranque el GIF”.

Pero, como lo que queremos es que la nave cruce la pantalla, la hemos colocado fuera de la imagen, más allá de la esquina superior izquierda. Para poder “verla”, hemos pulsado Ctrl+T y se nos muestra como una caja con dos diagonales:

como hacer un gif Planeta 6

Ya tenemos la posición original de la Nave 1. Ahora vamos a decirle a Photoshop dónde queremos que empiece el GIF de la Nave 2. Para ello seleccionamos su capa, abrimos el triángulo junto a su nombre en la línea de tiempo, y pulsamos sobre el reloj de Transformación. De nuevo, un cuadrado amarillo aparecerá.

Ahora viene lo divertido. Sobre la línea de tiempo aparece una línea roja con un cabezal, como una aguja. Vamos a colocarlo al final del vídeo. Así:

como hacer un gif Planeta 7

A continuación, vamos a seleccionar la capa de la Nave 1 y la llevamos al otro lado de la imagen. ¿Veis de nuevo la caja con diagonales? Esa es la Nave 1. Para decirle a Photoshop “Quiero que la Nave 1 acabe justo ahí”, pulsamos el cuadrado gris de la línea de tiempo hasta que aparezca amarillo, como se muestra en la imagen:

como hacer un gif Planeta 8

3. Guardar un GIF con objetos en movimiento

Ahora toca guardar el GIF o el MP4. Con esta herramienta también podremos grabar vídeos de buena calidad. Nos encaminamos a Archivo->Guardar para Web y elegimos cuántas veces queremos que se repita. Al darle a guardar, ya tenemos nuestro GIF:

como hacer un gif Planeta

Es algo básico, pero jugando con las sombras hemos situado más allá del marco de la imagen otro objeto. Quizá una tercera nave muy grande o una luna, por ejemplo.

¿Puedo usar cualquier imagen para mis GIF?

A nivel legal hay muchas dudas sobre qué imágenes puedo coger para un GIF. Muchos de los GIF que vemos en Internet son memes, un tipo de imagen humorística que a menudo usa la sátira con personajes públicos. ¿Puedo coger una imagen de Trump y añadirle un texto para hacer un meme con esta técnica?

Hay que tener cuidado con el origen de las imágenes y su contenido. Si bien la ley es laxa con respecto a la sátira y la parodia, lo es menos con la atribución de derechos y copyright. Es decir, si tenemos la autorización del fotógrafo que hizo la captura a Trump, iremos sobre seguro. Si no, mejor usar otra fuente.

Pero como conseguir imágenes de fuentes originales suele ser un problema, lo suyo es recurrir a librerías gratuitas CC0 para nuestras composiciones. Unsplash, como mencionábamos arriba, es una de ellas. Para imágenes PNG e iconos, Flaticon tiene un fondo de imágenes interesante.

flaticon imagenes para GIF

La clave está en el CC0 o licencia “haz lo que quieras”. Los autores que marcan con esta etiqueta sus obras las están liberando al mundo y renunciando a sus derechos. Esto significa que con ellas puedes hacer un chiste, una crítica social, un anuncio de marketing o la portada de tu libro.

Herramientas online para hacer GIF animados

Si hemos tocado Photoshop y sugerido GIMP es porque son herramientas mucho más completas que las que encontramos en Internet. Además, si aprendemos los tres o cuatro conceptos vistos en este artículo en Photoshop, podremos usar cualquier otro programa, también web.

Una de las herramientas más populares e interesantes para crear un GIF online es GIPHY. Tanto desde imágenes como de vídeo, podremos generar una animación básica. Y, si buscamos un GIF concreto, es muy probable que lo encontremos en su biblioteca.

Make A Gif, Gifs.com, y GifMaker son las siguientes máquinas virtuales de la lista, con opciones decrecientes. Por supuesto, lo ideal es Photoshop, si tenemos ahorros para la licencia, o GIMP.

¿Cómo subo un GIF a las redes sociales?

El mejor lugar para crear un GIF es un ordenador que aúne potencia –algunas composiciones pueden requerir una amplia carga de trabajo– y calidad de imagen. El Aspire C24, que podéis ver abajo, es un todo en uno ultraligero que combina procesadores Intel Core™ de 8ª generación y una pantalla perfecta para el trabajo con imágenes. Pero, ¿cómo llevar los GIF al móvil?

acer aspire c24

Es cierto que muchas redes sociales  –Twitter, LinkedIn, Google+ o Facebook– permiten subir imágenes desde el navegador del PC. Para estas lo tendremos fácil, ya que basta con arrastrar el archivo GIF para que la red social lo reconozca. Pero otras, como Instagram, nos piden usar el teléfono.

Para pasar fotografías del móvil al ordenador, y viceversa, podemos hacer uso de herramientas como Google Photos, Dropbox o Resilio Sync. Suponen un paso más allá de la creación del GIF, pero nos permitirán usar redes como Instagram para enviar nuestras composiciones.

Imágenes | iStock/Darumo, Daniel Fazio, Lucianomendez

En InGET by Acer | Cómo hacer una captura de pantalla y subirla automáticamente a la nube

En InGET by Acer | Instagram: de conseguir seguidores a borrar la cuenta, te lo contamos todo

Alma Landri