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.
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.
4. Abrimos la ventana “línea de tiempo” y en ella seleccionamos “crear animación de fotogramas”
5. Creamos tantos fotogramas como queramos que tenga nuestra animación
6. Seleccionamos un fotograma y encendemos o apagamos 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,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).
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.
Y ya lo tienes! un GIF animado en un periquete!
¡Muy buen tutorial! Ayer mismo publicamos un post en el que recopilamos las mejores herramientas online, Apps para crear Gifs Animados, así como webs donde conseguir estos. Espero que les interese: http://agenciadodo.es/crear-gifs-animados-para-redes-sociales/
Saludos
Hola, ¡muchas gracias por el tutorial! me sirvió de mucho. Pero tengo un problema, y es que al guardarlo y abrirlo en el navegador, el gif me sale repetido por toda la pantalla como si fuera mosaico, ¿a que podría deberse? Gracias de nuevo.
No es lo normal… si abres una imagen en el navegador, lo habitual es que muestre una imagen sólo. Ese comportamiento ocurre cuando la imagen se utiliza como background y no especificas que no se repita con el atributo no-repeat.
Hola,
Tengo un problema que no puedo resolver.
Cuando intento guardar la animación creada con Photoshop CS5, por defecto me sale .html y no me aperece guardar .gif.
Gracias,
Tienes que utilizar el comando “guardar para web”. Se abre la interfaz con la combinación CTRL + ALT + SHIFT + S . Y ahí ya puedes configurar y guardar como gif.
Hola,
Tengo el mismo problema que Cristina. Le doy a guardar para web, selecciono “gif”, después guardo… y me sale un archivo en .html, qué puede ser?
Hola Lucía. ¿Cuando guardas para web se te abre una interfaz en donde puedes previsualizar la animación?
Me he vuelto loco intentando solucionar un problema, y este articulo ha sido una súper ayuda. Muchas gracias!!!
NO SE ME VE EL GIFT EN NINGUNA RED SOCIAL, GUARDO BIEN, ME SALTA PANTALLA DE PREVISUALIZACIÓN E INCLUSO ABRO EL ARCHIVO EN MI PC Y SE VE PERFECTAMENTE, AL SUBIRLO POR EJEMPLO A FB SE SUBE COMO IMAGEN Y NO COMO GIFT.
Hola Patricia. Creo que no puedes subir gif animados a FB. Necesitarías una aplicación extra en la que subes tu gif y al darle a compartir te da un enlace que puedes poner en FB. La aplicación es GIPHY.
me intereza hacer gifs con imágenes que dibujo en fotoshop pero a la hora de subirlos a la web no me aparecen como en el programa, me gustaría saber cómo elegirlos…
sigo todos los pasos como el tutorial…doy tiempos diferentes a los frames ..guardo y me reproduce bien en mi pc…el problema es cuando lo quiero pasar por whatsapp no me corre la misma velocidad (generalmente mas lento) y el último framer no aparece. Duración de mi gif…8 segundos
hola, buenas tardes necesito hacer un gif animado, pero la pura imagen y el texto (es solo de prueba) pesa 105,5 y casi no le quedan colores. ¿Como puedo hacer que este conserve parte de los colores y pese menos de 30 kb?
PD: El tamaño que me dieron como area de trabajo es de 800 x 600 px.
La única manera es hacer una animación más sencilla o utilizar una imagen con menos colores. Saludos!
¡Perfecto! Muchísimas gracias :)
Me sirvió perfecto. Mi versión de Photoshop es distinta, pero intuitivamente pude seguir sus pasos ¡Muchas gracias por compartir!
Es un placer y una ilusión!
Hola! yo armo el gif como lo explicaron y exporto para web y se ve genial, pero cuando lo envio por whatsapp no parece animado, y necesito poder enviarlo por ahí y publicarlo en instagram.
Gracias!
Me gustan como esta pagina te da esos consejos de GIF animado, y me doy cuenta que esto es lo que utiliza http://www.casapelis.net/
e he vuelto loco intentando solucionar un problema, y este articulo ha sido una súper ayuda. Muchas gracias!!!
que bien te quedo amigo eres un pro en el diseño grafico quiero aprender hacer esto
Wao tremendo tutorial y los pasos son bastante faciles creo que si se puede trabajar a estos niveles y aprender cada dia mas
quedo genial el diseño muy bueno yo quiero aprender hacerlo esta genial
Wao tremenda guia pero sobre todo tremendo articulo sobre como aprender hacer un gif animado sirve mucho hasta para poster en movimientos
Está genial el diseño muy bueno yo quiero aprender hacerlo esta genial
Que buen tutorial y los pasos son bastante faciles creo que si se puede trabajar a estos niveles y aprender cada dia mas
Increibles gif animados,son buenos y bonitos
https://www.jpelis.com/
Muchas gracias! Lo pude hacer.
Muchas gracias! Lo pude hacer.
o pude hacer.
Fue una educación buena y de calidad, gracias y esperamos la continuación de esta capacitación.
Que buen tutorial y los pasos son bastante faciles creo que si se puede trabajar a estos niveles y aprender cada dia mas
Wao tremendo tutorial y los pasos son bastante faciles creo que si se puede trabajar a estos niveles y aprender cada dia mas
Que buen tutorial y los pasos son bastante faciles creo que si se puede trabajar a estos niveles y aprender cada dia mas