[Photoshop Plugin]Cut&Slice meの使い方

Photoshopで画像をパーツごとに出力するプラグイン「Cut&Slice me」が便利でしたので機能や簡単な使い方をご紹介します。

Cut&Slice meでできること

• スライスを使用しないで画像をパーツごとに一括で出力
• ボタンの状態(通常、ホバー等)ごとの画像をレイヤーの表示・非表示の手間無く一括で出力
• PC、iPhone(retina対応)、Android(xhdpi対応)の画像出力を簡単に切り替えられる

インストール

Adobe Photoshop CS6が必要です。

公式サイトからプラグインをダウンロードし、ダブルクリックで実行して下さい。

プラグインのインストール途中に「セキュリティ証明書が〜」といった警告が出ますが、インストールボタンを押して進んで下さい。

Cut&Slice meの簡単な使い方

Adobe PhotoShop CS6を実行し、メニュー部のウィンドウ > エクステンション > Cut and Slice meのチェックを入れて下さい。

Cut&Slice meのウィンドウが表示されます。 上部のボタンがiPhone、Android、PCの画像出力設定ボタンです。 デフォルトではiPhoneがアクティブになっていますが、今回はPC用設定をもとに説明を進めていきます。

ボタンの画像の作成

下記の画像のようなボタンを適当に作成し、"sample.psd"として任意の場所に保存します。右下画像のようなレイヤー構成になると思います。

レイヤー構成の変更

レイヤーパネル下部の新規グループレイヤの作成を使用して下記画像のようなレイヤー構成にします。 グループレイヤー名の最後に"_BTN"と付けるとCut&Slice meが自動的にボタンと判別してくれます。
レイヤー構成 : sample_BTN > normal(ボタンの通常表示) > ボタンの素材

hover(マウスが乗った時の)画像の作成

normalレイヤーグループを右クリックし"グループを複製"を選択し、新規名称を"hover"にしてください。

hoverレイヤーグループの中身がマウスが乗った時の画像になります。今回は単純に文字色を黄色にしてみました。

画像切り出し範囲の指定

sample_BTNレイヤーグループ直下に四角形シェイプを画像を切り出したい範囲を囲む形で作成します。
四角形シェイプの名前を"#"に変更します。これでボタンの書き出しの準備が整いました。

ボタン画像の出力

下記画像の手順を踏むと画像の出力がはじまります。

数秒間、Photoshopが忙しく動きますが、自動処理が終わった後に"sanple.psd"を保存したのと同じ場所に"sample_assets"というフォルダが作成されます。
"sample_assets"フォルダの中を見ると"btn_sample_hover.png"と"btn_sample.normal"のpngファイルが作成されています。書き出されるファイル名は"btn_ファイル名_レイヤーグループ名"となります。
ボタンのレイヤーグループ名は以下の名称が使用できるようで、それ以外は無視されます。

• normal
• hover
• clicked / pressed
• selected
• disabled

面倒な画像出力がお手軽に

通常のパーツを出力したい場合はレイヤー名の最後に@をつけます。
範囲を指定したい場合はグループレイヤーを作成しレイヤー名の最後に"@"を付けます。
その後長方形シェイプを切り出したい範囲で作成し、レイヤー名を"#"と名称変更して下さい。

png(透過)でしか出力できないようですが、webデザインでの画像出力が劇的に楽になるのでかなりオススメのプラグインです。