Advertisement

iphone7-mockup-ultimate-top

 

先週発表された Apple の新型 iPhone 7。ヘッドフォンジャックの廃止や防水防塵に対応したほか、任天堂からスーパーマリオのアプリが出るというサプライズも飛び出しました。その中でも、新色の光沢感たっぷりなジェット・ブラックへの人気が集まっているようです。

 

 

今回は、iPhone 7発表直後に公開された、Photoshop や Sketch でカスタマイズできるモックアップ用デザイン素材をまとめてご紹介します。ダウンロードしたファイルの Photoshop によるデザイン変更方法も簡単にまとめています、参考にどうぞ。

 

 

 

詳細は以下から。

 

 

 

モックアップ用PSDファイルの編集、カスタマイズ方法

 

今回紹介するPhotoshop 用モックアップのほとんどは、非破壊編集のできるスマートオブジェクト機能を利用することで、よりカスタマイズしやすくなります。まずは、ダウンロードしたモックアップ素材を Photoshop で開きましょう。今回は、iPhone 7 PSD Jet Black Mockup を参考にしています。

 

step1

 

 

次にレイヤーパネル上で、サムネイルの右端にアイコンマークの付いたレイヤーに注目しましょう。このマークは、レイヤーがスマートオブジェクトであることを意味しています。このレイヤーをダブルクリックすると、.psb ファイル形式の別ウィンドウが開くので、カスタマイズはここで行います。

 

step2

 

 

今回はサンプルとして、あの大人気アプリのUIデザインを再現した Pokémon Go mockup を利用しました。

 

step3

 

 

スクリーン画面をそのままカンバスに移動し、スクリーン中央にぴったり配置しましょう。このとき、Commmand+Aでカンバス全体を選択し、オプションバーより整列ボタンをクリックすることで、手軽に中央に揃えることができます。

 

step4

 

 

最後に.psbファイルを保存し、元のモックアップPSDファイルに戻ると、きちんとディスプレイ画面が変更されているのを確認できました。このように、スマートオブジェクト機能を利用することで、オリジナルファイルを編集することなく、より自由度の高いカスタマイズも行うことができます。

 

step5

 

 

 

新作 iPhone 7 を完全再現した、Photoshop や Sketch 用デザインファイルまとめ

 

JetBlack PSD Mockup

斜めに配置された iPhone7 を含め、デザインに使いやすい無重力状態のモックアップ素材2種類を収録しています。

jetblack-gustav-agrenjetblack_large-gustav

 

 

 

iPhone 7 & 7 Plus Jet Black PSD Mockup

前面と背面の2タイプのモックアップを、iPhone 7 と 7 Plus 用にそれぞれ用意した、立体的なデザインが特長。自由に画面ディスプレイを変更することもできます。

2233

 

 

 

iPhone 7 PSD Jet Black Mockup

新しい iPhone が発売されるたびに、高品質なモックアップ素材を無料公開する Pixeden からも PSD ファイルがすでにアップされています。

001-iphone-7-plus-resource-free-psd-mockup-presentation-jet-blackiphone-7-jet-black-free-mockup

 

 

iPhone 7 Mockup Free PSD

高解像度で表現された、フロントスタイルの iPhone 7 のPSDモックアップ素材。

iphone7_mockup

 

 

 

Free iPhone 7 Mockup

7500x5000px の超高解像度でプリント印刷にも対応できる PSD モックアップ素材のひとつ。

iphone-7-black-wassim

 

 

 

Free iPhone 7 Jet Black Mockup

こちらも新色ジェット・ブラックの光沢感を最大限活かした、横サイドから見た様子を表現できる PSD モックアップ。

iphone7-jet-black-mockup

 

 

 

Free iPhone 7 Sketch Mockup

Photoshop から乗り換えるユーザーも増えている、Sketch 用のiPhone 7 モックアップ素材。

iphone7-by-anoff

 

 

 

Free iPhone 7 – Jet Black Sketch Mockup

こちらも上記アイテム同様に、デザインアプリ Sketch で利用できるモックアップファイルで、ディスプレイ画面も自由に変更できます。

iphone_7_dribbble_2-pontus-borjesson

 

 

参照元リンク : iPhone 7 & 7 Plus: Early Free Mockup Collection – Freebiesbug