R4

Webサービス レビュー * R4  

画像を瞬時に書き出してくれるPhotoshopプラグイン「Cut&Slice me」

2013年2月4日 Tag:webサイト制作 Text by 上瀧

このエントリーをはてなブックマークに追加

PSDの各画像パーツの書き出しを瞬時に行うプラグイン「Cut&Slice me」のご紹介です。
※現在のところPhotoshop CS6バージョンのみの対応プラグインとなっています。

まずはサイトからプラグインファイルをダウンロードします。

Extension Managerが開くので、インストールします。

Photoshopを起動し、
ウィンドウ > エクステンション > Cut and Slice me
を選択するとパネルが表示されます。

試しにサイトからダウンロードしたサンプルファイルの画像を書き出します。
パネルの上のタブでデバイスを選択し、「Cut All assets」をクリックします。

自動で書き出しが始まります。

すぐにPSDファイルと同階層にフォルダが作られて、その中に書き出し画像が保存されています。

設けられたルールに基いて書き出し要素が決定されます。
簡単にご紹介すると、グループ名またはレイヤー名の最後に「@」を付与するとその名前で保存されます。

また、書き出し範囲を任意で行いたい場合は、名称を#としたベクターの長方形を上階層に置くと、そのエリアが書き出し範囲となります。

ボタンのオン/オフなどをそれぞれ書き出したい場合は、グループ名に「_BTN」を付け、その中の階層に「normal」などの指定のステータス名称をつけます。

以上で挙げた3つが主なルールになります。

PC用だけでなく、iPhoneのretina用、Androidのldpi〜xhdpi用の画像を書き出すこともできます。

ちょっと複雑そうだったり、最初に覚えるのが大変な印象もあるかと思いますが、そこまで複雑なルールではないので、慣れるのには時間はあまり掛からないかと思います。
書き出しの時間を少なくして、デザインやコーディングに時間をかけたい方はチェックしてみてください。

Webサイト:Cut&Slice me

Latest

Pickup

Category

koyomi

4db

Twitter