Photoshopのスライスツールの使い方

スライスツールは、Photoshopでwebデザインを作成した時に、パーツ分けと保存が簡単にできるとても便利なツールです。今回は標準的なスライスツールの使い方と、Photoshop CCから追加されたアセット機能について紹介します。

Photoshopのスライスツールとは

screenshot 201

画像を選択した範囲ごとに分けて保存できる機能がスライスツールです。見当たらないと思った方は、切り抜きツールアイコンの上で、長押ししてみましょう。下に隠れているスライスツール、スライス選択ツールを見つけることができます。

ショートカットキーはShift+Cで、3回繰り返すとスライスツールに切り替わります。

Photoshopのスライスツールの使い方

photoshopで分割したい画像を開いてください。今回は、この画像をアルファベット毎にスライスしていきます。

screenshot 200

画像を分割する

スライスツールを選択したら、分割したい範囲に沿ってマウスをドラッグしてください。下の画像は、Eの部分を四角で囲むようにドラッグしたものです。左上に、分割された画像の番号が表示されました。これを好きなだけ繰り返して、画像をパーツごとに分割していきます。

screenshot 202

ドラッグを繰り返して、アルファベット毎にスライスが完了しました。

screenshot 203

スライス別に保存をする

スライスツールを使えば、パーツ毎に切り抜いて一枚一枚保存をする必要がなく、分割したパーツを画像として書き出すことができます。メニューバーのファイルを押して「web用に保存」を選択してください。

61_1

screenshot 205

さっき行ったスライスを確認することができます。また、スライスしたパーツのうち選択したパーツだけを書き出すこともできます。画像の形式やサイズなどを確認して完了を押してください。

screenshot 206

スライスを書き出す画面です。デフォルトでは「設定した名前_番号」というように、入力した名前に連番が自動で振られて保存されることになります。

screenshot 207

スライスの項目で選択したスライスなどを選択すると、一部のスライスしたパーツのみを書き出すことができます。フォーマット、設定、スライスの項目を確認したら保存を押してください。

screenshot 208

保存したフォルダを確認すると、スライスした通りに分割して画像が保存されています。これで完了です。

スライスを解除する

間違えてスライスの選択範囲を作ってしまったときは、メニューバーの表示から、「スライスを消去」をクリックすることで、不要なスライスを解除することができます。

スライスツールの進化形、アセット機能とは

Photoshop CCから、スライスツールの機能が進化した、新機能「画像アセット」が追加されました。このアセット機能を使うと、各レイヤー、レイヤーグループから書き出しを行うことができます。

bandicam 2016-02-17 10-06-36-591

1つのPSDファイルから、レイヤーごとに保存が行われます。

bandicam 2016-02-17 10-10-05-691

詳しい使い方については、以下の記事で紹介しているので、参考にしてみてください。

まとめ

スライスツールの使い方について紹介してきました。Photoshop CCからは、アセット機能を使って画像の切り出しを行うこともできるので、用途に合わせて使用していくのがよいでしょう。


イベント

2017/12/05(火)
Design Thinking Square