内容 (What's Covered)

 この文書では、Adobe Photoshop CS5.1 の [スライスツール] を使用した基本操作を説明します。

 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. 自動スライス上をクリックして選択します。
  3. 画面上オプションバーの [変更] ボタンをクリックします。



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

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

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

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

 ユーザ定義スライスの拡大・縮小

  1. ツールボックスの [スライス選択ツール] を選択します。
  2. ユーザ定義スライスをクリックして選択します。

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





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



 ユーザ定義スライスの移動

  1. ツールボックスの [スライス選択ツール] を選択します。
  2. ユーザ定義スライスをクリックして選択します。

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





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



 スライスした領域の重なる順番を変更

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

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





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





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



 E. スライスオプション

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

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

  1. ツールボックスの [スライス選択ツール] を選択します。
  2. ユーザ定義スライスまたは自動定義スライスをクリックして選択します。
  3. オプションバーの [現在のスライスにオプションを設定] ボタンをクリックします。





     
  4. [スライスオプション] ダイアログボックスが表示されます。このダイアログボックスで Web ページのさまざまな設定を行うことができます。





     
  5. 設定完了後、[OK] をクリックします。

詳細は、下記のユーザガイドページをご覧ください。

『Adobe Photoshop CS5 ユーザガイド』P481~「スライスオプション」

http://help.adobe.com/ja_JP/photoshop/cs/using/photoshop_cs5_help.pdf

 F. スライスを削除

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

 任意のスライスを削除

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



        

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

 すべてのスライスを削除

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







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



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

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

 作業画面上での表示/非表示

  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. 一度に書き出す画像が少ない場合は、[Shift] を押しながらすべてクリックし、選択します。
  8. 設定完了後、[保存] をクリックします。
  9. 保存先を指定します。
  10. ファイル名を半角英数字で入力します。
  11. [フォーマット] ポップアップメニューから [画像のみ] を選択します。
  12. [スライス] ポップアップメニューから [選択したスライス] を選択します。
  13. [保存] をクリックします。





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



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

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

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