Este formato se puso de moda recientemente y aunque no es nada nuevo, de hecho tiene 29 añotes, al parecer le sienta bien la edad y regresa con un segundo aire. La forma tradicional de hacer GIFs animados era con una herramienta de Macromedia, llamada Fireworks, que ya no es parte de Creative Cloud, aunque todavía se puede descargar si tienes una suscripción. Pero si no quieres instalar otra aplicación, puedes utilizar Photoshop CC 2015 para crear tus GIF´s animados.

Esta es una guía rápida para hacerlos:

Crea un archivo nuevo, la recomendación es que sea pequeño para optimizar el peso final del mismo, ejemplo 470px x 470px

img_01

Puedes agregar desde video, texto, imágenes, modelos 3d y prácticamente todo lo que puedes abrir en un archivo .psd, esta es una gran diferencia entre hacerlo tu mismo o usar servicios como Giphy.

img_02

Abre un archivo de video y arrástralo al archivo en el que estamos trabajando. Si quieres cambiar el tamaño del video, debes transformar el Video Group, en lugar del layer que tiene el ícono de video.

En el panel Timeline, puedes reproducir el video, también puedes animar elementos básicos como:

  • Posición
  • Opacidad
  • Estilo
  • *Unicamente para texto puedes animar transformaciones y transformaciones envolventes (Text Wrap).

img_03

Vamos a ver unos trucos para tener más variedad, con los estilos de capa o layer styles, contamos con una buena combinación de elementos para cambiar la apariencia de cualquier elemento.

Para nuestro ejemplo agregué un estilo de color y un contorno a la capa de texto.

img_04

La animación de estilos gráficos hace una interpolación entre la visibilidad de los estilos aplicados. Así que, si queremos que aparezcan los estilos, primero debemos apagarlos desde el panel Layers. A continuación debemos dar clic en el stopwatch Style del panel Timeline, esto agrega un keyframe. Ahora adelantamos el playhead unos segundos y simplemente activamos la visibilidad de los estilos nuevamente en la paleta Layers, automáticamente se agrega otro keyframePara animar otro valor en el panel Timeline, es el mismo procedimiento; presionamos el stopwatch del valor, movemos la cabeza de reproducción o playhead y realizamos otro cambio. Aquí pueden experimentar con las otras propiedades. Así funciona la animación en Photoshop, combinando propiedades de entre el panel Timeline y el panel Layers.

img_05

Ahora vamos con detalles técnicos importantes para que tu GIF cargue rápido en cualquier sitio o red social.

El frame rate, es algo que debemos mantener lo más bajo posible para optimizar el peso final del archivo. Toma en cuenta que si tienes 30fps, tendrás el doble de cuadros que si tienes 15fps. Recuerda que el número de cuadros final es la multiplicación del tiempo total de la animación por el frame rate per second.

Para cambiar el frame rate, desde el menú del panel Timeline, selecciona: Set Timeline Frame Rate…

img_06

Selecciona entre 12 y 15 cuadros por segundo, mientras más bajo sea este valor, tu archivo pesará menos.

La duración en la línea de tiempo es importante, si quieres hacer algo de más de 5 segundos, te recomiendo hacer un video en Adobe Premiere Pro CC o Adobe After Effects CC. La ventaja de un gif es que cualquier navegador lo puede leer, una desventaja es que no tiene audio, un video tiene audio, pero todavía no hay un formato universal para todos los navegadores y dispositivos. Con los pasos anteriores también puedes hacer un video a partir del mismo archivo .psd, la diferencia es, que para hacer un .gif se guarda para web y para hacer un video se manda a render. Para finalizar selecciona:

File / Export / Save for Web

En el cuadro de diálogo selecciona GIF para definir el formato, si no requiere transparencia, deselecciona esta opción, en las opciones de animación se determina el tipo de loop. Si es para una red social en dónde quieres que se reproduzca hasta que el usuario se aburra, selecciona: Forever en Looping Options.

img_07

Otro truco

Recuerda que una de las características de un GIF es que es un archivo de una profundidad de 8bit, es decir sólo puede tener 256 colores o una tabla de color. Para disminuir el peso del archivo también puedes reducir el número de colores en la tabla.

Guarda tu archivo. Para reproducirlo en un navegador antes de compartirlo en un sitio web o una red social, puedes arrastrar tu GIF, directamente al ícono de tu navegador favorito o da clic derecho y selecciona abrir con Google Chrome por ejemplo.

¡Y voila! Ya tienes tu GIF animado 😉

GIF

Crea tus GIFs sin herramientas gráficas.

Si no tienes paquetería Adobe y quieres hacer tus GIFs animados, hay varios sitios en internet que te permiten hacerlos.

Crea tus GIFs a partir de una secuencia de imágenes, un video de youtube, un archivo de video o a través de tu webcam.

1. Secuencia de imágenes

Una secuencia de imágenes generalmente viene de un programa de animación o video, al exportar una animación se selecciona secuencia de jpeg o png.

Después puedes subir esta secuencia en Make a gif

  1. Video de youtube

Desde el sitio Giphy, puedes hacer un GIF a partir de un video de youtube, simplemente copia la URL y listo, aunque no estoy tan seguro de que tan legal es esto con respecto a derechos de autor.

También puedes hacer GIFs a partir de un archivo de video que tengas en tu computadora.