変数機能の活用術「DTP編」

プロフィールカードを100種類サクッと作成する

某アイドルグループのコンサートグッズを制作した時のテクニックを紹介します。

右の画像のようなプロフィールカードをベースとしてメンバー全員分制作するという案件でした。

最近のアイドルグループは研修生なども含めると100名近くメンバーがいることも珍しくなくその案件でも約100種類のデータを制作しなければいけませんでした。

クライアントからの提供素材
メンバー全員分の写真、プロフィール情報が入力されたエクセルファイル

参考ファイルのダウンロードは以下から。(50MB)

DOWNLOAD

もしこれを通常の手作業でやると次のような手順になると思います。

①写真を差し替え

②テキストレイヤーをひとつずつ打ち替え

③別名保存

↑100回繰り返す

この方法では時間と労力の無駄ですし、手作業によるミスが発生する可能性もあります。
このような時に変数機能を活用すれば驚くほど

「あっというまに、簡単に、正確に」

大量のグラフィックを作成することが可能です。

では手順をおって解説していきます。

変数機能でプロフィールカードを
100種類作成あっという間に作成する方法

①まずはじめに写真をフォルダ(photo)ごとベースとなるPSDと同じ階層にコピーします。

②次にPhotoshopで読み込むためのCSVを作成します。 プロフィール情報のエクセルファイルを開き加工していきます。Photoshopに読み込むCSVは1行目が変数になるので行を挿入して変数名を適宜入力します。

画像列のセルには画像を読み込むためのパスになるのでCSVの保存場所から画像の保存場所への相対パスを入力します。今回CSVはベースとなるPSDと同じ階層に保存するのでそこから画像への相対パスはphoto/001.jpgというような形になります。

③すべての入力を終えたら別名保存で「フォーマット」のプルダウンメニューを開き「CSV」を選択してベースとなるPSDファイルが保存されているところと同じ階層に保存します。

④次にPhotoshopでベースとなるPSDを開き、可変させたいレイヤーに対して変数を定義していきます。

[ファイル]/[イメージ]/[変数]/[定義]を選択。

変数ダイアログが開くので、レイヤーのプルダウンメニューを開き、可変にさせたいレイヤーを選択し、変数の種類の「テキストの置き換え」にチェックをいれて名前に先ほど作成したCSVと紐づくように変数名を入力します。

同じように可変させたいレイヤーすべてに変数を定義します。

変数の定義が完了したら「次に」をクリックします。

⑤次の画面で「読み込む」ボタンが表示されるのでクリック。「データセットを読み込み」ダイアログの「ファイルを読み込み」をクリックして先ほど作成したCSVを選択します。特別な理由がない限り「最初の列をデータセットとして読み込み」にチェックを入れます。これにチェックを入れない場合データセット名がデータセット01、データセット02のように連番で名前が付けられてしますのでデータ管理が煩雑になってしまいます。

最後にOKをクリック。

⑤これでCSVのデータが読み込まれた状態になりました。データセットを切り替えて確認してみましょう。

⑦今の状態ではまだPSDが1つのの状態なので全てのデータセットを別ファイル(合計100個)に書き出します。
[ファイルメニュー]/[書き出し]/[データセットからファイル]を選択。
「保存オプション」で保存先を指定して「ファイルの名前」で命名規則を指定します。

OKをクリックすると書き出しが実行されます。

⑧100件のファイルが書き出されました。次に写真のサイズやレイアウトの調整が必要なデータ全てを調整します。100個分のデータとなると調整が必要なデータは1つや2つではないので、ここでもアクションやバッチ機能を利用して効率化を図りましょう。

調整ができたら全ての工程が完了です。

変数機能は時間短縮や、作業が楽になる、データ作成が正確にできるというのはもちろんのこと
エクセルを利用するのでPhotoshopを使えない人にも入力作業などを分担させることができるっていうのが結構大きなメリットだったりします。
アイデア次第で、きっとみなさんの業務にも活用できると思うので、ぜひこの機会に利用してみてはいかがでしょうか?

参考ファイルのダウンロードは以下から。(50MB)

DOWNLOAD

Photoshop CC 2015強化された「書き出し」機能について

Adobe Photoshop CC 2015では書き出し機能が改良されて強化されました。従来の「Web用に保存」に加えて新たに「PNGとしてクイック書き出し」、「書き出し形式」、「環境設定を書き出し」が追加されました。

今回はこの3つの新しい書き出し機能を紹介させていただきます。

続きを読む

メニュー項目からみるPhotoshop CC 2015の新機能

Photoshop CC 2014とPhotoshop CC 2015のメニュー項目を比較して、どんな機能が追加されたのか探っていきたいと思います。

(編集、イメージ、書式、選択範囲、ヘルプメニューは追加項目がありませんでした。またファイルメニューの「書き出し」以外のサブメニューは比較対象外です。)

Photoshop CC 2015 本日リリース

本日Adobe Photoshop CCが2015年リリースとしてメジャーアップデートされました。

アップデートの詳細に関しては下記Adobe公式サイトにてご確認下さい。

http://www.adobe.com/jp/products/photoshop/features.html

アップデートに際し一つ注意していただきたいのが「Creative Cloud デスクトップアプリケーション」からアップデートする際に「すべてアップデート」というボタンをクリックすると、以前のバージョンのアプリケーションはアンインストールされてしまいます。以前のバージョンを残してアップデートをしたい場合は下記手順を参考にアップデートして下さい。

続きを読む

作業効率化のための三箇条

Photoshopでの作業を進める上で効率化を図るために常に意識していることが3つあります。

上の画像にあるように非破壊、自動化、共通化です。

続きを読む

スクリプト「レイヤーをグループ化→描画モード:通常」

レイヤーをグループ化するとそのレイヤグループの描画モードはデフォルトでは「通過」になります。

その場合レイヤーグループ内で調整レイヤーで色調補正した場合、描画モードが「通過」なので下のレイヤーに影響します。(下記画像参照)

この調整レイヤーでの色調補正をレイヤーグループ内で留めたい場合レイヤーグループの描画モードを「通常」にするか、色調補正したいレイヤーに対してクリッピングマスクする必要があります。(下記画像参照)

この一手間を解消するスクリプトを作成したので、ご紹介させていただきます。このスクリプトを使用すればレイヤーグループを作成した際の描画モードをデフォルトで「通常」にすることができます。

まずはじめに下記リンク先よりスクリプトをダウンロードしてください。

↓Dearps_レイヤーをグループ化_通常.jsx ダウンロード↓

【利用方法】

①「Dearps_レイヤーをグループ化_通常.jsx」を
【Mac】/Applications/Adobe Photoshop [CC/CC2014]/Presets/Scripts/ に保存。

②Photoshopが起動している場合は再起動。

③[編集] / [キーボードショートカット]で「Dearps_レイヤーをグループ化_通常.jsx」にたいして「⌘+G」を設定。

これでレイヤーグループを作成した際の描画モードがデフォルトで「通常」になります。

是非ご活用下さい。

ぶっこ抜いてリンク スクリプト

top

指定したレイヤー(レイヤーグループ)を1クリックで外部リンクファイルとして書き出すスクリプト

Photoshop cc 2014からスマートオブジェクトを外部リンクファイルとして書き出すことができるようになりました。

手順としては、

書き出したいレイヤー(レイヤーグループ)を選択し、[レイヤー]メニュー>[スマートオブジェクト]>[スマートオブジェクトに変換]を選択してスマートオブジェクト化。次に[ウインドウメニュー]>[属性]パネルを表示。そして[属性]パネルの[リンクされたアイテムに変換]ボタンをクリック。ダイアログが出てくるので保存先を指定して保存。

という作業をする必要があります。

今回公開させていただく「ぶっこ抜いてリンク」スクリプトを使えば、

書き出したいレイヤー(レイヤーグループ)を選択し、[ファイル]メニュー>[スクリプト]>[参照]からダウンロードした「ぶっこ抜いてリンク」スクリプトを選択するとダイアログが出てくるので保存先を指定して保存。

という工程だけですみます。

スマートオブジェクトの外部リンクファイル化機能にはこんなメリットがあります。

(1)ヘッダーやナビゲーション等共通モジュールを書き出して複数ファイルで共有できる。

(2)外部ファイルとして抜き出した分、元のPSDデータの容量が軽くなる。

今後間違いなく使用頻度が増えていく機能だと思うので是非活用してみてください。

ぶっこ抜いてリンク スクリプトのダウンロードは以下から。

Photoshop CC 2014版はこちら

DOWNLOAD

Photoshop CC 2015版はこちら

DOWNLOAD

ただレイヤーを別ファイルに抜き出したい場合は
ぶっこ抜き スクリプト」を御覧ください。

【セミナー情報CSS Nite @Co-Edo, Vol.19-20『Webデザインの現場ですぐに役立つ Photoshop仕事術』

book

4月9日、10日の2デイズ、『Webデザインの現場ですぐに役立つ Photoshop仕事術』の出版記念を兼ねたセミナーがコワーキングスペース茅場町Co-Edoにて開催されます。私、当ブログ管理人もVol.20に出演させていただきます。ぜひご参加の検討をいただけると幸いです!

CSS Nite @Co-Edo, Vol.19-20
『Webデザインの現場ですぐに役立つ Photoshop仕事術』

【Vol.1】2015年4月9日(木)19:30-21:00
【Vol.
2】2015年4月10日(金)19:30-21:00

コワーキングスペース茅場町Co-Edo
〒104-0033 東京都中央区新川1-3-4 PAビル5F

参加費 3,000円(両日割、および、書籍持参によるキャッシュバックあり)

詳細はこちら Vol.19Vol.20

Webデザインの現場ですぐに役立つ Photoshop仕事術