PhotoshopのVanishing Pointを使ったモックアップの作り方

PhotoshopのVanishing Pointで遠近感のあるモックアップの作り方

こんにちは。Maiine worksデザイナーの木下舞子(@maiineworks)です。

以前書いたモックアップ作りの記事がたくさん読まれているので、もう少し簡単にできる方法も記録に残しておこうとこの記事を書いています。

Vanishing Pointは簡単に遠近感のついた画像合成ができる方法です。

今回はこの真っ白のな箱に木のテクスチャをはめ込んでみます。

Vanishing Pointで面を作成している写真

Vanishing Pointでモックアップを作る方法

①素材を準備

元の素材写真はこちら。Photoshopでどちらも開いておきます。

真っ白な箱と木のテクスチャの画像をPhotoshopで開いたところ

②テクスチャの写真をコピー

Vanishing Pointで一番のポイントだと思うのが、1番はじめにテクスチャの写真をコピーしておかなければいけないこと。

後からコピーしに画面を行き来するのが手間なので、はじめにやっときましょう。

③箱の写真でVanishing Pointメニューを開く

箱の写真ウインドウを選択して、フィルター→Vanishing Pointまたはショートカットでoption+Command+V。

VanishingPointのメニュー

Vanishing Pointの作業画面が現れます。

Vanishing Pointで面を作成している写真

④面作成ツールで点を4つ打つ

上から2番目、面修正ツールの下にある「面作成ツール」を選択。

余談ですがVanishing Pointでの黒い矢印は選択ツールではなく面選択ツール。上から3番目の点々の四角が選択ツール。ややこしい(笑)

面作成ツールの写真

テクスチャを入れたい面の角をぽちぽちクリックすると、グリッドが現れます。複数の面にテクスチャを入れたい場合も、まずは1番広い1面だけ作成しましょう。

こんなかんじでグリッドができました。グリッド色がイエローです。これは「面が無効であることを示します。面のいずれの消失点も解決できません。(by Adobe)」ということなので、少しずつ点を動かしてグリッドが青くなるように調整しましょう。

Vanishing Pointで面を作成している写真2

ほんのちょっとずらしたら青くなりました。

Vanishing Pointで作成した面が青くなっている写真

⑤側面を作成する

1番広い面ができたので、左側に続く側面も作ります。

面修正ツール(1番上の黒い矢印)に戻し、Shiftを押しながら、左側のポイントをドラッグすると…

側面を作成している写真

パースに合わせて勝手に良い感じにグリッドを作ってくれました。細かいところは微調整。

⑥テクスチャをペーストする

最初にコピーしたテクスチャをペーストします。

木のテクスチャをペーストした写真

⑦グリッドまでドラッグ

選択ツール(1番上の黒い矢印じゃなくて3番目の四角)に持ち替え、テクスチャをグリッドの上までドラッグすると…

選択ツールを使って木のテクスチャを横へ移動したところ

グリッドに合わせて、自動で良い感じにはめ込まれました。遠近感とかも勝手に調整されます。

今回は写真がテクスチャが小さくて前面覆えなかったため、2回ペースト、ドラッグを繰り返しました。

⑧ブラシツールも使えるよ

簡単な文字やイラストだったらVanishing Pointの編集画面で書き加えることができます。

こちらも描画したい場所に普通に書き込めば、自動的にグリッドに合わせて調整してくれます。にゃーん。

消しゴムはないので間違えたら⌘Zで戻るのみです。ちょっと注意が必要ですね。

ブラシツールを使って文字を書いたところ

⑨スタンプツールもつかえるよ

Vanishing Pointの編集画面上で簡単なレタッチも可能です。

コピースタンプツールを選択→option+クリックでテクスチャをコピー→クリックでコピー元を貼り付け。これは通常のスタンプツールと変わりません。

消しゴムもないしレイヤーにも分かれないので以下略。

⑩グリッドを複数面作ることもできるよ

さて、まだフタの部分が白いままです。上から2番目の面作成ツール(グリッドのアイコン)に持ち替え、フタ部分も同様に4点打っていきましょう。

グリッドができたら、同じようにテクスチャをコピー、選択ツールに持ち替えてドラッグすれば完成です!

完成〜

完成

できあがりはこんな感じ。

合成すると情報はレイヤーではなくVanishing Pointの編集画面に保持されます。だからレイヤー分けされず、元データに合成されます。

Vanishing Point編集画面からいつでも削除、編集可能。

完成したレイヤーの写真

まとめ

スマートオブジェクトを使ったモックアップと比較して、Vanishing Pointの特徴は

  • 4つの点からなる平面に合成する際、自動で遠近感を調整してくれる
  • 曲面など複雑な形はできない
  • 情報はVanishing Pointの編集画面に保持される
  • 合成画像はレイヤーごとにわかれない。合成後に合成画像を編集(明るさ変えたり色調整したり)するのはちょっとやりづらい
  • 1度合成すると削除できない(写真の差し替えは可)

だなーと感じました。もっと他にもあるかも。

最大のメリットはコピペ&ドラッグだけでパースが良い感じの合成画像を作ってくれることだと思うので、床とか壁とかPC画面とかの合成にはもってこいではないでしょうか。

1度合成すると元に戻せないのは結構不便だと思うので、1番はじめに合成先の画像はコピーレイヤーを作っておくのをおすすめします。

複雑な形な上に細かい画像レタッチが必要なものはスマートオブジェクト、遠近感のある広い平面に画像をうまく合成したいならVanishing Point、と使い分けていきたいなーと思った次第です。

遠近感の調整って地味に面倒ですものね。

というわけで、Vanishing Pointを使ってもモックアップが作れるよというメモでした。

前回のスマートオブジェクトを使ったモックアップの作り方はこちら

PhotoshopのVanishing Pointを使ったモックアップの作り方」への1件のフィードバック

  1. ピンバック: Photoshopで簡単モックアップの作り方 | 印象づくる×印象づける ブランディングならマインワークス[Maiine works]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です