MENU
29Nov Photoshop講座 綺麗なもの

3分で分かる!モックアップの使い方〜iMac・名刺で実践〜

Web製作やなんやらでクライアントに企画案やデザイン案を見せる時に

クリックで拡大

こんな感じでシンプルに送るのも良いんです。

が!

たった3分程度の気遣いでもっと良い出来栄えにする方法があります。

それこそモックアップです。

クリックで拡大
クリックで拡大

先ほどの画像に合わせてこちらを送ったりすると第一印象が良くなります(経験談)

今回は、そんな何かと便利なモックアップの使い方を学んでいきます。

準備するもの
モックアップ素材
はめ込みたい画像

1、画像検索サイトで検索する

https://jp.freepik.com/

こちらのサイトは海外のフリー素材サイトです。

画像検索サイトにしては珍しくベクター素材(psdファイル・モックアップ素材)を多数取り扱っているのでブックマークしておくと非常に便利です:)

 


 
2、『mookup ○○』で検索する

現在モックアップ素材は日本語ではほとんど見つからないため、Googleの画像検索などで『mookup ○○(欲しい素材を英語で)』で海外のものを検索するのが手っ取り早かったりします。

クリックで拡大

ただ、利用規約を読み違えたりすると裁判沙汰になりかねないので、きちんと目を通しておきましょう

(例えば、商用利用不可のものを商用利用したりするのはNG)

 

モックアップの使い方〜iMac編〜

もし、モックアップに当てはめるために使う画像がない場合はこちらをお使いください

クリックで拡大し、保存しましょう

1、お好みのPSDファイルをダウンロードし、中に含まれるPSDファイルをクリックします。

クリックで拡大

ろっこ

PSDファイルはPhotoshop専用のファイルなのでクリックすれば自動的にPhotoshopが起動します:)

2、上のメニューバーからウィンドウをクリックし、レイヤーをクリックしましょう

クリックで拡大
 

 
3、レイヤーウィンドウが開くので、『Change This』と書かれているレイヤーのサムネイルをダブルクリックしましょう

クリックで拡大

無料体験版を使っていたり契約プランによっては『見つからないフォント』というウィンドウが表示される場合があります。

クリックで拡大

特に大きな支障があるわけではないので、『キャンセル』をクリックしてしまって大丈夫です。


4、ドラッグすると画像が青い線で囲まれるのでうまく拡大し、画面ぴったりになるよう調整します。位置が決まったらEnterキーで固定しましょう


5、位置が固定できたら、フォトショの上の方にある今開いてるウィンドウを閉じます。変更は保存しましょう

クリックで拡大
クリックで拡大

ろっこ

変更を保存しないと反映されません

6、手順2と同じようにうえメニューバー>ウィンドウ>レイヤーからレイヤーウィンドウを開き、使いたいレイヤーを目玉アイコンをクリックで表示・非表示を切り替えましょう


7、上のメニューバーからファイル>別名で保存をクリックし、ファイル名と保存場所を選べば完成です!

クリックで拡大

手順2でやったようにレイヤーウィンドウを開くと、(使うモックアップによって表現は異なりますが、)『Change color』、『Color』、『Background color』など色に関するレイヤーがあるので、そこから変更できます

クリックで拡大

ろっこ

とりあえず色の項目をいじってみて、間違ってたらCommand(Ctrl) + Zキーで元に戻せるので色々試してみてください:)

基本的に『レイヤー』をいじればなんとかなります

Macのモックアップ完成図

こんな感じで3分程度で簡単に作れてしまうのでやったほうがお得ですよね:)

モックアップの使い方〜名刺編〜

基本的にモックアップは単純なファイル構造のものが多いのですが、中には複雑なものもあります。そういった場合の対処法も含めて、名刺のモックアップを作っていきましょう。

もし使いたいファイルがない場合はこちらをどうぞ

クリックで拡大し、保存してお使いください

1、前章の手順1と2と同様、まずはPSDファイルファイルを起動し、レイヤーウィンドウを開きましょう

クリックで拡大
クリックで拡大

2-1、フォルダ・ファイルが多く、どれをいじればいいか分からないので、表示・非表示を繰り返し、変更するファイルを見つけだしましょう

ろっこ

今回は名刺の部分を変更したいので各レイヤーの目玉アイコンをクリックしていき、名刺の部分が消えたらそのレイヤーが今回使うレイヤーです

2-2、今回扱うレイヤーが分かったので、サムネイル部分をダブルクリックをしましょう

クリックで拡大

ろっこ

ちなみにサムネイルにこういったアイコンがついているレイヤーをスマートオブジェクトと言い、モックアップ内の変更すべきレイヤーはスマートオブジェクトです
クリックで拡大

3、ここに使いたいファイルをアップロードし、拡大・縮小して調整し、置きたい位置が決まったらENTERキーを押して位置を固定します。


4、ここまで済んだら画面上の方にあるウィンドウの閉じるボタンを押して、設定の変更を保存しましょう。

クリックで拡大

5、『Background』フォルダを開き、色の部分をダブルクリックし、背景色をお好みの色に変更したら完成です。

クリックで拡大
 
 

名刺のモックアップ完成図

クリックで拡大

まとめ

こんな感じで少し複雑な構造でも表示・非表示を繰り返せば簡単に作れてしまいます。

モックアップ素材は有料のものもありますが無料で高品質なものも多いので、使いこなせるようになればかなりお得です:)

Photoshopの基本的な使い方などをこちらでも無料で公開していますので参考にどうぞ。

関連記事【Photoshop】初心者と実践で学ぶフォトショップチュートリアル25
注意
当記事では初心者向けに取り急ぎ使い方を説明している記事ですので詳しい人からすれば『それは違うだろ!』『もっといいやり方ある!』という箇所もあるかと思いますがご容赦ください
- SHARE -