Práctica guiada 11

Con esta práctica pretendemos mostrar las posibilidades de GIMP para crear elementos de imagen para páginas web. Para montar la página tal y como se explica en este apartado debemos contar con un programa de edición web y con los conocimientos necesarios para poder usarlo. El interés de la práctica radica en mostrar que GIMP puede ser el programa con el que manipulemos todas las imágenes necesarias para la creación de un sitio web.

Vamos a crear la primera página completa de nuestro sitio web teniendo en cuenta lo que hemos trabajado en esta unidad. Primero hemos creado los elementos básicos del diseño de nuestra página (bolitas, barras, botones, etc.), posteriormente hemos visto cómo podemos crear un mapa de imagen y una división de la misma para facilitar su descarga. Unamos todo para obtener nuestra página.

1. Un fondo más acorde

Vamos a modificar ligeramente la imagen donde crearemos el mapa de imagen para que encaje mejor en nuestra página.

1. Abre la imagen "colegio.jpg". Aplica el Filtro --> Genérico --> Erosionar para difuminar y aclarar nuestra imagen.
   

   
   
2. Dado que vamos a situar los botones de texto a la izquierda de nuestra imagen, vamos a aclarar parcialmente la zona izquierda de la imagen. Creamos una capa nueva y en esa capa, utilizando una Máscara rápida, creamos una selección con la herramienta de relleno degradado. Una vez conseguida la selección rellenamos con color blanco y aplicamos una opacidad del 60% a la capa.
   
   

1. Vamos a crear los cuatro botones que incluiremos en la imagen, tendrán dos posisiones ("normal" y "pulsado") para poder intercambiarlos al pulsar sobre ellos. Texto que debemos incluir: "Claustro"; "Enseñanzas"; "Actividades" y "A.M.P.A.".
   

2. Desde el Exts --> Script-Fu --> Temas de páginas web --> Patrón biselado --> Botón creamos los botones necesarios utilizando como patrón "Rain", tipografía de 20 píxeles, en color negro para el botón en estado "norma" y color blanco para el botón "pulsado". Obtenemos ocho imágenes.
   
   

   Normal	Pulsado

Vamos a incluir los botones en la imagen destinada a ser el mapa de imagen.

1. En la imagen anterior comienza a incluir los botones normales. Crea guías para situarlos correctamente. Arrastra desde cada Ventana Imagen de los botones, la única capa que tienen a la Ventana Imagen del colegio.
   
   

   
   
2. Divide la imagen de acuerdo con las líneas guías que has puesto: Imagen --> Transformar --> Guillotina. Se crean quince imágenes a las que vas a denominar con su posición en la imagen, por ejemplo: "colegio1_a"; "colegio1_b"; "colegio1_c"; "colegio2_a" y así sucesivamente.
   
   
3. Los trozos de imagen que contienen los botones vas a mantenerlos abiertos, para crear en ellos el mapa de imagen y una imagen de sustitución en la que aparezca el botón pulsado.
   
   

   
   

4. Ahora debes crear un mapa de imagen en cada una de las imágenes anteriores con enlaces a las páginas correspondientes y montar todas las imágenes en una tabla mediante un programa de edición de páginas web..

Animación y web > Práctica guiada 11