この文書では、Adobe Photoshop CC 2015 の 「スライスツール」 を使用した基本操作を説明します。

A. スライスとは

スライスとは、画像を切って複数に分割する機能のことをいいます。

このスライス機能を利用すれば、Web ページに表示する画像を複数に分割し、 1 枚の画像として表示することが可能です。

また、スライスを使用することで以下のような設定を行うことができます。

  • リンク
  • ロールオーバー
  • アニメーション
  • スライスごとに画像を最適化

B. スライスを作成する

画像にスライスを作成するには、以下のいずれかの操作を行います。

「スライスツール」 を使用してスライスを作成する場合

レイヤーからスライスを作成する場合

ガイドからスライスを作成する場合

スライスツール」 を使用してスライスを作成する場合

  1. Photoshop で画像を開きます。
  2. ツールボックスの 「スライスツール」 を選択します。

  3. 分割する領域を斜めにドラッグすると、スライスが作成されます。

  4. 同様に、対象の領域をドラッグしてスライスを作成します。

    ※ スライスの作成時に、ガイドやグリッドにスナップして作成することができます。初期設定ではスナップはオンになっていますが、スナップのオン/オフを設定するには、「表示」 メニューから 「スナップ」 を選択します。

 レイヤーからスライスを作成する場合

  1. Photoshop でレイヤーを含む画像を開きます。
  2. 「ウィンドウ」 メニューから 「レイヤー」 を選択して 「レイヤー」 パレットを表示します。

  3. スライス領域にするレイヤーを選択します。

  4. 「レイヤー」 メニューから 「レイヤーに基づく新規スライス」 を選択します。

  5. レイヤーの大きさに合わせてスライスが自動的に作成されます。

 ガイドからスライスを作成する場合:

  1. Photoshop で画像を開きます。
  2. 「表示」 メニューから 「定規」 を選択し、画像の「上」と「左」に定規を表示します。

  3. マウスポインタを定規の上に合わせて、カーソルアイコンを  の形にします。

  4. マウスを押しながら、任意の場所にドラッグします。マウスを放した水平方向または垂直方向にガイドが作成されます。

    ※ 左側の定規から右にドラッグしても同様にガイドは作成されます。

  5. 同様に、スライスとして設定する領域にガイドを作成します。

  6. ツールボックスの 「スライスツール」 を選択します。

  7. 「スライス」 オプションバーの 「ガイドに沿ってスライス」 ボタンをクリックします。

  8. ガイドに沿ったスライスが作成されます。

C. スライスの種類について

スライスした画像は、「ユーザ定義スライス」と「自動スライス」の 2 種類があります。

ユーザ定義スライス

ユーザ自身が分割したスライスです。移動、複製、結合、分割、サイズ変更、削除、並べ替え、整列、分布などの操作を行うことが可能で、また、ユーザ定義スライスごとに異なる最適化設定を適用できます。

スライス番号は、青色(  )で表示されます。

 

自動スライス:

ユーザがスライスしたときに自動的に作成されるスライスです。画像内のすべてのスライスが互いにリンクされており、共通の最適化設定が適用されます。

スライス番号は、グレー色(  )で表示されます。

 

自動スライスをユーザ定義スライスに変更するには、以下の操作を行います。

  1. ツールボックスの 「スライス選択ツール」 を選択します。

  2. 自動スライス上をクリックして選択します。次に、画面上オプションバーの 「変更」 ボタンをクリックします。

D. スライスの「拡大・縮小」と「重なり順」について

ユーザ定義スライスは、スライスの拡大・縮小および場所を移動することが可能です。

また、複数のスライスの大きさや場所などを変更するとスライスが重なってしまう場合があります。この重なってしまったスライスの順番を変更して最前面に優先するスライスを配置することも可能です。

操作手順は、以下のとおりです。

ユーザ定義スライスを拡大・縮小する方法

ユーザ定義スライスを移動する方法

スライス画像が重なる順番を変更する方法

 ユーザ定義スライスを拡大・縮小する方法:

  1. ツールボックスの 「スライス選択ツール」 を選択します。

  2. ユーザ定義スライスをクリックして選択します。

    ※ スライスの周りに 8 つのバウンティングボックスが表示されます。
  3. 8 つのハンドルのうち、いずれかまたは複数をドラッグします。

  4. スライスが拡大・縮小されて、その周りにあるスライスの大きさも自動的に変更されます。

 ユーザ定義スライスを移動する方法:

  1. ツールボックスの 「スライス選択ツール」 を選択します。

  2. ユーザ定義スライスをクリックして選択します。

    ※ スライスの周りに 8 つのバウンティングボックスが表示されます。
  3. スライスを任意の場所へドラッグして移動します。

  4. スライスが移動して、その周りにあるスライスの位置も自動的に変更されます。

 スライス画像が重なる順番を変更する方法:

  1. ツールボックスの 「スライス選択ツール」 を選択します。

  2. 他のスライスと重なっているユーザ定義スライスをクリックして選択します。

    ※ スライスの周りに 8 つのバウンティングボックスが表示されます。

  3. オプションバーの 「最前面へ」 ボタンをクリックします。

  4. 選択したスライスが、最前面に変更されます。スライス画像を書き出す際は、この最前面にある大きさのスライスが優先されます。

E. スライスオプション

スライスオプションを設定すると、HTML ファイルとスライス画像を書き出したときに Web ブラウザでスライスデータをどのように表示するかを指定できます。

操作手順は、以下のとおりです。

  1. ツールボックスの 「スライス選択ツール」 を選択します。

  2. ユーザ定義スライスまたは自動定義スライスをクリックして選択します。
  3. スライスをダブルクリックすると「スライスオプション」 ダイアログボックスが表示されます。このダイアログボックスで Web ページのさまざまな設定を行うことができます。

  4. 設定完了後、「OK」 をクリックします。

F. スライスを削除する

作成したスライスを画像から削除するには、以下のいずれかの操作を行います。

任意のスライスを削除する場合

すべてのスライスを削除する場合

 任意のスライスを削除する場合:

  1. ツールボックスの 「スライス選択ツール」 を選択します。

  2. 画像内のスライスの上をクリックします。
  3. Backspace キーまたは Delete キーを押します。

 すべてのスライスを削除する場合:

  • 「表示」 メニューから 「スライスを消去」 を選択します。

    ※ 「スライスを消去」 コマンドを実行しても、画像の左上に「01」と記載されたスライスのみ表示されますが、これは、スライスが消去されていないわけではありません。必ず画像 1 つに対して表示されるものであり、非表示にするには、以下の G. スライスの表示/非表示 をご覧ください。

G. スライスの表示/非表示

作成したスライスを一時的に、表示または非表示に設定することができます。操作手順は、以下のいずれかを行います。

作業画面上で表示/非表示を行う場合:

[Web 用に保存] ダイアログボックスで表示/非表示を行う場合:

 作業画面上で表示/非表示を行う場合:

  1. 「表示」 メニューから 「表示・非表示」 - 「スライス」 を選択して、チェックマークをはずしてください。

  2. 再度、スライスを表示するには、手順 1 と同様の操作で、「スライス」 にチェックを入れます。

「Web 用に保存」 ダイアログボックスでスライスの表示/非表示を行う場合:

  1. 「ファイル」 メニューから「書き出し」 - 「Web 用に保存」 を選択します。

  2. 「Web 用に保存」 ダイアログボクスで 「スライスの表示を切り替え」 ボタンをクリックします。クリックするたびに、表示/非表示が切り替わります。

H. スライス画像を保存する

スライスは、Web で使用することが前提とされているために画像の一部だけを GIF や JPEG 形式に最適化して保存することが可能です。

スライスした画像を保存するには、以下の操作を行います。

  1. Photoshop でスライス画像を開きます。
  2. 「ファイル」 メニューから「書き出し」 - 「Web 用に保存」 を選択します。

  3. [Web 用に保存] ダイアログボックスで、[2 アップ] タブ、または [4 アップ] タブをクリックします。

    ※ ここでは、例として「 2 アップ」を使用します。2 アップ画面にすると、左が「元画像」、右が「最適化後の画像」プレビューになります。

  4. 「スライス選択ツール」 を選択します。

  5. 最適化後の画像のスライスをクリックします。次にウィンドウ右上の最適化設定を任意に行います。

  6. 他のスライスも同様に、最適化設定を行います。

    ※ 写真のような画像は JPEG を設定し、アニメのような画像には GIF を設定すると効果的です。
  7. 設定完了後、「保存」 をクリックします。

  8. 保存先を指定し、ファイル名を半角英数字で入力し、 「フォーマット」 を 「画像のみ」、「スライス」 を 「選択したスライス」 を選択して 「保存」 をクリックします。

  9. 初期設定では「images」フォルダが作成され、そこにスライスされた画像が保存されます。

上記の手順で、スライスを含む画像を Web 用に保存することができます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー