WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

はーちゃん

2026/05/26

【Photoshop】鏡面反射の作り方

投稿者: はーちゃん
カテゴリー: デザイン >Photoshop

化粧品や飲料系の広告などで、商品が下に反射して映り込んでいるデザインを見たことはありませんか?

この「鏡面反射」は、商品にツヤ感や高級感を与え、写真をワンランク上のビジュアルに見せてくれる表現のひとつです。
特に化粧品・香水・飲料など、透明感やみずみずしさを演出したい商材と相性がよく、覚えておくと表現の幅が広がります。

今回はPhotoshopのマスクとグラデーションを使って、鏡面反射を作る方法をご紹介します。

画像を用意する

まずは写真を用意します。今回は化粧品のボトルの画像にしました。

画像から被写体を切り抜く

次に、ボトル部分を切り抜いていきます。
画像レイヤーを選択した状態で、メニューバーから「選択範囲 → 被写体を選択」をクリックします。

すると、以下のようにボトル部分だけが選択された状態になります。

この状態で、レイヤーパネルの「レイヤーマスク」をクリックします。

以下のように化粧品のボトル部分だけを切り抜くことができました。

複製して反射している部分を作る

次に、反射部分を作るためにさきほど切り抜いた画像を「Ctrl + J」で複製します。

後からでも調整できるように、複製したレイヤーを右クリックして「スマートオブジェクトに変換」を選択します。

ここから画像を反転させて反射部分を作っていきます。
複製したレイヤーを選択して「Ctrl + T」で自由変形の状態にし、右クリックで「垂直方向に反転」をクリックします。

画像を反転させることができました。

鏡面反射っぽくするために、反転させたレイヤーを化粧品ボトルの下の方へ移動させます。

すると、化粧品ボトルが下の方に映り込んでいる様子を作ることができました。

マスクとグラデーションで調整する

このままでもだいぶ鏡面反射しているように見えるのですが、より完成度を上げるため、ここからマスクとグラデーションを使って調整していきます。

まずは、レイヤーパネルで、反転させた画像を選択した状態で「レイヤーマスク」をクリックします。

次に、マスクに対してグラデーションをかけていきます。

マスクを選択した状態で、左のツールバーから「描画色:白・背景色:黒」になっているのを確認したうえで、「グラデーション」をクリックします。
上部のオプションバーから、グラデーションの種類が選べるので、「基本フォルダ → 描画色から背景色へ」を選択します。

グラデーションの種類を設定したら、商品の下あたりをクリックし、より下の方へドラッグをしてグラデーションをかけていきます。
すると、マスクに白から黒のグラデーションをつけることができました。

マスクが白いほど画像がはっきり見え、黒いほど透けて見えるようになっているので、グラデーションの白丸や黒丸、ひし形の位置を動かして、より鏡面反射っぽく見えるように調整してみてください。

ここから、さらに反射している感じを出すためにぼかしを入れていきます。
反転させた画像レイヤーを選択した状態で、メニューバーから「フィルター → ぼかし → ぼかし(ガウス)」をクリックします。

ぼかし(ガウス)パネルが表示されるので、半径を設定して「OK」をクリックします。
今回は「半径:1.5pixel」にしましたが、皆さんの好みのぼかし加減になるように調整してみてください。

すると、商品の下に反射して映り込んでいる様子を作ることができました。

今回は、より化粧品の広告っぽくするために配置を変えたり、あしらいを追加したりしてみました。
こちらで完成です!

まとめ

今回はマスクとグラデーションを使って、鏡面反射を作る方法をご紹介しました。
高級感やみずみずしさをプラスしたいときにおすすめの表現なので、ぜひ皆さん試してみてください!

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ