Cómo crear un mapa de imágenes con Photoshop

Cuando hace clic en parte de la imagen de un sitio web y su navegador salta a una página web diferente, es probable que un mapa de imagen sea responsable de esa acción. Los diseñadores de sitios pueden escribir código HTML que crea puntos calientes en los que se puede hacer clic en cualquier imagen. La construcción de mapas de imágenes a mano requiere mucho tiempo porque debe identificar las coordenadas exactas de cada punto de acceso. Con la herramienta Slice en Photoshop, dibuja puntos calientes en una imagen para generar el código HTML que necesita automáticamente.

Crear mapa de imagen

Paso 1

Inicie Photoshop y abra una imagen que desee convertir en un mapa de imágenes. Haz clic y mantén presionada la herramienta "Recortar" para mostrar un menú que contiene otras herramientas. Haz clic en la herramienta "Cortar" para seleccionarla.

Paso 2

Haga clic en un punto dentro de la imagen y arrastre la herramienta Sector para dibujar un cuadro delimitador alrededor de la parte de la imagen que desea que se pueda hacer clic. Photoshop dibuja "cortes automáticos" adicionales alrededor de otras partes de la imagen. Estos cortes automáticos aseguran que todas las partes de una imagen se incluyan en un corte.

Paso 3

Haga clic con el botón derecho dentro de la división que creó y seleccione "Editar opciones de división" para abrir la ventana Opciones de división. Escriba la URL que desea asociar con el segmento. También puede reemplazar el nombre predeterminado que Photoshop le dio a la división escribiendo uno nuevo en el cuadro de texto "Nombre".

Paso 4

Haga clic en "Aceptar" para cerrar la ventana Opciones de corte y volver a la imagen. Haga clic en otro punto dentro de la imagen y arrastre la herramienta Sector para crear sectores adicionales según sea necesario.

Ajustar sectores de mapa de imágenes

Paso 1

Seleccione la "Herramienta de selección de sectores" de la barra de herramientas y haga clic dentro de un sector que desee mover.

Paso 2

Mantenga presionado el botón izquierdo del mouse y arrastre el sector a una nueva ubicación.

Paso 3

Mantenga el cursor del mouse sobre uno de los bordes de la división y aparecerá una línea con flechas en cada extremo. Haga clic en esa línea, mantenga presionado el botón izquierdo del mouse y arrástrelo si necesita agrandar o reducir el segmento.

Guardar mapa de imagen

Paso 1

Haga clic en "Archivo" seguido de "Guardar para Web" para abrir la ventana Guardar para Web.

Paso 2

Haz clic en "Preset" y selecciona una de las opciones de tipo de archivo que aparecen. Las opciones incluyen GIF 128 tramado, JPEG alto y PNG-24.

Paso 3

Haga clic en "Guardar" para abrir una ventana que muestra los archivos y carpetas de su disco duro. Busque la carpeta donde desea guardar los archivos de mapa de imagen y escriba un nombre para el mapa de imagen en el cuadro de texto Nombre de archivo.

Paso 4

Haz clic en el menú desplegable "Formato" y selecciona "HTML e imágenes". Haga clic en "Guardar" para guardar todos los archivos en la carpeta que especificó.

Consejo

Photoshop guarda cada corte como una imagen separada en una carpeta de imágenes. El programa también guarda un documento HTML que tiene el mismo nombre que el nombre que escribió en el cuadro de texto "Nombre de archivo". Si encuentra ese archivo HTML en el Explorador de archivos y hace doble clic en el archivo, su navegador se abre y muestra su mapa de imagen. Haga clic en diferentes partes del mapa de imagen para navegar a las URL que asignó a los sectores. Por ejemplo, si dividió un mapa de EE. UU. en estados creando una porción para cada estado, puede hacer clic en un estado para ir a la URL asignada a la porción de ese estado.

Asigne nombres significativos a los segmentos y le resultará más fácil identificarlos si alguna vez desea modificar el código HTML que generó Photoshop. Por ejemplo, si creó una porción que rodeaba el estado de Iowa, podría llamarla Iowa.

Probablemente querrá guardar las imágenes de su mapa de imágenes en el mismo formato que la imagen original. Por ejemplo, si es un JPEG, elija una de las opciones de JPEG del menú desplegable Preestablecido en la ventana Guardar para Web. Elija "JPEG bajo", por ejemplo, y Photoshop generará imágenes JPEG de baja calidad. Cuanto menor sea la calidad de una imagen, más rápido se carga en un navegador web.

Advertencia

Este artículo es aplicable a Adobe Photoshop CC, versión 2014. Cierta información puede variar en otras versiones del software.