19

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

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

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

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

画像を送信してパスを取得できるアプリケーションまたは Web サービスがあるのではないでしょうか。

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

4

6 に答える 6

34

ああ！グーグルimage-mapで検索した後、アイデアを提供してくれた Sven に感謝します (彼は私の +1 を取得しました) 。Stack Overflow でこのスレッドを見つけました。

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

  1. 背景が透明な個別のレイヤーに各オブジェクトを配置して、Photoshop で画像を準備します (これにより、トレースを行うときに簡単になります)。
  2. Photoshop ファイルを保存します。
  3. File...Open (CS4 および CS5 で動作) を使用して Illustrator で Photoshop ファイルを開き、 Photoshop のレイヤーを個別のオブジェクトとしてインポートするオプションを許可していることを確認します。ファイルを開いた後は、オブジェクトを移動しないように注意してください。イメージマップにレンダリングされたときに互いに重ね合わせることができるように、Photoshop ファイルとまったく同じ場所に配置する必要があります。
  4. Live Traceをカスタム設定で使用します。しきい値をすべて上げて白黒モードを使用します (255)。これにより、シェイプの黒いシルエットが生成されます。(「白を無視」も使用できます)。ボタンを押しTraceます。多くのレイヤーがある場合は、この新しいトレース パターンをプリセットとして保存できます。私は私のシルエットを呼び出しました。ここで、レイヤーをクリックして、トレース ボタンのドロップダウン メニューから[シルエット] を選択します。Adobe Illustrator のトレース設定
  5. シェイプを展開し、単一のフラット シェイプのみで構成されていることを確認します。
    • イラストレーターのブロブブラシを使用して、不要な白い領域を黒くすることができます
    • グループなし
    • 複合形状はありません (または機能しません)。つまり、カットアウトを作成できません。
    • 形状をクリックすると、形状が正しいことがわかります。「他の」形状 (おそらくブロブ ブラシの追加) が含まれていないパス自体を確認できるはずです。パスは 1 つだけです。簡単な方法は次のとおりです。
      • selectかたち
      • ungroup必要であれば
      • release compound path
      • unite(シェイプ モードでは、すべてのシェイプが 1 つにマージされます)
    • 画像ではありませんcrop。元の Photoshop 画像と同じ場所に形状を配置する必要があります。
    • また、すべての図形を一緒に結合しないでください。
    • シェイプはすべて、個別のレイヤー上にある元の場所にある個別のシェイプ全体である必要があります。
  6. 次に、Illustrator を開きAttributes panel、「オプションを表示」を確認します。
  7. シェイプを選択し、[属性] パネルで [イメージ マップ] コンボ ボックスを からNoneに切り替えますPolygon。必ず URL を追加してください (何を入力しても構いません。後で変更できます。「#」と形状の名前を入力しただけなので、イメージ マップ コードでどの形状に属しているかがわかります)。ここに画像の説明を入力
  8. これをオブジェクトごとに行います。
  9. 次に、Fileメニューで、[Web とデバイス用に保存] に移動します。ここではすべての設定をスキップして、「保存」を押してください。
  10. [名前を付けて保存] (ウィンドウのタイトルは [最適化して保存]) ダイアログ ボックスで、[ファイルの種類:] を使用しHTML Only(*.html)て、コードだけが必要なHTML and Images場合、またはシルエットも必要な場合に選択します (それらは表示されます)。 「images」と呼ばれるフォルダー内) - 保存場所を書き留めます。ここに画像の説明を入力
  11. その html ファイルをメモ帳で開いてみましょう。
  12. 出来上がり！すべての形状は、事前に作成されたimage-mapポイント パスや html コードとしてレンダリングされます。作成したばかりの html ファイルをメモ帳で開くと、次のようになりますここに画像の説明を入力 。

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

この方法で、Photoshop の写真のイメージ マップをほんの数分で作成できました。一度やると次回は楽になります。

于 2012-12-12T20:10:47.040 に答える
3

これを使用して、形状の輪郭の座標を見つけ、dreamweaver でリンクの画像ホットスポットを作成しました。他の何かを念頭に置いている場合は、その一部を無視する必要があります。これは単一のレイヤーで機能するため、「最初に平坦化されたコピー」を作成することをお勧めしますが、多層画像では機能しない理由がわかりません。

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

画像を挿入した後。Dreamweaver でいくつかの座標を使用してマップの作成を開始し、作成する各マップ エリアの illustrator ファイルからの情報でこれらを置き換えるだけです。

于 2013-08-06T15:25:46.717 に答える
-2

イメージ マップの作成は非常に簡単です。最初に、コードの構文を確認する必要があります。div を作成しましょう。ページの右側に配置したい場合は、まず次のように記述します。

<div align="right">

その後、マッピングする画像をインポートします。

<img src="" alt="" width="" height="" usemap="#nameofmap" />

次に、マップ構造を定義する必要があります。まず、画像の長方形の部分をハイパーリンクのように機能させたいと仮定します。

<map name="nameofmap">
<area href="wherever I wanna take that.com" alt="" title="" 
shape=rect coords="A,B,C,D"></map>

ここで、div を閉じます。

</div>

形状が円形の場合、構文 shape=circle coords="x,y,radius"を使用します

形状が多角形の場合、 **shape=poly coords="a,b,c,d,e,f,gh" を使用します

ここからが重要な部分です。イメージ マップの座標を見つける方法です。非常に簡単です。http://www.image-maps.com に移動し ます 。画像ファイルを参照し、[画像のマッピングを開始] をクリックして続行し、次のページで右側の [古いマッピング コードのインポート] をクリックします。 .次に、座標を取得します。

その後、FIREBUG を使用して仕様に従って座標を変更できます。イメージマップは画像全体をハイパーリンクするだけなので、firebug を使用して座標を変更し、要件に応じて調整します。

楽しむ。

于 2013-07-29T14:35:58.117 に答える