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