時間をかけて作成したWebデザインやアプリデザインを提案するときに、モックアップ素材をつかってより印象に残る作品に仕上げませんか。
海外デザインブログLine25.comで、Photoshopで編集可能な無料モックアップPSD素材をまとめたエントリー「40 Free Mockup Templates to Present Your UI Designs」が公開されていたので、今回はこちらをベースにブックマークしておきたいフリー素材をまとめてご紹介します。
スマートオブジェクト機能を利用した素材が多く、UIデザイン部分のみ別レイヤーで編集ができるので、クライアントへの提案やプレゼンテーション資料作成、Webデザインパーツとしても大活躍してくれるでしょう。
詳細は以下から。
PSDモックアップ素材の使い方
紹介している素材の多くは、パソコンやモバイル端末のディスプレイ画面部分を、個別で編集できるようになっています。
ダウンロードした素材ファイルを開くと、サムネイル右下にアイコンのついたレイヤーを確認できるかと思います。これをスマートオブジェクトレイヤーとなるので、ダブルクリックしてつづけましょう。
独立したレイヤーが起動するので、カンバスサイズに合わせてイメージファイルを貼り付けましょう。今回は当サイトトップページのスクリーンショットを使用しました。
ファイルの変更を保存すると、自動的にディスプレイ画面が切り替わっているのを確認できるかと思います。作業はこれだけ、簡単ですね。
Webデザインを魅力的に仕上げる、無料PSDモックアップ素材まとめ
Web Collage with a Perspective View
Flat Responsive Showcase PSD vol.2
合計78種類のモックアップを収録しており、こちらの記事で詳しく紹介しています。
Vector Apple Outline Mockups PSD + AI
Branding Identity Mockup vol.5
PSD iPad Air Perspective Mockup
RESOURCE iPhone 5sを自由にデザインしたい！無料Photoshopテンプレート素材まとめ
よりiPhone 5Sに特化して無料モックアップ素材をお探しの方は、こちらのエントリーも参考にどうぞ。
RESOURCE アプリ用モックアップ作成に使える、超立体的な無料PSD素材まとめ
モバイルサイト、アプリデザインを、より効果的に紹介する、モックアップ用テンプレートが揃っています。
サムネイル@ : MacBook AIr Mockup #2 – PSD Freebies
参照元リンク : 40 Free Mockup Templates to Present Your UI Designs – Line25.com
