Cómo hacer un banner animado (fácil)

  • octubre 17, 2020

Muchos de ustedes han visto en blogs anuncios animados en los lados en los que la imagen está en movimiento continuo. Ellos usan un tipo de formato llamado GIF y junto con JPG son el formato de imagen más común en la web. Los GIF se pueden encontrar en muchos lugares (p. Ej. Gifi), incluso podemos hacerlos nosotros mismos con películas (yo uso GifBrewery) o con imágenes (con Photoshop). Pero si no queremos un resultado complicado, bueno, lo que queremos es esto hacer un banner animado simple podemos hacer esto sin configurar nada y sin saberlo. ¿El secreto? Se llama Picasso.

Hacemos un banner animado

Picasso 01

1. Necesitamos las imágenes que queremos hacer para hacer nuestro banner animado.. En mi caso preparé dos tamaños idénticos, en mi caso 300 x 100, y los guardé en formato jpg (aunque podría usar png)

Picasso 02

2. Abrimos el sitio Picasso (http://picasion.com) y subir imágenes. Ves los míos, que se llaman Consejos para mi blog 01 y 02. Usa bien los números para evitar interferencias con el orden de las imágenes. Básicamente podemos subir tres, pero cuando vemos que necesitamos más, no hay problema, hacemos clic en «Agregar otra imagen» y podemos seguir descargando tantas como queramos.

picasia 03

3. Regulamos Talla (aunque creo que es mejor tener una imagen del tamaño adecuado y así evitar sorpresas. Puedes hacerlo en Picmonkey) y velocidad a la que queremos que pase la bandera. Mi recomendación es que no te preocupes y por defecto elijas velocidades lentas porque si no, no hay tiempo para leer.

4. Damos Creando animaciones

Picasso 04

5. Se cargará esta página, que mostrará varias configuraciones si no queremos cargar el banner. Sin embargo, te recomiendo que lo descargues y lo subas a tu sitio. Tiene un peso ridículo (El que hice es de solo 24,000), por lo que no dependemos de quién lo muestre.

Picasso 05

6. Para descargarlo pasamos por el banner, click derecho y lo almacenamos para poder usarlo en cualquier lugar. ¡Y eso es! Aquí está el resultado:

харугва

Seleccionar una imagen

Las siguientes dos pestañas cambian el contenido a continuación.

No Comments Found

Deja un comentario