Animaciones para la web con GIMP

En este tutorial vamos a ver como realizar animaciones para la web en formato GIF o MNG. Ya sean emoticones, banners o lo que se les ocurra.
El formato GIF seguro que todos lo conocen en cambio MNG no es tan conocido, surgió de la necesidad de tener un formato libre de animaciones para la web, deriva del PNG y posee todas su ventajas.
El formato GIF solo soporta color indexado (máximo 256 colores) o escala de grises, transparencias sin niveles(puede determinar si un pixel es transparente o no, pero no que tan transparente es) e imágenes entrelazadas en 1D.
En cambio el PNG además de color indexado y escala de grises permite imágenes con color verdadero(TrueColor) 48 bits por pixel , permite 254 grados de transparencias e imágenes entrelazadas en 2D.
Si bien las ventajas son muchas es muy probable que si realizamos una animación en MNG no todos la podrán ver, ya que los navegadores no suelen incluir todavía soporte al mismo, aún el GIF sigue siendo el formato mas popular.
Para saber si tu navegador soporta este formato mirate los test de esta página:
http://www.libmng.com/MNGsuite/
Para mas información pueden ver la página del proyecto (en inglés):
http://www.libpng.org/

Se puede animar con GIMP?.

Tanto para animaciones GIF o MNG el proceso en GIMP es el mismo salvo en algunas cosas para los GIF que mas tarde veremos.
Para este tipo de animación Gimp toma como cuadros a las capas que posea una imagen y si su duración no fuera la misma para todos los cuadros la tendríamos que indicar en el nombre de la capa en milisegundos y entre paréntesis , por ejemplo si queremos que un cuadro dure un segundo pondríamos al lado del nombre de la capa (1000ms), para entenderlo mejor miremos la imagen de abajo:

Como podemos ver es una imagen compuesta por 4 capas, es decir 4 cuadros de animación, el inferior es el primer cuadro y el superior el último de la animación y cada cuadro tiene entre paréntesis su duración en milisegundos, el primero 3 segundos, el segundo 2 segundos, el tercero 1 segundo y el cuarto 1/2 segundo.
En la imagen de la derecha se puede ver como quedaría la animación.

Que es eso de combinar y reemplazar?.

Si nuestra imagen está compuesta por capas con transparencias tenemos dos métodos para manejar nuestros cuadros, y son combinar y reemplazar, se tiene que colocar en la capa entre paréntesis al lado del tiempo:

Nombre de la capa(xxxxms)(combine)o(replace)

La animación que vimos arriba es una animación cuyos cuadros(capas) no poseen transparencias(canal alfa), es decir las capas no dejan ver lo que hay por debajo de ellas, entonces no notaríamos ningún cambio si entre estos métodos, pero si las capas si dejan ver lo que hay por debajo podría servirnos. Vamos a ver que hace cada uno:

Combinar (combine) : este método lo que hace es mantener los cuadros durante toda la animación con lo cual se irían combinando a medida que avanza la animación.
Reemplazar (replace) : este otro método lo que hace es mostrar un cuadro atras del otro pero desapareciendo cuando cumple su tiempo de duración.

Vamos a verlo mejor con un ejemplo muy simple:

Tenemos una animación compuesta por estas tres figuras de la imagen de arriba y podemos ver como reaccionan en ambos métodos:

COMBINAR.	REEMPLAZAR.

Por que me esta pasando esto con los GIF?.

Tenemos una imagen cuyas capas son las que vemos abajo y cuando hacemos la animación vemos que algo anda mal:

En la animación se perdió el esfumado del circulo. Si se acuerdan al comienzo del tutorial comenté que el formato GIF no tiene niveles de transparencias, puede determinar si un pixel es transparente o no, pero no que tan transparente es, y en la animación de arriba podemos ver que es así.

Posibles soluciones!!!.

La solución a esta limitación de los GIF sería generar cada cuadro de la animación sin transparencias, es decir, un primer cuadro totalmente negro, y un segundo cuadro negro pero con el circulo esfumado.
Entonces cuando hacemos la animación nos quedaría como queremos:

Podríamos quedarnos contentos con los resultados pero si observamos ambas animaciones, notamos que la que nos gustó nos quedó con un tamaño de archivo mayor.
Para poder reducir el tamaño de archivo, cuando necesitemos hacer animaciones con este tipo de transparencias, GIMP tiene un filtro para optimizar el GIF, y podemos acceder a él yendo a: "filtros---Animación---Optimizar(para GIF)"
Este filtro lo que hace es ver en las capas que pixeles tienen una opacidad distinta de 0 y copiarle en toda su periferia los pixeles de las capas inferiores, como podemos ver abajo, además ya pone al lado de los nombres de capas la duración y el modo y solo nos quedaría variar los valores del tiempo a los que necesitemos.


	..... ANIMACIÓN OPTIMIZADA .....

De la misma manera si así lo quisiéramos podríamos desoptimizarlo yendo a: "filtros---Animación---Desoptimizar".

Previsualizando la animación.

Cuando estemos regulando el tiempo, como el modo de manejar las capas, podemos en cualquier momento ver como va quedando nuestra animación yendo a "filtros---Animación---Reproducir Animación" y nos aparecerá el previsualizador:

Guardando en GIF o MNG.

Una ves terminada nuestra animación vamos a "archivo---guardar como" y elegimos el destino, un nombre de archivo y la extensión GIF o MNG.
Si elegimos GIF nos aparecerá esta ventana:

Vemos que nos dice si queremos guardar como una imagen o como una animación (seguro que adivinaron que elegir ;) )
También nos dice que GIF solo soporta imágenes indexadas o en escala de gris, como comenté al inicio del tutorial.

Podemos dejar que el programa lo haga de forma automática pero si los resultados no fueran los esperados, para controlar la conversión a imagen indexada lo podríamos hacer antes de guardar yendo a " imagen---Modo---Indexado ".
Nos queda hacer click en exportar y se nos abre esta otra ventana:

Entrelazar : sirve para que la imagen se cargue de forma progresiva, es decir no espera a que la imagen este cargada por completo para visualizarse, sino que se va visualizando a distintos niveles de calidad, seguro que alguien notó en alguna página que las imágenes cuando están cargando se ven borrosas y cada ves van teniendo mas definición, eso es porque son entrelazadas.
También entrelazar da como resultado un tamaño mayor de archivo.
Comentario GIF : es para poner lo que queramos que aparezca en el comentario de la imagen.
Después tenemos una serie de opciones del GIF animado y son:
Repetir eternamente : es para que nuestra animación se reinicie cuando finaliza.
Pausa entre cuadro cuando no se especifique : si en el nombre de las capas no pusimos ninguna duración todas tomarán la que acá especifiquemos.
Colocación de cuadros cuando no se especifique : es igual que la anterior pero para elegir entre "combinar o reemplazar".

Si en cambio guardáramos como MNG no solo no nos hace falta convertir la imagen a indexada o escala de grises, sino que también tenemos algunas opciones mas, como guardar la corrección de color, resolución, la hora de la creación de la animación, y variar la calidad de la compresión.
Es un excelente formato, aunque le falta que se masifique para que todo el mundo pueda verlo, mozilla traía en su versión oficial soporte a este formato, pero en las últimas versiones lo quito, supongo que es cuestión de tiempo.

A animar se ha dicho!!!.

Bueno hasta ahora todo muy lindo pero seguro que se preguntan ???? y que puedo hacer con todo esto, y es a lo que vamos.
Abajo podemos ver unos GIF animados de nuestro querido wilber y van a ver que son muy fácil hacerlos.
Les voy a pedir que elijan uno para mostrar como se hace..... El que guiña el ojo? muy buena elección!!! ;).

Lo primero que tenemos que tener es la cara con la expresión inicial y luego iremos duplicándola y pintando los cambios de expresión, van a ver que con solo dos cuadros se pueden hacer muchas animaciones.
En este caso nos conviene trabajar con una imagen mas grande que la animación final para poder trabajar mas cómodos y con mas detalles ya que si fuera del tamaño final el pincel mas chico seria demasiado grande para algunos detalles.
Esta sería la imagen usada:

1- Haciendo doble click sobre el nombre de la capa la renombramos a "Cuadro1" luego la duplicamos y a esta otra la llamamos "Cuadro2".

2- Con la capa cuadro2 seleccionada y con la herramienta

aerógrafo(A) pintamos sobre el ojo haciéndolo cerrado, podemos ir tomando los colores a usar desde la misma imagen presionando Ctrl. tendrian que llegar a algo como esto:

3- Ahora solo nos queda reducir el tamaño de la imagen, "optimizar para GIF" como vimos antes y modificar la duración de los cuadros como vemos en esta imagen:

4- Por último guardamos nuestra animación en GIF o MNG y nos tendría que quedar algo así

Ver video(xvid-sin audio-).

Esto fue todo, espero que les sea útil... Hasta el próximo tutorial.