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

変数機能とスマートオブジェクトを活用したWebデザインの効率化

同一イメージのデザインで複数種類のサイズ違いを制作することってよくありますよね?特にWebバナー制作案件は多くの場合がそのようなパターンだと思います。そんなときは変数機能とスマートオブジェクトを活用して効率化を図りましょう!
マルチデバイス向けのカンプ作成にも応用できるTipsです。

まずはサンプルデータ(15.7MB)をダウンロードしてください。

DOWNLOAD

まずは汎用的に使えるフォーマットを作成

さまざまな案件に対応できるベーシックなフォーマットを作成する

(1)新規ファイルを作成。新規ダイアログの「ドキュメントの種類」をアートボードにして[幅180px、高150px 72dpi]として「OK」をクリック。この時点で任意の場所に「format_bnr」フォルダを作成して「bnr.psd」というファイル名で保存をしてください。

(2)レイヤーパネルの「アートボード1」をダブルクリックしてアートボード名を「 bnr01.jpg」とします。

(3)[レイヤーメニュー]/[新規]/[アートボード]を選択して下記3つのアートボードを追加します。

アートボード名 高さ
bnr02.jpg 125 px 125 px
bnr03.jpg 468 px 60 px
bnr04.jpg 234 px 60 px

 

(4)アートボードの位置を調整します。移動ツール(v)を選択した状態で移動したいアートボードをcommand + クリックすると移動ができます。

(5)長方形ツール(U)でアートボードのエリア外に大きめの正方形(shift + ドラッグ)を作成してレイヤー名を“bg”に変更します。(後にバナーの背景になります)

(6)“bg”レイヤーを選択した状態で[レイヤーメニュー]/[スマートオブジェクト]/[スマートオブジェクトに変換]でスマートオブジェクト化して、
一旦“bg”レイヤーは縮小しておきます。

(7)また(5)〜(6)と同じ行程でスマートオブジェクトを作成してレイヤー名を“object”にします。(後にバナーに入るオブジェクトになります)

(8)レイヤーパネル上で“bg”レイヤーと“object”レイヤーを同時選択(shift + クリック)した状態でaltキーを押しながらアートボード「bnr01.jpg」内に移動して複製します。
アートボード「bnr01.jpg」内の「レイヤー1」は不要なので削除します。

(9)“bg”レイヤーと“object”レイヤーの位置とサイズを調整します。“bg”レイヤーはアートボードのサイズいっぱいに、“object”レイヤーは少し小さめに配置します。
※拡大縮小する際に縦横比が変わらないようにshiftキーを押しながら変形してください。

(10)バナーに入れる情報を文字ツール(T)で作成します。今回は「テキスト大」、「テキスト中」、「テキスト小」を作成します。

(11)これでバナーの構成要素が揃いました。
アートボード「bnr01.jpg」内のレイヤーを全てのアートボードに複製していきます。アートボード「bnr01.jpg」内のレイヤーを全て選択(shift + クリック)した状態でaltキーを押しながら他のアートボード内に移動して複製します。

複製した際に下記画像のようにアートボードのエリア外にでてしまったレイヤーはアートボードグループから外れてしまいます。そのような場合は外れてしまったレイヤーを選択して移動したいアートボード内にドラッグ(カンバス上でもレイヤーパネルでもどちらでもOK)すればグループ内に移動することができます。

(12)それぞれのレイヤーの位置とサイズを調整します。

(13)次に変数を定義していきます。[イメージメニュー]/[変数]/[定義] を選択します。
ダイアログが出てくるのでレイヤーのプルダウンメニューから「テキスト大」を選択します。
次にテキストの置き換えチェックボックスにチェックを入れて変数名を入力します。(変数名は、文字列、アンダースコア、コロンのいずれかで始める必要があります。ピリオド、ハイフン、アンダースコア、コロン以外の特殊文字、スペースを含むことはできません。)今回は「テキスト大」と入力します。
すべてのテキストレイヤーに変数を定義します。今回定義する変数名は下記表を参照してください。

レイヤー名 テキスト大 テキスト中 テキスト小
変数名 テキスト大 テキスト中 テキスト小

(14)すべてのテキストレイヤーに変数が定義されたことを確認します。レイヤーの横の(*)マークが変数定義済みのしるしです。完了の場合は「OK」をクリックして変数ダイアログを閉じます。

(15)次は値を入力する為のcsvを作成します。
1行目に先ほど定義した変数名を入力します。
(
2行目以降は変数に代入する値を入れるのですが今はフォーマット作成が目的なので空欄のままでOKです。)

(16)入力できたら[ファイルメニュー]/[保存]を選択。保存先に「format_bnr」フォルダを指定しフォーマットのプルダウンメニューから「CSV」を選択して「保存」ボタンをクリックします。

以上でフォーマットが完成です。今回作成したPSDファイルとCSVファイルをフォーマットとして持っておけば、さまざまな案件に汎用的に利用することができます。アートボード、テキストレイヤー、オブジェクトの数は想定される案件によって増減してください。

フォーマットデータは最初にダウンロードしていただいたデータの「bnr_finish」 フォルダ内にあります。

Webバナー(複数サイズ・種類)を
高速で制作する

フォーマットを使用してWebバナーを制作

それではこれからは先ほど作成したフォーマットの利用手順を解説していきます。
今回は日本全国で開催されているセミナーイベント「CSS Nite」のバナー制作という架空の案件を題材にしました。

(1)先ほど作成した「format_bnr」 フォルダを複製してフォルダ名を「cssnite_bnr」に変更します。
※「format_bnr」 フォルダはフォーマットして使用するため直接変更を加えないように注意してください。

(1)「cssnite_bnr」フォルダ内の「data.csv」を開き2行目以降に変数に代入する値を入力します。今回は下記画像のように入力しました。入力を終えたら上書き保存をして閉じます。

(2)次に「cssnite_bnr」フォルダ内の「bnr.psd」を開きます。

(3)CSVファイル「data.csv」をPSDに読み込みます。[イメージメニュー]/[変数]/[データセット]を選択。「変数」ダイアログ右側の「読み込み」ボタンをクリック。「データセットの読み込み」ダイアログの「ファイルを選択」をクリックして「cssnite_bnr」フォルダ内の「data.csv」を選択して「開く」をクリックします。「最初の列をデータセット名として使用」にチェックが入っていることを確認して「OK」をクリックします。

(4)これでCSVのデータがPSDに読み込まれました。変数ダイアログのデータセットのプルダウンメニューからデータセットを切り替えて確認してみましょう。確認できたらデータセット「OKINAWA」を選択して「適用」をクリックしたのち「OK」をクリックしてダイアログを閉じます。

(5)これからはグラフィックに変更を加えていきます。レイヤーパネルの“bg”レイヤーのサムネイルをダブルクリックしてスマートオブジェクトを編集します。
[ファイルメニュー]/[埋め込みを配置]を選択して最初にダウンロードしたサンプルデータ内の「素材/沖縄/海.jpg」を配置します。ピンク色の「bg」レイヤーは不要なので削除します。上書き保存をして閉じるとアートボードすべての背景が変更されていることが確認できます。

(6)同じように“object”レイヤーのサムネイルをダブルクリックしてスマートオブジェクトを編集します。

[ファイルメニュー]/[埋め込みを配置]を選択してサンプルデータ内の「素材/沖縄/シーサー.png」を配置します。青色の「object」レイヤーは不要なので削除します。上書き保存して閉じます。

(7)あとはレイアウト、サイズ調整、レイヤー効果での装飾、追加パーツの配置などをして完成です。

(8)沖縄版が完成しましたがこれを札幌版に変更してみましょう。
[イメージメニュー]/[データセットを適用]を選択。データセットを適用ダイアログの「SAPPORO」を選択して「適用」をクリックします。テキストレイヤーがデータセット「SAPPORO」

の情報に更新されました。

(9)レイヤーパネルの“bg”レイヤーのサムネイルをダブルクリックしてスマートオブジェクトを編集します。
[ファイルメニュー]/[埋め込みを配置]を選択してサンプルデータ内の「素材/札幌/雪の結晶.jpg」を配置します。「海」レイヤーは不要なので削除します。上書き保存をして閉じるとすべての背景が変更されていることが確認できます。

(10)同じように“object”レイヤーのサムネイルをダブルクリックしてスマートオブジェクトを編集します。

[ファイルメニュー]/[埋め込みを配置]を選択してサンプルデータ内の「素材/札幌/時計台.png」を配置します。「シーサー」レイヤーは不要なので削除します。上書き保存して閉じます。あっというまに別バリエーションの完成です。

画像を書き出す

各アートボードを画像ファイルとして書き出します。
[ファイルメニュー]/[生成]/[画像アセット]を選択。たったこれだけ。

PSDデータが保存されている階層に「(PSDファイル名)-assets」フォルダが自動で作成され画像ファイルが保存されます。

マルチデバイス向けのカンプ作成

レスポンシブWebデザインのカンプ作成にもこのTipsは応用できます

レスポンシブWebデザインのカンプをつくる際にテキストレイヤーに変数を定義して、画像をスマートオブジェクトにしておけば直しに強いデータができます。
最初にダウンロードしていただいたデータ内の「responsive」フォルダにサンプルデータが入っています。

こちらの記事もご覧ください。

変数機能の活用術 総集編:Photoshop CC 2015版
基本編 変数機能をサンプルデータをもとに解説します。
DTP編 プロフィールカード100名分をあっという間に作成するTips
映像編 結婚式のエンドロールを簡単に作成するTips

CSS Nite in OKINAWA Vol.7「Photoshop特集」

2016年1月17日(日)に沖縄で開催される「CSS Nite in OKINAWA, Vol.7 」に出演させていただくことになりました。

普段当ブログではお伝えしきれないPhotoshopのテクニックを厳選して紹介させていただきます!

イベント名 CSS Nite in OKINAWA, Vol.7「Photoshop特集」
日時 2016年1月17日(日)14:00-17:40
会場 沖縄県市町村自治会館 中会議室
沖縄県那覇市旭町116-37(旭橋駅近く)
定員 60名
出演 鷹野 雅弘(スイッチ)
三浦 将(Dearps)
参加費 5,000円(事前決済)
4,000円(12月17日15時まで「早割」)

【40%OFF・本日限定】Adobe Creative Cloud[オンラインコード]

Adobe CC

現在Amazonにて2015年11月27日(金)まで、Adobe Creative Cloud[オンラインコード]が20%OFFになるキャンペーンを実施していますが、本日2015年11月20日(金)限定でAdobe Creative Cloud[オンラインコード]がナント40%OFFで購入できます。
実質約3,200円/月で利用することができます。今私は通常価格で利用していますが約5,400円/月なので月々2,200円もお得!
購入をご検討中、更新タイミングの方は是非!
http://www.amazon.co.jp/dp/B00FOHQZPI

変数機能の活用術「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つあります。

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

続きを読む