Comment créer une image cliquable avec Photoshop

Lorsque vous cliquez sur une partie d'une image de site Web et que votre navigateur passe à une autre page Web, une image cliquable est probablement responsable de cette action. Les concepteurs de sites peuvent écrire du code HTML qui crée des points chauds cliquables sur n'importe quelle image. Construire des images cliquables à la main prend du temps car vous devez identifier les coordonnées exactes de chaque point chaud. Avec l'outil Tranche de Photoshop, vous dessinez des points chauds sur une image pour générer automatiquement le code HTML dont vous avez besoin.

Créer une image cliquable

Étape 1

Lancez Photoshop et ouvrez une image que vous souhaitez convertir en image cliquable. Cliquez et maintenez l'outil "Rogner" pour afficher un menu contenant d'autres outils. Cliquez sur l'outil "Slice" pour le sélectionner.

Étape 2

Cliquez sur un point à l'intérieur de l'image et faites glisser l'outil Tranche pour dessiner un cadre de délimitation autour de la partie de l'image que vous souhaitez rendre cliquable. Photoshop dessine des "tranches automatiques" supplémentaires autour d'autres parties de l'image. Ces tranches automatiques garantissent que toutes les parties d'une image sont incluses dans une tranche.

Étape 3

Faites un clic droit à l'intérieur de la tranche que vous avez créée et sélectionnez "Modifier les options de tranche" pour ouvrir la fenêtre Options de tranche. Tapez l'URL que vous souhaitez associer à la tranche. Vous pouvez également remplacer le nom par défaut que Photoshop a donné à la tranche en en tapant un nouveau dans la zone de texte "Nom".

Étape 4

Cliquez sur "OK" pour fermer la fenêtre Options de tranche et revenir à l'image. Cliquez sur un autre point à l'intérieur de l'image et faites glisser l'outil Tranche pour créer des tranches supplémentaires si nécessaire.

Ajuster les tranches de carte d'image

Étape 1

Sélectionnez "l'outil de sélection de tranche" dans la barre d'outils et cliquez à l'intérieur d'une tranche que vous souhaitez déplacer.

Étape 2

Maintenez le bouton gauche de la souris enfoncé et faites glisser la tranche vers un nouvel emplacement.

Étape 3

Maintenez le curseur de la souris sur l'un des bords de la tranche et une ligne avec des flèches à chaque extrémité apparaît. Cliquez sur cette ligne, maintenez le bouton gauche de la souris enfoncé et faites glisser la souris si vous avez besoin d'agrandir ou de réduire la tranche.

Enregistrer la carte d'image

Étape 1

Cliquez sur "Fichier" suivi de "Enregistrer pour le Web" pour ouvrir la fenêtre Enregistrer pour le Web.

Étape 2

Cliquez sur "Preset" et sélectionnez l'une des options de type de fichier qui apparaissent. Les choix incluent GIF 128 Dithered, JPEG High et PNG-24.

Étape 3

Cliquez sur "Enregistrer" pour ouvrir une fenêtre qui affiche les fichiers et dossiers de votre disque dur. Naviguez jusqu'au dossier dans lequel vous souhaitez enregistrer les fichiers d'image cliquable et saisissez un nom pour l'image cliquable dans la zone de texte Nom de fichier.

Étape 4

Cliquez sur le menu déroulant "Format" et sélectionnez "HTML et images". Cliquez sur "Enregistrer" pour enregistrer tous les fichiers dans le dossier que vous avez spécifié.

Astuce

Photoshop enregistre chaque tranche en tant qu'image distincte dans un dossier d'images. Le programme enregistre également un document HTML portant le même nom que celui que vous avez saisi dans la zone de texte « Nom de fichier ». Si vous trouvez ce fichier HTML dans l'Explorateur de fichiers et double-cliquez sur le fichier, votre navigateur s'ouvre et affiche votre image cliquable. Cliquez sur différentes parties de l'image cliquable pour accéder aux URL que vous avez attribuées aux tranches. Par exemple, si vous avez divisé une carte des États-Unis en états en créant une tranche pour chaque état, vous pouvez cliquer sur un état pour accéder à l'URL attribuée à la tranche de cet état.

Donnez aux tranches des noms significatifs et il vous sera plus facile de les identifier si vous souhaitez modifier le code HTML généré par Photoshop. Par exemple, si vous créez une tranche qui entoure l'état de l'Iowa, vous pouvez nommer la tranche Iowa.

Vous souhaiterez probablement enregistrer vos images cliquables dans le même format que l'image d'origine. Par exemple, s'il s'agit d'un JPEG, choisissez l'une des options JPEG dans le menu déroulant Préréglage de la fenêtre Enregistrer pour le Web. Choisissez "JPEG Low", par exemple, et Photoshop génère des images JPEG de faible qualité. Plus la qualité d'une image est faible, plus elle se charge rapidement dans un navigateur Web.

Avertissement

Cet article s'applique à Adobe Photoshop CC, version 2014. Certaines informations peuvent varier dans d'autres versions du logiciel.