Inicio TuToriales diseño web tutorial 11

Ejercicio: Animación por capas
Objetivo: Crear animaciones para la web
Software y versión utilizados: Adobe Imageready CS
Nivel: Medio
Duración: Una hora

Archivos necesarios: Ninguno

 

Paso 1

Para comenzar empezados duplicando la capa y transformando la imagen.
En este caso eliminamos un trozo del fuelle del acordeón y rotamos todo el conjunto.

Truco

Para duplicar rápidamente una capa arrastramos la capa al icono de añadir nueva capa.

 

 

Paso 2

Añadimos sucesivamente capas y vamos realizando pequeños cambios.
Vamos cortando trozos del fuelle y rotando en incrementos proporcionales.
En este caso el fuelle del instrumento recupera progresivamente su forma inicial, por lo tanto repetimos los pasos segundo y primero y los colocamos como se ve en la ilustración.

 

Paso 3

Una vez realizadas todas las capas abrimos la paleta Animación. Desde la pestaña de esta paleta elegimos la opción Crear cuadros a partir de capas. De esta manera se crean tantos cuadros como capas existentes.

 

 

 

Resultado

Seleccionamos todos los cuadros y escogemos un retardo de 0.1 s para que la animación se reproduzca suavemente.
El resultado es el siguiente, como se ve en la parte izquierda...

Ernesto Navarro Durá. 2009