Los Gifs Animados son la forma más vieja de hacer animaciones. ¿Quien no recuerda esas webs con background de arcoiris que era todo él un Gif animado? En Clab intentamos evitar esas malas costumbres, por lo que si eres propenso a hacer diseños así de bizarros, deja de leer y pulsa aquí.
Bien, querido amante del diseño web. En este tip voy a explicar como hacer gifs animados de una forma sencilla usando un programa que casi seguro que tienes: Adobe Fireworks
Nota:Para este tip, usamos la versión 8 de Fireworks
Hacer un gif en Fireworks es lo mismo que lo que en flash llaman "animación frame by frame", es decir, que en realidad, lo que haremos, será crear todos y cada uno de los fotogramas de nuestra animación.
Para empezar abrimos Fireworks. Creamos un documento nuevo de reducido tamaño (50x50). Vamos al menú "Ventana" y activamos "Fotogramas" (Mayús.+F2)
Para trabajar con mas comodidad, yo me dispuse el entorno de trabajo de esta forma:
Bueno, acto seguido, empezamos con la animación. Nos colocamos en el primer fotograma (de momento es el único que existe) y dibujamos cualquier cosa:
Será mucho mas fácil de animar si lo que hacemos es tener una redonda y una linea por separado. Es decir, en el Fotograma 1, la linea esta en la posición X, y en el 2, la linea está en la posición X+1, mientras que el circulo se mantiene estático.
Si ambos estuvieran rasterizados en un mimo mapa de bits, seria muy, muy engorroso.
El siguiente paso, será crear un nuevo fotograma. En la parte inferior del panel "fotogramas" hacemos clic a añadir fotograma:
Veremos que el escenario de dibujo se vacía, eso es porqué el fotograma que acabamos de insertar está vacío. Pero si vamos al fotograma anterior, veremos que lo que dibujamos sigue ahí. Como queremos que el segundo fotograma sea parecido al primero, copiamos el contenido del primero al segundo.
Para hacer el efecto de que se mueve, debemos variar ligeramente la posición de los objetos (en el 2º fotograma).
En nuestro caso, lo que haremos será elevar un poco las cejas:
Por defecto, si en el panel "optimizar" tenemos marcada la opción "Gif Animado", la animación se repetirá indefinidamente. Si no es así, en el panel "Fotogramas", en la parte inferior izquierda, lo podemos indicar:
Como podemos observar, la animación se sucede demasiado deprisa, y parece que el gif padezca hiperactividad por exceso de estimulantes. Eso lo podemos arreglar determinando el tiempo que queremos que se muestre cada frame. Lo conseguiremos haciendo doble clic en un frame. Nos pedirá que introduzcamos un valor de tiempo en centésimas de segundos (100cs =1s) durante el cual será mostrado el fotograma en cuestión:
Aplicamos otro valor (según se necesite) al segundo frame.
En nuestro caso, aplicamos 72cs al primer frame y 21 al segundo.
Nos resultó esto:
Como podemos ver, los bordes son demasiado grandes para lo que realmente ocupa la imagen. Usando la herramienta de recortar, podemos ajustar el escenario al tamaño deseado:
Para aceptar nuestra selección y redimensionar el escenario, pulsamos enter:
Hay que tener en cuenta que al recortar la imagen, estamos recortando en TODOS los fotogramas, por lo que si en algún fotograma, alguna imagen queda fuera, la cortará también. Para poder ver todos los fotogramas a la vez, y evitar estas situaciones, en el panel "Fotogramas", en la parte inferior izquierda, hacemos clic en el menú "papel cebolla" y seleccionamos "Mostrar todos los fotogramas":
De esta forma podemos recortar viendo los elementos que quedan mas afuera sin temor a cortarlos. Una vez recortado, deshabitar de nuevo.
Nota: En este punto, es recomendable guardar una copia del archivo en formato png para ediciones posteriores, ya que al exportarlo a gif, se rasteriza todo.
Ahora hay que exportarlo: Nos aseguramos que en "Optimización" esta marcado como gif Animado (menú desplegable). Podemos añadirle transparencia alpha si queremos que su fondo sea transparente (evidentemente, en el escenario (panel propiedades), debemos decir que no debe haber fondo) en estos casos.
Una vez esto, Vamos al menú "Archivo" y hacemos clic en "Exportar". Le asignamos un nombre y le decimos ok.
Saludos, muy bueno tuto, se agradece Por:Javier_blog
como hago Gifs kn Image ready ???? Por:snappeR_blog
hola chicos yo soy nuevo en esto necesito que d euan foto me hagan un gif para ustedes debe ser facil es hacer correr una lagrima nada mas
les dejo mi mail es super importante para mi si lo puedo hacer csds_nachito_xp@hotmail.com Por:nacho_blog
nacho_blog :
hola chicos yo soy nuevo en esto necesito que de una foto me hagan un gif para ustedes debe ser facil
Nadie va a hacer tu trabajo, para eso hicimos el tutorial, para que aprendas como hacerlo tu mismo. La creatividad va por tu parte. Por:Bleend
Weno me pareciomas chvr pero prefiero flash Por:caricuy_blog
Importante no! me gustaria saber si se puede hacer un gif de un mapa de bit oviamente con animacion Por:montoya_blog
Bueno, gracias por el tutorial, pero podrian explicarme como realizar gif animados en flash y subirlos a myspace????
Gracias Por:terror
muii buem programa chee!! me lo voi a bajar Por:gise_blog
Fireworks mis respetos me quito el sombrero pero para animaciones no me convence lo utilizo unicamente para editar imagenes ademas es mas sencillo hacer esta clase de cosas en flash Por:erickm_blog
¿quisiera los pasos para aplicar efectos sobre las lineas en algun objeto en fireworks y tambien la ventana del documento de fireworks Por:si si si
Muy bueno el tutorial, pero tengo un problema. En la vista previa la imagen se mueve, pero al exportarla al navegador se queda en el primer fotograma. El bucle está en "siempre". Ya probé muchísimas cosas pero no pasa nada. Agradecería una mano! Por:Gabo_blog
Quien aya echo este tuto de mie...., la verdad tiene muy buena forma de explicar las cosas de manera muy facil y sencilla Se agradece de mil formas que gente asi, exista, sin embidia alguna, gracias Por:Menvel_blog
muy bueno Por:rojo_blog
la verdad es la primera ves que dejo comentarios ps esta buenasa gracias por todo Por:roni_blog
super interesante Por:sandra_blog
bueno estoy empesando en esta area y necesito que me ayuden por favor como puedo hacer girar una imagen en firework Por:sandy_blog
se puede hacer un gif en fireworks que cambie cuando el mouse esta ensima de el???? Por:valiant_blog
hola soy fernando quiero hacer gifts espero que sea bueno chau fer Por:fernando_blog
jooooo. yo no se como ni donde hacer los gifs Por:patricia_blog
alguien sabe porque algunos gif animados no se ve la animacion cuando se mandan por correo. Ya los tenemos alojados en un servidor y los mandamos a través de un programa de envios masivos. Unos los ven y otros no. Algien puede ayudarme? Por:Gema_blog
nombe pongan en esta pagina en directo para hacer dibujos animados estaria mas facil o no chicos Por:alevin_blog
Como puedo hacer para una vez creado enviarlo por email y que aparezca no como documento adjunto sino que sea visible al abrirlo, directamente en el cuerpo del email Por:a2a
me gustan las flores Por:josep_blog
hmmm no se pudo :::: Por:cano _blog
Gracias Por:YO_blog
como puedo exportar un gif animado par que lo pueda integrar a mi mns??? Por:
Me gustaria preguntar donde puedo descargar este programa. Por:Adri-blog
es interesanta saber crear gif y el que no lo sabe es un inutil Por:javier-blog
me quedo asi Por:rapcomando-blog
Y en el caso de que el gif animado sea con un fundido/transición entre una imagen y otra...¿Hay manera fácil de hacerlo con fireworks? Por:MAIKEL-blog
Muy Buen TUto.. Por:Antonio-blog
Sirve para el windows vista Por:XD-blog
woooowww muuuchas gracias
no tenia ni la mas minima idea d coo hacer un gif......
esta muyy bn explicado
muy util Por:maco-blog
hola a todos los cibernautas, un favor saben hacer infografia relacionado con la computacion. usando los progrmas corel(para hacer el logo que identifique al usuario) y despues ultilizar firework con dreanweaver para hacer los enlaces.
necesito la ayuda de ustedes please.
este es mi correo. jcsn_1988@hotmail.com
si pueden envienme archivos creados con esos prog. para poder guiarme.
se le agradece. Por:jhonchristian-blog
sabe alguien si en fireworks puedo insertar sonidos a los botones Por:rodrigo-blog
A mi me pasa igual en la vista preliminar se mueve el gif pero no cuando lo grabo alguien puede ayudar Por:Croquetilla-blog
Hola Myu bueno el tutorial , aaaaa para los que se le mueve la imagen ami me paso pero lo arregle facil.............. Cuando copias el ¨primer¨ fotograma al segundo sale desfasado bueno , copia el primer fotograma al segudo ahora borra el primer fotograma, luego copia el segundo en el primero asi con los demas see te acomodara solo. saludos Por:Cristian Arg-blog
Que raro para los que no se les mueve el gif. lo han exportado como gif animado ?, han cambiado algun fotograma ?. saludos Por:Cristian Arg-blog
quiero crear un gif animado Por:jhonatan-blog
No puedo importar el archivo me aparecen varios gifs de cada fotograma pero no uno solo. Por:Federico-blog
muy buena informacion Por:mario-blog
quien me da un tutorial para diseñar algo asi!!
la parte de los destellos y el humo circulando! se q es en flash debe de ser un clip de pelicula, si tienen algun tutorial concreo se los agradeceria!
sea Flash por siempre 
¡¡He abierto las puertas al lado oscuro de la animación!! 
