Como hacer animaciones con Photoshop CS5

Publicado por asktutorial.

Como hacer animaciones con Photoshop CS5El que ha incursionado en el mundo de la Web sabe que las imágenes y las animaciones tienen un costo en rendimiento considerable para nuestro sitio, no obstante no podemos prescindir de estas de forma permanente pues son las que le dan vida desde el punto de vista visual y lo que no entra por los ojos… El Photoshop CS5 provee herramientas para la creación de estas animaciones en formato GIF de manera que sean de tamaño reducido para poder incorporarlas a nuestro sitio sin el temor de afectar el rendimiento de la carga de la página Web. Para esto vamos a crear un nuevo lienzo sobre el que vamos a construir nuestra animación, vamos a [Archivo -> Nuevo…] esto nos abrirá una ventana que nos permitirá configurar los parámetros de nuestra nueva imagen. Seleccionamos el tamaño 40 de anchura por 120 de altura todo esto en pixeles, transparencia de fondo y  damos aceptar.

 

Esto nos creará la imagen sobre la que crearemos nuestra animación. Vamos a crear tres círculos de color negro en el área simulando un semáforo. Para ello seleccionamos la herramienta pincel y le damos tamaño 40 y dureza 100%, se supone que hay ciertos conocimientos básicos del trabajo con Photoshop de lo contrario es demasiado pronto para crear animaciones. Nos quedará algo como esto:

 

Ya tenemos el fondo de nuestra animación, vamos ahora a crear tres nuevas capas vacías sobre nuestro fondo, para ello vamos a  [Ventana -> Capas], más rápido con la tecla F7, y las creamos con el ícono inferior derecho.

 

Ahora, con la misma herramienta pincel, creamos en cada capa un círculo de cada color del semáforo, rojo, amarillo y verde tratando de cubrir cada círculo negro.

 

Ahora para comenzar la animación seleccionamos [Ventana -> Animación], esto nos abrirá en la parte inferior una ventana donde podemos gestionar los frames de nuestra animación.

 

Ahora vamos a crear tres nuevos frames a partir del actual, lo hacemos con icono inferior derecho.

 

Vamos a comenzar a animar, seleccionamos el primer frame y vamos a quitarle la visibilidad a las capas roja y amarilla.

 

Luego seleccionamos el segundo frame y dejamos la visibilidad solo para el fondo y la capa del color amarillo, luego lo hacemos para el tercer frame con la visibilidad para el fondo y la capa del color rojo y por último lo hacemos para la cuarta y repetimos la segunda variante dejando visible el color amarillo y el fondo. Quedará de la siguiente forma:

 

Vamos a seleccionar los cuatro frames y le ponemos un tiempo de espera a cada uno de 0.5seg.

 Y ya tenemos nuestra animación terminada, ahora seleccionamos [Archivo -> Guardar para web y dispositivos]  y en la ventana que saldrá seleccionamos  el destino de nuestro GIF animado al darle guardar.

Nos quedará un archivo de 5.7kb que para nada es demasiado grande.

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

¡Suscribete GRATIS!

Sigueme en cualquiera de mis Redes Sociales para acceder al contenido de este sitio!