[TUTORIAL] Poner una imagen GIF animada en un post o en tu firma

[.-RAYCO-.]

En este caso se trata de conseguir que todos podamos poner una imagen animada (en formato GIF) con la cual alegrar un poquito más si cabe este gran foro! 

Sería algo como esto por ejemplo:

Aunque por supuesto, se pueden poner en las firmas o incluso crear iconos nuevos, adaptando su tamaño por supuesto a las normas del foro.


Vamos allá con este nuevo tutorial:

1º Bien, lo primero de todo es elegir las imágenes. En mi caso voy a coger estas 2:

Se pueden coger cuantas imágenes se quieran, yo en este ejemplo voy a coger sólo 2, una de nuestra furgo con las luces apagadas y otra que he retocado para simular que tiene las luces encendidas.

*imagen borrada por el servidor remoto

*imagen borrada por el servidor remoto

2º El GIF animado no se puede redimensionar, por lo que si hay que cambiar el tamaño de las imágenes para adaptarlo a las normas del foro, ya sea para publicar un post a para ponerlo en la firma, ahora es el momento de hacerlo, antes de comenzar la elaboración de nuestro GIF. Podáis hacerlo siguiendo alguno de estos otros tutoriales en la parte de redimensionar la imagen: http://www.furgovw.org/index.php?topic=177421.0 o http://www.furgovw.org/index.php?topic=190040.0

* Yo recomiendo siempre redimensionar las imágenes por 2 motivos. El primero es que hay que adaptarlo a las normas del foro para que no salgan nuestras imágenes gigantescas. Y el segundo y más importante es que debéis tener en cuenta de que un gif son varias fotos juntas y si hacéis un gif animado con varias fotos a un tamaño grande, cargar vuestra imagen gif puede tardar un tiempo bastante considerable y hasta que no esté cargada del todo, no aparece. Yo el tamaño máximo que recomiendo es de 640 x 480 píxeles, que es el tamaño de las fotos que he utilizado en este tutorial.

3º Como el programa que vamos a utilizar es gratuito, no admite imágenes jpg, ni bmp ni similares, por lo que hay que guardarlas primero en formato GIF. Esto es muy fácil, con el simple PAINT de Windows, elegimos las opción "Guardar Como" y elegimos la extensión "GIF". Hacemos esto con cada una de las imágenes y listo.

*imagen borrada por el servidor remoto

Si tenéis algún programa de pago, lo más probable es que no hubiera hecho falta este paso.


4º Para hacer nuestra imagen GIF animada hay programas muy buenos, pero son de pago, así que haremos nuestro tutorial con el Microsoft GIF Animator, que nos vale de sobra para lo que queremos nosotros.

*imagen borrada por el servidor remoto

Lo podéis descargar pinchando en la imagen

5ª Una vez instalado el programa en nuestro ordenador, lo ejecutamos y hacemos click en abrir y elegimos la imagen inicial de nuestro GIF animado

*imagen borrada por el servidor remoto

6º Una vez que ya tenemos la primera imagen, para añadir las siguientes, hay que pulsar el botón de insertar

*imagen borrada por el servidor remoto

Este paso lo repetiremos con cada una de las imágenes que tengamos. Si queremos que vuelvan a pasar las mismas imágenes que tenemos ya, no hace falta añadirlas de nuevo, eso lo explico a continuación.


7º Definamos las veces que se repetirá nuestra animación.
Nos movemos a la pestaña que pone "Animation" y ahí definimos las veces que queremos que se repita nuestra animación. Lo más normal es que no tenga fin, así que debéis marcar lo mismo que yo:

*imagen borrada por el servidor remoto

8º Ahora definimos el tiempo que durará cada imagen. Esto se hace en la pestaña "Image" en la casilla "Duration" y hay que hacerlo para cada una de las imágenes, pudiendo poner valores diferentes a cada una de ellas. Tened en cuenta que "100" equivale a 1 segundo y "50" por ejemplo sería medio segundo.

*imagen borrada por el servidor remoto

9º Probar nuestro Gif. Pulsando el botón PLAY podemos ver como será nuestra imagen animada y así aún estamos a tiempo de cambiar los valores de duración.

*imagen borrada por el servidor remoto

10º Guardar la imagen. Hay que hacerlo en "Guardar como" para no borrar el primer gif animado original (la primera imagen que cargamos).

*imagen borrada por el servidor remoto

11º Para subir imágenes o ponerlas en la firma, seguir uno de estos tutoriales: http://www.furgovw.org/index.php?topic=177421.0 o http://www.furgovw.org/index.php?topic=190040.0 



12º Disfrutar de esto nuevo que habéis descubierto jeje

Como ya dije podéis poner la imagen en grande, usarla para vuestra firma o incluso crear un icono nuevo a modo de despedida, como he hecho yo 

Un saludo

[triti]

Super interesante  Justamente la semana pasada estuve mirando cómo hacerlo.

[.-RAYCO-.]

Gracias triti!

La verdad es que siempre digo que me basta con que a un solo forero le sirvan mis tutoriales para darme por satisfecho!

Y si además en este caso, ayudo a uno de los grandes del foro, pues doble satisfacción


Un saludo compañero!

[triti]

Veremos a ver si ponemos en práctica este gran tutorial.

Parece mentira que con el super curro que te has pegado en explicarlo bien explicadito que la gente no lo ponga en práctica, pero claro, si hay gente que todavía tiene problemas para subir fotos...

[triti]

Bueno, pues ya tenemos el avatar animado gracias a este manual 

De momento ha quedado un poco supercutre pero ya mejoraremos ese movimiento que ahora mismo parece un tritón espasmótico 

[Dortoka]

jejeje, ya te digo... parece que esta espichando la pata 

Oye Rayco, mu chulo el tutorial 

[BARAKASH]

Muy guapo este tutorial, si es que en este foro se aprende mas que en la universidad.   

Gracias RAYCO.     

[.-RAYCO-.]

Ese tritón bailador jajajaja (parece que hace el baile ese del Robocop o algo así juas juas  )
Si pones el mismo tiempo en ambas imágenes te queda un movimiento más continuado, aunque a lo mejor, quieres tú darle esa pausa al terminar 


PD: Gracias chicos por los comentarios 

[triti]

En principio sólo quería hacer que se moviera de tanto en tanto, como ahora. Si el movimiento es muy continuado, según cómo, puede llegar a rayar.

[.-RAYCO-.]

ah, ok

[triti]

Je... je... ya le voy pillando el gustillo a esto de las animaciones... echarle un vistazo a esta otra que he hecho:

http://www.furgovw.org/index.php?topic=203587.0

lástima que cuando lo grabo con el photoshop en formato GIF me pierde resolución la foto ya que lo pasa a 256 colores ... pierde mucho la foto original, no sé si esto se podría evitar...

[.-RAYCO-.]

triti, está un poco complicado

aunque he encontrado esto googleando:
Si transformas una imagen a GIF perderás colores, ya que  GIF permite 256 colores como máximo.
No obstante, una buena eleccion del método por el cual se reduciran los colores te puede ayudar a disimular el problema. Lo puedes tratar de solucionar con programas como GIMP, Photoshop o Paint shop pro (busca en el el modo de imagen y cambia de RGB a indexado, en Paint shop pro, busca "decrease color depth").

Lamentablemente he formateado el pc no hace mucho y no tengo ninguno de esos programas instalados y no lo puedo probar (y supongo que tarde un poco que estoy algo liado), así que quizás si tú tienes el Photoshop puedas ir probando eso de cambiar el modo de color de RGB a indexado a ver que tal

[triti]

Seguiremos provando a ver, de momento me parece a mi que el formato GIF se queda muy limitado para lo que quiero... probaremos otras soluciones a ver qué tal.

[.-RAYCO-.]

Quizás debas hacer algo más complejo con Flash, pero eso es algo que yo no domino y ahí no te puedo ayudar.

Para animaciones sencillas y curiosas, en la mayoría de las ocasiones te valdrá con el formato GIF, pero si buscas algo más complejo, igual no te sirve

Saludos!

[neodanir]

buen tuto