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

Al hacer clic en la parte de imagen de una página web y el navegador salta a una página Web diferente, un mapa de imagen es probablemente responsable de esa acción. los diseñadores de sitios pueden escribir código HTML que crea puntos calientes se puede hacer clic en cualquier foto. La construcción de mapas de imagen con la mano es mucho tiempo, ya que debe identificar las coordenadas exactas de cada punto caliente. Con la herramienta División en Photoshop, se dibuja puntos calientes en una imagen para generar el código HTML que necesita de forma automática.

Instrucciones

Crear imagen Mapa

1 Lanzar Photoshop y abrir una imagen que desea convertir en un mapa de imágenes. Haga clic y mantenga la herramienta "Recortar" para mostrar un menú que contiene otras herramientas. Haga clic en la herramienta de la "rebanada" para seleccionarlo.

2 Haga clic en un punto dentro de la imagen y arrastre la herramienta División para dibujar un rectángulo de selección alrededor de la parte de la imagen que desea hacer clic. Photoshop llama "sectores automáticos" adicionales alrededor de otras partes de la imagen. Estos sectores automáticos aseguran que todas las partes de una imagen se incluyen en una rebanada.

3 Haga clic dentro de la división que creó y seleccione "Opciones de sector Editar" para abrir la ventana Opciones de sector. Escriba la dirección URL que desea asociar con la rebanada. También puede reemplazar el nombre predeterminado que Photoshop dio la rebanada escribiendo una nueva en el cuadro de texto "Nombre".

4 Haga clic en "Aceptar" para cerrar la ventana Opciones de sector y volver a la imagen. Haga clic en otro punto dentro de la imagen y arrastre la herramienta División para crear cortes adicionales según sea necesario.

Ajuste de mapa de imagen Rebanadas

5 Seleccione la "Herramienta de selección de rebanada" de la barra de herramientas y haga clic en el interior de una rebanada que desea mover.

6 Mantenga pulsado el botón izquierdo del ratón y arrastre el sector a una nueva ubicación.

7 Mantenga el cursor del ratón sobre uno de los bordes de la rebanada y una línea con flechas en cada extremo aparece. Haga clic en esa línea, mantenga pulsado el botón izquierdo del ratón y arrastrar el ratón, si usted necesita para hacer la rebanada más grande o más pequeño.

Guardar imagen Mapa

8 Haga clic en "Archivo" y luego "Guardar para Web" para abrir la ventana de Guardar para Web.

9 Haga clic en "Preset" y seleccione una de las opciones de tipo de archivo que aparecen. Las opciones incluyen GIF 128 con tramado, JPEG y PNG de alta-24.

10 Haga clic en "Guardar" para abrir una ventana que muestra los archivos y carpetas de su disco duro. Vaya a la carpeta en la que 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.

11 Haga clic en el menú desplegable "Formato" y seleccione "HTML e imágenes." Haga clic en "Guardar" para guardar todos los archivos a la carpeta especificada.

Consejos y advertencias

• Photoshop guarda cada sector 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 que el archivo HTML en el explorador de archivos y haga doble clic en el archivo, el navegador se abre y muestra el mapa de imágenes. Haga clic en diferentes partes del mapa de imagen para navegar hasta las URL que ha asignado a las rebanadas. Por ejemplo, si usted dividió un mapa de Estados Unidos en estados mediante la creación de un sector para cada estado, puede hacer clic en un estado para ir a la URL asignada a la rebanada de ese estado.
• Dar rebanadas nombres significativos y encontrará más fácil identificar si alguna vez desea modificar el código HTML que genera Photoshop. Por ejemplo, si ha creado una rebanada que rodeaba el estado de Iowa, usted podría nombrar la rodaja de Iowa.
• Es probable que desee guardar las imágenes de mapa de imágenes en el mismo formato que la imagen original. Por ejemplo, si se trata de un archivo JPEG, seleccione una de las opciones JPEG desde el menú desplegable de preajuste en el Guardar para Web ventana. Seleccione la opción "JPEG baja", por ejemplo, y Photoshop genera imágenes JPEG de baja calidad. La calidad de una imagen más baja, más rápido se carga en un navegador Web.
• Este artículo es aplicable a Adobe Photoshop CC 2014 versión. Parte de la información puede variar en otras versiones de software.