14.2. Software

14.2.2. Tratamiento de Imágenes


En la web se utilizan básicamente dos formatos gráficos: Puedes crear gráficos de ambos tipos con cualquier utilidad gráfica de las existentes en el mercado. Ten en cuenta siempre que cuantos menos colores utilices en tus gráficos menor será el tamaño de los archivos que los contienen, y por lo tanto menos tiempo tardarán en cargarse.
 
  • Formato Gráfico GIF
  • Se utiliza normalmente con imágenes de colores básicos o con un número reducido de colores. Hay dos formatos para gráficos GIF: GIF 87ª y GIF 89ª.

    El formato GIF 89ª es el más adecuado para imágenes con fondo transparente. El número que aparece junto al nombre del formato hace referencia al año en que se publicó la especificación (1987 y 1989).

    En 1989 se estableció la posibilidad de disponer de colores transparentes, así como que un fichero GIF pudiera contener internamente múltiples imágenes, visibles durante un tiempo determinado, con lo que se podía obtener una imagen animada.

    Sin embargo esta interesante característica permaneció prácticamente en el olvido hasta finales de 1995, fecha en la que Netscape la implementó en su navegador, adquiriendo, muy pronto, una gran popularidad.

    Hay otros tipos de animaciones, como las obtenidas con:

    Las animaciones basadas en el formato GIF 89a eliminan todos estos problemas, pues: Programas para Crear Animaciones GIF:
    Para crear una animación, es necesario crear primero, una a una, las distintas imágenes que van a constituir la animación. Cualquier programa gráfico que sea capaz de guardar las imágenes en formato GIF es válido para este propósito. Una vez creadas todas las imágenes que compongan la secuencia, es necesario un programa que ensamble estas imágenes individuales de una manera apropiada para crear la animación. Los programas gratuitos más utilizados son: Si tienes la última versión de algún  programa de diseño gráfico, seguramente incluya entre otras las capacidades de animación y transparencia, pues cada vez están mas orientados para su aplicación en la web.

    Ejemplo:
    Imagina que quieres crear un icono animado, y que ya has creado con un programa gráfico los ficheros gráficos:  trabajo0.gif
    trabajo1.gif
    trabajo2.gif
    trabajo3.gif

    Si utilizamos el programa para Windows GIF Construction Set, debemos hacer lo siguiente:

    1. Seleccionamos File/New para crear una nueva animación. Vemos que aparece Header GIF 89a Screen (640x480). Esto es la cabecera de la pantalla (screen), en la que se va a desarrollar la animación, que por defecto tiene las dimensiones indicadas. Podemos considerarla como la pantalla de una película. Si la animación va a consistir, por ejemplo, en un objeto que se desplaza, damos a la pantalla las dimensiones adecuadas, y vamos situando el objeto en las distintas posiciones que queramos. Podemos darle a la pantalla las dimensiones que queramos, pulsando 'Edit' y modificando 'Screen width' y 'Screen depth'.

    2. Una vez definida la pantalla, debemos colocar la primera imagen de la animación (trabaj0.gif). Para ello pulsamos INSERT y luego IMAGE y buscamos dicha imagen. Si la paleta de la imagen es de 16 colores no se corresponde con la paleta de 256 colores que tiene por defecto la pantalla, y nos presenta un cuadro de diálogo con diversas opciones. Lo mejor es escoger la opción  'Use this image as the global palette', con lo que la pantalla y las demás imágenes que insertemos tendrán la paleta de esta imagen, y no habrá problemas de incompatibilidad de colores.

    3. Antes de cada imagen debe ir un bloque de control que, como vamos a ver, sirve para indicar sus características dentro de la secuencia de la animación. Para insertar este bloque, se señala el inmediato superior (en este caso el bloque HEADER), se pulsa INSERT y se escoge CONTROL. La secuencia de bloques, es de momento:

    HEADER GIF 89a Screen 40x40
    CONTROL
    IMAGE trabajo0.gif 40x40 16 colours

    Para ajustar los valores del bloque CONTROL, se señala éste y se pulsa EDIT. En el cuadro de diálogo seleccionamos: 'Transparent Colour' y con el icono que representa un cuentagotas, señalamos el color gris que rodea a la imagen, y que no queremos que aparezca.

    Para ajustar el tiempo de aparición de esta imagen en la animación debemos poner un número en la ventana 'Delay', que representa centésimas de segundo. Si ponemos 50 será medio segundo.

    En la ventana 'Remove by' escogemos lo que queremos que sustituya a la imagen en la secuencia. 'Nothing' se usa en el caso de imágenes que no se desplazan. Si tenemos un gráfico que se desplaza por la pantalla, hemos de escoger 'Background' (fondo), para que el lugar ocupado por una imagen sea reemplazado por el fondo de la página.

    4. Este proceso se repite con las tres imágenes restantes. Los bloques de CONTROL deben ser todos iguales a los que hemos visto. La secuencia de bloques queda, de momento, así:

    HEADER GIF 89a Screen 40x40
    CONTROL
    IMAGE trabajo0.gif 40x40 16 colours
    CONTROL
    IMAGE trabajo1.gif 40x40 16 colours
    CONTROL
    IMAGE trabajo2.gif 40x40 16 colours
    CONTROL
    IMAGE trabajo3.gif 40x40 16 colours

    5. Con lo visto anteriormente ya tenemos una secuencia completa. Pero si queremos que esta secuencia se repita más de una vez, hay que insertar un bloque llamado LOOP (lazo). Señalamos el bloque HEADER, pulsamos INSERT y escogemos LOOP. Lo podemos editar, y vemos que se puede determinar un número concreto de repeticiones (Iterations). Lo dejamos con el número 1000 por defecto. Con esto queda la secuencia de bloques definitiva, como sigue:

    HEADER GIF 89a Screen 40x40
    LOOP
    CONTROL
    IMAGE trabajo0.gif 40x40 16 colours
    CONTROL
    IMAGE trabajo1.gif 40x40 16 colours
    CONTROL
    IMAGE trabajo2.gif 40x40 16 colours
    CONTROL
    IMAGE trabajo3.gif 40x40 16 colours

    6. Ya se puede guardar la animación. A continuación la cargamos en el navegador para ver el efecto. No es conveniente que el tiempo sea el mismo para todas las imágenes. Habrá que probar y variar los tiempos en los bloques de Control adaptándolos a nuestro gusto.
     
    Consideraciones Finales

  • Formato gráfico JPG

  • Utiliza este formato cuando quieras añadir en tu página, fotografías o gráficos con un escala cromática muy variada. El formato JPG te permite decidir el grado de compresión que aplicas a la imagen, de modo que puedes decidir la resolución con que quieres que se vea en pantalla. Es el formato mas utilizado cuando se trata de gráficos grandes, pues permite un índice de compresión muy elevado, siendo el tamaño de los archivos menor por lo que se pueden transmitir mas rápido.