モックアップとは、自分の制作した作品を写真などの別の画像と合成させて、実際に配置した時のイメージや色合いを確認するための手法です。
依頼された制作内容がクライアントとのイメージとあっているのか、
イメージをすり合わせをするために効果的な役割を持ちます。
モックアップのやり方
モックアップのやり方もいろいろとありますが、ここでは簡単にCanvaのサイトを使ったモックアップのやり方とAdobe Photoshopを利用したやり方の２通りを記載します。
Canvaを利用したモックアップのやり方
①Canvaのサイトを開く
②Canva無料登録
③制作した画像の載せたい種類を選ぶ
例えば、パソコンならパソコン、スマホならスマホ、紙なら紙、ロゴならロゴと選択
④白紙が表示されるので、自分の制作した内容をドラッグしてアップさせる。（アップできない場合には、左側にあるUploadsより写真を取り込む）
Canvaに自分の制作した作品を取り込んだら・・
①左上にある「Effects」エフェクトを選択
②左側に表示されたEffectsの中から、「Smartmockups」を選択
Adobe Photoshopでモックアップのやり方
Photoshopでモックアップを作成するのですが、簡単にモックアップを作成するための素材を無料で提供してくれているサイトが多くあるので利用します。
Photoshopを利用して商用利用可能なモックアップの無料素材サイトを探す
GraphicBurger
*すべてが無料ではないですが、素材が多く更新頻度も多い。
GraphicBurgerのおすすめ素材
“3D Wall Logo MockUP2”
free-psd-templates
*無料はfreeとなっている素材のみ。
別でプレミアム（有料素材）
更新頻度が多く素材が多い。
blugraphic
“blugraphic”が配布している素材は商用利用可能。ただし、外部リンクから提供している素材を利用する際には商用利用可否のライセンス確認が必要です。
FDR
ほとんど商用利用可能ですが、一部不可のため利用時にはライセンスの確認が必要です。
Mockup World
*このサイトでは、別のサイトで紹介しているモックアップをまとめて紹介していて、気に入ったモックアップを選択すると該当する素材サイト先に案内されます。全てが無料ではないですが、まとめてモックアップを確認したい時に便利です。
Photoshopで作成する方法
【作成方法】
①無料のモックアップ素材を開く
②レイヤーを開いて、スマートオブジェクト（赤いレイヤー・左側）をダブルクリック
③スマートオブジェクトとして右側に新しい作成シートが作成される！
＊選択肢を選ぶ。
（ペースト形式はラスタライズさせる。
＊スマートオブジェクトで貼り付けると作品が変わらないのでおすすめ！）
④コピーした作品を貼り付ける（コピー）
⑤大きさや位置などを調整、追加で文字などを加えることもできます
（元の素材のテキストは削除）
⑥右側で作成した内容を”保存”する
⑦左側のシートに戻ると訂正した自分の制作内容のモックアップに変更されています！
コメント