Slicyで面倒なPSDのスライス作業を効率化 !

こんにちは、最近コード書く時間がなくなってPhotoshopいじっている時間の方が主になってきました、久保田です。

Photoshopを使った画像書出しの時には、面倒なスライス作業をやらなければいけません。この記事では、Photoshopで面倒なスライス作業を劇的に効率化してくれるSlicyというアプリの紹介をします。

スライス作業をやっているうちに日が暮れる

Photoshopで作成した画像を書き出す場合には、たいていスライス機能を用いて画像を書きだしていくことになると思います。スライス機能がないと一枚のキャンバスから複数の画像を書き出すことができないのでこれを使わざるを得ませんが、大変面倒くさい。ちょっと書き出すと以下みたいにめんどくさい部分がぼろぼろ出てきます。

・ 書き出す画像のひとつひとつにスライスの領域を設定しなければならない
・ レイヤの位置を調整すると、スライスの位置も同じように調整しなければならない
・「レイヤに基づくスライス」もあるけどこれはこれで使いづらい
・ 複数のスライスを重ねたり、あるスライスの領域内に別のスライスの領域を定義できない
・ 書き出される画像はレイヤを全て統合された結果になるので、書き出す画像の背景が透明にしたい場合に一部のレイヤを非表示にしてから書き出さないといけない

書き出す画像がたくさんあったりすると、スライス作業やってるうちに日が暮れて帰る時間が遅くなるわけです。

Slicyを使おう

Photoshopのスライス作業は面倒臭いし手間がかかる。そこで、Slicyの出番です。Slicyは、設定したレイヤグループごとにいい感じに画像を書き出してくれる便利ツールです。

ウェブサイトからSlicyをダウンロードしてインストールします。AppStoreでインストールしようとすると$29ドルかかりますが、フリーで利用できる評価用のアプリはウェブサイトから提供されています。

Slicyをインストールしたら、Photoshopを開きおもむろにレイヤグループの名前に書き出したい画像名をつけます。

以下の画像の場合、星の画像と背景を別々に書き出したいので、対応するレイヤグループにbg.pngとstar.pngという名前をつけます。

Slicyを起動して、PSDファイルをドラッグ&ドロップします。

すると、画像名を付けたレイヤグループ以下の画像がファイルとして書き出されました。画像の大きさもいい感じにトリミングしてくれています。今までスライス作業に時間をかけていたのが嘘みたいです。

このSlicyのお陰で僕はPhotoshopを触るとき煩わしいスライス作業から開放されて何倍も幸福になれました。価格は$29ドルしますがPhotoshop本体の価格に比べれば塵芥のようなものですよね。

終わりに

スライスを使った画像の書出し作業は、何の創造性も必要とされない割りには時間を食う作業なので、なるべく効率化したいものです。この記事では、Photoshopの画像書き出し作業を効率化してくれるSlicyを紹介しました。