Web ページのスライス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web ページのスライス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スライスには、画像の左上から始まって、左から右および上から下に向かって順番に番号 が付けられます。スライスの配置または総数を変更すると、変更後のスライス配置を反映してスライス番号が更新されます。

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

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

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

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

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

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

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

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