• 2017年12月19日

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

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

【Vol.4】Photoshop free Web Mockups（4パネル） + ダウンロード 700 433 パソコン生活サポート Pasonal

フリーPSD モックアップの第４弾です。Dimensionで作成しています。今回のモックアップは、４枚でブロック状に配置してます。ダウンロードする場合は、ページの下部のボタンから行ってください。

 

開発環境 / Development

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

 

モックアップって何？

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

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

 

【モックアップの利点】

  • 結果を素早く修正することができる。
  • 作業効率が大幅にアップする。
  • 異なるバリエーションに対応させることが可能。

 

モックアップの使い方

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

 

４パネル – フロント（イン・ルーム）

４枚がブロック状になるように配置しています。それぞれのパネルは微妙に前後が付いてます。今回は、ルームを作り、その中にパネルを配置しています。

４パネル - フロント（イン・ルーム）

 

編集するレイヤー

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

編集するレイヤー

 

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

画像の取り込み

 

ダウンロードはこちらか

お詫び（2017/12/19）：Vol.１～２に不備が見つかりました。すでにダウンロードされている方は再度ダウンロードをお願いいたします。それ以外のVolは問題なく利用することができます。

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

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

 

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

ダウンロードはこちらか

 

その他のモックアップ

[f_Mockups]

 

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