完成したWeb&アプリデザインをより魅力的に!無料PSDモックアップ素材まとめ

3mockupper

 

時間をかけて作成したWebデザインやアプリデザインを提案するときに、モックアップ素材をつかってより印象に残る作品に仕上げませんか。

 

海外デザインブログLine25.comで、Photoshopで編集可能な無料モックアップPSD素材をまとめたエントリー「40 Free Mockup Templates to Present Your UI Designs」が公開されていたので、今回はこちらをベースにブックマークしておきたいフリー素材をまとめてご紹介します。

 

 

スマートオブジェクト機能を利用した素材が多く、UIデザイン部分のみ別レイヤーで編集ができるので、クライアントへの提案やプレゼンテーション資料作成、Webデザインパーツとしても大活躍してくれるでしょう。

 

 

 

詳細は以下から。

 

 

 

PSDモックアップ素材の使い方

 

紹介している素材の多くは、パソコンやモバイル端末のディスプレイ画面部分を、個別で編集できるようになっています。

 

ダウンロードした素材ファイルを開くと、サムネイル右下にアイコンのついたレイヤーを確認できるかと思います。これをスマートオブジェクトレイヤーとなるので、ダブルクリックしてつづけましょう。

 

howto1

 

 

独立したレイヤーが起動するので、カンバスサイズに合わせてイメージファイルを貼り付けましょう。今回は当サイトトップページのスクリーンショットを使用しました。

 

howto2

 

 

ファイルの変更を保存すると、自動的にディスプレイ画面が切り替わっているのを確認できるかと思います。作業はこれだけ、簡単ですね。

 

howto3

 

 

 

Webデザインを魅力的に仕上げる、無料PSDモックアップ素材まとめ

 

Web Collage with a Perspective View

web_collage_preview_S-642x336

 

 

Flat Responsive Showcase PSD vol.2

21mockupper

 

 

Responsive Showcase PSD

22mockupper

 

 

Shadow Series Apple iDevices

techandall_shadow_series_apple_iDevices_S

 

 

Flat Apple Devices MockUp

合計78種類のモックアップを収録しており、こちらの記事で詳しく紹介しています。

17mockupper

 

 

Free Apple Devices Mokcup

18mockupper

 

 

Vector Apple Outline Mockups PSD + AI

vector-apple-outline-mockups-psd

 

 

Branding Identity Mockup vol.5

techandall_iDevces_collage_preview_small

 

 

iPhone 5S Minimal MockUp

iphone-5s-minimal-mockup-psd

 

 

iPhone 5S PSD Vector Mockup

10mockupper

 

 

iPhone 5c PSD Vector Mockup

14mockupper

 

 

iPhone 5 Mockups Freemium

11mockupper

 

 

Free iPhone Mockup PSD

13mockupper

 

 

iPhone 5s Mockup

iphone-5s-mockup600-642x336

 

 

Macbook Air Screen Mockup

19mockupper

 

 

MacBook Air Mockup PSD

mockupper4

 

 

Free SHowcase PSD

20mockupper

 

 

Retina MBP

8mockupper

 

 

iMac PSD

9mockupper

 

 

MacBook Air PSD MockUp

6mockupper

 

 

iPad Air PSD Mockup

25mockupper

 

 

PSD iPad Air Perspective Mockup

24mockupper

 

 

iPad Mini PSD Vector Mockup

26mockupper

 

 

Free iPad & iPhone 5s Mockups

23mockupper

 

 

Nexus 5 Mockup PSD

28mockupper

 

 

Google Nexus 5 Screen MockUp

33mockupper

 

 

Flat HTC One 3D MockUp

30mockupper

 

 

Nokia Lumia 920

36mockupper

 

 

 

RESOURCE iPhone 5sを自由にデザインしたい!無料Photoshopテンプレート素材まとめ

よりiPhone 5Sに特化して無料モックアップ素材をお探しの方は、こちらのエントリーも参考にどうぞ。

54

 

 

 

RESOURCE アプリ用モックアップ作成に使える、超立体的な無料PSD素材まとめ

モバイルサイト、アプリデザインを、より効果的に紹介する、モックアップ用テンプレートが揃っています。

perspectivepsd_top

 

 

サムネイル@ : MacBook AIr Mockup #2 – PSD Freebies

参照元リンク : 40 Free Mockup Templates to Present Your UI Designs – Line25.com