分割した後の画像のファイル形式も自由に指定できるので、今までの作業を大幅に効率化させることができるでしょう。
Photoshopで使える「スライス」とは？
まずはPhotoshopのスライス機能で可能なことを説明しましょう。
またpsd形式でファイルを保存すれば、スライスの設定そのものも保存することが可能です。
Photoshopのスライスを使って画像を分割させる
「このような複数の写真で構成されたデザインの画像をそれぞれ分割させたい」と考えたときにPhotoshopのスライスツールが利用できます。
実際にはスライスツールを利用しなくても、4回に分けてPhotoshopで切り抜き作業を行っても画像の分割はできます。
しかし、スライスツールを活用すればこの書き出し作業が1回でできるのです。
スライスツールを活用すればこのように1回の動作で、画像が4分割されそれぞれ一つずつのファイルで書き出しされました。
Photoshopのスライスを使って画像の必要な部分のみを保存する
先ほどの方法と同じやり方で、Photoshopのスライスツールを利用すれば画像の一部分を指定して別のファイルにすることも可能です。
たとえばこの画像のケーキの画像は2点ありますが、そのケーキの画像のみを保存したいときなどに便利な方法だと言えるでしょう。
こちらも先ほどの画像同様、Photoshopの切り抜きツールで作業をすることも可能ですが、スライスツールを活用すれば、より短時間で効率良く画像を分割した上で書き出しができるでしょう。
このように、画像の指定した部分のみが別のファイルで書き出しされました。
Photoshop｜スライスの作成方法！
Photoshopのスライスツールの違いを覚える
まず、メニューツールのスライスツールを見てみると［スライスツール］と［スライス選択ツール］があります。
［スライスツール］は選択範囲のようにスライスで分割する領域を決定するためのツールです。スライスツールでスライスの領域を決定後［スライス選択ツール］を利用して名前を付けたりスライスの種類を定めたりします。
［スライスツール］でスライスを選択する→［スライス選択ツール］でスライスを定義する
このようなイメージを持っておくと良いでしょう。
スライスする領域を選択範囲のように決定する
ここからはPhotoshopでスライスを行う方法を、早速実践してみましょう。
ツールバーから、先ほどの［スライスツール］を選びます。
左上のキウイの画像を、Photoshopで選択範囲を作成するときと同じ容量で囲みます。
スライスの領域が1つできた状態です。選択範囲がズレてしまったら、何度でも調整ができますので、ぴったりの領域を作成してください。
同じ作業を繰り返し、4つの画像全てをスライスで分割しました。
間違ったスライスを作成してしまったときには、削除したいスライスの上で右クリックをして［スライスを削除］を選べば、スライスの削除が可能です。
作成したスライスに一つずつ名前をつけていく
スライスの分割が完了したら、それぞれのスライスに名前をつけましょう。
Photoshopのメニューツールから先ほどお伝えした［スライス選択ツール］を選びます。
名前をつけるスライスの上でダブルクリックすると、画像のように［スライスオプション］が開きますので、スライスに任意の名前をつけてください。
ここでつけたスライス名がそのままファイル名になるため作成した画像をインターネットで利用するのなら、半角英数字の名前をつけるようにしましょう。
同じようにして、作成した全てのスライスに名前をつけていきます。
Photoshop｜スライスの書き出し方法！
スライスの書き出しには特別な動作は必要なく、画像をWeb用に保存することで実行されます。
スライスした画像をWeb用に保存して書き出す
まずはPhotoshopのメニューバーにある［ファイル］から［書き出し］-［Web用に保存］を選択します。
Web用に保存するファイル形式などを選び書き出し保存する
Web用に保存するファイル形式は、自分の利用する予定のものを選びます。
例ではJPG形式を活用しますが、その他にもGIF・PNGなどの選択肢がありますので覚えておきましょう。
ファイル形式を指定したら、画像のように［保存］を押してください。
保存を押すと、この画面になります。
保存先を指定し、［スライス］の選択肢を選びます。
選択肢には「すべてのスライス」「すべてのユーザー定義スライス」「選択したスライス」が用意されていますが、今回は作成したすべてのスライスを分割したいと考えていますので、「すべてのユーザー定義スライス」を選択します。
パソコンにファイルが書き出し保存される
ここまでで作業は完了です。保存されたファイルを確認してみましょう。
指定した場所に、元の画像ファイルの他に「images」というファイルが保存されています。
imagesファイルの中には、指定したスライスがそれぞれ別々のファイルで書き出しされています。
一部のスライスのみを書き出し保存する
先ほどWeb保存をしたときには「すべてのユーザー定義スライス」を保存しましたが、選択した一部のスライスのみを保存することもできます。
保存したいスライスを［スライス選択ツール］で選んだ状態でWeb用に保存をしてみましょう。
画像ではキウイのスライスを選択しておきました。
Web用に保存の画面まで進み、先ほどのスライスの選択で「選択したスライス」を選びます。
「選択したスライス」を選んだ状態で保存をすると、選択しておいたスライスのみが書き出しされています。
Photoshop｜スライスで書き出しができない時は？
スライス・書き出しする予定の画像のサイズが大きすぎる
スライスで画像を分割するためには「Web用に保存」をする必要があることはお伝えしましたが、この「Web用に保存」は30,000px以下のファイルでしか利用できません。
大きな画像データを利用するときには、スライスの書き出しができない可能性を知っておきましょう。
Photoshopのスライスツールの使い方と書き出し方法まとめ
フォトショップのスライスツールの使い方と書き出し方法を説明いたしました。
今まで何度も切り抜き作業を行っていた方がスライスツールを使用する様になれば、非常に効率よく作業が進められるようになります。
スライスツールの使い方をマスターして業務効率を上げましょう。