【Vol.3】Photoshop free Web Mockups（2パネル） + ダウンロード

フリーPSD モックアップの第二弾です。Dimensionで作成しています。今回のモックアップは、３枚でそれぞれ折り重なるように配置してます。３枚とも微妙に角度・大きさを調整しています。ダウンロードする場合は、ページの下部のボタンから行ってください。

[s_ad]

 

開発環境 / Development

OS	Windows 10 64bit
バージョン	Photoshop CC 2018
作成時間	–
ステップ数	–
テクニックのポイント	–

 

モックアップって何？

モックアップを作ることは、クライアントとのやり取りにおいて非常に重要な意味を持ちます。モックアップとは簡単に言うと「見本（模型）」のようなものです。プロダクトデザインなど、まず検討レベルの段階においてパソコン上で「ひな形」を作ることが多々あります。

この見本を作ることによって、クライアントはデザインやカラーを見て判断できるので、交渉もスムーズにいくでしょう。これは、「上司」や「グループ間」でのやり取りでも同じです。Photoshopであらかじめ完成されたモックアップを作ることによって、多彩なカラーバーリエーションやデザインを簡単に実現することができます。

 

【モックアップの利点】

[s_ad]

 

モックアップの使い方

ダウンロードしたPSDファイルを開いたら、オレンジ色のレイヤーを使って画像を合成してください。

 

２パネル – フロント

２枚がハの字型になるように配置しています。右側のパネルが小さいのはやや奥側になっているためです。今回は前回とは違い、床面にマテリアルを適用しませんでした。反射をなくし、艶を消しています。反射があると良いですが、非常に作業がしづらいことに気が付きました。

 

編集するレイヤー

ダウンロードしたPSDファイルを起動させると、下記のようなレイヤーとなってます。オレンジ色の箇所が編集レイヤーです。それぞれスマートオブジェクトのレイヤーとなっているので、（サムネイルを）ダブルクリックして、別ファイルで開き、画像をキャンバスの大きさに合わせてください。

 

スマートオブジェクトのサムネイルをダブルクリックして開いたら、画像を取り込みます。キャンバスの大きさにあうように、配置してください。

 

ダウンロードはこちらか

[wpdm_button_template id=21197 style=”instagram” align=”left”]

• ※再配布・販売・その他サイトへのアップロードはできません。
• 私的利用・商用利用が可能です。
• 付属のライセンスをご確認ください。

[s_ad]

 

ダウンロードボタンを押したら、下記のような画面になります。「ダウンロード」の青いボタンをクリックすると、ダウンロードが始まります。

 

きっと役立つPhotoshopのテクニックを向上させる記事

[f_PhotoshopPosts]