Adobe Photoshopでのスライス作成方法

Adobe PhotoshopをWeb制作における画像の編集・加工に使用している人も多いと思います。Photoshopにおけるスライスの作成方法を解説します。

Photoshopではスライスを作成する方法は2つあります。
ひとつはスライスツールを使って任意のエリアにスライスを作成する方法です。
そしてもうひとつはレイヤーに基づきオブジェクトの形に沿ってスライスを作成する方法です。

【記事執筆時の確認環境】
Windows 7 Professional 32bit SP1
Adobe Photoshop CS6

スライスツールを使ってスライスを作成する

ツールパネルから[スライスツール]を選択します。

スライスツールの選択

ドラッグして、スライスで切り出すエリアを指定します。

スライスエリアの指定

この方法で作成したスライスは、「ユーザー定義スライス」となります。
ユーザー定義スライスは、スライスのまわりに表示されている8つのハンドルをドラッグすると、スライスを変形することができます。

レイヤーに基づきスライスを作成する

ここでは、複数のレイヤーを選択して複数のスライスを一括で作成してみます。

レイヤーパネルでスライスを作成するすべてのレイヤーを選択します。

レイヤーパネルでのレイヤーの複数選択

カンバス上では、ボタン1とボタン2の2つのオブジェクトが選択されています。

カンバス上でのオブジェクト選択

メニューの[レイヤー]-[レイヤーに基づく新規スライス]を選択します。

レイヤーに基づく新規スライスメニュー

選択したすべてのレイヤーに基づいて複数のスライスが作成されます。
レイヤーに効果が付いている場合は、その部分も含めてスライスを作成してくれます。

複数スライスの作成画像

この方法で作成したスライスは変形することができません。
変形したい場合は、スライスをユーザー定義スライスに変更します。

ツールパネルから[スライス選択ツール]を選択します。

スライス選択ツールの選択

変更したいスライスの上で右クリックし、[ユーザー定義スライスに変更]を選択します。

ユーザー定義スライスに変更メニュー

ユーザー定義スライスに変更すると、スライスのまわりに8つのハンドルが現れ、ハンドルをドラッグすることでスライスを変形できます。

ユーザー定義スライスに変更された画像

作成したスライスを保存する

メニューの[ファイル]-[Web用に保存]を選択します。

Web用に保存メニュー

表示された[Web用に保存]ダイアログのプリセットエリアで、保存する画像形式を設定します。
なお、プレビュー画面でスライスの選択を変えながら、それぞれのスライスに違う画像形式を設定することもできます。

設定が済んだら、[保存]ボタンをクリックします。

画像形式の設定画面

[最適化ファイルを別名で保存]ダイアログが表示されますので、ファイル名を入力します。

保存するスライスは、「すべてのスライス」「すべてのユーザー定義スライス」「選択したスライス」の中から選択します。

【すべてのスライス】
スライス番号の背景が灰色になっている未定義のスライスも含めて、すべてのスライスが保存されます。
【すべてのユーザー定義スライス】
スライス番号の背景が青色になっている定義したスライスがすべて保存されます。
【選択したスライス】
Web用に保存ダイアログで選択したスライスだけが保存されます。

設定が済んだら、[保存]ボタンをクリックします。

最適化ファイルを別名で保存ダイアログ

スライスがファイルとして保存されますが、ファイル名は次のようになります。
[指定したファイル名]_[スライス番号].拡張子

保存されたファイル名

スポンサーリンク

ページの先頭へ