Adobe Photoshopでのスライス作成方法
公開日：2014年4月9日
最終更新日：2014年4月30日
Adobe PhotoshopをWeb制作における画像の編集・加工に使用している人も多いと思います。Photoshopにおけるスライスの作成方法を解説します。
Photoshopではスライスを作成する方法は２つあります。
ひとつはスライスツールを使って任意のエリアにスライスを作成する方法です。
そしてもうひとつはレイヤーに基づきオブジェクトの形に沿ってスライスを作成する方法です。
【記事執筆時の確認環境】
Windows 7 Professional 32bit SP1
Adobe Photoshop CS6
スライスツールを使ってスライスを作成する
ツールパネルから[スライスツール]を選択します。
ドラッグして、スライスで切り出すエリアを指定します。
この方法で作成したスライスは、「ユーザー定義スライス」となります。
ユーザー定義スライスは、スライスのまわりに表示されている８つのハンドルをドラッグすると、スライスを変形することができます。
レイヤーに基づきスライスを作成する
ここでは、複数のレイヤーを選択して複数のスライスを一括で作成してみます。
レイヤーパネルでスライスを作成するすべてのレイヤーを選択します。
カンバス上では、ボタン1とボタン2の２つのオブジェクトが選択されています。
メニューの[レイヤー]-[レイヤーに基づく新規スライス]を選択します。
選択したすべてのレイヤーに基づいて複数のスライスが作成されます。
レイヤーに効果が付いている場合は、その部分も含めてスライスを作成してくれます。
この方法で作成したスライスは変形することができません。
変形したい場合は、スライスをユーザー定義スライスに変更します。
ツールパネルから[スライス選択ツール]を選択します。
変更したいスライスの上で右クリックし、[ユーザー定義スライスに変更]を選択します。
ユーザー定義スライスに変更すると、スライスのまわりに８つのハンドルが現れ、ハンドルをドラッグすることでスライスを変形できます。
作成したスライスを保存する
メニューの[ファイル]-[Web用に保存]を選択します。
表示された[Web用に保存]ダイアログのプリセットエリアで、保存する画像形式を設定します。
なお、プレビュー画面でスライスの選択を変えながら、それぞれのスライスに違う画像形式を設定することもできます。
設定が済んだら、[保存]ボタンをクリックします。
[最適化ファイルを別名で保存]ダイアログが表示されますので、ファイル名を入力します。
保存するスライスは、「すべてのスライス」「すべてのユーザー定義スライス」「選択したスライス」の中から選択します。
【すべてのスライス】
スライス番号の背景が灰色になっている未定義のスライスも含めて、すべてのスライスが保存されます。
【すべてのユーザー定義スライス】
スライス番号の背景が青色になっている定義したスライスがすべて保存されます。
【選択したスライス】
Web用に保存ダイアログで選択したスライスだけが保存されます。
設定が済んだら、[保存]ボタンをクリックします。
スライスがファイルとして保存されますが、ファイル名は次のようになります。
[指定したファイル名]_[スライス番号].拡張子
スポンサーリンク
