![Slicy_topイメージ](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Ftop_1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=58ab170dbe3e5f57c7767a9fab618273)
そんな面倒な作業を一瞬で終らせてくれる、超便利なツールが”Slicy”というアプリ。
導入した結果、スライス作業が神速化されたので、使い方を含めSlicyを紹介したいと思います。
そもそも、、「Slicy」とは?
PhotoshopファイルをD&Dするだけで、WEB製作に必要な素材を一発で書き出せてしまう!という、超便利ツールです。 marcRabbitという会社のHPから販売されていますが、Mac App Storeからも購入することが出来ます。使い方は簡単!素材として書き出したいレイヤー毎に拡張子を設定するだけ!
先ずはSlicyをインストールしたら、素材として書き出したいPSDファイルを開いて、レイヤーに拡張子を追加して、SlicyにD&DするだけでOKです。書き出しの方法や種類も複数対応しているので、以下にその書き出し方を記載します。
通常書き出し
手順①:書き出したいレイヤーに「.png」「.jpg」などの拡張子を追加します。![slicy_sample_1](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5601b51a84662e969796b91778263063)
手順②:PSDファイルを保存したら、SlicyへD&D!
![slicy_sample_3](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bf0c96dffa5aaecd05a32bd5f67d6e10)
すると。。。
先ほど拡張子を追加したレイヤーに入っていたデザインが、指定した拡張子で書き出されます!
![slicy_sample_2](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c410b4b2e32fe2321fe88944df58e781)
超便利!
後は保存場所をしていして、保存するだけです。
もうPhotoshopのスライス作業を手動でやらなくても良いんです!
チクチク手動作業していた過去とは、これでお別れできます!
書き出すサイズの指定:1
この方法は、オブジェクトのサイズではなく、四方に余白をつけて書き出したい・・・! という場合に便利です。方法は3つありますので、お好みの方法でどうそ。
①レイヤーにマスクを適用しておく ②クリッピングマスクを適用しておく ③下層のレイヤーに「@bounds」という名前をつけておく
※「@bounds」とつけたレイヤーは、Slicy時には消えます。手順①:書き出したいサイズを指定して、PSDファイルを保存!
![slicy_sample4](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2534833ded2239e94e98fc64f6f2a281)
手順②:SlicyへD&D!
![slicy_sample5](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_5.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c9f99b1b0058d3200f2bc935f8b74693)
これまた超便利!
先に説明した時とは、違ったサイズで書き出されています。
書き出すサイズの指定:2
この方法はレイヤー単位で書き出してくれます。 スライス対象の範囲を「@slices」というフォルダに入れておけばOK!この時注意するのは「.png」などの拡張子をふるのは、「@slices」内の各レイヤーですのご注意を!手順①:「@slices」レイヤーの中に、書き出したいサイズと、拡張子を記載したレイヤーを用意します。
手順②:D&D!!
![slicy_sample5](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_5.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c9f99b1b0058d3200f2bc935f8b74693)
Retina対応:1 @2xへの書き出し
iPhoneなどが搭載しているRetina display。この規格に対応したサイズを書き出したい!という時に活躍します。 これもやり方は簡単で「.png+@2x」という様に拡張子の後に「+@2x」を追記するだけです。![slicy_sample_7](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0b46e5553ad4f37c6a3220f5988fc766)
D&D!!!!
![slicy_sample_8](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=05df212ea7e9fcc7e553e7fe484993b1)
すると、、Photoshopで作成していたサイズに加えて、自動で縦横2倍のサイズも書き出してくれます。
書き出されたファイル名にも「@2x」と記載してくれるので、これも便利。
Retina対応:2 @2xだけを書き出す
先ほどとは逆ですね。 PhotoshopでRetinaを想定して作っていものを1/2サイズも用意したい。という時に便利です。 この場合は「@2x」を拡張子の前
につけます。 先ほどと違い、拡張子の「前」に付ける点に注意してください。![slicy_sample_9](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1faaf1ad0417d235d33372f9be74512c)
D&Dすれば、この通り。
![slicy_sample_8](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=05df212ea7e9fcc7e553e7fe484993b1)
Retina対応:3 @2xから@1xの書き出し
書きだすのは「@2x」だけで良い!という場合の方法です。 この場合は、新規で空のレイヤーを作成し「lc-auto-1x=off」と名前をつけると@2xの画像だけを書き出してくれます。![slicy_sample_10](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_10.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=da0d26ac93cdb65c9310586b8f97c843)
![slicy_sample_11](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_11.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9e0d1fc32e80c53ddbee6bddfa59616b)
この通り!ちゃんと「@2x」のファイルだけが、書き出されました!
ファイルの自動更新機能
ちなみに、Slicyで書き出しを行うと、以下のような事を聞かれます。![slicy_sample_12](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_12.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=92a9f43e192f047850c071317a635f85)
「Repeat Automatically」
を選択すると、Slicyを立ち上げている間はデザインを変更して保存すると、D&Dしなくても自動的に書き出しを行ってくれます。 新規で作成したレイヤーであれば、同じファイル内に書き出しして保存してくえるし、既に書き出し済のレイヤーを更新した場合は、自動で上書きしてくれます。自動で上書きは便利ですが、ちょっと怖いな・・・・・
という方に朗報!
なんと、Slicyの中に、書き出しの履歴が残っているので、うっかり上書きしちゃった!
という場合でも、元に戻すことが出来るので安心!
![slicy_sample_13](https://qiita-user-contents.imgix.net/http%3A%2F%2Ftech.eversense.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F10%2Fslicy_sample_13.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=053f69c598087c84c647a632d1cf95e9)
注意点!
Slicyで書きだすと、アルファチャンネルが付いた状態で保存されます。 (Photoshopの「WEB様に保存」だと消してくれるのに・・・・) 場合によってはアルファチャンネルNGだったりすので、そういう場合はご注意ください。まとめ
現状、まだ@3xへの対応はしていないので、iPhone6+用の画像などは別途手動での用意が必要です。 一応、Slicyの公式twitterアカウント(@macrabbits)が、対応準備中の旨を呟いていたので、いずれ対応してくれると思うでの、首を長くして待ちましょう!!! ちなみに、拡張子で対応しているのは「PNG」「JPEG」のみなので、「GIFで書き出したいぜ!」という方は、手動での対応になります。という感じですが、如何でしょうか?
adobe Photoshop CCには、Slicyみたいな書き出し機能があるそうですが、
まだ導入してない・・・・という方には、このSlicyはオススメです!!
Mac App Storeから購入はする方はコチラからどうぞ!