見出し画像

mock-up

製品やサービスのデザインや機能を試作するために使用される模型やプロトタイプのこと。例えば、ウェブサイトやアプリのデザインを試すために、画像やスクリーンショットを使ったデザインのモックアップを作成することがある。

簡単に言うとWebサイトやアプリケーションを作成・開発する際に、製品の初期設計を具現化した「見本品」となるもののことを言うらしい


mock-upの作り方

今回自分が学習した内容としては、

  1. 嵌め込みたい画像を読み込む

  2. 入れたい画像を読み込む

  3. 「編集」→「変形」で形を整える

  4. 角をペンツールで整える

実にシンプル。難しい操作が無くてわかりやすい。
しかし上記のやり方では個人的には角を整えるのが面倒手間だった(いっそイラストツールで合成してしまったほうが早いかもしれない)
なので、

  1. 嵌め込みたい画像を読み込む

  2. 矩形で形を作る

    • この時点で嵌め込みたい画像のサイズで作っておく

  3. シェイプレイヤーを右クリックでスマートオブジェクト化

    • ※必ず変形前にスマートオブジェクトにしておく

  4. 「編集」→「変形」でシェイプの形を合わせる

    • 紙などの歪みがあるものは変形したうえでワープ

  5. 入れたい画像を上からクリッピングして保存

  6. 適用されている!

スマートオブジェクト化することにより画像の入れ替えが簡単になるため、今後別のmock-up制作の時短になる。
先にスマオブ化する方法も考えたけど、結局後から変形の手間があるからやっぱり矩形で作った状態のものをスマオブ化するほうがいい、貼るだけだし。


いいなと思ったら応援しよう!