Cómo hacer un mapa de imagen utilizando Photoshop (En 9 Pasos)

Por jeff o'kelley
Cómo hacer un mapa de imagen utilizando Photoshop (En 9 Pasos)
Photos.com/Photos.com/Getty Images

Los mapas de imágenes te permiten designar "puntos activos" dentro de una imagen, los cuales se transforman en enlaces cliqueables para otras páginas, sonidos, animaciones o videos. Los mapas de imágenes pueden proporcionar navegación visual para usuarios que puedan tener problemas con botones o enlaces de texto sin formato. Puedes crear un mapa de imagen básico utilizando Adobe Photoshop, el cual es un programa de edición fotográfico creado por Adobe. Photoshop incluye un componente llamado Image Ready, el cual puede crear mapas de imágenes.

Paso 1

Abre la imagen que usarás para crear tu mapa de imagen en Photoshop. La imagen ya debería estar optimizada para Internet.

Paso 2

Accede al componente Image Ready de Photoshop presionando "Shift-Ctrl-M" o haciendo clic en el botón "Editar en Image Ready" en la parte inferior de tu cuadro de herramientas.

Paso 3

Presiona la tecla "P" o selecciona el icono de la herramienta "Mapa de imagen" en el cuadro de herramientas estándar para acceder a la herramienta "Mapa de imagen". Mantén presionada la herramienta "Mapa de imagen" y verás una forma rectangular, circular o poligonal. Selecciona la forma que mejor se ajusta al área de la imagen que deseas usar como un punto activo.

Paso 4

Utilizando tu mouse, haz clic sobre la imagen y resalta el área del punto activo haciendo clic y arrastrando el mouse. Cuando sueltes el botón del mouse, Image Ready creará un nuevo punto activo sobre tu imagen.

Paso 5

Abre el cuadro de opciones de mapa de imagen haciendo clic en el menú desplegable "Ventana" y seleccionando "Mapa de imagen". Usa la opción "Nombre" para nombrar el punto activo. Utiliza el menú desplegable "URL" para resaltar una página local o escribe la dirección de una página web externa para acceder a través de este punto activo. Utiliza al menú desplegable "Destino" para resaltar cómo se abrirá tu enlace externo. El área "Alt" contendrá el texto que se muestra cuando un puntero de mouse es posicionado sobre este punto activo.

Paso 6

Utiliza las opciones "Dimensiones" para ajustar con precisión la posición y el tamaño de tu punto activo. X e Y designan la ubicación exacta de tu punto activo usando los pixeles verticales y horizontales. W y H te permiten definir el tamaño de tu punto activo utilizando un número de pixeles.

Paso 7

Repite los pasos 4, 5 y 6 para cada punto activo que deseas crear.

Paso 8

Presiona "Ctrl-Shift-Alt-S" o selecciona el menú desplegable "Archivo" y escoge "Guardar optimizado como". Ingresa un nombre de archivo y asegúrate de que en la sección "Guardar como tipo" aparece "HTML e imágenes". Haz clic en "Guardar" para completar el proceso de almacenamiento del archivo. Esto crea un archivo HTML y una carpeta asociada para imágenes.

Paso 9

Haz clic sobre el archivo HTML recientemente creado para probar el funcionamiento de tu nuevo mapa de imagen.