Photoshop データセットで大量の差分イメージを作る方法

一応タイトルは「Photoshop データセットで大量の差分イメージを作る方法」とつけましたが、具体的には、たとえばバナーを作成したとして、一部文言を変更し大量に書き出したいときなどにこの方法を使うと効率的にデータを作成することができます。

で、上記の用なことはだいたい“Photoshop データセット”でググれば詳細の記事が出てくるのかと思うのですが、自分自身がこの機能を初めて利用したのはソーシャルゲームのカード画像を大量に作成しなければならないときでした。なのでちょっとそこら辺を題材にして解説してみようかと思います。

思い返せば10年近く前の話ですが、ソーシャルゲームのデザイン(UI、各種ページ部材等)を担当したときの話です。ソーシャルゲームはwebサービスでもあるので、各機能のUIを考えるのもなかなかに大変なことだと思うのですが、さらに切っても切れないのが大量のカードを作成しなければいけないということです。例えば作成するカードの構成要素が以下だったとして、

これらを手作業でフォーマットにそって画像を作成していこうとすると・・・・

1.作成するキャラクターのレア度を確認しそれに応じたpsdを開く

2.キャラクターのイラストを配置

3.キャラクター名のテキストレイヤーに、配置したキャラクターの名前をコピペ

という作業が必要になってきます。

10枚かそこらの数だったら上記の方法でもまったく構わないと思うのですが、1000枚以上のカードが必要になることなどザラなので、手作業なんかでやってられません。ミスも恐いですしね。1000枚もあれば確実にコピペミスなどやらかしちゃいます。

当時、どうしようかと絶望にひしがれながら何か良い方がないかとグーグル先生にいろいろ聞いたところ、データセットで書き出しなるものを発見。

これは使える!!と思い実際につかってみることにしました。経緯などつらつら書きましたが以下から手順になります。

1.フォーマットになるpsdのレイヤーを整理する

フォーマットのpsdをもとに大量のデータが作成されるため、レイヤーの統合などをしっかりと行い不必要なレイヤーは残らないようにします。

最下層レイヤーにはファイル名を保持しておくテキストレイヤーを用意しましょう(詳細は後述)。このテキストはデザインには一切関係ないため、フォントサイズは最小にし不透明度も0%にしておきます。

2.各レイヤーに変数名をつける

テキストを差し替えたいレイヤーや、イメージを差し替えたいレイヤーに、変数名をつけてあげます。

変数名付け方は、つけたいレイヤーを選択し

イメージ > 変数 > 定義

現れたダイアログの以下の部分を任意の名前に変更。

(例:キャラクターレイヤーの名前だったらchrとか)

イメージレイヤーのみにある置き換え方法はものによっては変更なしの方が良いかも知れません。

[イメージレイヤーのダイアログ]

[テキストレイヤーのダイアログ]

差し替えたいと思うレイヤーにすべてこの作業をしていきます。

3.変数に代入する値の情報が記載しているCSVを用意する

一応CSVの解説は以下になります。

https://ja.wikipedia.org/wiki/Comma-Separated_Values

カンマ区切りで表を表現してるみたいな感じですかね。
CSVファイルを作成するときはExcel等で作成可能です。
※もちろんテキストエディタとかでも作成できます。

以下ではExcelを使用して作成方法を解説します。

まず、一番上の行にはpsdで設定した変数名をそれぞれ記述しておきます。

ここに記載した変数名の数と、psdで設定した変数名の数に差異があるとエラーがでてしまうので要注意です。

そして各列に必要な情報を記載していきます。テキストレイヤーの列には代入したいテキストを、イメージレイヤーには差し替えたいイメージのファイル名(ファイルパス)を記載していきます。

これでデータの記述は完了です。

最後にファイルを保存する際に.csv形式を選択し保存します。

4.psdにCSVファイルを読み込ませる

各レイヤーに変数名を設定したフォーマットのpsdを開きます。

そしてイメージ > 変数 > データセット

を選択すると以下のようなダイアログが出てきます。

そして、読み込みを選択すると次のようなダイアログがでてきます。

ここでは「最初の列をデータセット名として使用」にチェックを入れるようにしましょう。

先ほど作成したCSVの最初の列、つまりfile_nameの列がデータセット名となり、ファイルを書き出す際のファイル名にすることができます。

レイヤーにファイル名というレイヤーを用意した理由は、psdで設定した変数の数と、CSVの変数の数に差異があるとエラーがでてしまうため、無理やり代入するレイヤーを作って対応している感じです。

無事にCSVの読み込みが完了すると以下のように読み込まれた情報が表示されます。

このときエラーが出た場合ポップアップで通知されます。

エラがー出た場合まず疑わしいのはpsdで設定した変数の数とCSVで記載してある変数の数の差異です。

そこも間違っていないようなときは、CSV作成時に余計な要素が入ってしまった可能性もあるので、既存のCSVの必要な範囲をコピーし、新たなファイルに貼り付け保存し再読込するとエラーがでなくなるケースがよくあったので、理由がわからないような時はためしてみるといいかもしれません。

ここまできたら後は書き出すのみです。

ファイル > 書き出し > データセットからファイルを書き出し

を選択し、ファイル名の付け方を以下のようにデータセットのみにします。

あとは書き出し先のディレクトリを選択して書き出すのみです。あっという間に複製されたpsdが指定のディレクトリに追加されていきます。

結果は以下のようになります。

長々となりましたが、今回はソーシャルゲームのカードを題材にPhotoshopのデータセットについて解説してみました。

それ以外にも使いどころはあったりすると思うので、覚えておけばどこかで作業の効率をぐんとあげられるかもしれません。

またもっと複雑な処理を行いたい場合はJavasSriptなどを用いて処理をさせる必要がでてきます。

こちらのやり方もどこかで解説できればと思います。