Photoshop を使用してイメージ マップを作成する方法
Web サイトの画像の一部をクリックしてブラウザーが別の Web ページにジャンプする場合、そのアクションはおそらくイメージ マップが原因です。サイト デザイナーは、任意の画像にクリック可能なホット スポットを作成する HTML コードを作成できます。各ホット スポットの正確な座標を特定する必要があるため、手動で画像マップを作成するには時間がかかります。 Photoshop のスライス ツールを使用して、画像にホット スポットを描画し、必要な HTML コードを自動的に生成します。
イメージ マップの作成
ステップ 1
Photoshop を起動し、イメージ マップに変換する画像を開きます。 「切り抜き」ツールをクリックしたままにすると、他のツールを含むメニューが表示されます。 「スライス」ツールをクリックして選択します。
ステップ 2
画像内のポイントをクリックし、スライス ツールをドラッグして、クリック可能にする画像の部分の周りにバウンディング ボックスを描画します。 Photoshop は、画像の他の部分の周りに追加の「自動スライス」を描画します。これらの自動スライスにより、画像のすべての部分がスライスに含まれるようになります。
ステップ 3
作成したスライス内を右クリックし、[スライス オプションの編集] を選択して [スライス オプション] ウィンドウを開きます。スライスに関連付ける URL を入力します。 [名前] テキスト ボックスに新しい名前を入力して、Photoshop がスライスに付けたデフォルトの名前を置き換えることもできます。
ステップ 4
[OK] をクリックして [スライス オプション] ウィンドウを閉じ、画像に戻ります。画像内の別のポイントをクリックし、スライス ツールをドラッグして、必要に応じて追加のスライスを作成します。
画像マップ スライスの調整
ステップ 1
ツールバーから「スライス選択ツール」を選択し、移動するスライス内をクリックします。
ステップ 2
マウスの左ボタンを押したまま、スライスを新しい場所にドラッグします。
ステップ 3
スライスのエッジの 1 つにマウス カーソルを合わせると、両端に矢印の付いた線が表示されます。スライスを大きくしたり小さくしたりする必要がある場合は、その線をクリックし、マウスの左ボタンを押したままマウスをドラッグします。
画像マップを保存
ステップ 1
[ファイル]、[Web 用に保存] の順にクリックして、[Web 用に保存] ウィンドウを開きます。
ステップ 2
[プリセット] をクリックし、表示されるファイル タイプ オプションのいずれかを選択します。選択肢には、GIF 128 ディザリング、JPEG 高、および PNG-24 が含まれます。
ステップ 3
[保存] をクリックして、ハード ドライブのファイルとフォルダを表示するウィンドウを開きます。イメージ マップ ファイルを保存するフォルダーを参照し、[ファイル名] テキスト ボックスにイメージ マップの名前を入力します。
ステップ 4
[フォーマット] ドロップダウン メニューをクリックし、[HTML と画像] を選択します。 [保存] をクリックして、指定したフォルダにすべてのファイルを保存します。
ヒント
Photoshop は、各スライスを別の画像として画像フォルダーに保存します。プログラムは、「ファイル名」テキスト ボックスに入力した名前と同じ名前の HTML ドキュメントも保存します。ファイル エクスプローラーでその HTML ファイルを見つけてダブルクリックすると、ブラウザーが開き、イメージ マップが表示されます。イメージ マップのさまざまな部分をクリックして、スライスに割り当てた URL に移動します。たとえば、各州のスライスを作成して米国地図を州に分割した場合、州をクリックすると、その州のスライスに割り当てられた URL に移動できます。
スライスに意味のある名前を付けると、Photoshop が生成した HTML コードを微調整したい場合に識別しやすくなります。たとえば、アイオワ州を囲むスライスを作成した場合、そのスライスに Iowa という名前を付けることができます。
イメージ マップ イメージを元のイメージと同じ形式で保存することをお勧めします。たとえば、JPEG の場合は、[Web 用に保存] ウィンドウの [プリセット] ドロップダウン メニューから JPEG オプションのいずれかを選択します。たとえば、「JPEG 低」を選択すると、Photoshop は低品質の JPEG 画像を生成します。画像の品質が低いほど、Web ブラウザーでの読み込みが速くなります。
警告
この記事は、Adobe Photoshop CC 2014 バージョンに適用されます。一部の情報は、ソフトウェアの他のバージョンでは異なる場合があります。