Monodia

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"にしてください。