Dividir una imagen

Cuando trabajamos con imágenes en páginas web puede ocurrir que la descarga sea muy lenta debido al tamaño del archivo que contiene la imagen. También nos puede ocurrir que hayamos creado un mapa de imagen sobre una imagen excesivamente grande (descarga lenta) o que la imagen sea demasiado estática y queramos que en ese mapa de imagen aparezcan efectos al pasar el puntero del ratón sobre determinadas zonas de la imagen.

La solución consiste en trocear nuestra imagen y "montar" esos trozos en una tabla formateada adecuadamente. Para trocear la imagen contamos con la herramienta Guillotina, se encuentra en Imagen --> Transformar --> Guillotina.

1. Recortando imágenes

Es muy sencillo recortar una imagen con GIMP para poder recomponerla posteriormente en una página web, comencemos.

  1. Vamos a partir de la imagen con la que hemos trabajado anteriormente.

    Web 6
  2. Ponemos varias guías de imagen en la Ventana Imagen para dividir la imagen en nueve trozos. Por ejemplo situemos las guías de la siguiente forma.

    Web 6
  3. Accede a menú Imagen --> Transformar --> Guillotina. La imagen se divide en nueve imágenes nuevas, cada una con un trozo de los formados por las divisiones realizadas por las guías.

  4. Guarda cada una de las imágenes. Recomendamos guardarlas en orden, de izquierda a derecha y de arriba a abajo. Por ejemplo "imag_01.jpg"; "imag_02.jpg"; etc... Vemos en la siguiente tabla todos los trozos colocados.

Web 6
Web 6 Web 6
Web 6
Web 6 Web 6
Web 6
Web 6 Web 6

Hemos colocado los trozos con una pequeña separación para que se vean, pero cambiando las características de la tabla donde se ubican no notaremos ninguna separación entre ellas. Este método nos permite tener efectos sobre una imagen en páginas web. (Pasa el ratón por la zona central de la imagen)

Web 6
Web 6 Web 6
Web 6
Web 6 Web 6
Web 6
Web 6 Web 6

 

 


Animación y web > Dividir una imagen