En este tutorial veremos como animar un texto para un banner. Antes de comenzar con el tutorial debes crear el fondo del banner, en mi caso yo lo hice de 400 x 100 pixel.

PASOS

1º Una vez que tengas el fondo del banner, escribimos un texto ( este será el texto al que le daremos la animación, para lograrla tendremos que ir duplicando la capa del texto e ir moviéndola para dar la sensación de que el texto avanza), a esta capa del texto la nombramos "1"

2º Duplicamos la capa "1" y la nombramos “2” ( esto a la hora de hacer la animación nos facilitará la tarea), hacemos invisible la capa "1" y seleccionando la capa “2”, activamos la herramienta mover y con la flecha derecha del teclado avanzamos el texto 20 píxeles, dando 20 clic en la tecla flecha derecha, el número de clic es opcional, yo para el tamaño de este banner opte por un desplazamiento de 20 píxeles, pero si el banner es más pequeño obviamente el desplazamiento debe ser menor.

Ojo, no olvides que para los desplazamientos antes hay que seleccionar la herramienta mover

 

.

3º Duplicamos la capa “2” y a esta nueva capa la nombramos capa “3”, hacemos invisible la capa “2” y movemos la capa “3”, 20 píxeles.

4º Duplicamos la capa “3” y a esta nueva capa la nombramos capa “4”, hacemos invisible la capa ”3” y movemos la capa “4” , 20 píxeles.

5º Duplicamos la capa “4” y a esta nueva capa la nombramos capa “5”, hacemos invisible la capa “4” y movemos la capa “5”, 20 píxeles.

Repetiremos este procedimiento hasta que el texto llegue al final del banner y comience a desaparecer

6º Llegados a este punto comenzaremos a trabajar con dos capas de texto, una la que aparece por la derecha y otra la que va desapareciendo por la izquierda.

En mi caso esta capa que comienza a desaparecer es la llamada capa" 9". Bieen!! Pues duplicaremos dos veces esta capa" 9", a una la llamaremos capa "10" y a la otra la llamaremos “ con 9” ( se que es un nombre extraño para una capa, pero nos va a ayudar a saber cuales son las capas que deben ir visibles a la hora de montar la animación ).

A esta capa llamada “con 9” le aplicaremos la herramienta mover y con la tecla flecha izquierda, la situamos al principio del banner ( En esta capa sólo aparecerá una parte de la última letra, como se indica en la imagen siguiente)

Recordar que tambien habimos creado la capa "10" , así que ahora toca moverla. El procedimiento será el mismo. Hacemos invisible la capa “9” y movemos la capa “10” con la tecla flecha derecha, 20 píxeles.

7º Duplicamos la capa “con 9” y duplicamos la capa “10”, a la capa resultante de duplicar la capa “con 9” la llamaremos “con 10 “ y a la resultante de duplicar la capa “10” la llamaremos “11”. Hacemos invisible las capas “con 9” y “10” . Seleccionamos las capas “con 10”, activamos la herramienta mover y pulsamos en la tecla flecha derecha, haciendo 20 veces clic sobre ella, de esta forma se desplazará la capa de texto 20 píxeles. A continuación hacemos lo mismo con la capa “11”.

8º Duplicamos la capa “con 10” y duplicamos la capa “11”, a la capa resultante de duplicar la capa “con 10” la llamaremos “con 11” y a la resultante de duplicar la capa “11” la llamaremos “12”. Hacemos invisible las capas “con 10” y “11” haciendo clic en el ojo que se encuentra junto a cada una de esas capas en la paleta capas. Seleccionamos las capas “con 11”, activamos la herramienta mover y pulsamos la tecla flecha derecha haciendo 20 veces clic sobre ella, de esta forma se desplazará la capa de texto 20 píxeles. A continuación hacemos lo mismo con la capa “12".

9º Duplicamos la capa “con 11” y duplicamos la capa “12”, a la capa resultante de duplicar la capa “con 11” la llamaremos “con 12” y a la resultante de duplicar la capa “12” la llamaremos “13”. Hacemos invisible las capas “con 11” y “12” haciendo clic en el ojo que se encuentra junto a cada una de esas capas en la paleta capas. Seleccionamos las capas “con 12”, activamos la herramienta mover y pulsamos la tecla flecha derecha haciendo 20 veces clic sobre ella, de esta forma se desplazará la capa de texto 20 píxeles. A continuación hacemos lo mismo con la capa “13”.

10º Duplicamos la capa “con 12” y duplicamos la capa “13”, a la capa resultante de duplicar la capa “con 12” la llamaremos “con 13” y a la resultante de duplicar la capa “13” la llamaremos “14”. Hacemos invisible las capas “con 12” y “13” haciendo clic en el ojo que se encuentra junto a cada una de esas capas en la paleta capas. Seleccionamos las capas “con 13”, activamos la herramienta mover y pulsamos la tecla flecha derecha haciendo 20 veces clic sobre ella, de esta forma se desplazará la capa de texto 20 píxeles. A continuación hacemos lo mismo con la capa “14”.
.
.
.
Así hasta llegar al punto en el que el texto de la derecha desaparezca completamente y el de la izquierda se situe completo . Os muestro la imagen para que se vea más claro

 

11º Para terminar debemos hacer invisible todas las capas menos el fondo y la capa "1"

12º Ahora nos pasaremos a ImageReady. Para ello nos vamos a Archivo / Editar en ImageReady. Lo primero que haremos en ImageReady es asegurarnos que están visibles las paletas “Animación” y “Capas”·, eso lo comprobaremos en Ventana / Animación ... y en Ventana/ Capas .Estas serán las dos paletas con las que trabajaremos.

13º La paleta de animación la veremos como se muestra en la imagen siguiente, en ella vemos un icono metido en un recuadro rojo, ese es el icono de “duplicar el cuadro actual”, pulsaremos en ese icono para duplicar el cuadro y a continuación nos iremos a la paleta de capa y haremos invisible la capa de texto “1” y haremos visible la capa "2".

14º Pulsamos en el icono “duplicar el cuadro actual” , a continuación nos iremos a la paleta de capa y haremos invisible la capa “2” y visible la capa “3”.

15º Pulsamos en el icono “duplicar el cuadro actual” , a continuación nos iremos a la paleta de capa y haremos invisible la capa “3” y visible la capa 4”.

16º Pulsamos en el icono “duplicar el cuadro actual” , a continuación nos iremos a la paleta de capa y haremos invisible la capa “4” y visible la capa “5”.

17º Pulsamos en el icono “duplicar el cuadro actual” , a continuación nos iremos a la paleta de capa y haremos invisible la capa “5” y visible la capa “6”.
.
.18º Así hasta llegar a la capa “9”, al hacer visible la capa “9”, debemos también hacer visible la capa “con 9”

19º A continuación volvemos a pulsar en el icono “duplicar el cuadro actual” y hacemos invisibles las capas “9” y “con 9” y haremos visible las capas “10” y “con 10”

20º Pulsamos en el icono “duplicar el cuadro actual” y hacemos invisibles las capas “10” y “con 10” y haremos visible las capas “11” y “con 11”

21º Seguimos este mismo procedimiento hasta el final, en mi caso como hay 17 capas, el final será hacer invisible las capas “16” y “con 16” y hacer visibles las capas “17” y “con 17”.

22º Si queremos ver como queda la animación pulsamos sobre el botón "play" para verla, este botón se encuentra en la paleta animación, ahí en esa paleta también podremos modificar la velocidad de los marcos, en el caso que queramos aumentarla o disminuirla. En este banner yo puse “Sin retardo”, es decir, O segundo. La forma de hacerlo es pulsando en la flechita pequeña que está señalada en la imagen siguiente , al pulsar en ella se desplegará una lista con distintos tiempos, y podremos elegir el que más nos convenga.

Para guardar vamos a archivo / guardar optimizada