【Photoshop】Excel(CSV)データを参照して画像・文字の差し替えを効率化する方法:後編

こんにちは、管理人の高田です(@eizo_memo)。

Excel(エクセル)で作成したCSVファイルとPhotoshopを連携して、作業効率を改善する(かもしれない)方法を紹介しています。

この記事では、前編で書き出したCSVファイルをPhotoshopで読み込み、レイヤーのテキスト・画像を差し替えるところから説明していきます(※各見出しの順序数は前編から引き継いでいます)。

もっと簡単な方法もあります

この記事で紹介している方法は、画像データの差し替えも含むため、手順が煩雑です。コメントフォローのテロップを大量に作成するなど「文字情報の参照&差し替えだけできればいいや」という方は、こちらの記事をお読みください。

【3】CSVファイルをPhotoshopに読みこむ

さあ、ここからが本番です。

前編で作成したCSVファイルをPhotoshopで読み込むのですが、その前に、CSVで作成した項目をPhotoshop側のどのレイヤーに対応させるかという設定(紐付け)をしておく必要があります。

Photoshopで変数を定義する

CSVファイルの作成時に、下図のように 表の一番上の列に、半角英数字で項目名をつけていましたが、これを「変数」として各レイヤーに設定していきます。

pict_006

レイヤー個別に変数の指定(定義)が必要になりますので、順番にみていきましょう。

「txt_Roman」レイヤー

まずは、県名のローマ字表記部分の「txt_Roman」レイヤーに変数を指定してみます。

pict_050

「txt_Roman」レイヤーを選択した状態で、画面上部のメニューから「イメージ>変数>定義」を選択します。

pict_051

「変数」ウィンドウが開きますので、「レイヤー」項目が今選択した「txt_Roman」になっていることを確認しましょう(下図1)。

pict_052

つづいて「テキストの置き換え」部分にチェックをいれ、先に作ったCSVファイル(Excelファイル)の1行目と同様に、「txt_roman_data」と名前をつけます(上図2)。

入力が終わったら「OK」を押して確定させます。

「txt_Kenmei」レイヤー

続いて、県名の漢字表記部分にあたる「txt_Kenmei」レイヤーに変数を定義します。

pict_053

先ほどと同様に、「txt_Kenmei」レイヤーを選択した状態で、メニューから「イメージ>変数>定義」を選択します。

pict_054

レイヤー項目で「txt_Kenmei」が選択されていることを確認し、テキストの置き換え項目にチェックします。こちらも 先に作ったCSVファイル(Excelファイル)の2行目と同様に、「txt_kenmei_data 」と名前を付けます。

OKを押して確定します。

「BG_pict」レイヤー

最後に、背景画像部分の「BG_pict」レイヤーの設定です。

pict_055

これまで同様に「BG_pict」レイヤーを選択した状態で、メニューから「イメージ>変数>定義」を選択します。

レイヤー項目で「BG_pict」が選択されていることを確認し、画像の置き換え項目にチェックします。こちらも 先に作ったCSVファイル(Excelファイル)の3行目と同様に、「BG_pict_data」と名前を付けます。

pict_057

置き換え方法の項目はとりあえず「フィット」にしておきます(※この項目で画像のサイズなどを調整できるようになるのですが、詳細の説明は後に回してここでは先に進みます)。

OKを押して確定します。

以上でベースとなる「変数」の事前設定は終わりました。

CSVファイルを読み込む

続いて、いよいよCSVファイルを読み込んでいきます。

Photoshopの上部メニューから「イメージ > 変数 > データセット」を選択。

pict_058

「変数」ウィンドウが開いたら「読み込み」をクリック。

pict_059

すると「データセットの読みこみ」ウィンドウが開きます。

pict_060
  • エンコーディング: Unicode(UTF-8)を選択
  • 最初の列をデータセット名として使用:チェックする
  • 既存のデータセットの置き換え:チェックする

以上の設定をしてから、「ファイルを選択」ボタンを押して、先ほど作成したCSVファイルを読み込みます。

CSVファイル選択時、デフォルトではファイルの形式が「テキストファイル」になっているため、画面上にCSVファイルのアイコンが表示されません。

ファイル形式を「CSV」にしておきましょう(下図参照)。

pict_061

CSVファイルを読み込んだらOKを押して「データセットの読みこみ」ウィンドウを閉じます。

すると「変数」ウィンドウの「値」部分に、今読み込んだCSVデータの内容が反映されていると思います(ドキュメントの画像などはまだ変更されません)。

pict_062

読み込み確認

キチンと読み込まれているか確認してみましょう。

データセット部分をクリックして、適当なものを選択し(ここでは「宮城」を選択) 適用ボタンを押しします。

pict_063

ドキュメントの画像が「宮城県」のものになれば読み込み成功です。

pict_064

フォントやレイヤースタイルなど、テンプレートで作成したデザインが、ちゃんと引き継がれているか確認しましょう。

読み込みがおかしかったら・・・

ちなみに私の環境では、結構頻繁に読み込み時にフォントサイズがおかしくなったりします。

そうした場合は、Photoshopを再起動してから再度読み込んでみると、無事に開けたりします。

【4】各県の画像データを自動で書き出す

最後に、各県のデータを、自動で書き出していきましょう。

「ファイル > 書き出し > データセットからファイル」を選択します。

pict_065

「データセットからファイルを書き出し」ウィンドウが開きますので、「フォルダーを選択」から、保存先のフォルダを選択します。

pict_066

「データセット」項目では「すべてのデータセット」を選択します。

ファイルの命名に関する設定項目(「ファイルの名前」部分)も用意されていますので、各自の環境に合わせて命名方法を選択してみてください。

特に問題がなければデフォルトのままで構いません。

あとはOKボタンを押すと、自動で書き出しが行われます。

書き出し画像の確認

以下は保存先のフォルダ内の様子です。

pict_001

ちゃんと各県ごとにバナーが書き出されています。

それぞれPSDファイルで、レイヤー情報もそのまま残っていますから、あとから個別に細かい調整なども可能です。

まとめ

ここまで説明してきてなんですが、正直 事前設定の煩雑さを考えると 10~20枚程度の画像を書き出すのであれば、コツコツ手動でレイヤーの差し替え&別名保存を行ったほうが早いかと思います。

ただ、一度「変数の定義」などのベースの設定が終わってしまえば、次回からは非常に楽になるので「100枚単位で画像を差し替えるよう仕事が毎月ある」というような場合には、今回紹介した手法はかなり有効になると思います。

実際私も そのようなお仕事を頂いたおかげで この方法を学習しました。

こういう方法もあるよ・・・ということを頭にとどめておくと、後々何かの役にたつかもしれません。

「変数:データセット」の関連記事

当ブログでは、Photoshopの「変数:データセット」機能に関する記事をいくつか作成しています。

Adobe製品の導入/更新を考えている方必見!

Adobe Creative Cloudの導入/更新を検討している方には ↓こちらの たのまな「アドビソフト + 動画講座受講セット」がおすすめです。

\ 主婦・社会人も登録可!商用OK!/

※講座の内容を詳しく知りたい方はこちら

動画講座に加えて、Adobeの全アプリが利用できる「コンプリートプラン」が付属し、なんと"学割価格"で利用できてしまいます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA