アイキャッチに使える『MockupPhotos』の使い方

こんにちは。シュンです。
今回は「mockup.photos」の使い方について紹介していきます。

MockupPhotosとは?

例えば、「PLACE IMAGE HERE」というところに、、、

Image from GyazoImage from Gyazo

この様にブログのページの画像を写してみました。
実際にスマホの画面に写っている訳ではないですが
好きな画像やイラスト、写真をスマホやパソコンの画面に合成できるサイトです。

アイキャッチとして活用できますし、モックアップにも使えます。

使い方

会員登録

サイト(https://mockup.photos/)へ移動しましょう。
会員登録が必要になるので画面右上の「Sign up」をクリック。
すでに登録してる人は「Log in」をクリック。
Image from Gyazo
「Sign up」をクリックすると入力画面が出ます。
指示に従って「First name」「Last name」メールアドレスとパスワードを入力しましょう。

また、Facebookのアカウントで登録もできます。

Image from Gyazo

背景画像選択

画面左上にある「Browse」「Freebies」から選択します。
「Freebies」は無料背景素材が選択できます。
「Pricing」は有料会員登録画面に飛びます。もちろん無料の画像を使います。
Image from Gyazo

Browse all

「Browse all」をクリックすると写したい画面背景が選べます。
テレビ、スマホ、タブレット、iPhone、、などなどデバイス画面を選択してください。

Image from Gyazo

背景画像の選択

背景の画像を選択します。
今回は無料の画像を使うので背景画像の右下に「FREE」とついてる画像を選択します。

Image from Gyazo

画像の合成

無料画像の種類も非常に多いです。

利用目的によりますが
例えば、『どのデバイスからもサイトが見れます』ってことを画像でひと目でアピールしたいのでPC、タブレット、スマホが並んでる画像を選択しました。
Image from Gyazo

URLを指定、またはファイルをアップすることで画面に表示できます。
URLは個別で指定できるので画像別で貼り付けれます。

URLを指定すると赤くなるので少し待ちましょう。
Image from Gyazo

こちらが合成後。
これでPC、タブレット、スマホから見れるのがわかりますね。

Image from Gyazo

ダウンロード

サイト下に行くとダウンロードボタンがあります。
サイズを選択してダウンロードも出来ますし、
好みのサイズに変更してダウンロードできます。

Image from Gyazo

まとめ

こういった使い方も出来ます。
使い方として間違ってるかもしれませんが下の画像ならイラストや写真にしてもいいですね。

Image from GyazoImage from Gyazo

いかがでしたでしょうか?
最後までみていただきありがとうございます。是非共有をお願いします。

コメントを残す

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

CAPTCHA