• 2017年12月14日

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

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

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

投稿記事にはアイキャッチやコンテンツなど様々なカタチで画像が使われます。ブログを頻繁に書いている人ならば、思い通りの画像を作成する苦労はよく理解できるのではないでしょうか。そこで役に立つのが、モックアップの存在です。作業を簡略化してくれるだけではなく、素早く作業することができ、結果的に楽に作ることができます。まさしく、モックアップはブログの作成に欠かせない存在となっています。

海外ではかなり活用されているモックアップですが、日本のサイトからダウンロードできるところはなかなかありません。別に海外からでも良いのですが、ダウンロード制限があったり、リンクが複雑だったりと、なかなか検索するのに面倒くさいですよね。「Vol.1」となっているように、今後もいくつかフリーのモックアップを作って提供していく予定です。

暇な時にサイトをのぞきに来てくれると、新しものがアップされているかもしれません。

 

開発環境 / Development

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

 

モックアップって何？

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

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

 

【モックアップの利点】

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

 

モックアップの使い方

このステップではダウンロードしたPSD形式のウェブ モックアップの使い方を解説しています。モックアップの作成に慣れている人は読み飛ばしても構いません。

 

【手順１】ファイルをオープン と スマートオブジェクトアイコン

ダウンロードファイルをオープンし、「panel１」レイヤーのスマートオブジェクトアイコンをダブルクリックします。

ファイルをオープン と スマートオブジェクトアイコン

 

【手順２】画像を配置する

スマートオブジェクトアイコンをクリックすると、別のファイルが起動します。画像を挿入し、モックアップのフレームに沿うように変形させてください。画像はフレームからはみ出していても構いません。どうせ、レイヤーマスクで隠れるからです。下記のようにレイヤーを作成してください。

画像を配置する

 

ダウンロードはこちらか

お詫び：12月18日以前にダウンロードしたユーザーにお詫び申し上げます。ダウンロードのPSDに不備がありました。再度ダウンロードしてお使いください。

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

  • ※再配布・販売・その他サイトへのアップロードはできません。
  • 私的利用・商用利用が可能です。

ダウンロードはこちらか

 

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