ImageReady: crear animaciones

Crea tu firma animada utilizando  imageready.

Se trata de hacer un gif animado, esta técnica se puede usar tanto para firmas como para banners y demás (cambiando sólo las dimensiones). 

Pasos a seguir:

1º Crear un nuevo documento con las dimensiones: 400px de ancho por 150px de alto.
Dibujar en distintas capas cada una de las imágenes que formarán parte de nuestra animación. En nuestro caso  la capa fondo la hemos dejado en negro y hemos dibujado distintos rayos en cuatro capas distintas. Luego hemos creado una nueva capa y la hemos “manchado” un poco con un pincel gris y finalmente hemos añadido el texto.

layers

3º  Si no la tienes visible, abre la ventana animation que está en el menú superior, en window. Verás que tienes el primer “fotograma” de la animación. Éste tendrá el aspecto que tiene la imagen del área de trabajo y se verán las capas que estén visibles y que no queden tapadas por ninguna otra. En nuestro caso quedan a la vista las capas 4, 5 y la que contiene el texto.

animation

4º Ahora se trata de ir añadiendo fotogramas y ocultando y mostrando las capas que vamos a dejar ver en cada uno de ellos.  Para añadir un nuevo fotograma sólo pulsa  en la ventana animation y para hacer visible o no una capa con  igual que con photoshop. (La secuencia debe terminar en su último paso igual que empezó para que no se note luego un corte al repetirse la animación).

5º Nosotros para elaborar nuestra secuencia vamos a jugar también con la transparencia de la capa5, para que aparezca de un modo más progresivo, así en un primer fotograma le damos un 25% de opacidad y luego en los siguientes 50%,75% y 90%. Ya sabes seleccionas la capa y eliges la opacidad .

6º Luego hay que modificar el tiempo que queremos que dure cada fotograma.
Esta es nuestra secuencia con los tiempos:

secuencia

Más o menos 0.2 segundos es suficiente para las imágenes de tránsito y 2 segundos para la que quieres resaltar (la que contenga el texto que hay que leer), pero esto depende de la animación y del gusto personal. Para ajustarlo lo mejor es darle al play y probar.

7º Cuando ya lo tengas ve a archivo y salva optimizado como un gif.

Tendrás resultados como estos…

 



Escribe una respuesta