Photoshopではめ込み合成を短時間で!3ステップでスマホやPCの簡単モックアップ作成手順

Photoshop

ウェブサイトを作ってたりすると、PCやスマホで実際にそのサイトを開いた状態のもの、いわゆる「モックアップ」と呼ばれるものも提出する必要があります。
そんな時や、スマホの写真の画面にちょっとおしゃれなサイトを開いているような合成写真を作りたい時なんかにおすすめのはめ込み合成のコツをご紹介。
手間や時間をかければ結構素敵なものはできるけど、そんなに時間をかけないで、サクッとできる手順です。

 

ベース画像を開く

まずは、ベースとなるスマホやPCの画像をPhotoshopで開きます。
今回は、フリー画像からコレを使ってみます。

Photoshopを開き、メニュー「ファイル」⇒「開く」から、ベースの画像を開いてください。

 

はめ込みたい画像を準備、配置

次に、画面にはめ込みたい画像を準備し、今開いたベース画像の上に配置しましょう。
今回使うサンプルはコレ。Apple Watchのページのスクリーンショット。

完全余談ですがApple Watch2を買ってすぐ3が出て悔しい思いをした、あのApple Watchです。4が出ましたね。評判良いですね。僕は5が出た瞬間買い換えようと思います。
https://web-memo.jp/applewatch3/

はめ込みたい画像が決まったら、それを先程のベース画像の上に配置しましょう。
メニュー「ファイル」⇒「リンクを配置」で画像を選択。

こんな感じになりました。

では、次からモックアップの作成です。

 

サイズを合わせ「ゆがみ」で形を合わせる

まだ今は配置しただけです。
ベースの画像にあるスマホの写真の画面サイズと、用意したはめ込みたい画像のサイズ全く違いますね。
なので、まずは大きさを合わせましょう。

この時画像の比率が変わらないよう、Shiftキーを押しながら縮小してください。

サイズがだいたい同じくらいになったら、メニュー「編集」⇒「変形」⇒「ゆがみ」を選択します。

はめ込む画像の4隅を、ベースにあるスマホ画面の4隅と重なるように調整します。

 

立体感を付ける

これで、一応画面にはめ込みたい画像を同じ大きさ、同じ傾きで重ねる事ができました。
が、違和感ハンパないっすね。当然です。スクショだから立体感や影とかないですもんね。

では、それを付けていきましょう。
まずは立体感。

はめ込んだ画像を選択して状態で、レイヤーパネルの「fx」ってアイコン、「レイヤースタイルを追加」ボタンを押します。

そのメニューの中にある「ベベルとエンボス」を選択しましょう。

レイヤースタイルの設定画面が開きます。
スタイルで「ベベル(内側)」を選び、内側に影を作り立体感を出しましょう。

あとは、プレビューを見ながら調整します。
深さ・方向・サイズ・ソフトと、陰影の不透明度くらいをちょちょちょ~っといじります。

画面内側に影ができて、だいぶなじみましたね。

 

画面に陰影を入れる

最後の仕上げ。
スクショだからはめ込んだ画像だけ妙にくっきり見えますね。
なので、この画面に軽く陰影を入れてあげて、自然な写真にします。

またまたはめ込んだ画像のレイヤーを選択した状態から、今度はレイヤーパネルのシンプルなアイコン「新規レイヤー」ボタンを、Altキーを押しながらクリックします。

すると新規レイヤーダイアログが出るので、「下のレイヤーを使用してクリッピングマスクを作成」にチェックを入れ「OK」をクリックします。

そしたら、今のレイヤーの上に、新規レイヤーが出ました。

このレイヤーに、グラデーションをかけて陰影を作ります。

グラデーションツール」を選択しましょう。

グラデーションは、描画色を黒、背景色を白に設定します。

で、影ですが、今の画像を見ると右下に影があります。なので、左上⇒右下にかけて暗くなっていくのが自然ですね。

この場合は、グラデーションツールを右下⇒左上にドラッグしましょう。

 

クリッピングマスクが適用されているので、はめ込み画像が白黒のグラデーションになります。

黒が影になるので、なんか自然かな?という具合にうまくグラデーションを作ってください。
うまくいかなければCtrl+zで戻って何度か試せば良い感じに引ける時が必ず来ます!

良い感じに引けたら、レイヤーパネルから、このグラデーションレイヤーを選択し「レイヤーの描画モード」を、「通常」から「オーバーレイ」に変更します。

これで、画面に陰影がつきました♪

ですが、今回の場合だと少し左上が明るくなり過ぎて見えなくなってしまってますね。
こういう場合は、レイヤーの不透明度を調整して影を薄くしたり調整しましょう。

はい!コレで完成!!

 

手順まとめ

埋め込む画像、埋め込まれる画像を開いて、
1.ゆがみ
2.ベベル
3.グラデーション
の3ステップ!

こだわり出したらキリがありませんが、ひとまず影の方向だけわかってればこの3つの手順で結構サクッとモックアップができます。
時間をかけず簡単に、でも違和感ないモックアップを作りたいぞという時、ぜひお試しくださいませ~。

この記事を書いた人

うぇぶめも。運営者のたきおです。
ジョギング・草野球が趣味のクセにぽっちゃり体型。

自分の備忘録も兼ねて、ウェブ系のちょっとした情報などを発信しております。
気に入ってもらえればTwitter・Facebookなどでもフォローして頂けると励みになりますm(__)m

フォローしてくれると、うれしい。

ブログランキングに参加しました!
応援宜しくお願いします!!

にほんブログ村 IT技術ブログへ

Photoshop
フォローしてくれると、うれしい。
うぇぶめも。

コメント