スライスによって画像は小さな画像に分割され、HTML テーブルまたは CSS レイヤーを使用して Web ページ上で再合成されます。画像を分割することによって、異なる URL リンクを割り当ててページナビゲーションを作成したり、画像の各部分を異なる設定で最適化したりすることができます。

スライスされた画像は、「Web およびデバイス用に保存」コマンドを使用して書き出しおよび最適化します。Photoshop では、各スライスは独立したファイルとして保存され、スライスされた画像を表示するために必要な HTML または CSS コードが生成されます。

Photoshop スライスを使用して分割された Web ページ
スライスを使用して分割された Web ページ.

スライスを使用する場合は、次の基本事項に留意します。

  • スライスを作成するには、スライスツールを使用するか、レイヤーベースのスライスを作成します。

  • 作成したスライスをスライス選択ツール で選択し、スライスを移動、サイズ変更、また他のスライスと一緒に整列させることができます。

  • スライスの種類、名前、URL など、各スライスのオプションをスライスオプションダイアログボックスで設定します。

  • Web およびデバイス用に保存ダイアログボックスでは、異なる最適化の設定を使用して、各スライスを最適化できます。

スライスの種類

スライスは、コンテンツの種類(テーブル、画像、画像なし)および作成方法(ユーザー定義、レイヤーベース、自動)で分類されます。

スライスツールを使用して作成するスライスをユーザー定義スライス、レイヤーから作成されるスライスをレイヤーベースのスライスといいます。新しいユーザー定義スライスまたはレイヤーベースのスライスを作成すると、画像の残りの部分を占める自動スライスが新たに生成されます。つまり、自動スライスとは、ユーザー定義スライスとレイヤーベースのスライスのどちらによっても定義されていない画像のスペースを埋めるスライスです。自動スライスは、ユーザー定義スライスまたはレイヤーベースのスライスを追加または変更するたびに再生成されます。自動スライスは、ユーザー定義スライスに変換できます。

ユーザー定義スライス、レイヤーベースのスライスおよび自動スライスは、外観が異なります。ユーザー定義スライスとレイヤーベースのスライスは実線で示されますが、自動スライスは点線で示されます。さらに、ユーザースライスおよびレイヤーベースのスライスは異なるアイコンで表示されます。自動スライスの表示または非表示を切り替えると、ユーザー定義スライスおよびレイヤーベースのスライスが見やすくなります。

サブスライスとは、重なり合うスライスを作成したときに生成される、自動スライスの一種です。サブスライスは、最適化されたファイルを保存する際に、画像がどのように分割されるかを示します。サブスライスには番号が付けられ、スライス記号も表示されますが、ベースとなるスライスとは別にサブスライスだけを選択または編集することはできません。サブスライスは、スライスの重なり順を変更するたびに再生成されます。

スライスは様々な方法で作成されます。

  • 自動スライスは自動的に生成されます。

  • ユーザー定義スライスはスライスツールで作成します。

  • レイヤーベースのスライスはレイヤーパネルで作成します。

Web ページのスライス

スライスツールを使用して画像に直接スライスラインを描画することも、レイヤーを使用してグラフィックをデザインし、レイヤーに基づいてスライスを作成することもできます。

スライスツールによるスライスの作成

  1. スライスツール を選択します。(切り抜きツールと同じグループのツールを切り替えるには、Cキーを押します)。

    すべての既存スライスが、ドキュメントウィンドウに自動的に表示されます。

  2. オプションバーの次のいずれかのスタイル設定を選択します。

    通常

    ドラッグによってスライスを作成できます。

    縦横比を固定

    高さと幅の比率を設定します。縦横比として、整数または小数を入力します。例えば、高さの 2 倍の幅のスライスを作成するには、幅に 2 を、高さに 1 を入力します。

    固定

    スライスの高さと幅を指定できます。その場合、ピクセル値を整数で入力します。

  3. スライスを作成する部分をドラッグして囲みます。Shift キーを押しながらドラッグすると、スライスが正方形に固定されます。中心からドラッグするには、Alt キー(Windows)または Option キー(Mac OS)を押しながらドラッグします。新しいスライスをガイドまたは画像の別のスライスに揃えるには、表示/スナップ先を使用します。詳しくは、ユーザー定義スライスの移動、サイズ変更およびスナップを参照してください。

ガイドからのスライスの作成

  1. 画像にガイドを追加します。
  2. スライスツールを選択して、オプションバーの「ガイドに沿ってスライス」をクリックします。

    ガイドからスライスを作成すると、既存のスライスは削除されます。

レイヤーからのスライスの作成

レイヤーベースのスライスはレイヤー内のすべてのピクセルデータを含みます。レイヤーを移動したり、レイヤーの内容を変更すると、スライス領域は自動的に調整されます。

Photoshop レイヤーからのスライスの作成
レイヤーベースのスライスは、ソースレイヤーの修正時に更新されます。

レイヤーベースのスライスは、ユーザー定義スライスに比べて設定項目も少なくオプションも限られています。ただし、レイヤーベースのスライスをユーザー定義スライスに変換(変更)することができます。詳しくは、自動スライスとレイヤーベースのスライスのユーザー定義スライスへの変換を参照してください。

  1. レイヤーパネルからレイヤーを選択します。
  2. レイヤー/New Layer Based Slice を選択します。

注意:

アニメーションの実行中にレイヤーを画像内で広い範囲にわたって移動する場合は、レイヤーベースのスライスは使用しないでください。これは、スライスの寸法が有効なサイズ範囲を超えてしまうのを避けるためです。

自動スライスとレイヤーベースのスライスのユーザー定義スライスへの変換

レイヤーベースのスライスは、レイヤーのピクセルデータに連結されているので、ユーザー定義スライスに変換しない限り、移動、合成、分割、サイズ変更、整列などの操作を行うには、レイヤーを編集するしかありません。

自動スライスの場合、画像内のすべてのスライスが互いにリンクされており、共通の最適化設定が適用されます。自動スライスに異なる最適化の設定を適用する場合は、ユーザー定義スライスに変換する必要があります。

  1. スライス選択ツール を使用して、変換するスライスを選択します。
  2. オプションバーの「変更」をクリックします。

    注意:

    Web およびデバイス用に保存ダイアログボックスで自動スライスのリンクを解除することによって、自動スライスを変換できます。詳しくは、Web およびデバイス用に保存ダイアログボックスでのスライスの使用を参照してください。

スライスおよびスライスオプションの表示

スライスは、Photoshop および Web およびデバイス用に保存ダイアログボックスで表示できます。スライスは以下のように表示されます。

スライスライン

スライスの境界を示します。実線は、そのスライスがユーザー定義スライスまたはレイヤーベースのスライスであることを示し、点線は自動スライスであることを示します。

スライスカラー

ユーザー定義スライスとレイヤーベースのスライスを自動スライスから区別します。初期設定では、ユーザー定義スライスとレイヤーベースのスライスは青い記号で表示され、自動スライスはグレーの記号で表示されます。

また、Web およびデバイス用に保存ダイアログボックスでは、カラー調整を使用して、選択されていないスライスをグレーで表示します。これらのカラー調整は表示目的のみに使用されるもので、最終的な画像のカラーには影響しません。初期設定では、自動スライスのカラー調整は、ユーザー定義スライスの 2 倍に設定されています。

スライス番号

スライスには、画像の左上から始まって、左から右および上から下に向かって順番に番号 が付けられます。スライスの配置や合計数を変更すると、新しい並び順に合わせて番号が自動的に更新されます。

スライスアイコン

以下のアイコンは、特定の状態を示します。

画像コンテンツが含まれているユーザー定義スライス。

画像なしコンテンツが含まれているユーザー定義スライス。

レイヤーベースのスライス。

スライスの境界線の表示と非表示の切り替え

  1. 表示/表示・非表示/スライスを選択します。他のアイテムと一緒にスライスの表示または非表示を切り替えるには、「エクストラ」コマンドを使用します。詳しくは、エクストラの表示と非表示の切り替えを参照してください。

自動スライスの表示と非表示の切り替え

  1. 次のいずれかの操作を行います。
    • スライス選択ツール を選択して、オプションバーの「自動スライスを表示」または「自動スライスを隠す」をクリックします。

    • 表示/表示・非表示/スライスを選択します。自動スライスが他のスライスと共に表示されます。

スライス番号の表示と非表示の切り替え

  1. 次のいずれかの操作を行います。
    • Windows では、編集/環境設定/ガイド・グリッド・スライスを選択します。

    • Mac OS では、Photoshop/環境設定/ガイド・グリッド・スライスを選択します。

  2. 「スライス」で、「スライス番号を表示」チェックボックスをクリックします。

スライスラインのカラーの変更

  1. Windows では、編集/環境設定/ガイド・グリッド・スライスを選択します。Mac OS では、Photoshop/環境設定/ガイド・グリッド・スライスを選択します。
  2. 「スライス」で、カラーメニューからカラーを選択します。

    カラーの変更後に、スライスラインが自動的にコントラストカラー(淡色)で表示されます。

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

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