Cree dos o más áreas en las que se puede hacer clic agregando nuevos sectores en Photoshop.
Credito de imagen: Imagen cortesía de Adobe.
Al utilizar la herramienta Slice en Adobe Photoshop CC, puede convertir cualquier imagen, o parte de una imagen, en un hipervínculo en el que se puede hacer clic. El problema de esta característica es que para que el hipervínculo funcione, debe guardar la imagen como un archivo HTML en lugar de un JPG o PNG simple. Afortunadamente, esta es una función que cualquiera puede usar, incluso si no eres un experto en codificación. Photoshop crea el código HTML por usted e incrusta la imagen en un formato de imagen compatible con la Web.
Paso 1
Seleccione la "Herramienta de corte".
Credito de imagen: Imagen cortesía de Adobe.
Abra cualquier imagen en Photoshop. Idealmente, debería ser algo lo suficientemente grande como para mostrarse bien en un navegador web. Seleccione la "Herramienta de corte" de la Caja de herramientas. Si no está visible, haz clic y mantén presionada la esquina inferior derecha de la herramienta Recortar, u otra herramienta en su grupo que esté visible, luego selecciona la "Herramienta Cortar".
Video del día
Paso 2
Arrastre el cursor sobre la imagen para crear un corte.
Credito de imagen: Imagen cortesía de Adobe.
Arrastre el cursor sobre el área en la que desea que se pueda hacer clic. Para crear un único hipervínculo en una imagen, puede arrastrar el cursor sobre toda la imagen.
Paso 3
Crea tantas rebanadas como desees.
Credito de imagen: Imagen cortesía de Adobe.
Arrastre el cursor de la Herramienta de corte sobre solo una parte de la imagen si desea más de un hipervínculo. Después de soltar el botón del mouse, puede crear un segundo segmento para el siguiente hipervínculo. Si lo desea, puede crear una docena o más de hipervínculos en una sola imagen.
Paso 4
Haga doble clic en un sector para agregar un hipervínculo.
Credito de imagen: Imagen cortesía de Adobe.
Haga doble clic en un sector con la herramienta Sector para abrir la ventana Opciones de sector. Para crear un hipervínculo, debe escribir la dirección de la página web en el campo "URL". Mientras que los otros campos son opcionales, el uso de un nombre ayudará a distinguir un enlace de otro. Agregar "_blank" al campo Destino especifica que el vínculo debe abrirse en una nueva pestaña del navegador web. El campo Alt Tag es el texto que se muestra si su imagen no es visible en navegadores no gráficos o mientras se carga la imagen. El campo Texto del mensaje es lo que muestra el navegador en lugar de la URL en su barra de estado.
Paso 5
Guarde el archivo en formato HTML.
Credito de imagen: Imagen cortesía de Adobe.
Seleccione "Guardar para Web" en el menú Archivo una vez que sus enlaces estén completos. Seleccione "PNG-24" o "JPG" como ajuste preestablecido, luego haga clic en el botón "Guardar". Haz clic en el menú "Formato" y selecciona "HTML e imágenes". Esto cambia el formato de archivo a HTML. Después de hacer clic en "Guardar", Photoshop crea una única página HTML utilizando la imagen y los enlaces que creó. El archivo de imagen en sí se guarda en una carpeta de imágenes. Sube tanto el archivo HTML como la carpeta Imágenes al mismo directorio en tu sitio web usando tu cliente FTP favorito.
Propina
Con un editor de texto básico como el Bloc de notas, puede editar el código del archivo HTML como lo haría con cualquier página web. Por ejemplo, si prefiere mantener las imágenes de su sitio web en una carpeta diferente, puede cambiar la carpeta "/ images" especificada a cualquier carpeta que elija y luego mover la imagen a esa carpeta.
No necesita Photoshop para agregar un hipervínculo a una imagen dentro de una página web o correo electrónico. La mayoría de los programas de correo electrónico incluyen una función de hipervínculo, normalmente disponible con solo hacer clic con el botón derecho en la imagen después de insertarla en su mensaje. Si carga la imagen en su sitio web, puede agregarla como una imagen en la que se puede hacer clic en cualquier página utilizando código HTML5 como: