スマホの画像をモックアップに合成

2019年10月07日

Tips
2
Windows10 iPhone
ブログにPCやスマホの画面を貼り付ける際に、PCのキャプチャ画像はデスクトップ全体よりもウィンドウ部分を切り取ることが多いと思いますが、スマホのスクリーンショットは画面全体になると思います。 そこで今回は、ダウンロードしたモックアップを利用して簡単に合成画像を作成する手順です。

スマホの画像をPCに取り込む

スマホをPCにUSB接続して、Windowsのエクスプローラ等からスマホに保存した目的の画像をPCにコピーする。
MEMO

Windows10の場合は、標準画像ビューワーのフォトにあるインポート機能を利用すれば、PC内のピクチャにフォルダ保存できます。

モックアップ画像ファイルのダウンロード

① ブラウザでFacebook Designにアクセスすると、最新機種を含む殆どのiPhoneに加えて、他社の主要スマホやPC、タブレット用のモックアップもダウンロードできます。
② 使用する機種をクリックして、PC内の任意の場所にzipファイルを保存する。
アカウント登録などは不要で、ダウンロードしたモックアップにクレジットは入りません。

③ 解凍して出来たフォルダをダブルクリックで開く。

④ 機種名のフォルダをダブルクリックで開く。
⑤ Deviceをダブルクリックで開く。
⑥ スマホ本体の色別にモックアップ画像のファイルが入っている。

モックアップに画像ファイルを合成する

ここではフリーの画像編集ソフトGIMPを使用して合成します。

① GIMPを起動して、「ファイル」→「開く/インポート」またはドラッグ&ドロップでモックアップ画像のファイルを読み込む。

② その上から合成するスマホの画像を、同じ手順で読み込む。
③ iPhone X等の場合は、隠れてしまったディスプレイ上部のベゼルと角の丸みを正常に表示させるため、「レイヤー」→「重なり」→「レイヤーを背面へ」をクリック。
④ 合成の完了。
⑤「ファイル」→「名前を付けてエクスポート」で、合成した画像を保存する。
MEMO

保存の前に「画像」→「画像の拡大/縮小」で、ブログに貼り付けるサイズに合わせる事も出来ます。

⑥ 保存したPNG画像は、必ずTinyPNG等で圧縮してからアップロードして下さい。
スマホの機種によっては編集ソフトでのレイヤー調整の必要がないので、cssだけで合成することも可能です。

その他

余白が気になる方は、モックアップ画像のファイル自体をトリミングして別名で保存すると、その都度トリミングする手間が省けます。

モックアップをトリミングする場合は、合成時の位置ズレ防止の為、上下と左右のトリミングするピクセル数を必ず同じ値にする必要があります。

2 件のコメント

まだコメントはありません

-

2019/10/14 (Mon) 18:45

12: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2019/10/20 (Sun) 11:48
ススム

13: To 非公開コメントさん

こんにちは、コメントありがとうございます。
テンプレートのカスタマイズに夢中で、たった今コメントに気が付きました (苦笑)

非公開コメントさんも着々と乗り換え作業を進めておられるご様子で、そちらも参考にさせていただきます。
返信が遅くなり、すいませんでした。