WEB

Photoshopの3D機能でロングシャドウエフェクトを簡単に作る方法

Photoshopの3D機能でロングシャドウエフェクトを簡単に作る方法

フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロングシャドウ」ってやつは割りと綺麗だなと個人的に思ってます。作り方はCSSならtext-shadowを利用したジェネレーター、Photoshopならスマートオブジェクトを使ったテンプレートやアクションなどがあります。今回は一味違うやり方で、Photoshopの3D機能を使っての作り方をご紹介します。

なぜ3Dで作ったほうが便利かというと、それは、このように、入射光を調整することが簡単に行えるからです。

 

ScreenFlow

あと、光の減衰で陰がだんだんとぼやけていくというちょっとリアルな表現もPhotoshopで簡単にできちゃいます。

※制作環境はPhotoshop CS6以上が必要です。

ロングシャドウをPhotoshopの3D機能で作る方法

3Dオブジェクトに変換

s1

レイヤーに右クリックして、テキストレイヤーを3Dオブジェクトに変換。(必ずしもテキストレイヤーである必要はないです)

3Dオブジェクトを回転

s2

デフォルトではテキストは地面に立っているようになっているので、X軸に沿って90度回転して、寝かしておきます。

カメラの設定

s3

カメラ(現在のビュー)を選択して、ビューを「トップ」にします。

 

s6

3Dモードで移動ツールを選択するとカメラの操作ができるので、一番右のツールを使って、テキストを適宜なサイズに拡大縮小します。

マテリアルを調整

s4

テキストをベタ塗りな感じにしたいので、マテリアルレイヤーを全て選択して、「拡散」と「スペキュラ」を白にしておきます。

光源を調整

s8

ライト(Infinite Light 1)を選択して、グリグリ動かしながら入射光の角度を調整します。

光源から離れた所ほど陰がぼやける表現

s9

ライトの属性パネルで「ソフトネス」を調整することで、陰のボケ具合を調整することができます。

 

p3

こんな感じになりますね。

光源から離れた所ほど陰が薄れる表現

s10

点光源にすれば、光源から離れた所ほど陰が薄れていく表現もできます。
ライトの種類をポイントスポットにして、「ライトフォールオフ」(光の減衰)をチェックして、内円や外円、ライトの位置を調整します。

 

s11

移動ツールを選択すると、スポットライトの内円や外円をドラッグで調整できます。

 

p4

すると、このようになります。

レンダリングする

最後に、ショートカットcmd(ctrl)+alt+shift+Rで3Dオブジェクトをレンダリングして終わりです〜!

まとめ

今まで重すぎて使い物にならなかったPhotoshopの3D機能ですが、CS6以降、ちょっとした3DのテキストエフェクトならPhotoshopだけでも物足りちゃうくらいになってきましたね。ロングシャドウに限らず、色んな場面で使えそうなので、読者の皆さんにも効率アップとクオリティアップのためにもどんどん活用していって欲しいのです〜!

longshadow-more

この記事を書いた人

王
バックエンドエンジニア 2012年入社
LIGの王です。ウェブの全てを学ぶ為、中国は四川省より日本にやってきました。王という名に恥じぬよう、ウェブ業界のKINGとなるべく日々頑張っております。よろしくお願いいたします。