Photoshpでデザインを作成していてコーディング用に素材を書き出したいけど、
いちいちスライス範囲を指定して、WEB用に書き出す作業は意外に面倒ですよね・・・。
そんな面倒な作業を一瞬で終らせてくれる、超便利なツールが”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
この方法は、オブジェクトのサイズではなく、四方に余白をつけて書き出したい・・・！
という場合に便利です。
方法は３つありますので、お好みの方法でどうそ。
①レイヤーにマスクを適用しておく
②クリッピングマスクを適用しておく
③下層のレイヤーに「＠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で作成していたサイズに加えて、自動で縦横２倍のサイズも書き出してくれます。
書き出されたファイル名にも「@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から購入はする方はコチラからどうぞ！
