Comment créer un lien hypertexte dans Photoshop ?

En utilisant l'outil Tranche d'Adobe Photoshop CC, vous pouvez transformer n'importe quelle image, ou partie d'image, en lien hypertexte cliquable. Le hic avec cette fonctionnalité est que pour que le lien hypertexte fonctionne, vous devez enregistrer l'image en tant que fichier HTML plutôt qu'en simple JPG ou PNG. Heureusement, c'est une fonctionnalité que tout le monde peut utiliser, même si vous n'êtes pas un expert en codage. Photoshop crée le code HTML pour vous et intègre l'image dans un format d'image adapté au Web.

Étape 1

Ouvrez n'importe quelle image dans Photoshop. Idéalement, ce devrait être quelque chose d'assez grand pour bien s'afficher dans un navigateur Web. Sélectionnez l'outil "Slice Tool" dans la boîte à outils. S'il n'est pas visible, cliquez et maintenez enfoncé le coin inférieur droit de l'outil de recadrage ou d'un autre outil visible de son groupe, puis sélectionnez l'"outil de tranche".

Étape 2

Faites glisser le curseur sur la zone que vous souhaitez rendre cliquable. Pour créer un seul lien hypertexte sur une image, vous pouvez faire glisser le curseur sur toute l'image.

Étape 3

Faites glisser le curseur de l'outil Tranche sur une partie seulement de l'image si vous voulez plus d'un lien hypertexte. Après avoir relâché le bouton de la souris, vous pouvez créer une deuxième tranche pour le lien hypertexte suivant. Si vous le souhaitez, vous pouvez créer une douzaine d'hyperliens ou plus sur une seule image.

Étape 4

Double-cliquez sur une tranche avec l'outil Tranche pour ouvrir la fenêtre Options de tranche. Pour créer un lien hypertexte, vous devez saisir l'adresse de la page Web dans le champ "URL". Bien que les autres champs soient facultatifs, l'utilisation d'un nom aidera à distinguer un lien d'un autre. L'ajout de "_blank" au champ Cible indique que le lien doit s'ouvrir dans un nouvel onglet du navigateur Web. Le champ Alt Tag est le texte qui s'affiche si votre image n'est pas visible dans les navigateurs non graphiques ou pendant le chargement de l'image. Le champ Texte du message est ce que le navigateur affiche à la place de l'URL dans sa barre d'état.

Étape 5

Sélectionnez "Enregistrer pour le Web" dans le menu Fichier une fois vos liens terminés. Sélectionnez "PNG-24" ou "JPG" comme préréglage, puis cliquez sur le bouton "Enregistrer". Cliquez sur le menu "Format" et sélectionnez "HTML et images". Cela change le format de fichier en HTML. Après avoir cliqué sur "Enregistrer", Photoshop crée une seule page HTML à l'aide de l'image et des liens que vous avez créés. Le fichier image lui-même est enregistré dans un dossier Images. Téléchargez le fichier HTML et le dossier Images dans le même répertoire sur votre site Web à l'aide de votre client FTP préféré.

Astuce

Avec un éditeur de texte de base comme le Bloc-notes, vous pouvez modifier le code du fichier HTML comme vous le feriez avec n'importe quelle page Web. Par exemple, si vous préférez conserver les images de votre site Web dans un dossier différent, vous pouvez remplacer le dossier "/images" par le dossier de votre choix, puis déplacer l'image dans ce dossier.

Vous n'avez pas besoin de Photoshop pour ajouter un lien hypertexte vers une image dans une page Web ou un e-mail. La plupart des programmes de messagerie incluent une fonctionnalité de lien hypertexte, normalement disponible simplement en cliquant avec le bouton droit sur l'image après l'avoir insérée dans votre message. Si vous téléchargez l'image sur votre site Web, vous pouvez l'ajouter en tant qu'image cliquable à n'importe quelle page en utilisant un code HTML5 tel que :