GBS-005です。 今回初めてブログ記事執筆を担当いたします。 よろしくお願いいたします。 今日はアプリ用の素材パーツをPhotoshopで快速に切り出す方法についてまとめてみました。 僕・私は必要ないですけど？という方は読み飛ばしてください。 アプリでもWEBでもデザインFIX後に発生するのが「パーツ切り出し」作業です。 この作業については会社や企業によって誰が担当するのか明確には決まっていない場合が多いようです。 photoshopが使える開発者の方ならまだしも「使い方とか全然わからない」開発者にとってこれはまさに苦行です。 そこで、今回はphotoshopがあれば誰でも手間をかけずに切り出しができる方法を紹介します。 方法としては2つあります。
photoshop CCの新機能の1つ「画像アセット」を使う方法
※残念ながらCS6以前の方は利用できません。 こちらについてはググってもらえればたくさん記事が見つかると思いますので、そちらを参考にしていただければと思います。
photoshopのスクリプトを使う方法
今回はこのスクリプトについて紹介します。 簡単にいうと、 photoshopのレイヤーグループ・レイヤー構造をそのままフォルダやファイルに書き出してくれます。 ※下記画像のようなイメージです。 書き出される画像形式は、png形式です。 ※jpgやgifまで書き出しも可能ですが、アプリで使うことを想定していること、処理速度が低下してしまうことを考慮し今回は割愛します。
以下、使い方です
- 下記URLからスクリプトファイル（jsxファイル）をダウンロードしてください。 スクリプトファイルDLリンク
- photoshopのスクリプトファイルが格納されている箇所に上記ファイルを格納します。 Windows: C:\Program Files\Adobe\Adobe Photoshop CC\プリセット\スクリプト MacOS X: アプリケーション/Adobe Photoshop CC/Presets/Scripts
- photoshopを起動します（すでに起動している場合は一度終了して再起動してください）
- レイヤーパネルにて、書き出したいパーツ毎にスマートオブジェクトに変換します。 同時に、レイヤーグループ名・レイヤー名を整えます。 ※半角英数文字のみ使用可能です。（日本語不可） ※この名前が各パーツのファイル名になります。
- スクリプトを実行します。 ファイル > スクリプト > layerToFolderDirectry_nonNum_show_png_ForWeb
- PSDファイルが置かれている階層と同じ階層に、PSDファイルと同名のフォルダが生成されています。 その中に、photoshopのレイヤーパネルの構造のとおりにフォルダや画像が格納されていれば完了です。
と、ここで疑問が残っている方もいるかと思います。 4でスマートオブジェクトに変換したレイヤーを元に戻したい時はどうするのか？非常に手間なのではないか？ その通りです。 そこで、今度は下記URLのスクリプトをダウンロードしてください。 https://cl.ly/OgSs ありがたいことに、スマートオブジェクトに変換したレイヤーを元に戻してくれるスクリプトです。（開発された方、本当に感謝いたします。） ダウンロードしたjsxファイルを先ほどと同様の場所に格納し、photoshopを再起動することで使用可能になります。 長くなりましたが、このスクリプトをスムーズに使うため重要なのは 日頃からレイヤーグループ名・レイヤー名を「半角英数文字」にて「わかりやすい名前」で設定しておくことです。 なので、デザイナーさんからPSDをもらう場合には、 事前に「レイヤー名などは半角英数文字でつけておいてくださいね」と強くお願いしておきましょう。 他にもスクリプトを使うと時間短縮になることがたくさんありますので、気になった方はぜひ調べてみてください。
