> Manuales > Talleres de diseño web

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

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.

Luis Vilaroig

Manual