Gimp: Crear un Gif Animado

Aquí va una pequeña guía para crear un gif animado usando Gimp:

1. Primero creamos una imagen con el tamaño que necesitamos:

2. Editamos la imagen. No me vayan a robar el diseño de esta imagen (<sarcasmo/>).

3. Repetimos el proceso agregando otra imagen.

4. En la última imagen que agregamos usamos el comando de copiar (ctrl + c) y lo pegamos en la primera imagen (ctrl + v). Esto hace que la imagen quede como una capa de nuestra primera imagen.

5. Podemos renombrar las capas solo para tener más orden. Doble clic en la capa.

6. Repetimos el proceso para cada imagen que aparecerá en el gif animado y le damos salvar como ".gif".

7. Luego aparece la pantalla de opciones de exportación de la cual elejimos que lo guarde como animación.



8. Ya en la última pantalla configuramos las últimas opciones. Las más relevantes son las del periodo de tiempo para mostrar cada cuadro y la opción de si repetir la animación infinitamente.

Resultado:

Diseño Web: Fondo Disuelto

Cuando uno comienza sus primeros pasos en el diseño web generalmente lo hace como decimos en Costa Rica, a la "chambona". Esto quiere decir que montamos nuestras páginas a como caigan las cosas. Colocamos imágenes sin medir tamaños o sin tener el toque creativo del cual carecemos la mayoría que nos dedicamos principalmente a la programación.

Recientemente aprendí una técnica que muchos dirán que es básica, pero para este servidor no lo era y nunca está demás dejar documentado algo que para mi es imprecindible para diseñar de manera optimizada para la carga.

Si queremos que nuestra página luzca un poco más atractiva, podemos usar en lugar de fondos con un color plano, fondos con efectos como el fondo disuelto.

Primero debemos generar una imagen con este tipo de fondo. Usemos la herramienta Gimp para construirla. Tomemos la herramienta de mezcla:


Escogemos después el modo de disolver:


Arrastramos el cursor en nuestra imagen de arriba hacia abajo para generar el color disuelto en esa dirección. Ahora viene el truco para la optimización de carga. En lugar de generar un tamaño de acuerdo al espacio que queremos llenar en nuestra página, escalamos la imagen a un ancho de 4 pixeles dejando el tamaño de largo igual:


Quedamos con una imgen que luce así:


Ya en nuestro CSS usamos la propiedad de "repeat" para generar esta misma línea a traves de todo el ancho del fondo que deseamos cubrir. Al usar "repeat-x" nos ahorramos bytes de carga lo cual nos ayuda en la experiencia usuario.

#footer{
background: url(images/disuelto.jpg) left top repeat-x;
}