Creando Animaciones GIF

Las imágenes GIF pueden darte un mejor diseño a tus páginas web, y hoy les quiero mostrar un ejemplo sencillo, para que se animen a hacer el suyo.


Publicado: Editado: Estado:

GIF es uno de los tres formatos de imagen que se utilizan en la Web, además del JPG (JPEG) y el PNG, y es el acrónimo de Graphics Interchange Format. Es uno de los formatos gráficos más antiguos y se caracteriza por aceptar un máximo de 256 colores, tiene la posibilidad de ser transparente, y además puede ser animado.

En este ejemplo utilizaré Adobe Photoshop CS6 e incorporaré dos images al proyecto, lo que haremos es una mano moviendo el ratón de la PC. Para comenzar agregamos la imagen de fondo y duplico el fondo para agregar un efecto de la luz del monitor como si esta parpadeando (Capa 0 y Capa 1).

La Capa 2, 3, 4, 5 corresponde a la imagen de la mano en varias posiciones para crear ese efecto que se mueve.

Lo que haremos a continuación es activar la Línea de Tiempo en el menú Ventana para programar la capa de fondo y el movimiento para crear ese efecto

Para eso agregamos cuadros a la línea de tiempo para cambiar las capas que queremos mostrar.

Una vez terminado lo guardas en Archivo Guardar para Web y listo el GIF se verá de esta manera

Les dejo el proyecto completo (Descargar)

Bibliografía
  1. Experiencia propia
Dar puntos de agradecimiento
Reportar esta publicación

Déjanos tu comentario

Comentarios

mariogarcia

(Administrador)

Intereses

música, diseño, programación, electrónica, historia, geografía

Puntos: 146 Votos: 113