【初心者向け】超簡単 レイヤー マスクを使ったディスプレイイメージの作り方【Photoshop】

こんにちは rey (@reydesign8376)です

Photoshop、Illustratorを愛用してます

大好きなAdobe製品について語っていきたいと思います

それでは早速〜*

目次

超簡単にできるレイヤー マスクを使ったディスプレイイメージの作り

↑こういった画像を見たことありませんか?モックアップ言うらしいんす

制作したサイトをイメージとして、スマートフォンやデスクトップ、タブレットなどディスプレイ画面に反映させてお客様に提案したり、自分のポートフォリをいい感じにしたり…

Photoshopのレイヤーマスク機能で超簡単に作れます!

Appleストアから素材をダウンロード

まずは、Appleから素材をダウンロードします

マーケティングリソースとアイデンティティに関するガイドライン

すでにレイヤーマスクが作られていて、簡単に編集できるようになっているます!

なので、今回はAppleストアのものを使い説明をしていきます

他にも色々な素材があるので好きなものを使ってみてください!

Photoshopで開く

▼ 手順です

iphone 11Pro Max.psd をPhotoshopで開きます

レイヤー名:iPhone 11 Pro Screen <Open to Update Screen> に触れると

[スマートオブジェクト サムネール]と表示されます。編集OKのサインになります

ダブルクリックし画面を切り替えます。

レイヤー名:Backgroundの上に画像を取り込み、サイズを調整します

Backgroundは消しても問題ないです。

保存形式は変えずに、.TIFFのままで保存してください

iphone 11Pro Max.psdデータに戻ります。

か、変わっている〜!

ここまでの作業時間:30秒!

あとは、レイヤー名:White_BGを目隠しし背景を透明にします。

これで保存OK

iMac27.psdも同様に編集します

新規作成して新しいアートボード を作ります

iMac27.psdとiphone 11Pro Max.psdを挿入します

セットになっていないものは実物サイズと比率を合わせて設置します

ちなみに実物サイズはこちら

iMac27 幅59.8cm×高(画面部分まで)33.6cm

iphone 11Pro Max  幅7.78cm×高15.8cm

以上で完成です*

背景を変えてオリジナルのイメージにしてもいいですね

お疲れ様でした*

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次