Tú también eres de las que les molan los blogs bonitos ¿verdad? Como a mí.

Pues gran parte de la “belleza” o el estilo de un blog radica en sus imágenes. Si te fijas, los blogs más chulos que conocemos, cuidan muy mucho su estética. Están plagados de fotos muy cuidadas, perfectamente seleccionadas y de muy buena calidad. Estos blogs, además de fotos, tienen infografías, vídeos y también gifs animados.

Hoy te traigo un post de lo más interesante. Te voy a enseñar cómo hacer un gif animado para decorar las entradas de tu blog. ¿Te gusta la idea? Pues para ello utilizaremos Photoshop.

Pero antes de pasar a la acción…un poco de teoría que nunca viene mal.

Qué es un GIF animado

GIF (Graphic Interface Format) no es ni más ni menos que un formato de imagen que permite la reproducción de imágenes consecutivas. Hazte la idea de que es como generar una mini película de stop motion y empaquetarlo todo junto en un archivo.

La principal peculiaridad que tienen los gifs es que su color es indexado. Estos significa que tenemos un máximo de 256 colores para trabajar. Puedes elegir los colores que quieras, incluso la transparencia. Pero siempre tendrás un tope de 256 colores.

Aunque si quieres, puedes trabajar con menos colores y así tus animaciones gifs pesarán menos, aligerando así el tiempo de carga de tu web.

¿Para qué demonios me sirve un Gif animado?

Te preguntarás…pero Jorge, ¿para qué quiero yo aprender a crear gifs animados? Y yo te respondo…¡para tener una web bonita y funcional! 😀

Un gif animado te resultará útil de cara a poder crear pequeños banners promocionales dentro de tus entradas o en tu sidebar. También podrás incluirlos en newsletters que enviarás tus lectoras. O incluso emplear los gifs en campañas de publicidad display para dar a conocer tu web o blog.

Como ves, las aplicaciones son varias y muy necesarias para promocionar tu web y tus servicios. ¿Aún no te convence? ¡Pues veamos algunos ejemplos!

Algunos ejemplos de Gifs Animados

¿Quiéres que te enseñe a hacer este Gif Animado?

Cómo hacer un GIF animado con Photoshop

Photoshop incluye por defecto una ventana especial con la que podemos manipular imágenes para crear una animación gif. Para ver esa ventana hacemos clic en: Ventana/Línea del Tiempo.

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.

O dicho de otra forma: 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.

Según lo habilidosa que seas, podrás conseguir mejores resultados.
Se puede crear un gif animado con varias imágenes. También incluyendo texto que se mueve o cambia de color. Incluso se pueden crear gifs animados con fragmentos de vídeo.

Si quieres, puedes ver más ejemplos de fotos gif animadas que te servirán de inspiración.
Y si Photoshop te resulta muy complicado puedes echar un vistazo a las herramientas para crear gifs animados online.

Pero ahora abramos Photoshop y veamos cómo hacer un gif animado paso a paso.

Hacer un Gif Animado Paso a Paso

1. En primer lugar seleccionamos varias imágenes con las que vamos a crear la animación. En mi caso son un total de 6 imágenes con el texto ya incluido.

2. Creamos un documento nuevo en photoshop. En este caso de 550 px de ancho y 786 px de alto (que es el tamaño que queremos dar a nuestra animación).

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

4. Hacemos clic en: Ventana y dentro en “línea de tiempo” y en ella seleccionamos “crear animación de fotogramas”

5. Creamos tantos fotogramas como queramos que tenga nuestra animación. En mi caso, he creado 6 fotogramas. Uno por cada imagen. Pero puedes crear todos los que quieras.

6. Seleccionamos un fotograma y mostramos u ocultamos las capas para que se muestre lo que nos interese.

7. Aplicamos un tiempo de espera en cada fotograma. Puede ocurrir que en alguno quieras darle más tiempo. Yo he puesto 0,45 segundos en todos los fotogramas. Además, le marco que la reproducción sea infinita (para hacer un efecto loop). Es decir, para que esté todo el rato funcionando el gif animado.

8. Le damos al botón de “play” para probar nuestra animación y si nos gusta la guardamos en “Guardar para Web” (Archivo/Guardar para Web). En la ventana que nos aparece elegimos GIF en el tipo de formato y le damos a guardar. Generalmente se suele guardar en 256 colores pero si quieres puedes quitarle colores para que pese menos. Siempre y cuando no pierda calidad tu imagen.

Y ya lo tienes ¡un GIF animado en un periquete! Es fácil ¿verdad? 😀
Espero que te haya servido de ayuda y que me compartas mucho en Redes Sociales por favor…¡gracias! Hasta la próxima.