【Photoshop】画像や文字を多方向に伸縮して「はめ込み画像」を作る方法

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）の「多方向に伸縮」を使って、テレビやスマホ画面・タブレット画面・PC画面などに別の画像をはめ込む方法をフォトショ初心者の方に詳しく解説します。
斜めアングルから撮影した端末に別画像をはめ込むには従来の [ Ctrl + T ] の変形では上手くいきません。

当記事はそんな「斜めから撮影した画面」に別画像や文字をはめ込む方法をゼロから解説します。
Photoshop（フォトショップ）初心者の方にも分かりやすく解説いたします！

では早速始めていきましょう！

この記事の目次

斜めから撮った画面に画像をはめ込む手順

正面ではなく、斜めから見た画面に対して任意の画像をハメ込む方法を解説します。
フォトショ初心者の方にも再現できるよう、順に解説いたします！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

素材を用意

今回はiPad Airの画面に別の写真をはめ込んでみたいと思います。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

STEP.2

Ctrl + Tでは上手くいかない

[ Ctrl + T ] (Mac：Command + T) の従来の変形では上手く画面に写真をはめ込む事ができません。

STEP.2

「多方向に伸縮（旧：自由な形に）」を適用

[ 編集 ] → [ 変形 ] → [ 多方向に伸縮（旧：自由な形に）] を適用します。

STEP.3

画像の四隅をつまんで変形

すると画像の四隅をつまんで自由な形に変形する事ができます。
画像の四隅をはめ込みたい画面の四隅に合わせてみましょう。

STEP.4

拡大してキッチリ合わせる

画面を拡大してキッチリと合わせておきます。

FINISH

完成

四隅の位置をキッチリ合わせた後に [ Enter ] または画面上部の [ 〇 ] を押すと変形の確定です。

以上ではめ込み画像作成が完了しました。

斜めアングルから見たiPad Airの画面にキッチリはめ込まれています。

遠近法ワープを使った方法

【Photoshop】遠近法ワープを使ったはめ込み画像の作り方を完全解説forフォトショ初心者

遠近法ワープを使ったはめ込み画像作成テクニックを試されてみませんか？はめ込み画像の差し替えが容易にできるモックアップ作成に適していますよ。

文字をパースに沿って変形させる方法

STEP.1

文字を入力する

[ 文字ツール(T) ] を使って文字を入力します。

※文字ツールの詳しい使い方はコチラの記事で解説しています。

STEP.2

シェイプに変換する

入力した文字レイヤーを複製します。

[ コピーした文字レイヤーを右クリック ] → [ シェイプに変換 ] を適用し、テキストをシェイプに変換します。

※上部にある [ スマートオブジェクトに変換 ] を適用してもOKです。

シェイプに変換されるとレイヤーパネルのサムネイルが変わります。

一度シェイプに変換すると文字の内容を再編集できなくなります。
コピーした文字オブジェクトをシェイプに変換するのがオススメ！

STEP.3

「多方向に伸縮（旧：自由な形に）」を適用する

先の画像はめ込みと同様に文字シェイプに対して [ 編集 ] → [ 変形 ] → [ 多方向に伸縮（旧：自由な形に）] を適用します。

STEP.4

4隅をパースに合わせて変形

シェイプの四隅を移動させてパースに合わせて変形させます。

FINISH

完成

[ Enter ] または画面上部の [ 〇 ] をクリックすると変形の完了です。

遠近変形のテクニック

【Photoshop】画像や文字を遠近変形させる方法forフォトショ初心者

画像や文字を遠近変形させるテクニックを解説しています。汎用的に使える遠近変形テクを併せてチェックされてみませんか？

高品質なモックアップ集

Photoshopで使える高品質なモックアップテンプレートです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。

#01 T-shirt and Packaging Mockup

Tシャツのモックアップです。
よくあるTシャツの平面図だとイマイチ伝わりませんからね、人が実際に着用してるモックアップだとよく伝わりますよ。

ダウンロード

#02 4 Hoodie Mockups

パーカーのモックアップです。
衣類のモックアップは貴重です。

ダウンロード

#03 Large Wall Advertisement in Shopping Mall Mockup

ショッピングモールの超巨大な壁面広告モックアップです。
ここまで大きい作品が掲載されると写メで撮りまくり！

デザイナーでなくてもPhotoshopはオススメ！
公式サイトのフォトプランから入手できます。

ダウンロード

#04 Wine Bottle Mockup

ワインボトルのモックアップです。
オリジナルラベルデザインをしたワインって素敵ですよね。

ダウンロード

#05 Open Magazine and Cover Mockup

雑誌の表紙と開いた状態のモックアップです。
折り目の影などがリアルに表現されています。

ダウンロード

デザインカンプ制作に役立つモックアップ集

【商用可】高品質なモックアップのPSD素材58選【Photoshop】

様々なジャンルで使える高品質なモックアップを50点紹介します。
全て商用利用可能！

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート45選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

まとめ

以上、「多方向に伸縮」を使って斜めアングルの画面に別画像や文字をはめ込む方法についてでした。
Photoshop（フォトショップ）を使った画像合成でよく使う機能の一つなので覚えておくと便利です。

フォトショを使わずにはめ込み画像を作りたい方は、下記に無料で使えるモックアップジェネレーターサイトを紹介しています。
はめ込み画像さえあれば簡単に作れるので時短できますよ！