Cómo crear un hipervínculo en Photoshop

Usando la Herramienta Recorte (Slice Tool) en Adobe Photoshop CC, puede convertir cualquier imagen o parte de ella en un hipervínculo clicable. El truco: para que funcione, debe guardar la imagen como archivo HTML, no como JPG o PNG plano. Afortunadamente, es una función al alcance de cualquiera, incluso sin conocimientos de código. Photoshop genera el HTML y embebe la imagen en formato web.

Paso 1

Abra cualquier imagen en Photoshop. Idealmente, lo bastante grande para verse bien en navegador. Seleccione la "Herramienta Recorte" en la Caja de herramientas. Si no está visible, clic y mantenga en la esquina inferior derecha de la Herramienta Recortar (o la visible de su grupo) y seleccione "Herramienta Recorte".

Paso 2

Arrastre el cursor sobre el área que quiere que sea clicable. Para un solo hipervínculo en toda la imagen, arrastre sobre toda la imagen.

Paso 3

Arrastre la Herramienta Recorte solo sobre una parte si quiere varios hipervínculos. Tras soltar, puede crear un segundo recorte para el siguiente enlace. Puede crear una docena o más en una sola imagen.

Paso 4

Haga doble clic en un recorte con la Herramienta Recorte para abrir "Opciones de recorte". Para crear el hipervínculo, escriba la dirección web en el campo "URL". Los demás campos son opcionales, pero poner un nombre ayuda a distinguir enlaces. Añadir "_blank" en "Destino" hace que el enlace se abra en nueva pestaña. "Etiqueta Alt" es el texto que se muestra si la imagen no carga. "Texto de mensaje" es lo que el navegador muestra en la barra de estado en lugar de la URL.

Paso 5

Seleccione "Guardar para web" en el menú Archivo. Elija "PNG‑24" o "JPG" como preajuste y clic "Guardar". En el menú "Formato" seleccione "HTML e imágenes". Esto cambia el formato a HTML. Al clicar "Guardar", Photoshop crea una página HTML única con la imagen y los enlaces. El archivo de imagen se guarda en una carpeta "Images". Suba tanto el HTML como la carpeta Images al mismo directorio en su web con su cliente FTP favorito.

Consejo

Con un editor de texto básico (Bloc de notas) puede editar el código HTML como cualquier página web. Por ejemplo, si prefiere guardar las imágenes en otra carpeta, cambie la ruta "/images" a la que quiera y mueva la imagen allí.

No necesita Photoshop para añadir hipervínculo a una imagen en web o email. La mayoría de programas de email incluyen esa función, normalmente clic derecho en la imagen tras insertarla. Si sube la imagen a su web, puede añadirla como imagen clicable con código HTML5 como: