[tutorial]hacer un Mapa de imagen con gimp!

Kompozer y Gimp: mapa de imagen para una web

A veces necesitamos crear enlaces en zonas de una imagen y no queremos enredarnos a crear botones. Gimp permite seleccionar las zonas que actuarán como vínculos y nos permitirá editar todo lo necesario, como el destino de ese enlace, para poder obtener el código necesario para su perfecta integración en el diseño de nuestra página (que nosotros crearemos con Kompozer). Este proceso se denomina Mapa de imagen.
Lo primero es disponer de la imagen que servirá de base para el mapa:

​

Abrimos esa imagen en Gimp y directamente nos vamos a Filtros/Web/Mapa de imagen donde se cargará un editor propio para esta edición.

​

Determinar las regiones de los enlaces es muy sencillo usando cualquiera de las tres herramientas de que disponemos:

​

Por ejemplo para el logo de Kompozer nos vamos a conformar con un círculo. No nos preocupamos en exceso de su tamaño y colocación ya que eso lo podremos editar con precisión desde el cuadro que se despliega al finalizar el círculo (no olvidemos activar Vista previa) en la pestaña Círculo:

Si por algún motivo quisiéramos volver a este cuadro sólo tenemos que usar la herramienta de selección (doble clic sobre la forma)

o la miniatuta en el apartado de selecciones (tamién con coble clic)​

En la pestaña Enlace de ese mismo cuadro podemos dejar definidos el destino del vínculo (URL) y el atributo alt:

​

En el caso de que estemos cometiendo la temeridad de hacer nuestra página con marcos , también aquí podemos poner el nombre de la página (frame) de destino y que en el HTML aparecería con el atributo target.

Con la herramienta de polígonos podemos crear los contornos de los otros tres logos (doble clic para concluir el polígino) y rellenamos las casillas propias de la pestaña Enlace. En el caso de la forma del centro el destino elegido es un correo electrónico. Esto hará que se cargue el programa propio de estos asuntos con el campo de la dirección relleno; así que no ponga el correo tal cual o los robots maliciosos le dejarán el correo llenito de spam. Ponga algo como minombre(arroba)jotmail.com en vez de [email protected] y que sea el navegante el que haga el cambio.

Una vez concluido podemos tenemos un par de opciones:

• Si no hemos comenzado la página en Kompozer podemos guardar este trabajo como mipagina.html directamente desde el editor del mapa de imagen de Gimp (si guarda en formato MAP podrá continuar con el trabajo en otro momento o reeditar al gusto).

Como la ruta hacia la imagen es relativa este html debe quedar al lado de la imagen o de lo contrario no la encontrará (también podría alterar la ruta desde Kompozer si le apetece meter el mapa en una carpeta con imágenes o algo similar)

​

Si abre ese html desde Kompozer le aparecerá directamente el mapeado. Ahora sería tan sencillo como Cortar y Pegar dentro de una tabla, centrar o hacer las ediciones normales que haría con este software.

• Como es muy probable que ya tenga comenzado su diseño web, lo que querrá es incluir el mapa en él con lo que el método anterior no le vale. Desde el editor de mapas de Gimp existe la posibilidad de copiar todo el código necesario para pegarlo en Kompozer. Vamos a Ver/Fuente y nos aparecerá este cuadro del que podemos seleccionar y copiar el texto:

​

Si le apetece alterar la ruta de la imagen hacia una carpeta al lado de mipagina.html tal como se dijo antes, también puede hacerlo aquí cambiando, por ejemplo:

mapa.png" width="533" height="537" border="0" usemap="#map" />​

por:

imagenes/mapa.png" width="533" height="537" border="0" usemap="#map" />​

Con ese código en el portapapeles nos vamos a Kompozer y lo insertamos donde nos convenga. Por ejemplo el una celda de una tabla (lógicamente en el código fuente). Como el código lleva las medidas de la imagen se creará un rectángulo para ella pero no aparecerá hasta la próxima vez que carguemos ese archivo.

​

Tras Guardar y volver a Abrir veremos nuestro mapa y nos resultará más agradable y cómodo continuar trabajando:

Escalado Líquido con Gimp

Para este tutorial seguiremos usando la imagen titulada “Mikri”, original de Nikosalpha:

Hasta aquí hemos visto lo que sería el escalado tradicional de una imagen, pero Gimp, haciendo honor a su fama de herramienta potente y versátil, provee otro modo de escalar imágenes muy interesante y útil:
Se trata del plugin de escalado líquido , que permite cambiar el tamaño de una imagen de forma inteligente, identificando automáticamente los elementos principales de la imagen, de forma que podemos preservar su tamaño en el escalado.
Hace muy poco que este sistema de escalado se incorporó a Photoshop, pero ya hace tiempo que los usuarios de Gimp disfrutamos del Escalado Líquido; de hecho, ya os hablé del Escalado Líquido en esta misma bitácora .
Los usuarios de Debian podéis instalar este plugin fácilmente, pues viene incluido en el paquete gimp-plugin-registry. El resto de usuarios podéis descargar liquid-rescale de su web oficial.
Veamos cómo funciona:
Bastará con selecciónar la opción CAPA > LIQUID RESCALE y nos aparecerá el diálogo de configuración:

Como véis, aunque tiene más opciones que el de escalado tradicional, es fácil de entender. Nos centraremos por ahora sólo en introducir el tamaño de la altura y anchura (en futuros tutoriales veremos el resto de funciones).
En este caso, reduciremos la anchura de la imagen a 500 píxeles, mientras mantenemos la altura.

Usando el escalado tradicional obtendríamos una imagen “apretada”, con los elementos deformados, pero con el escalado líquido se identifican los elementos principales de la imagen y se “comprimen” sólo aquellos que son secundarios.
Mirad la comparación:

Lógicamente el acabado final va a depender de las características de la imagen y del tamaño de la imagen resultante. Así que en algunos casos funcionará mejor que en otros.
Bueno, pues ya sabéis cómo reducir o ampliar una imagen, no sólo del modo básico y tradicional, sino mediante este nuevo (y seguro que desconocido para muchos de vosotros) sistema de escalado líquido.




aprtes de mi copy paste


​