En este artículo vamos a tratar un recurso que nos puede ayudar en ciertas ocasiones, como son los GIF animados. Podemos crearlos, o editarlos, por medio del archiconocido programa de diseño Photoshop, que sería la mejor opción posible como herramienta de diseño. El proceso es muy simple. Editas tu imagen con Photoshop y, sin salirte del programa, puedes animarla o una vez creada la secuencia de fotogramas, también optimizar el archivo para que pese menos. Al final del artículo encontrarás un vídeo que resume el proceso y donde puedes aprender de manera visual a crear tus propias animaciones con GIF.

Los Gif Animados son imágenes normales, en un archivo ".gif", con la particularidad que presentan una animación. Es igual que cualquier otro archivo GIF que no tuviese una animación, por lo que lo puedes subir y mostrar en cualquier web, compartir en redes sociales, etc., igual que cualquier imagen. Es por ello que es una excelente opción para mostrar movimiento en diversas situaciones.

Hubo un tiempo en la web que los Gif animados eran enormemente populares en la web. Hoy han pasado un poco de moda, pero siguen utilizándose en algunas parcelas. Los banner todavía se hacen habitualmente con Gif animado, pero sobre todo a la gente le encanta compartir Gifs Animados en redes sociales con pequeños cortes de vídeo, mensajes dinámicos, etc.

Cómo crear o editar imágenes Gif Animado

Si quieres crear un Gif animado existen diversas herramientas, nosotros en este artículo usaremos Photoshop, pero seguro que hay otros programas más simples. Además vamos a usar la versión de Photoshop CC, pero seguro que muchos otros Photoshop de los ultimos años usan la misma receta.

En Photoshop la clave para la creación de Gifs animados está en la ventana "Linea de tiempo". La encuentras en el menú "Ventana / Linea de tiempo". En inglés se llama "Time line". Si ya conoces Photoshop quizás no necesites más referencias para encontrarlo y crear tu propio Gif.

Cómo componer una imagen con Photoshop para crear un Gif Animado

El procedimiento es bien simple, como lo harías con cualquier otra imagen. Irás creando los elementos de la animación en capas independientes, para que puedas ocultarlos o mostrarlos en los diferentes fotogramas.

Luego abres la mencionada ventana "Línea de tiempo" o "Timeline" en inglés (La encuentras dentro del menú "Ventana" o "Window" en inglés). En ella es donde vas a poder realizar toda la gestión de las capas que se deben ver o ocultar en cada uno de los pasos de la animación.

Al principio en la ventana de Time Line quizás te pregunte qué tipo de animación deseas hacer. Te salen dos opciones:

• Crear línea de tiempo de vídeo
• Crear animación a cuadros

Seleccionas "animación a cuadros" y a partir de entonces verás que la ventana de Línea de tiempo te muestra una imagen en miniatura, en un cuadrito. Ese es el primer fotograma de tu animación.

Podrás desde esa ventana crear nuevos fotogramas, con el botón nuevo que se parece al de crear una nueva capa en el menú de capas.

En cada fotograma por separado podrás definir qué capas deseas mostrar u ocultar, desde la ventana de capas. Agregando nuevos fotogramas y mostrando y ocultando las capas hasta que tu animación se complete.

Desde la ventana de la Línea de tiempo podrás acceder a varios controles de tu animación, por ejemplo para ponerla en marcha o pararla, pasar de un fotograma al siguiente, etc. Los controles principales que tendrás que tocar aquí son los de asignar tiempo y el tipo de animación que ahora te describimos.

Para editar el tiempo que deseas asignar a cada fotograma usas un control que está justo debajo de la imagen de miniatura. El tiempo dependerá mucho del efecto que quieras conseguir y/o del mensaje a mostrar en tu banner. En la medida de tiempo que aparece debajo de la miniatura podrás seleccionar cualquier otro valor de los preestablecidos o bien colocar uno de tu preferencia con "Otro". Puedes seleccionar varios fotogramas en el Timeline de una sola vez para editar el tiempo de todos ellos y colocar el mismo valor en todos esos pasos de la animación.

En general puedes escoger varios fotogramas a la vez y todos los ajustes que hagas se aplicarán a todos esos fotogramas. Imagina que tienes una capa que quieres quitar de varios fotogramas de la animación, pues seleccionas todos los cuadritos del timeline y ocultas esa capa, la ordenas, etc.

Otra cosa que podrás hacer en la ventana de la línea de tiempo es ajustar el bucle de animación, si quieres que se vea una vez, un número de veces dado o que la animación se repita de manera infinita.

Guardar el Gif Animado desde "Guardar para web" de Photoshop

La opción "Guardar para web" de Photoshop es la que nos sirve para guardar imágenes optimizadas. La debes de conocer. Si estás guardando un GIF animado simplemente te tienes que fijar que el formato de tu imagen es Gif.

En la parte de abajo además puedes elegir el estilo de tu animación Gif. Es bien sencillo, pero ten en cuenta que esa opción solo aparece activada si estás guardando un Gif en el que tienes varios fotogramas en una animación.

Al guardar el archivo te tienes que fijar que indicas la extensión .gif. Generalmente el propio Photoshop te la coloca. Con ello ya tendrás tu Gif Animado listo para usar donde quieras o necesites.

Espero que te haya servido de ayuda. A veces conocemos herramientas como Photoshop pero desconocemos lo que se puede hacer con ellas. Diviértete creando tus Gif animados!

Aquí te dejo el Gif que he usado de ejemplo, aunque lo he reducido mucho de tamaño para que no ocupase una barbaridad. El Gif Animado lo he creado con una secuencia de fotogramas con fotos realizadas por Beatriz Alvarez Sánchez.

Videotutorial Gif Animado con Photoshop CC

Si lo prefieres, puedes ver este proceso en un vídeo cortito donde creamos un Gif animado sencillo, lo configuramos y optimizamos.