スライスの概要

web 用にグラフィックをデザインする場合、画像の各部分がそれぞれ独立して動作する必要があることがよくあります。あるエリアは URL にリンクし、別のエリアはより高速に読み込まれ、さらに別のエリアには異なる補正設定が必要になることがあります。スライスを使うと、1 つの画像を小さなグリッド状のピースに分割し、それらが web ページとして連携しながら、各セクションを個別に管理できます。

Photoshop は、HTML テーブルまたは CSS レイヤーを使用して、スライスした画像を web ページ上で再構成します。ファイル > 書き出し > Web 用に保存コマンドを使用してスライスした画像を書き出すと、Photoshop は各スライスを個別のファイルとして保存します。また、画像をブラウザー上で 1 つの構成として表示するために必要な HTML または CSS も生成します。

スライスの仕組み

スライスは、画像を目に見えないグリッド線に沿って分割し、個別のファイルとして機能する矩形のセクションを作成します。各スライスは、独自のプロパティ、補正設定、動作を持つ個別の要素として機能しながら、全体のレイアウト内での位置を維持します。

この方法には、いくつかの実用的な利点があります：

• 異なる URL リンクを割り当てて、クリック可能なナビゲーション要素を作成
• 様々な圧縮設定を適用して、各エリアの画質とファイルサイズのバランスを調整します。
• 全体を再書き出しすることなく、個別のセクションを更新

作成方法によるスライスの種類

Photoshop は、作成方法に基づいてスライスを分類し、画像を編集する際に各タイプが異なる動作をします。

• ユーザースライス： スライス ツールを使用して手動で定義するセクションです。サイズ、位置、プロパティを完全にコントロールでき、移動または変更するまでその場所に留まります。
• レイヤーベーススライス： レイヤー内のすべてのピクセルを含むスライスです。レイヤーを移動または編集すると、境界が自動的に更新されます。頻繁に変更されるコンテンツに適していますが、ユーザースライスよりも正確な位置決めのコントロールは少なくなります。
• 自動スライス： ユーザースライスやレイヤーベーススライスでカバーされていない画像の残りの部分を埋めるスライスです。Photoshop はこれらを自動的に生成し、他のスライスを追加、削除、または変更するたびに再生成します。画像内のすべての自動スライスは、同じ強化設定を共有します。
• サブスライス： スライスが重なったときに表示される特殊な種類の自動スライスです。サブスライスは、強化されたファイルを保存するときに Photoshop が重複する領域をどのように分割するかを示します。サブスライスは、元になっているスライスとは別に選択または編集することはできません。

コンテンツ別のスライスタイプ

スライスは、含まれるコンテンツの種類によっても分類されます。

• 画像スライス： ビジュアルコンテンツ用のデフォルトのスライスタイプで、Photoshop ドキュメントからの画像データが含まれます。
• 画像なしスライス： HTML テキストまたはべた塗りのための空のテーブルセルです。Photoshop はこれらを画像ファイルとして書き出さないため、ライブで選択可能なテキストとして役立ちます。
• テーブルスライス： ブラウザーでスライスされた画像を再構成するために使用する HTML テーブルの構造を Photoshop が定義するスライスです。

スライスの視覚的な手がかり

Photoshop は、作業中にスライスタイプを見分けやすくするための視覚的な手がかりを使用します。

• スライスライン： 実線はユーザースライスまたはレイヤーベースのスライスを示し、点線は自動スライスを示します。
• スライスの色： 青色のシンボルはユーザースライスとレイヤーベースのスライスを示し、グレーのシンボルは自動スライスを示します。
• スライス番号： 各スライスの左上隅にある番号は、左から右、上から下の順に並び、スライスを並べ替えたり変更したりすると自動的に更新されます。
• スライスバッジ： 小さいアイコンがスライスのコンテンツと種類を示します。例えば、画像アイコンは画像コンテンツを含むユーザースライスを示し、画像に斜線が入ったアイコンは画像コンテンツを含まないユーザースライスを示し、レイヤーアイコンはレイヤーベースのスライスを示します。

これらの視覚的な違いを認識すると、スライスタイプを迅速に識別し、web ページをスライスする際に複雑なスライスレイアウトをより効率的に処理できます。