画像マップで使用するための形状のパス座標を取得する方法は？

Question

ImageMapsterfrom here を使用してイメージマップを作成しています。

元の写真から切り取ったいくつかの画像を使用して、フォトショップ画像を作成しました。各画像は別々のレイヤーにあります。

次に、各オブジェクトのパス座標を取得する必要があります。すべてのコーナーにカーソルを合わせて、各座標を手動で書き留める必要はありません。

このパスを取得する自動化された方法はありますか？

おそらく、画像を送信してパスを取得できるアプリケーションまたはWebサービスがありますか？

各レイヤーを個別にエクスポートしてからイラストレーターにインポートし、シェイプをベクトル化してみました（シェイプを元の位置に保ちます）が、座標パスをテキストとして取得する方法がわかりません。これをsvgにエクスポートできますが、それはcssイメージマップに必要な同じ単純なコードではありません。

Answer 1

あ！ _image-map_をグーグルで検索した後、アイデアをくれたSvenに感謝します（彼は私の+1を得ました） スタックオーバーフローに関するこのスレッド を見つけました。

これが私のプロセスです。

1. Photoshopで、透明な背景を持つ個別のレイヤー上の各オブジェクトを使用して画像を準備します（これにより、トレースを行うときに簡単になります）。
2. フォトショップファイルを保存します。
3. File ... Open（CS4およびCS5で動作）を使用してIllustratorでPhotoshopファイルを開き、Photoshopのレイヤーを個別のオブジェクトとしてインポートするオプションを許可します。ファイルを開いた後は、オブジェクトを動かさないでください。正確に同じ場所にある必要があります。イメージマップ。
4. カスタム設定で_Live Trace_を使用します。しきい値をすべて上げた状態（255）で白黒モードを使用します。これにより、形状の黒いシルエットが生成されます。 （「白を無視」を使用することもできます）。 Traceボタンを押します。多数のレイヤーがある場合は、この新しいトレースパターンをプリセットとして保存できます-私は私のもの、Silhouetteと呼びます。ここで、レイヤーをクリックして、トレースボタンのドロップダウンメニューからSilhouetteを選択します。
5. 形状を展開し、単一の平らな形状のみで構成されていることを確認します：
   • イラストレーターでブロブブラシを使用して、不要な白い部分を黒くすることができます。
   • グループなし
   • 複合形状なし（または機能しません）-これは、カットアウトを作成できないことを意味します。
   • クリックするとシェイプが正しいことがわかります。「他の」シェイプ（おそらくブロブブラシの追加）なしでパス自体を見ることができるはずです-ただ1つのパス。簡単な方法は次のとおりです。
     • select形状
     • 必要に応じてungroup
     • _release compound path_
     • unite（形状モードはすべての形状を1つにマージします）
   • あなたの画像をcropしないでください-あなたの形をあなたの元のPhotoshopの画像と同じ画像の領域内の同じ場所にしたいです。
   • また、すべての図形を一緒に結合しないでください。
   • シェイプはすべて、個々の全体のシェイプであり、すべて元の場所にあり、それぞれ個別のレイヤー上にある必要があります。
6. 次に、Illustratorの_Attributes panel_を開き、必ず「オプションを表示」してください。
7. 形状を選択し、[属性]パネルで[イメージマップ]コンボボックスをNoneからPolygonに切り替えます。必ずURLを追加してください（何を入力しても構いません。後で変更できます-イメージマップコードで「＃」とシェイプの名前を入力して、どのURLに属しているかを確認します） 
8. これを各オブジェクトに対して行います。
9. 次に、Fileメニューで、「Webおよびデバイス用に保存」に進みます。ここですべての設定をスキップし、「保存」を押すだけです。
10. [名前を付けて保存]（ウィンドウのタイトルは[最適化された名前を付けて保存]）ダイアログボックスで、[名前を付けて保存：]を使用し、コードだけが必要な場合はHTML Only(*.html)を選択するか、_HTML and Images_ sillouhuetteも必要な場合（「images」というフォルダーに表示されます）-保存場所をメモします。 
11. 次に、メモ帳でそのhtmlファイルを開きます！
12. Voila！すべての形状は、事前に作成された_image-map_-ポイントパス、さらにはHTMLコードとしてレンダリングされます。作成したhtmlファイルをメモ帳で開くと、次のようになります。  このデモでは、特に複雑な画像を選択しました。手動で推定したり、2回実行したりする必要のない画像です。

実際の画像ファイルをサイトの画像フォルダのどこかに置くことを忘れないでください。後で使用するためにpsdファイルを保存し、必要に応じて「もの」を追加して、プロセスを繰り返すことができます。

このようにして、ほんの数分でフォトショップの写真のイメージマップを作成することができました。一度それを行うと、次回は簡単になります。

Answer 2

これは長い間私を悩ませてきましたが、BGMが提案したソリューションを使用するためのIllustratorがありません。これは、独自のPhotoshopアドオンを作成したものです。

こちらで入手できます： https://creative.Adobe.com/addons/products/2389

すべてのパスのポイントの座標をテキストファイルに書き込みます。 CS6以降で動作するはずです。

使用方法は、マーキーを作成し、右クリック->作業用パスを作成し、パスの名前を変更して[繰り返し]、アドオンを介して座標をエクスポートするだけです。

背後のスクリプトに興味がある人は、こちらをご覧ください： http://Pastebin.com/8ugcAV3j

改善する場合は、ここに投稿して、他の人も使用できるようにしてください。

これが誰かを助けることを願っています。

編集：ソーススクリプトへのリンクを追加しました（以前はコメントのみでした）

Answer 3

これを使用して、形状の輪郭の座標を見つけ、dreamweaverのリンクの画像ホットスポットを作成しました。何か他のことを考えている場合は、その一部を無視する必要があります。これは単一のレイヤーで機能するため、「最初にフラット化されたコピー」を作成することもできますが、マルチレイヤーのイメージで機能しない理由はわかりません。

ワンドを使用して、必要な領域を強調表示します。これは画像によって異なります。右クリックして、[作業パスの作成]を押します。試行錯誤によって発見された適切な許容範囲を使用してください。最も敏感なものを使用しています。すべての画像のすべての領域に対してこれを行い、それぞれに個別のパスを作成します。 [編集]をクリックし、パスをイラストレーターにエクスポートして、適切な場所にファイルを保存します。保存したファイルをWordで開きます。上部のbumfを無視し、replaceを使用してすべての文字を削除します。段落文字を心配しないでください。すべての作業パスは、空白行で区切られた同じファイルにエクスポートされるため、各ホットスポットで使用するには、個別にコピーして貼り付ける必要があります。

画像を挿入した後。 dreamweaverで2つの座標を使用してマップを作成し、作成する各マップエリアのイラストレーターファイルからの情報に置き換えます。

Answer 4

Adobeは多くの場合HTML出力を排除したため、見つけなければならなかった更新済みの回答を追加します。ほとんどの場合、Photoshop（CS4）で作業します。これは完璧なソリューションです。

1）次のファイルをダウンロードします： https://github.com/andyhawkes/ps-paths-to-imagemap

2）フォトショップで画像を開き、魔法の杖でフォームを選択します

3）右クリックして[作業パスを作成]を選択します（pxが小さいほど正確になります）

4）File-> Scripts-> Browse ...そして最初のステップからスクリプトを選択します

それでおしまい ！！このスクリプトは、座標でテキストエディターを開きます...

Answer 5

このような何かが役に立つかもしれません。

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

画像を適切な位置にコピーしてから、プロットします。