Cómo poner varias imagenes en una (Gif)

[Theraven]

Buenos días,

A petición de un compañero, el cual me preguntaba como poner varias imágenes en una sola, les haré este tutorial, indicar que he visto que en algún otro thread hay algo parecido y no voy a copiar algo ya puesto, solo a explicar ese paso más intensivamente.

Comenzamos, lo primero que necesitamos son las imagenes que queramos poner, yo voy a coger algunas de este foro, que me han parecido bonitas, si a algún usuario le molesta, que me lo diga que la quito sin problemas.

Bien pues, tengo estas imágenes

Bien, estos gifs se pueden hacer con diferentes programas, Ulead, Flash, Photoshop... a mi me gusta hacerlas con Photoshop y así lo explicaré.

Abrimos Photoshop

Vamos a Archivo > Abrir y seleccionamos las imagenes que vamos a utilizar
.
Mantenemos presionada la tecla "Ctrl" y vamos dando un click simple sobre cada imágen que vayamos a usar. Luego le damos a abrir.

Una vez abiertas las imágenes, y con el fin de mantener una uniformidad, vamos a ver cual de ellas es la más grande, en este caso es la de nuestro compañero Eloy58 (636 x 420 px).

Ahora crearemos un nuevo documento, con Anchura: 636 px, Altura: 420 px
y en este caso, como trabajamos con PNGs (imagenes con fondo transparente) pondremos Contenido de fondo: Transparente. Damos OK y listo.

Ahora vamos a poner todas las imágenes en una misma, es decir en el nuevo archivo creado, vamos a poner las demas imágenes también, cada una en una capa, y les pondremos un nombre a cada capa para distinguirlas bien.
Para esto, nos situamos en la imagen original, y con la Herramienta de Seleccion la arrastramos hasta el nuevo documento creado, esto creará una nueva capa con la imágen que hemos arrastrado, luego doble click sobre el nombre de esa capa y le ponemos el nombre que querramos para identificarla.
Una vez tenemos todas las capas en nuestro documento, ya podemos cerrar las demas imagenes, puesto que ya las tenemos todas en nuestro documento repartidas en capas.

Ahora, cambiamos el entorno a Movimiento o Animación, esto es arriba a la derecha, donde pone Espacio de trabajo, o bien Ventana > Espacio de Trabajo > Movimiento ( CS5 ), veremos que abajo, nos sale una linea de tiempo, dividida en según cuantas capas hayamos creado, a la izquierda se muestran los nombres de las capas que pusimos con anterioridad.

Ahora hay que darle al icono que hay en el apartado de animación a la derecha del todo, ese que es una flechita indicando hacia abajo y unas rayitas horizontales, nos sale un menú desplegable, en éste seleccionar "Ajustes de documento", y nos saldra una ventana.

En esta ventana, le ponemos la duración de nuestro Gif, en este caso tengo 6 imágenes, y quiero darle a cada imágen 5 segundos, con lo que le pongo de tiempo 30 segundos, y luego cambio los FPS a 1 puesto que son imágenes estáticas y además en el momento de mover líneas se ajustará mejor a los segundos.

Este es el paso más importante, nos movemos con la púa, que es la linea roja, le vamos a dar a cada capa 5 secs, y siempre la siguiente justo cuando acaba la anterior, para ésto, situamos la linea roja en el segundo 5, y situándonos al final de la linea, clickamos y mantenemos apretado, arrastrando hasta que el final de la linea (cola) está en la linea roja, asi lo que hacemos es indicar que esa capa solo durará 5 secs. Luego arrastramos desde el principio de GraciasMorado hasta la linea roja, indicándole, que su reproducción comenzará en el segundo 5. En este caso tirando desde cualquier punto de la barra.

Seguimos haciendo el paso anterior con las demás capas.Se ve la diferencia de color, si se tira de la barra (se mueve la barra) el color es gris (1).
Esto es arrastrar DESDE CUALQUIER PUNTO DE LA BARRA MENOS EL PRINCIPIO hasta la linea roja.
Si lo que hacemos es recortar la cola desde el final, el color es diferente, en este caso cyan (2)
Esto es RECORTAR DESDE EL FINAL DE LA BARRA (COLA) hasta la linea roja.

Una vez lo tenemos acabado, lo probamos dándole al icono de Play, si lo tenemos todo correcto ya podremos guardar la imagen.

Para guardarla, vamos a Archivo > Guardar para Web y dispositivos o el atajo "Alt + Mayus + Ctrl + S" y nos saldrá la ventana de Opciones de guardado.

En esta ventana, comprobamos que sea formato Gif (para que tenga la animación), en este caso comprobamos que esté marcada la opción "Transparente" y luego bajo del todo a la derecha, en Opciones de repetición, cambiamos a Infinito, para que nunca deje de moverse.

Luego le damos a Guardar y ya seleccionamos la ubicación y el nombre para nuestra imágen GIF. Ya lo tendríamos.

Éste es el resultado final:

Si se quedaron con alguna duda, no duden en preguntar, que les responderé encantado.

Un saludo.

[Hunted]

Excelente Raven, muchas gracias!!! muy bueno el tutorial... a favoritos!!!

[baduser]

Muy bueno, gracias por el tuto compañero.....

salu2

[carmen10]

Buen tutorial................muchas gracias

Saludos

[Eloy58]

[jac5]

Muchas Gracias es estupendo, pero las imagenes un poco mas lentas que no dan tiempo a leer aunque quedabien explicado.
Saludos

[Theraven]

Iniciado por jac5 ...pero las imagenes un poco mas lentas que no dan tiempo a leer aunque queda bien explicado...

Ya modifiqué la imágen principal para hacerla más facil de leer.

Un saludo.

[VJEVans]

exelente tutorial .. Gracias compañero

[racb28]

muchas gracias amigo

saludos

[cramercaba]