Photoshopで画像データを作ってから切り出すまでの作業が非常にかったるい。
スライスガイドを引いて、ガイドがずれていないかを確かめながら、何カ所もスライスツールを選択してスライス。
スライスしたデータにファイル名を付けていく。
画像データが巨大な場合この作業が1時間以上もかかってしまうこともあり、
この生産性のない時間をどうにかならないだろうかと考えていたとき、下の動画と巡り会いました。
slicy demo from komori, masaaki on Vimeo.
Photoshopをつかったスライスデモです。
Photoshopのスライスに面倒くささを一度でも感じた事がある人は必見の動画です。
2分30程度の動画ですが、Slicyというツールアプリを使って15ファイルのスライスをあっという間に完了させています。
これがあれば格段に生産性があがる！！と確信し、即購入しました。
Slicyとは
Slicyは開発元MacRabbitのツールアプリです。
PSDファイルのレイヤー名に「.png」などの拡張子をつけておき、Slicyへドラッグ&ドロップするだけで,画像の切り出しが完了します。
Slicyの使い方を練習
練習用途でSlicyの公式サイトからサンプル画像（Slicy Examples.zip)をダウンロードします。
Slicy Examples.zipを解凍してBasic Tagging >Tagging.psdのファイルを開きます。
Star1.png~Star4.pngまで4レイヤーに「.png」の名前がついていることが分かります。
Slicyを使う場合にはレイヤーの名前を[名前を書き出したい名前.png]の形式で書き出す必要があります。
SlicyへPSDファイルをドラッグすると.pngの付いたファイルが切り出されたことが
確認できます。
ここで画面上の「Save」を選びます。
適当な保存場所を選び「Choose」を選びます。
Choose選択後、確認ダイアログが表示されます。
「Repeat Automatically」を選んでおくと、
新しいレイヤーに「.png」をつけてPSDを上書き保存する度に、自動で画像スライスをします。
これが本当に便利。PSDを編集して追加した要素を毎回Slicyにドラッグする必要はないのです。
PSDファイルを保存するだけで、画像スライスをしてくれるのです。
なおスライスしてくれる拡張子は「.png .jpg .titf .icon」に対応。
サイズを指定してスライスする場合
サイズを指定してスライスすることも可能。
この場合にはスライスしたいオブジェクトをフォルダにまとめ、フォルダレイヤー名を「****.png」にしておきます。
やり方は以下。
・フォルダ内でクリッピングマスクを使う。
・フォルダ内でレイヤーマスクをかける。
・「@bounds」というレイヤー名でスライスしたいサイズの矩形をつくって
フォルダに入れておきます。
Retinaサイズのスライスする場合
これはアプリ制作者向けにはうれしい機能。
レイヤー名に「@2x.png」をつけることで『通常サイズと倍のRetinaサイズ』のスライスをします。
（Star.pngで切り出したい時は レイヤー名を「Star@2x.png」にする）
Retinaサイズのみ切り出したい場合には、切り出したいレイヤー名に「@2x.png」をつけ、
新規に空のレイヤーを作り「lc-auto-1x = off」のレイヤー名にします。
Slicyを導入してからPhotoshopを触る機会が増えました。
今までの苦労から一瞬で開放される感覚が楽しいのです。
RetinaサイズのスライスもできるのでiPhoneアプリ制作には欠かせないツールアプリです。
Retinaサイズに変換してくれるツールはいくつかありますが、切り出しと同時とは行かないので1工程減らせるのも強みです。
作業効率が目に見えて上がるので、WEBデザイナーやアプリデザイナーであれば「できる人材」評価があがるはずですよ！
私のようなめんどくさがりには喉から手が出るほど欲しいツールだったので、今年一番良い買い物とも断言できる大満足度です。
こういうツールがあるからMacは手放せない。
Slicy 
カテゴリ: グラフィック&デザイン
価格: ￥3,000
コメント