「看板などモックアップ画像に自作のデザインを合成したいのに、パースが合わなくてダサくなる!」という話、結構聞きます!確かにまともに力技でやろうとすると、めちゃくちゃしんどそうなのはよくわかります!(笑)
ポートフォリオやSNS投稿で、自分の作ったロゴやポスターをそれっぽく世界観のある写真に馴染ませたい瞬間って、ありますよね。でも、ただ画像を重ねただけだと、どうしても浮いてしまって「素人っぽさ」が出てしまうんです。
そんな時に絶対に覚えておいてほしいのが、Photoshopの「消点(しょうてん・Vanishing Point)」機能!これを使いこなせるだけで、モックアップ合成のクオリティが一気にプロレベルに跳ね上がります!!ただ、この消点、少しクセがあってつまずきやすいポイントがいくつかあります!
そこで今回は、初心者さんでも迷わないように「パースに合わせてアートワークを貼り付ける」というシンプルな工程だけに絞って、消点の使い方をご紹介していきます!
消点(Vanishing Point)とは何か
まず「消点」って何?というところからお話させてください!消点とは、写真の奥行き(パース)に沿ってアートワークを自動でフィットさせてくれるPhotoshopのフィルター機能のことなんです。
例えば、斜めから撮ったノートPCの画面に自作のWebデザインを貼り付けたい時、普通なら「自由変形」でチマチマ角度を合わせないといけないですよね。でも消点を使えば、面を4点で指定するだけで、パースに合わせて一発でピタッとハマってくれるんですよ!
◎奥行きのある平面に画像を自然に配置できる
◎パソコン・スマホ・看板・本の表紙などモックアップ全般に使える
◎手動での変形作業が不要で時短になる
デザイナーとして活動していくなら、絶対に覚えておいて損はない機能だと私は思っています!
作業前に知っておきたい消点のクセ
消点は便利な反面、いくつか「ここでつまずきやすい!」というポイントがあります。先に知っておくだけで、作業中の「あれ?できない…」を防げますよ。
◎必ず新規レイヤーを作成してから消点を開くこと
◎アートワークは事前にコピーしておくこと
◎面を作成する4点は「青枠」になればOK、赤枠はNG
◎ペーストしたアートワークは面の中にドラッグして初めてパースがハマる
特に「新規レイヤーを作らずに消点を開いてしまう」というミス、私も最初やらかしました!これをやると、元画像に直接ペーストされてしまって後から編集できなくなるので、絶対に守ってくださいね。
消点(Vanishing Point)を使おう!
では、まず素材をそろえましょう!
今回はこの町の写真の中央に無地の看板があります。
ここに腕時計の写真をうまく当てはめてみます!

腕時計の写真も読み込みます。

レイヤー赤枠の腕時計のレイヤーを選択した状態で、ctrl+Aで全選択します。
そのまま、ctrl+Cでコピーします。

次に先ほどの全選択をctrl+Dで解除し、赤枠のように腕時計レイヤーを非表示にします。

続いて赤枠箇所からレイヤーを追加します。

そして、赤枠のフィルター → 消点の順にクリック。

腕時計の画像を綺麗に収めるために、赤枠の4点をクリックします。

次にctrl+Shift+Vで、先ほどコピーして置いた腕時計画像をペーストします。

腕時計画像を看板上にドラッグアンドドロップすると、マスクがかかったかのように綺麗に収まるのが分かると思います。

あとは微調整で綺麗に収めたら、すぐにこんな風にパースに合わせて画像を張り付ける事ができるんです!

便利な機能なのでぜひ覚えておきましょう!
よくある質問
Q1. 面を作成しようとすると赤い枠になってしまいます。どうすれば青枠になりますか?
A.赤枠は「パースとして成立していない角度」で面を作ろうとしているサインです。
モックアップ画像の奥行きに沿った、平行四辺形になるように4点をクリックし直してください。
慣れるまでは、画像の「角」をしっかり見ながらクリックすると青枠になりやすいですよ!
Q2. ペーストしたアートワークが面にフィットしません。
A.ペースト直後は左上に元のサイズで貼り付いているだけの状態です。
そこから「選択ツール」でアートワークを掴んで、作成した面の中にドラッグしてください。
面の中に入った瞬間、パースに合わせて自動変形されます!
Q3. アートワークのサイズが面にピッタリ合いません。
A.消点ダイアログ内でも「変形ツール」を使ってサイズ調整ができます。
また、事前にアートワークを面のサイズに近い比率で作っておくと、後の調整が楽になります。
Shiftを押しながらドラッグすれば、縦横比を保ったままリサイズできますよ。
Q4. [photo]レイヤーを非表示にする理由は何ですか?
A.元画像を残したまま、その上に新規レイヤーで合成するためです。
非表示にしておけば、あとから位置調整ややり直しが自由にできますし、
元データを壊さずに済むので「非破壊編集」の基本ルールとして覚えておいてください!
Q5. 消点で作成した面は保存できますか?
A.保存できます。消点ダイアログを一度閉じても、同じレイヤーで再度フィルター/消点を開けば、
作成した面がそのまま残っているんです。
複数のアートワークを同じ面に貼り替えたい時に、めちゃくちゃ便利ですよ!
まとめ
いかがでしたか?
今回は、Photoshopの消点機能を使ってアートワークをモックアップのパースに合わせる方法をご紹介しました!
消点は、最初こそ「面が青くならない!」「ペーストしたのにフィットしない!」とつまずきやすい機能なんですが、コツさえ掴めば一気に作業スピードとクオリティが上がる神ツールなんです。
ポートフォリオに載せるモックアップも、SNSに投稿する作品画像も、消点を使えるかどうかで見た目の説得力が本当に変わってきます。私自身、この機能を覚えてから作品の「魅せ方」が大きく変わりました!
是非是非、ご自身の作品に活用してみてください!!
弊社BOPコミュニケーションズでは、Web広告の配信・運用を承っております。
・売上を伸ばすためにWeb広告を活用してみたい。
・自社で広告配信をしているが、手探り状態なので効率を上げたい。
・広告の運用をプロに任せて、よりビジネスを大きくしていきたい。
そんな場合は、お気軽にご相談ください!
★フォームからすぐにお問い合わせしたい場合はこちら↓
