ついにうちの会社のPhotoShopがCSになりました。 いままで7を使っていたのですが、いっきに最新のCS3になりました。

で、いろいろ試していたのですが外部ファイルのCSVから一気にテキストや画像を変えて複数のPSDを生成できる機能がありました。 もしかしたらもっと前のバージョンからあったのかもしれませんが。。

1.元になるPSDを作る

デザイン適当ですけど、Webサイト作ってるとこんな見出しをページごとのヘッダに配置する事ってありますよね。 今回はこれを量産したいと思います。

レイヤーはとりあえず、「会社概要」「Outline」「バックの画像」の３種類には最低分けてください。

2.文字を変数化

次に外部ファイルから変更したい部分の指定を行います。 イメージ→変数→定義をクリックしてください。 こんな画面が出てきます。

まず「レイヤー」の部分で動的にしたいレイヤーを選択します。 今回はまず「会社概要」のレイヤーを選択します。これを外部ファイルのデータを元に変更していく感じです。

次に「テキストの置き換え」をチェック。この部分に任意の名前をつけます。とりあえず「タイトル」で。

今度は英語文字部分です。レイヤーを英語文字の部分にし、テキストの置き換えにチェック「英語タイトル」と名前を付けます。

3.画像を変数化

文字のバックにある画像を変更出来るようにしたいと思います。 素材集か何かから使えそうな画像を探してください。今回は3つほど用意します。 その画像に01.jpg 02.jpg 03.jpgなどとわかりやすいファイル名を付けて、現在作業中のpsdファイルと同階層に配置します。

次に3の定義画面に開きます。レイヤーの選択をバックの画像を配置したレイヤーにしてください。 こんな画面になると思います。

「画像の置き換え」をチェックし、「BG画像」と名前を付けます。「置き換え方法」はとりあえず「変更なし」で。

4.CSVデータを用意

この工程はExcelを使います。こんな表と作ってください。

1行目が2.3で定義した「名前」とリンクしています。2行目以降が置き換えるデータになります。 つまり、「会社概要」「Outline」「01.jpg」がセットで1つの画像を生成するという事です。 この場合、3つのセットがありますので、計3ファイルが自動生成されます。

表を作ったらCSV形式で保存してください。

5.読み込み

Photohopに戻ります。イメージ→変数→データセットをクリックしてください。 こんな画面が出ます。

「読み込み」をクリックして、4で作ったCSVファイルを読み込みます。
こんな画面になります。

「プレビュー」にチェックをして、「データセット」を切り替えると、実際にそれぞれのデータで生成される画像が見れます。

「OK」ボタンをクリック！！

6.パッチ処理

後は書き出すだけですよ！！ ファイル→データセットからファイルを書き出しクリックします。 で、保存場所を指定してOK。

これで完了です！なんと文字2種類とバックの画像が変わったpsdファイルが３つも生成されてるんです！！

画像のトリミングは微妙なんで、それぞれ開いてトリミングでもリサイズでもしてください。 jpgじゃなくてpsdで保存されるのが嬉しいですね。

ちなみに新DWはPhotoshopからコピペで画像を配置出来ます。コピーした瞬間に圧縮や保存場所を指定する感じです。これもDW使いには嬉しい機能ではないでしょうか？ 今まで選択範囲→結合部分をコピー→Web用に保存→DWで配置という悲しい工程でしたから。

そんなわけで、これからもなんか便利な機能があったら紹介したいと思います。 ただ、やっぱ７に比べるちょっと重いですね。でもインテルMACの人はかなり幸せになれそうです。