Photoshopでパースのついたモックアップを作成する際の修正対応に強い最適なファイル構成をテーマにしたスピードアートです。
スマートオブジェクトとリンクオブジェクトの違いを把握することで効率的なモックアップを作成できるようになります。
リソース
制作の流れ
主な工程としては、
- モックアップ用の写真の不要な部分の除去
→今回は多角形選択ツールで選択して右クリックでコンテンツに応じた塗りつぶしで行っております。（パッチツールなどでも可） - 長方形ツールで四角を作り、スマートオブジェクト化
→レイヤーを右クリックしてスマートオブジェクトに変換 - 写真に合わせてスマートオブジェクトのパースを合わせる
→編集/パスを変形/多方向に伸縮 - スマートオブジェクトを編集
→レイヤーを右クリックしてコンテンツを編集（レイヤーのサムネイルをダブルクリックしても可） - スマートオブジェクト画面でリンクオブジェクトを配置
→ファイル/リンクを配置 - リンクオブジェクトの色味をグラデーションオーバーレイなどで調整して保存して元のモックアップに反映
となります。
制作ポイント
最終的な構成
最終的な構成は、
ロゴなどのオブジェクト（Illustrator）
⇔スマートオブジェクト（Photoshop）
→上のロゴなどのイラレデータをリンクオブジェクトで配置
⇔モックアップ（Photoshop）
となります。
Illustratorなどで作成したオブジェクトをPhotoshopでそのままパースを変更すると水平比率が変わった場合に毎回パースやサイズを合わせたりなど修正が面倒になることが多いので（特にワープや遠近法を使ったとき）、パースを合わせたスマートオブジェクトを一枚挟みます。
そのスマートオブジェクトにIllustratorのオブジェクトをリンクオブジェクトで配置すると、オブジェクトを正面の構図で調整できるので修正対応などがスムーズに運びます。
Illustratorのデータの作り次第では、リンクオブジェクトで配置する代わりにスマートオブジェクトでも構いませんが、Illustratorで行ったデータ修正をすぐPhotoshopに反映できるので時短になります。
リンクオブジェクト
Illustratorで作成したデータを即Photoshopで反映させるにはPhotoshopで画面を開いている必要があります。
画面を開いていない場合、Photoshopのレイヤー上に⚠がつくので、レイヤー上を右クリック / [変更されたすべてのコンテンツを更新] で更新してください。
（更新が個別のレイヤーであれば、Ctrl+Tで自由変形を出してEnterを押して更新する裏技？もあります）
ステンシルフォント
モックアップの元となるIllustratorで作成した看板データを動画にしているので合わせてご覧ください。
ウェブデザイナーとしてキャリアをスタートして、スマートフォンの台頭によりUI/UX・ゲームデザインを担当、現在はインハウス寄りのアートディレクター兼デザイナー。
社内外のディレクション・ワイヤー設計・デザイン・コーディングを行う。
自社、受託ともにウェブ・アプリ・グラフィック・ゲームの実績多数。
個人サイトやTwitter、YouTubeにてPhotoshopとIllustratorの作例を発信中！
個人としての仕事は、動画制作『【アーティストに学ぶ】#33 Adobe Illustrator iPad版 xコネクリ – アドビ公式』、オンラインセミナー『朝までイラレ』『朝までフォトショ』、著書『フォトショ 魔法のデザイン』（ソーテック社／共著）など。
詳しくはWorkにてご覧ください。
また、お仕事等のご依頼はContactよりご連絡くださいませ。
おすすめ書籍
PhotoshopやIllustratorの使い方についての書籍ではありませんが、イラストを主軸に活動している方は元よりデザインに関わるすべての方におすすめできる書籍です。
どちらかというと中～上級者向けの書籍で、光が色に及ぼす影響や配色の理論から技術的なテクニックまで根本から学べます。
私はディレクションすることも多々あり、今まで感覚的に伝えていた部分の言語化に大いに役立てることができました。
