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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

変数機能とスマートオブジェクトを活用した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
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*