Comment créer une image réactive (image map) avec Photoshop
Quand vous cliquez sur une partie d'une image de site web et que le navigateur va vers une autre page, une image map (carte d'image) en est probablement responsable. Les concepteurs peuvent écrire du HTML créant des zones cliquables (hot spots) sur n'importe quelle image. Construire des image maps à la main est fastidieux car il faut identifier les coordonnées exactes de chaque zone. Avec l'outil Tranche (Slice) de Photoshop, vous dessinez les zones cliquables sur une image pour générer automatiquement le code HTML nécessaire.
Créer une image map
Étape 1
Lancez Photoshop et ouvrez l'image à convertir en image map. Cliquez et maintenez l'outil « Recadrage » pour afficher le menu contenant d'autres outils. Cliquez l'outil « Tranche » (Slice) pour le sélectionner.
Étape 2
Cliquez dans l'image et faites glisser l'outil Tranche pour dessiner un cadre autour de la partie à rendre cliquable. Photoshop dessine des « tranches automatiques » autour des autres parties. Ces tranches auto assurent que toutes les parties de l'image sont incluses dans une tranche.
Étape 3
Faites un clic droit dans la tranche créée et sélectionnez « Options de la tranche » pour ouvrir la fenêtre. Tapez l'URL à associer à la tranche. Vous pouvez aussi remplacer le nom par défaut en tapant un nouveau nom dans « Nom ».
Étape 4
Cliquez « OK » pour fermer et revenir à l'image. Créez des tranches supplémentaires au besoin.
Ajuster les tranches de l'image map
Étape 1
Sélectionnez l'outil « Sélection de tranche » dans la barre d'outils et cliquez dans une tranche à déplacer.
Étape 2
Maintenez le bouton gauche et faites glisser la tranche vers un nouvel emplacement.
Étape 3
Survolez un bord de la tranche : une ligne avec flèches apparaît. Cliquez-la, maintenez et faites glisser pour redimensionner la tranche.
Enregistrer l'image map
Étape 1
Cliquez « Fichier » puis « Enregistrer pour le web » pour ouvrir la fenêtre.
Étape 2
Cliquez « Préréglage » et sélectionnez une option de type de fichier : GIF 128 Diffusion, JPEG Haute qualité, PNG-24.
Étape 3
Cliquez « Enregistrer » pour ouvrir la fenêtre des fichiers/dossiers. Parcourez jusqu'au dossier de destination, tapez un nom pour l'image map dans « Nom de fichier ».
Étape 4
Cliquez le menu déroulant « Format » et sélectionnez « HTML et images ». Cliquez « Enregistrer » pour sauvegarder tous les fichiers.
- Photoshop enregistre chaque tranche comme image séparée dans un dossier images. Il enregistre aussi un document HTML du même nom que celui saisi. Si vous trouvez ce fichier HTML et double-cliquez, votre navigateur ouvre l'image map. Cliquez différentes parties pour naviguer vers les URLs assignées. Exemple : carte des États-Unis divisée par états, cliquez un état pour aller à son URL.
- Donnez des noms significatifs aux tranches pour les identifier facilement si vous voulez modifier le HTML généré. Exemple : tranche autour de l'Iowa nommée « Iowa ».
- Enregistrez probablement les images dans le même format que l'original. Si c'est un JPEG, choisissez une option JPEG dans « Préréglage ». « JPEG Faible » génère des JPEG basse qualité, plus rapides à charger.