意外とつまづく鏡面反射テクニック

Photoshop デザイナー ウェブデザイン テクニック

いいね

鏡面反射、本当にできてますか?

Photoshopで出来る、よく見かける効果といえば
グラデーション、ドロップシャドウ、そして【鏡面反射】です。

例えば、このようなものを反射してみると

このようになると思います。
単純にレイヤーを複製して、上下反転することで簡単に実現できます。

それでは、これではどうでしょうか?

同じ方法でやってみましたが、おかしいことがお分かりになると思います。

そもそも何がおかしい?

不自然さを感じてしまうのは、物理法則に則っていない反射が起きているからです。
本来、奥行きがあるものが反射した場合、映り込みはこのようになります。

このような奥行きのある立体的なオブジェクトを正しく反射させるための方法の1つをご紹介します。

立体鏡面反射の手順

まずは同じようにレイヤーを複製し、反転する

この時、元のboxの下にピッタリと張り付くように移動しておきます

奥行きが発生する始点から、範囲選択しレイヤーを複製

まず、反転させる側の要素が通常のレイヤーじゃない場合(スマートオブジェクト、シェイプなど)は、右クリックでレイヤーをラスタライズして通常レイヤーの状態にしておいてください。
長方形選択ツールで、奥行きの発生する部分から奥までをおおざっぱに選択し、右クリックで[選択範囲をカットしたレイヤー]を選択

すると、このようにレイヤーを2分割することができます。

 ※わかりやすいように動かしているだけなので、実際は動かさなくてよいです。

奥行きの終点に合わせる

移動ツールで選択し、[Ctrl+Shift]を押したまま、赤丸部分を上にドラッグして、奥行きの終点とピッタリ合うように変形してみます

反射していたら、見えるはずのない部分がある

これで完成かと思いきや、まだちょっと気になる部分が残っています。
反射していない、元のboxは箱の天面が見えています。
ということは、この箱を見ているアングルは、箱よりも高い位置にあるということになります。

よって、反射した部分に天面が映るということはありえない現象ですね。


 形も変だし・・・

この場合はばっさりこの部分をカットしてしまってもよいのですが、もっと簡単に誤魔化しましょう。

2つのレイヤーを1つに

先程分解した2つのレイヤーを、1つのレイヤーに結合します。


 ※2つのレイヤーを選択し、右クリック→[レイヤーを結合]

レイヤーマスクを追加

結合したレイヤーを選択し、レイヤーマスクを追加し、グラデーションツールで下の方を透過させてしまいます。

するとどうでしょうか、不自然な天面もうまく誤魔化しつつ、いい感じに反射率も下がってよりリアリティが出たんじゃないでしょうか?

この手順さえ知っていれば、後は応用

  • 奥行きに合わせて変形させる
  • 反射したら見えるはずがない部分はごまかす

上記に気をつければ、多少イレギュラーな形でもこの原理を利用して鏡面反射効果を付けてあげることができます。

箱物はもちろん

複雑なものまで

 流石に紹介した手順だけでは実現できませんが、原理は同じで対象に合わせて応用することで、このような自然な反射ができるようになります。

重要なのは、現実に存在できるかどうか

これはドロップシャドウやエンボス、光彩など全ての効果に言える事なのですが、「それが現実に存在できるか」を基準にしていくと自然な効果を与えられます。
また、この方法は手段の1つであり、他にも鏡面反射をする方法は存在しているので、みなさんも色々試してみてください。




アカウント登録をするとコメント・質問を書くことができます


採用検索 - 詳細条件の設定