Crear un mapa de imágenes (image map) en Photoshop con la herramienta Recortar

Un mapa de imágenes permite definir zonas clicables (hotspots) en una imagen que enlazan a distintas URLs. Hacerlo a mano en HTML requiere calcular coordenadas exactas. Con la herramienta Recortar (Slice Tool) de Photoshop, dibujas las zonas y generas el código HTML automáticamente.

Crear el mapa de imágenes

Paso 1: Abrir imagen y seleccionar herramienta Recortar

Abre tu imagen en Photoshop. Mantén pulsado el icono «Recortar» en la barra de herramientas y elige «Herramienta Recortar (Slice Tool)» (icono de navaja).

Paso 2: Dibujar zonas clicables (slices)

Clic y arrastra sobre la zona que quieres hacer clicable. Photoshop crea automáticamente «recortes automáticos» alrededor para cubrir toda la imagen.

Paso 3: Asignar URL a cada slice

Clic derecho dentro del slice > «Opciones de recorte (Edit Slice Options)».

• URL: Escribe la dirección de destino.
• Nombre: Cambia el nombre por defecto por uno descriptivo (ej. «boton-inicio», «mapa-espana-madrid»).
• Alt/Title: Texto alternativo para accesibilidad/SEO.
• Target: _blank (nueva pestaña), _self (misma), etc.

Paso 4: Crear más slices según necesites

Repite pasos 2-3 para cada zona clicable.

Ajustar slices

Paso 1: Seleccionar herramienta «Seleccionar recorte» (Slice Select Tool)

En la barra de herramientas (debajo de Recortar).

Paso 2-3: Mover y redimensionar

• Clic dentro del slice y arrastra para mover.
• Pasa el ratón por un borde > clic y arrastra para redimensionar.

Guardar mapa de imágenes (HTML + imágenes)

Paso 1: Archivo > Guardar para web (heredado) / Exportar > Guardar para web

Paso 2: Elegir preajuste de formato

• JPEG High para fotos.
• PNG-24 para gráficos con transparencia.
• GIF para animaciones/simple.

Paso 3-4: Guardar como HTML e imágenes

1. Elige carpeta y nombre de archivo.
2. En «Formato», selecciona HTML e imágenes.
3. Clic «Guardar».

Photoshop genera:

• Una carpeta images/ con cada slice como archivo de imagen separado.
• Un archivo .html con el mapa de imágenes (<map> y <area>) y tabla/divs para posicionar las imágenes.