Animaciones GIF
con G.I.M.P.

imagen de tuto de animacionGIF por anubis4d

En éste tutorial voy a explicar como hacer animaciones como a que se ve en ésta imagen. Puede no ser la gran cosa pero es muy empleado en carteles de LED, y seguro que su iphone/ipad lo ve a diferencia de las animaciones SWF.

In this tutorial, I will explain how to make simple loop animations, like the one you see here. May not be such a big deal, but many led Signs uses these, and your iphone/ipad can see then, not like those swf animations

imagen de tuto de animacionGIF por anubis4d

Me gusta usar para animaciones simples GIFs animados, de hecho son muy fáciles de crear en linux con la aplicación GIMP que viene por defecto con el sistema, en éste caso he utilizado INKSCAPE otra aplicación que se instala usando los repositorios.

I like for simple animations, to use animated GIFs, and actually are very easy to create in linux with the included by default app named G.I.M.P., in this example is just like, and also I used another app called INKSCAPE, that you may install using the repositories method.

imagen de tuto de animacionGIF por anubis4d

En inkscape he diseñado los estados del isotipo que funcionarán como CUADROS de la animación. Pueden bajarse éste dibujo vectorial desde la sección 2D.
Cuando el dibujo ya está listo en inkscape, click en el botón exportar, y en el diálogo emergente seleccionar PAGINA, entonces sólo lo que se encuentre dentro de la hoja será enviado afuera y se indica el tamaño de la imagen y luego click en EXPORTAR lo que genera en éste caso el archivo 00.png.
luego se pone otro de los gráficos en el área de la hoja y se repite la operación cambiando en la ventana de exportar el nombre de archivo por 01.png y así hasta que tenemos todos los cuadros de la animación en archivos PNG.

I´ve used inkscape to design the different states of the object, which will work as animation FRAMES.You also may download the original drawing from the 2D area.
When you have the drawings on inkscape click on the EXPORT boton, and indicate PAGE on the BITMAP EXPORT popup, and the size for the bitmap, you have also to indicate a filename in this case 00.png and export. Move other of the objects to the page area and change in the EXPORT BITMAP filename to 01.png, and repeat export until you have all the states for the animation.

imagen de tuto de animacionGIF por anubis4d

Estos son los archivos que he generado en mi escritorio, como ven inkscape guarda el canal de transparencia en cada uno de ellos.

these are the generated files on my desktop, as you see inkscape also exports the transparency information on each on of them.

imagen de tuto de animacionGIF por anubis4d

Ahora se abre GIMP, no es necesario instalado ya que viene con ubuntu o cualquier otra distribución de linux, pero si está utilizando windows o MAC, recomiendo descargarlo gratuitamente desde el sitio oficial de GIMP

No open GIMP, it´s not necessary to install if you are running ubuntu or any other linux distro but if you are on a Windows or MAC computer, you may have to download the app from the oficial website.

imagen de tuto de animacionGIF por anubis4d

Acceder a la opción del menú FILTROS> ANIMACION > OPTIMIZAR para gif.
lo que eliminará cualquier información innecesaria entre capas consecutivas, o sea que cuando se reproduscan los frames se irán acumulando para obtener la misma animación pero ahorrando tamaño en el archivo final.

go to the FILTERS > ANIMATION > OPTIMIZE for gimp.
Which eliminates any unnecesary and reduntant information between frames, so the layer will accumulate on top of each other to get the same result in a final smalled filezise.

imagen de tuto de animacionGIF por anubis4d

Arrastrar el archivo 00.png sobre la ventana de imagen, luego sobre ésta imagen se arrastra 01.png, lo que generará otra capa, luego arrastramos y soltamos sobre ésta 02.png y luego lo mismo para 03.png. En éste punto seguí agregando imágenes pero en orden inverso 03.png, 02.png, 01.png y 00.png.

Drag an drop the 00.png file on the empty image window, then on top of this image drag and drop 01.png, which will generate another layer, then do thew same with the other images. At this point I kept adding reverse order layer, 03.png, 02.png, 01.png and 00.png.

imagen de tuto de animacionGIF por anubis4d

En el panel de capas vemos que las capas ahora contienen sólo la información que cambia.

In the layer panel, you can see that layers only contain the changing information.

imagen de tuto de animacionGIF por anubis4d

Se puede previsualizar la animación usando la opción de menú FILTROS > ANIMATION > REPRODUCCION.

the animation can be previewed using: FILTERS > ANIMATION >PLAY menu option.

imagen de tuto de animacionGIF por anubis4d

En ésta ventana emergente puede previsualizar su animación.

in this popup you may play and make shure your animation is working fine.

imagen de tuto de animacionGIF por anubis4d

if you close the window or go to ARCHIVO > GUARDAR o ARCHIVO > GUARDAR COMO se abre la ventana que nos permite salvar el archivo. En el cuadro NOMBRE, ponemos el nombre del archivo con la extensión .GIF al final y GIMP se encarga de detectar las opciones de dicho formato.

if you close the window or go to the FILE>SAVE or FILE>SAVE AS menu option, a SAVE IMAGE popup will ask for the filename and other options, if you add the .GIF extension to the filename, GIMP will take care of detecting the options in that format.

imagen de tuto de animacionGIF por anubis4d

Esta es una forma muy antigua y simple de generar botones o imágenes animadas para internet, aunque han cobrado nuevo auge en teléfonos celulares y dispositivos móviles, como fondos de pantalla o animaciones de inicio, en la web se usan cada vez menos aunque mi sitio pretense ser lo más amigable para los buscadores (y el sistema IOS) posible.

This is a very old but simple way to make boton or internet related animated images, anyway these has gained new life in mobile and gsm cellphones as background animations or startup animations. Particulary on the web, are everytime less used but I intend to make this website the more search engine (and IOS) friendly possible.