Seleccionar página
Compartir contenido

Vamos a ver en este artículo como crear un Gif animado en Photoshop, utilizando el mismo método que vemos en nuestras clases de Photoshop en Madrid.

gif animado photoshop

Esto nos puede resultar útil en distintos ámbitos como banners para adwords o redes sociales. Solo tendremos que tener en cuenta las medidas, peso y requisitos de la plataforma en concreto, por ejemplo, si queremos ver medidas y pesos para los anuncios de Adwords podemos buscar “adwords sizes”, lo que nos mostrará el resultado con las medidas y requisitos específicos de Google.

crear gif animado en photoshop

Métodos para crear un gif animado en Photoshop.

Existen varios métodos para crear animaciones en Photoshop, podemos hacerlo fotograma a fotograma o bien usar la línea de tiempo, que nos dará mayor control en las animaciones y no tendremos que hacerlo de manera “artesanal”.

Línea de tiempo en Photoshop

La línea de tiempo nos crea una pista (o barra) por cada elemento que tengamos en la capa de photoshop, esta barra nos permite especificar donde se empieza a mostrar ese elemento y donde acaba.También podemos incluso crear animaciones más elaboradas usando fotogramas clave, pero esto lo dejaremos para otro artículo.

Pasos para crear un Gif animado en Photoshop

  • Abrimos en Photoshop para web con las medidas en píxeles, resolución 75 y modo de color RGB
    crear gif animado en Photoshop
  • Para este ejemplo lo primero que traeremos (mediante archivo / colocar) será el fondo que vayamos a utilizar, redimensionaremos con Ctrl + T y por último pulsamos intro para liberar el comando
  • A continuación, crearemos los textos que vamos a utilizar (photoshop nos crear una capa automáticamente con cada texto), para estar cómodos podemos quitar la visibilidad de la capa a los textos creados previamente.
    crear gif animado en photoshop
  • Para usar los textos de manera cómoda en la animación convertiremos cada capa de texto en “objeto inteligente”. Para ello hacemos click derecho sobre cada capa y en las opciones que aperecen, elegiremos “convertir en objeto inteligente”.
    capas elementos photoshop
  • Ahora activaremos la línea de tiempo, y haremos click en crear animación de video, lo que nos mostrará cada objeto de las capas en su correspondiente capa de video. Podemos ver también que nos ha creado una animación con una duración de 6 segundos (que podríamos modificar si así lo deseamos).
    linea de tiempo photoshop
  • A continuación, comenzaremos por texto situado más abajo (en nuestro caso “Madrid”) y retrasaremos su final hasta donde queramos, es decir donde dejará de mostrarse.
  • Con el siguiente texto “valencia” retrasaremos su inicio para que coincida con el final de Madrid y también acortaremos su final, repetiremos la misma operación con el último texto “Lisboa”, hasta dejarlos de forma escalonada. Con esto conseguimos que en la animación se muestren uno detrás de otro.
    linea de tiempo, animaciones
  • Comprobamos haciendo click en el símbolo de reproducción y por último nos iremos a menú archivo / Guardar para web (dependiendo de la versión de photoshop este paso puede cambiar un poco). Exportaremos como Gif animado, con 256 colores y decidiremos en la parte inferior si queremos reproducción continua (loop), una sola vez o varias.guardar para web gif photoshop

Tras guardar nuestro gif animado, podemos abrirlo con nuestro navegador favorito para comprobar que funciona.

Características archivos GIF

Los archivos Gif tienen menor calidad que un archivo JPG o PNG, además son archivos que nos permiten crear animaciones, además son visibles en todo tipo de dispositivos (móviles, tablets o escritorio). También (al igual que los PNG), nos permiten mantener fondos transparentes.

Consejos para crear archivos GIF

Si queremos crear un gif animado en photoshop, tenemos que intentar que pese lo menos posible y por tanto es recomendable usar recursos que no pesen mucho, estos pueden ser textos, imágenes previamente optimizadas o bien archivos vectoriales de illustrator.

Con esto hemos visto como crear un gif animado en Photoshop, de manera sencilla y útil para entornos como el marketing digital, redes sociales o publicidad online. Por cierto, si queremos subir este archivo a wordpress, podemos subirlo como cualquier imagen, mediante la pestaña Medios / Biblioteca / Añadir nuevo.

Entradas relacionadas: