Photoshpのスライスを神速化！”Slicy”を使って超簡単に書き出す方法まとめ！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/top_1.png" alt="Slicy_topイメージ" />
Photoshpでデザインを作成していてコーディング用に素材を書き出したいけど、
いちいちスライス範囲を指定して、WEB用に書き出す作業は意外に面倒ですよね・・・。

そんな面倒な作業を一瞬で終らせてくれる、超便利なツールが”Slicy”というアプリ。
導入した結果、スライス作業が神速化されたので、使い方を含めSlicyを紹介したいと思います。
<h2>そもそも、、「Slicy」とは？</h2>
PhotoshopファイルをD&amp;Dするだけで、WEB製作に必要な素材を一発で書き出せてしまう!という、超便利ツールです。
marcRabbitという会社のHPから販売されていますが、Mac App Storeからも購入することが出来ます。
<h2>使い方は簡単！素材として書き出したいレイヤー毎に拡張子を設定するだけ！</h2>
先ずはSlicyをインストールしたら、素材として書き出したいPSDファイルを開いて、レイヤーに拡張子を追加して、SlicyにD&amp;DするだけでOKです。

書き出しの方法や種類も複数対応しているので、以下にその書き出し方を記載します。
<h2>通常書き出し</h2>
手順①：書き出したいレイヤーに「.png」「.jpg」などの拡張子を追加します。

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_1.png" alt="slicy_sample_1" />

手順②：PSDファイルを保存したら、SlicyへD&amp;D！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_3.png" alt="slicy_sample_3" />

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

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_2.png" alt="slicy_sample_2" />


超便利！
後は保存場所をしていして、保存するだけです。
もうPhotoshopのスライス作業を手動でやらなくても良いんです！
チクチク手動作業していた過去とは、これでお別れできます！
<h2>書き出すサイズの指定:1</h2>
この方法は、オブジェクトのサイズではなく、四方に余白をつけて書き出したい・・・！
という場合に便利です。

方法は３つありますので、お好みの方法でどうそ。
<h3>①レイヤーにマスクを適用しておく
②クリッピングマスクを適用しておく
③下層のレイヤーに「＠bounds」という名前をつけておく</h3>
※「@bounds」とつけたレイヤーは、Slicy時には消えます。

手順①：書き出したいサイズを指定して、PSDファイルを保存！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample4.png" alt="slicy_sample4" />

手順②：SlicyへD&amp;D！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_5.png" alt="slicy_sample5" />

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

手順①：「@slices」レイヤーの中に、書き出したいサイズと、拡張子を記載したレイヤーを用意します。
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_6.png" alt="slicy_sample_6" />

手順②：D&amp;D！！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_5.png" alt="slicy_sample5" />
<h2>Retina対応:1 ＠2xへの書き出し</h2>
iPhoneなどが搭載しているRetina display。この規格に対応したサイズを書き出したい！という時に活躍します。
これもやり方は簡単で「.png＋@2x」という様に拡張子の後に「＋@2x」を追記するだけです。

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_7.png" alt="slicy_sample_7" />

D&amp;D!!!!

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_8.png" alt="slicy_sample_8" />

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

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_9.png" alt="slicy_sample_9" />

D&amp;Dすれば、この通り。

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_8.png" alt="slicy_sample_8" />
<h2>Retina対応:3 ＠2xから@1xの書き出し</h2>
書きだすのは「@2x」だけで良い！という場合の方法です。
この場合は、新規で空のレイヤーを作成し「lc-auto-1x=off」と名前をつけると＠2xの画像だけを書き出してくれます。

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_10.png" alt="slicy_sample_10" />

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_11.png" alt="slicy_sample_11" />

この通り！ちゃんと「@2x」のファイルだけが、書き出されました！
<h2>ファイルの自動更新機能</h2>
ちなみに、Slicyで書き出しを行うと、以下のような事を聞かれます。

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_12.png" alt="slicy_sample_12" />
<h3>「Repeat Automatically」</h3>
を選択すると、Slicyを立ち上げている間はデザインを変更して保存すると、D&amp;Dしなくても自動的に書き出しを行ってくれます。
新規で作成したレイヤーであれば、同じファイル内に書き出しして保存してくえるし、既に書き出し済のレイヤーを更新した場合は、自動で上書きしてくれます。

自動で上書きは便利ですが、ちょっと怖いな・・・・・
という方に朗報！

なんと、Slicyの中に、書き出しの履歴が残っているので、うっかり上書きしちゃった！
という場合でも、元に戻すことが出来るので安心！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/slicy_sample_13.png" alt="slicy_sample_13" />
<h2>注意点！</h2>
Slicyで書きだすと、アルファチャンネルが付いた状態で保存されます。
(Photoshopの「WEB様に保存」だと消してくれるのに・・・・)
場合によってはアルファチャンネルNGだったりすので、そういう場合はご注意ください。
<h2>まとめ</h2>
現状、まだ@3xへの対応はしていないので、iPhone6＋用の画像などは別途手動での用意が必要です。
一応、Slicyの公式twitterアカウント（@macrabbits）が、対応準備中の旨を呟いていたので、いずれ対応してくれると思うでの、首を長くして待ちましょう！！！
ちなみに、拡張子で対応しているのは「PNG」「JPEG」のみなので、「GIFで書き出したいぜ！」という方は、手動での対応になります。

という感じですが、如何でしょうか？
adobe Photoshop CCには、Slicyみたいな書き出し機能があるそうですが、
まだ導入してない・・・・という方には、このSlicyはオススメです！！

Mac App Storeから購入はする方はコチラからどうぞ！

<a href="https://itunes.apple.com/jp/app/slicy/id512533449?mt=12" target="_blank"><img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/banner_appStore.png" alt="Mac app store" /></a>


<a title="macrabbit" href="http://macrabbit.com/slicy/" target="_blank">marcRabbit社</a>