web-dev-qa-db-fra.com

Comment obtenir les coordonnées de chemin d'une forme à utiliser avec des cartes-images?

Je crée une carte d'image en utilisant ImageMapsterà partir d'ici . 

J'ai créé une image Photoshop avec plusieurs images que j'ai découpées dans les photographies originales. Chaque image est sur un calque séparé.

Maintenant, je dois obtenir les coordonnées du chemin de chaque objet, et je ne veux pas survoler chaque coin et écrire manuellement chaque coordonnée.

Existe-t-il un moyen automatisé d’obtenir ce chemin?

Peut-être existe-t-il une application ou un service Web par lequel je peux envoyer mon image et obtenir le chemin d'accès?

J'ai essayé d'exporter chaque calque séparément, puis de les importer dans illustrator et de vectoriser la forme (la forme reste dans sa position d'origine), mais je ne peux pas comprendre comment obtenir le tracé de coordonnées sous forme de texte. Je peux l'exporter au format svg, mais ce n'est pas le même code nécessaire à la carte d'image css.

photoshopimagemapadobe-illustratorimagemapster
16
bgmCoder

Ah! Après googler image-map, merci beaucoup à Sven pour l’idée (il a eu mon +1), j’ai trouvé ce fil ici sur Stack Overflow .

Alors voici mon processus.

  1. Préparez l'image dans Photoshop avec chaque objet sur un calque distinct avec un arrière-plan transparent (cela facilitera la tâche lors du traçage).
  2. Enregistrez votre fichier Photoshop.
  3. Ouvrez le fichier Photoshop dans Illustrator à l'aide de Fichier ... Ouvrir (fonctionne sous CS4 et CS5) et veillez à autoriser l'option d'importation des calques de Photoshop en tant qu'objets distincts. Après avoir ouvert le fichier, veillez à ne PAS déplacer les objets, vous devez les placer au exactement au même endroit comme dans le fichier Photoshop pour qu'ils puissent se superposer lorsqu'ils sont rendus au format. imagemap.
  4. Utilisez le Live Trace avec les paramètres personnalisés. Utilisez le mode noir et blanc avec le seuil tout haut (255). Cela produira une silhouette noire de la forme. (Vous pouvez également utiliser "ignorer le blanc"). Appuyez sur le bouton Trace. Si vous avez plusieurs couches, vous pouvez enregistrer ce nouveau motif de traçage en tant que préréglage - j’ai appelé le mien, Silhouette. Maintenant, je viens de cliquer sur un calque et de choisir Silhouette dans le menu déroulant des boutons de traçage.Adobe Illustrator Tracing Settings
  5. Développez la forme et assurez-vous qu'elle ne comporte qu'une seule forme plate:
    • vous pouvez utiliser le pinceau blob dans illustrator pour noircir les zones blanches non désirées
    • aucun groupe
    • pas de formes composées (ou cela ne fonctionnera pas) - ce qui signifie que vous ne pouvez pas créer de découpes.
    • Vous pouvez voir que les formes sont correctes lorsque vous cliquez dessus - vous devriez être capable de voir le chemin lui-même sans aucune "autre" forme impliquée (peut-être les ajouts de pinceaux blob) - juste un seul chemin. Une méthode simple est la suivante:
      • select la forme
      • ungroup si nécessaire
      • release compound path
      • unite (le mode forme fusionne toutes les formes en une seule)
    • Ne crop votre image - vous voulez que votre forme soit au même endroit dans la zone de l'image que dans votre image Photoshop originale.
    • Ne réunissez pas non plus toutes les formes.
    • Les formes doivent toutes être des formes entières individuelles, toutes à leur emplacement d'origine, chacune sur un calque séparé.
  6. Ouvrez maintenant le Attributes panel d’Illustrator et assurez-vous d’afficher les options. 
  7. Sélectionnez votre forme et dans le panneau "Attributs", basculez la zone de liste déroulante "Image" de None à Polygon. Assurez-vous d'ajouter une URL (peu importe ce que vous mettez; vous pouvez le changer plus tard - je viens de mettre "#" et le nom de la forme afin que je puisse dire à laquelle il appartient dans le code de carte). enter image description here
  8. Faites ceci pour chacun des objets.
  9. Maintenant, dans le menu File, allez à "Enregistrer pour le Web et les périphériques". Ignorez tous les paramètres ici et appuyez simplement sur "Enregistrer".
  10. Dans la boîte de dialogue "Enregistrer sous" (le titre de la fenêtre est "Enregistrer optimisé sous"), utilisez "Enregistrer en tant que type" et sélectionnez HTML Only(*.html) si vous voulez seulement le code, ou HTML and Images si vous voulez la sillouhuette apparaîtra dans un dossier appelé "images") - et notez votre emplacement de sauvegarde. enter image description here
  11. Maintenant, allez ouvrir ce fichier html dans le bloc-notes!
  12. Voila! Toutes les formes seront rendues pour vous sous forme de image-map - chemin de points et même de code HTML prédéfinis. Voici à quoi cela ressemble quand vous ouvrez dans le Bloc-notes le fichier HTML que vous venez de créer: enter image description here Pour cette démo, j'ai choisi une image particulièrement compliquée - une image que vous ne voudriez jamais estimer à la main, ni faire deux fois!

N'oubliez pas de placer le fichier image réel quelque part dans le dossier des images de votre site. Vous pouvez enregistrer le fichier psd pour plus tard et ajouter plus de "choses" si vous le souhaitez, puis répétez le processus.

J'ai pu créer la carte d'image de cette manière pour ma photo Photoshop en quelques minutes seulement. Une fois que vous le faites une fois, cela devient plus facile pour la prochaine fois.

31
bgmCoder

Cela me dérange depuis si longtemps et je n'ai pas Illustrator pour pouvoir utiliser la solution proposée par BGM, c'est-à-dire que j'ai créé mon propre addon Photoshop.

Vous pouvez l'obtenir ici: https://creative.Adobe.com/addons/products/2389

Il écrit toutes les coordonnées de points de vos chemins dans un fichier texte . Devrait fonctionner pour CS6 et supérieur.

La façon dont je l’utilise est de créer un chapiteau, d’effectuer un clic droit -> créer un chemin de travail, de renommer mon chemin, [répéter], puis d’exporter des coordonnées via mon addon.

Si quelqu'un est intéressé par les scripts derrière, vous pouvez jeter un oeil ici: http://Pastebin.com/8ugcAV3j

Si vous apportez des améliorations, signalez-les ici afin que d’autres personnes puissent les utiliser également.

J'espère que ça aide quelqu'un.

EDIT: ajout du lien vers le script source (était seulement dans les commentaires avant)

7
Michael Konečný

J'ai utilisé cela pour trouver les coordonnées du contour d'une forme afin de créer des zones réactives d'image pour les liens dans Dreamweaver. Si vous avez autre chose en tête, vous devrez en ignorer une partie. Cela fonctionne sur un seul calque, vous pouvez donc créer une "copie aplatie en premier", mais je ne vois pas pourquoi cela ne fonctionnerait pas sur une image à plusieurs niveaux.

Utilisez la baguette pour mettre en évidence la zone souhaitée. Ce sera différent pour différentes images . Faites un clic droit et appuyez sur Make Work Path. Utilisez une tolérance appropriée qui se trouve par essais et erreurs. Je viens d'utiliser le plus sensible . Faites cela pour toutes les zones de toutes vos images en créant des chemins distincts pour chaque . Cliquez sur Éditer puis exportez les chemins vers illustrator et enregistrez le fichier à un endroit sensible . dans Word. Ignorez le dessus et utilisez replace pour supprimer TOUTES LES LETTRES. Ne vous inquiétez pas des caractères de paragraphe . Notez que tous les chemins de travail sont exportés dans le même fichier, séparés par une ligne vierge. Vous devez donc les copier et les coller séparément pour pouvoir les utiliser pour chaque point d'accès.

Après avoir inséré votre image. Créez une carte dans Dreamweaver avec quelques coordonnées, puis remplacez-les simplement par les informations du fichier illustrateur pour chacune des zones de carte à produire.

3
Mitchypoo

J'ajoute ma réponse mise à jour que je devais trouver depuis qu'Adobe avait éliminé la sortie HTML dans de nombreux cas. Je travaille principalement avec Photoshop (CS4). C'est une solution parfaite:

1) télécharger le fichier suivant: https://github.com/andyhawkes/ps-paths-to-imagemap

2) ouvrez votre image dans photoshop et sélectionnez le formulaire avec la baguette magique

3) faites un clic droit et sélectionnez 'make work path' (plus le px est petit, plus précis)

4) allez à File -> Scripts -> Browse ... et sélectionnez le script à partir de la première étape

c'est tout !! ce script ouvrira votre éditeur de texte avec les coordonnées ...

2
webMan

Quelque chose comme ça peut être utile;

http://code.google.com/p/imagemap/

Copiez votre image en position, puis tracez.

0
PodTech.io