Créez au moins deux zones cliquables en ajoutant de nouvelles tranches dans Photoshop.
Crédit d'image : Image reproduite avec l'aimable autorisation d'Adobe.
En utilisant l'outil Tranche dans Adobe Photoshop CC, vous pouvez transformer n'importe quelle image, ou partie d'image, en un lien hypertexte cliquable. Le problème avec cette fonctionnalité est que pour que le lien hypertexte fonctionne, vous devez enregistrer l'image en tant que fichier HTML plutôt qu'un 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 compatible avec le Web.
Étape 1
Sélectionnez l'outil "Slice".
Crédit d'image : Image reproduite avec l'aimable autorisation d'Adobe.
Ouvrez n'importe quelle image dans Photoshop. Idéalement, il devrait s'agir d'un élément suffisamment grand pour bien s'afficher dans un navigateur Web. Sélectionnez l'outil "Slice" dans la boîte à outils. S'il n'est pas visible, cliquez et maintenez le coin inférieur droit de l'outil de recadrage, ou un autre outil de son groupe qui est visible, puis sélectionnez l'outil "Slice".
Vidéo du jour
Étape 2
Faites glisser le curseur sur l'image pour créer une tranche.
Crédit d'image : Image reproduite avec l'aimable autorisation d'Adobe.
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
Créez autant de tranches que vous le souhaitez.
Crédit d'image : Image reproduite avec l'aimable autorisation d'Adobe.
Faites glisser le curseur de l'outil Tranche sur une partie de l'image uniquement si vous souhaitez plusieurs liens hypertexte. Après avoir relâché le bouton de la souris, vous pouvez alors créer une deuxième tranche pour le prochain lien hypertexte. 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 pour ajouter un lien hypertexte.
Crédit d'image : Image reproduite avec l'aimable autorisation d'Adobe.
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 taper l'adresse de la page Web dans le champ « URL ». Alors que les autres champs sont 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 de 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
Enregistrez le fichier au format HTML.
Crédit d'image : Image reproduite avec l'aimable autorisation d'Adobe.
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 à la fois 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é.
Conseil
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" spécifié par le dossier de votre choix, puis déplacer l'image vers ce dossier.
Vous n'avez pas besoin de Photoshop pour ajouter un lien hypertexte à une image dans une page Web ou un e-mail. La plupart des programmes de messagerie incluent une fonction 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 du code HTML5 tel que: 
