Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Complementos

Manuales necesarios para el desarrollo web distintos de la programación.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 123

Visitas el mes pasado: 167

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Imágenes en la web (III)

Imágenes animadas

Definición

Una imagen animada es una imagen en movimiento, Está compuesta de varios fotogramas que van apareciendo correlativamente, de manera que den la sensación de animación.

El único formato de imagen compatible con la web que admite imagenes animadas es el .gif Es por eso que a este tipo de imagenes se les llama también "gifs animados".

Las imagenes animadas constan de una imagen compuesta de varias capas que se van mostrando sucesivamente en el tiempo. Cada capa se corresponde con un fotograma, de manera que cuando se han visualizado todas el ciclo vuelve a empezar.

Su uso está muy extendido en la web, ya que son relativamente fáciles de hacer y ocupan poco espacio en memoria. Se utilizan principalmente con dibujos, logos, etc.


Creación de un gif animado

Veremos ahora un ejemplo de cómo crear un gif animado. Para ello necesitamos tener una secuencia de fotogramas (imágenes) que vayan a aparecer en la animación, y un programa que nos convierta esos fotogramas en un gif animado. Veamos todo esto con un ejemplo.

Queremos crear un gif animado, para ello lo primero que debemos de hacer es obtener las imágenes de los fotogramas. Bien sea dibujándolas o fotografiandolas. aquí haremos un gif animado a partir de las siguientes imágenes:

telefono foto 1          telefono foto 2          telefono foto 3

Para insertar estas imágenes en una secuencia utilizaremos un programa llamado PhotoScape. Este programa es esencialmente un visor de fotos que lleva incorporadas algunas funciones de los diseñadores gráficos. Una de estas funciones es la de poder transformar varias imágenes en un gif animado. El programa es gratuito y puedes descargarlo en español desde la página de softronic / PhotoScape. En la sección Programas y aplicaciones / Diseño gráfico mostramos más sobre este programa.

Una vez tenemos el programa PhotoScape instalado en nuestro ordenador lo abrimos y vemos que en la parte superior tiene una serie de pestañas. Abrimos la pestaña donde pone Gif animado.

El programa tiene tres áreas diferenciadas. En la parte izquierda hay un explorador de carpetas y archivos, que nos permite seleccionar el archivo con el que queremos trabajar. La parte central es el área de trabajo, donde aparecerán los archivos seleccionados. Y en la parte derecha hay una serie de botones y comandos para modificar los archivos seleccionados.

Tras haber abierto la pestaña de Gif animado seleccionamos en el explorador los archivos de las imágenes que formarán los fotogramas del gif animado, y las arrastramos a la parte central.

Nosotros seleccionamos las imágenes anteriores, en el mismo orden en el que las hemos mostrado más arriba. y las arrastramos a la parte central del programa. Estas se muestran en la parte superior. Cuando ya tenemos las tres imágenes, volvemos a arrastrar otra vez la segunda y tercera imagen, de forma que se repiten, teniendo así cinco fotogramas.

uso de photoscape

Debajo de la serie de fotogramas que hemos elegido vemos cómo nos quedará el Gif animado.

Pulsando sobre cada uno de los fotogramas con el botón derecho del ratón podemos ver un menú con una serie de opciones. Elegimos la primera opción: Cambiar tiempo de visualización.. Nos sale un cuadro donde podemos cambiar el tiempo que vamos a ver esa imagen antes de que pase a la siguiente; el tiempo se expresa en centésimas de segundo. Cambiamos los tiempos de las imágenes de manera que la primera dura 60 centésimas, y las demás las dejamos su duración en 10 centesimas.

En este ejemplo dejaremos los fotogramas tal como los tenemos ahora. Sin embargo si has observado la lista de opciones del menú contextual o de la parte derecha vemos que podemos realizar muchas más acciones con los fotogramas.

Teléfono animado

Pulsamos para acabar en el botón Guardar de la parte derecha (arriba), y guardamos el archivo como un nuevo gif animado.

A la derecha podemos ver el resultado del ejemplo que hemos puesto aquí.

Hemos utilizado aquí el programa PhotoScape para crer un gif animado, ya que es uno de los más sencillos de usar. Otros programas de diseño gráfico, como GIMP o Photoshop también permiten realizar gifs animados.

Sin embargo el mecanismo en estos programas es distinto. Primero guardamos los fotogramas como sucesivas capas de una misma imagen. Después, al guardar el archivo como .gif tenemos la opción de guardarlo como gif animado. Es ahi donde incluimos el tiempo entre fotogramas y otras opciones específicas de los gifs animados.







Complementos/Programas

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com