Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

GIFs animados


Sabes realizar pequeñas animaciones GIF? Aqui encontraras los pasos para realizarlas.


01/1/70 - No sabes hacer un círculo con el PaintBrush? no te preocupes, igualmente puedes hacer magníficas animaciones. Eso si, necesitarás la ayuda de alguna aplicación que haga algo de trabajo por ti. En la sección de recursos puedes encontrar lo que necesitas. Para la realización de los ejemplos hemos utilizado el Animator Shop 2 que acompaña al Paint Shop 6.0.

Lo mas fácil

El primer paso es tener una idea, cosa nada fácil. Se pueden hacer infinidad de maravillas, lo mejor es buscar buenos resultados con poco trabajo. Hay que recordar siempre las limitaciones de tamaño en internet, con lo que se debe trabajar siempre con poca profundidad (cantidad de colores) y tamaños reducidos. También es mejor usar un buen programa que optimize el tamaño de la animación.

Para el que realmente tenga problemas para hacer un círculo puede crear una animación con cualquier imagen GIF, aplicandole alguno de los efectos que ofrecen las aplicaciones. Un ejemplo de la aplicación de un simple efecto a una simple imagen, que se puede hacer con cuatro clicks:


Bola Bola animada


Tus propias animaciones

Mucho más interesante es el realizar uno mismo su propia animación para eso solo hay que seguir unos sencillos pasos. Primero debes determinar el tamaño de la imagen animada, cada uno de los fotogramas debe respetar ese tamaño. También debes encontrar el número mínimo de fotogramas que necesitas para crear el realismo deseado, este número no suele ser muy alto. Debes seguidamente realizar cada uno de los fotogramas, la mejor manera es hacer pequeños cambios en cada uno de ellos. Después los reunimos en un programa de animación y los montamos. Una muestra de lo que se puede realizar con unas decenas de clicks:


Fotograma 1 Fotograma 2 Fotograma 3 Fotograma 4

Animación


Realizada simplemente girando cada una de las letras de forma diferente. Sobra deciros que para completar el ciclo correctamente es necesario que el último fotograma sea similar al primero. Gracias a la baja profundida (16 colores) y a que utilizamos solo cuatro fotogramas la animacón solo ocupa 988 bytes!

Ultimas sugerencias

Esta animación ha necesitado unos centenares de clicks. Ha estado realizada en dos partes: la animación de las bandas laterales y la de la imagen interior. Aún con la mínima profundidad (2 colores) el archivo ocupa 11k ya que esta compuesto de 27 fotogramas. Animación

Hay otros importantes factores sobre los que podemos jugar, almenos si nuestro software lo permite. Uno es la duración de los fotogramas, podemos ralentar o acelerar las animaciones. Pero cuidado, porque fotogramas lentos disminuyen la fluidez de la animación, recordamos que lo importante es que el ojo no llegue a "ver" cada uno de los fotogramas por separado.

Otra posibilidad es la de no repetir indefinidamente la animación, sino pasarla una sola vez o un numero determinado de veces. Muy útil como inicio de vuestras páginas. Por último deciros que las animaciones también se pueden utilizar como fondos, estas animaciones deben ser muy sutiles para no cargar demasiado la página.

Programas para crear GIFs animados

Hay multitud de programas para la creación de gifs animados. Podemos hacernos una idea del número de aplicaciones existentes visitando el directorio de animación de imágenes del sitio de descargas Tucows, donde hay muchas utilidades para animación en general y específicas para gifs animados.

De todos modos, aquí tenemos una serie de recomendaciones de programas.

Nota: Esta referencia a los programas para hacer gifs animados se la debemos a Miguel Angel Alvarez y Quo Vadis Pepus. Sin ella, este artículo no quedaría completo.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 2 categorias relacionadas
+ 2 comentarios (Añadir)

 Autoría, licencia y acciones sobre este artículo

Informe de Luis Vilaroig*

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Talleres de diseño web

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Diseño web
+ Entrar en Gifs Animados


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestran 2 comentarios revisados

 Comentario de Joshep
01/8/05 
Muchas gracias por publicar este tipo de articulos es muy interesnate para mi que apenas comirenzo y sin este tipo articulos el aprendizaje de muchos se dificultaria mucho

 Comentario de ESEguille
23/12/07 
Por fin alguien q habla del peso de las pag.web.
Hay gente q cree q se puede agregar ad infinitum.
Soy novato, pero he aprendido esto: en cuanto una pag no se abra en segundos, el internauta toma las de villadiego.
Un saludo a todos. Voy a aprender a hacer GIF animados...

Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Talleres de diseño web
Categorías
+Diseño web
+Gifs Animados

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia