Con el ánimo de ayudaros a mejorar vuestras páginas web, blogs o tiendas online, hoy os vamos a dejar otro briconsejo facilito y muy útil sobre cómo hacer un GIF animado. Esto os resultará útil de cara a poder crear pequeños banners de promoción interna en vuestras webs, newsletters, o para campañas de publicidad display con las que queráis daros a conocer.

Qué es un GIF animado

GIF (Graphic Interface Format) es un formato de imagen que permite la reproducción de imágenes consecutivas. Es como generar una mini película de stop motion y empaquetarla en un archivo. La principal peculiaridad que tiene este formato es que el color es indexado. Esto quiere decir que sólo podemos contar con un máximo de 256 colores para trabajar. Los que sea… incluída la transparencia. Podemos trabajar con menos y hacer que nuestro archivo tenga un peso menor… pero esto es otro tema que ya trataremos en otra ocasión.

Qué necesitas

Para crear una imagen animada, lo que se conoce como “gif animado”, necesitas un programa de edición de imagen. Entre los programas para hacer gifs más utilizados están Photoshop (de pago) o el creador de banners Gimp (gratuito). Yo os voy a mostrar cómo hacerlo con Photoshop. Para este tutorial tienes que saber cómo abrir un documento y cómo aplicarle un tamaño específico.

Cómo hacer un GIF animado con Photoshop

Photoshop incluye una ventana con la que podemos manipular imágenes para crear una animación gif. El funcionamiento es muy sencillo. En dicha ventana se sitúan los frames o instantáneas que queramos. En cada instantánea aparecerá lo que se esté mostrando en el panel capas. Es decir: selecciono un frame en la línea de tiempo y apago o enciendo capas en el panel capas para que se muestre lo que quiero. Y así voy generando una animación.

Un ejemplo paso a paso

Veamos cómo hacer un GIF animado paso a paso para que no os quede ninguna duda:

1. En primer lugar seleccionamos varias imágenes con las que vamos a crear la animación.

Cómo hacer un GIF animado con Photoshop - Paso 1

2. Creamos un documento nuevo en photoshop. En este caso un cuadrado de 200 px de lado (que es el tamaño que queremos dar a nuestra pequeña creación).

3. Añadimos las imágenes con las que vamos a crear el GIF. Cada una se situará una en una capa diferente.

Cómo hacer un GIF animado con Photoshop - Paso 2

4. Abrimos la ventana “línea de tiempo” y en ella seleccionamos “crear animación de fotogramas”

Cómo hacer un GIF animado con Photoshop - Paso 3

5. Creamos tantos fotogramas como queramos que tenga nuestra animación

Cómo hacer un GIF animado con Photoshop - Paso 4

6. Seleccionamos un fotograma y encendemos o apagamos las capas para que se muestre lo que nos interese.

Cómo hacer un GIF animado con Photoshop - Paso 5

7. Aplicamos un tiempo de espera en cada fotograma. Puede ocurrir que en alguno quieras darle más tiempo. yo he puesto 0,2 segundos en todos menos en el último que dejo 1 segundo de espera. Además, le marco que la reproducción sea infinita (para hacer un efecto loop).

Cómo hacer un GIF animado con Photoshop - Paso 6

8. Le damos al botón de “play” para probar buestra animación y si nos gusta la guardamos con el comando “guardar para web”. En la ventana que nos aparece elegimos GIF en el tipo de formato y le damos a guardar.

Cómo hacer un GIF animado con Photoshop - Paso 7

Y ya lo tienes! un GIF animado en un periquete!

Crear banner animado - Resultado final

Volver al glosario
Agencia de Branding

Somos una agencia de branding. Todos nuestros proyectos tienen algo en común: la creatividad y la estrategia. Contáctanos si tienes un proyecto o si te gustaría saber más sobre nuestro método de trabajo.

Conócenos