
そんな面倒な作業を一瞬で終らせてくれる、超便利なツールが”Slicy”というアプリ。
導入した結果、スライス作業が神速化されたので、使い方を含めSlicyを紹介したいと思います。
そもそも、、「Slicy」とは?
PhotoshopファイルをD&Dするだけで、WEB製作に必要な素材を一発で書き出せてしまう!という、超便利ツールです。 marcRabbitという会社のHPから販売されていますが、Mac App Storeからも購入することが出来ます。使い方は簡単!素材として書き出したいレイヤー毎に拡張子を設定するだけ!
先ずはSlicyをインストールしたら、素材として書き出したいPSDファイルを開いて、レイヤーに拡張子を追加して、SlicyにD&DするだけでOKです。書き出しの方法や種類も複数対応しているので、以下にその書き出し方を記載します。
通常書き出し
手順①:書き出したいレイヤーに「.png」「.jpg」などの拡張子を追加します。
手順②:PSDファイルを保存したら、SlicyへD&D!

すると。。。
先ほど拡張子を追加したレイヤーに入っていたデザインが、指定した拡張子で書き出されます!

超便利!
後は保存場所をしていして、保存するだけです。
もうPhotoshopのスライス作業を手動でやらなくても良いんです!
チクチク手動作業していた過去とは、これでお別れできます!
書き出すサイズの指定:1
この方法は、オブジェクトのサイズではなく、四方に余白をつけて書き出したい・・・! という場合に便利です。方法は3つありますので、お好みの方法でどうそ。
①レイヤーにマスクを適用しておく ②クリッピングマスクを適用しておく ③下層のレイヤーに「@bounds」という名前をつけておく
※「@bounds」とつけたレイヤーは、Slicy時には消えます。手順①:書き出したいサイズを指定して、PSDファイルを保存!

手順②:SlicyへD&D!

これまた超便利!
先に説明した時とは、違ったサイズで書き出されています。
書き出すサイズの指定:2
この方法はレイヤー単位で書き出してくれます。 スライス対象の範囲を「@slices」というフォルダに入れておけばOK!この時注意するのは「.png」などの拡張子をふるのは、「@slices」内の各レイヤーですのご注意を!手順①:「@slices」レイヤーの中に、書き出したいサイズと、拡張子を記載したレイヤーを用意します。
手順②:D&D!!

Retina対応:1 @2xへの書き出し
iPhoneなどが搭載しているRetina display。この規格に対応したサイズを書き出したい!という時に活躍します。 これもやり方は簡単で「.png+@2x」という様に拡張子の後に「+@2x」を追記するだけです。
D&D!!!!

すると、、Photoshopで作成していたサイズに加えて、自動で縦横2倍のサイズも書き出してくれます。
書き出されたファイル名にも「@2x」と記載してくれるので、これも便利。
Retina対応:2 @2xだけを書き出す
先ほどとは逆ですね。 PhotoshopでRetinaを想定して作っていものを1/2サイズも用意したい。という時に便利です。 この場合は「@2x」を拡張子の前
につけます。 先ほどと違い、拡張子の「前」に付ける点に注意してください。
D&Dすれば、この通り。

Retina対応:3 @2xから@1xの書き出し
書きだすのは「@2x」だけで良い!という場合の方法です。 この場合は、新規で空のレイヤーを作成し「lc-auto-1x=off」と名前をつけると@2xの画像だけを書き出してくれます。

この通り!ちゃんと「@2x」のファイルだけが、書き出されました!
ファイルの自動更新機能
ちなみに、Slicyで書き出しを行うと、以下のような事を聞かれます。
「Repeat Automatically」
を選択すると、Slicyを立ち上げている間はデザインを変更して保存すると、D&Dしなくても自動的に書き出しを行ってくれます。 新規で作成したレイヤーであれば、同じファイル内に書き出しして保存してくえるし、既に書き出し済のレイヤーを更新した場合は、自動で上書きしてくれます。自動で上書きは便利ですが、ちょっと怖いな・・・・・
という方に朗報!
なんと、Slicyの中に、書き出しの履歴が残っているので、うっかり上書きしちゃった!
という場合でも、元に戻すことが出来るので安心!

注意点!
Slicyで書きだすと、アルファチャンネルが付いた状態で保存されます。 (Photoshopの「WEB様に保存」だと消してくれるのに・・・・) 場合によってはアルファチャンネルNGだったりすので、そういう場合はご注意ください。まとめ
現状、まだ@3xへの対応はしていないので、iPhone6+用の画像などは別途手動での用意が必要です。 一応、Slicyの公式twitterアカウント(@macrabbits)が、対応準備中の旨を呟いていたので、いずれ対応してくれると思うでの、首を長くして待ちましょう!!! ちなみに、拡張子で対応しているのは「PNG」「JPEG」のみなので、「GIFで書き出したいぜ!」という方は、手動での対応になります。という感じですが、如何でしょうか?
adobe Photoshop CCには、Slicyみたいな書き出し機能があるそうですが、
まだ導入してない・・・・という方には、このSlicyはオススメです!!
Mac App Storeから購入はする方はコチラからどうぞ!