dsa

【Photoshop】デザインの幅が一気に広がるドロップシャドウ活用法


立体感を出すデザインをするにあたって、必要不可欠なドロップシャドウの活用法をご紹介します。
デザインをする上で、必ず一度は使用する機能の一つですが、意外と同じ設定ばかり使用していませんか?
ドロップシャドウについて理解を深め、デザインの幅をもっと広くしましょう!

ドロップシャドウの基本操作

レイヤースタイルパネルから、ドロップシャドウを設定します。
後から編集がしやすいので、初心者や修正などがあるWebデザイナーなどにおすすめです。
まずは、レイヤーをダブルクリックして、レイヤースタイルパネルを立ち上げましょう。
レイヤースタイルパネルを開きます

 

描画モード

描画モードを編集

シャドウの描画モードを設定します。
基本的に「乗算」か「焼きこみ(リニア)」を選択しますが、場合によっては、異なる描画モードを選択するのもいいかもしれません。
色の変更もできますので、デザインにあった描画モード、色に調整してください。

 

描画モードの比較

 

不透明度

不透明度の設定

シャドウの透明度を調整します。
100%が不透明で、0%が透明です。
光が強くあたっているように表現する場合は、100%にします。0%にしてしまうと、シャドウが表示されませんので、
ご注意ください。

 

不透明度の設定の例

 

角度

角度を設定する

シャドウの角度を設定します。
包括光源を使用にチェックを入れると、他のレイヤーに適用した角度に統一されますので、基本的には
同じ角度になるように、チェックを入れた方が望ましいですが、変更したい場合は、チェックをはずしておきましょう。

 

角度の設定の例

 

距離

距離を設定する

シャドウとオブジェクトとの距離を設定します。
距離の数値を上げれば上げるほど、シャドウが離れていきます。
背景との距離なので、より立体感を出すことができますが、あまり数値を大きくしないように気を付けましょう。

 

距離の設定の例

 

スプレッド

スプレッドを設定する

スプレッドは、シャドウのぼかし具合のことで、100%がぼかし無し、0%がぼかし有りです。
数値によって、シャドウの密度が変化します。
基本的には、数値を低く設定しますが、レトロな濃い影を付けたい場合は、100%がおすすめです。

 

スプレッドの設定の例

 

サイズ

サイズを設定する

シャドウのサイズを設定します。
0にすると、オブジェクトと同じ大きさのシャドウが完成します。
スプレッドと大きく関わっており、サイズを大きくすることによって、ぼかし具合を調整することができます。
数値は、基本的には低めに設定をします。

 

サイズの設定の例

 

ドロップシャドウ活用法

ドロップシャドウのみでレタープレス加工をつくる

レタープレス加工

ポイントは角度です。
マイナスの値にすることによって、文字の内側にシャドウができるように見え、へこんでいるような効果を与えることができます。
ちょっとしたデザインにも使いやすいのでおすすめです。

二重文字をつくる

二重文字
ピンクと黄緑のずらした文字を作成してみました。
不透明度とスプレッドを100%にすることで、ぼかしのない、文字と同じサイズのシャドウを作ることができます。

黒背景にもシャドウを使う

黒背景にもシャドウを使う

白のシャドウを使用することで、光彩のような表現をすることができます。
スプレッドと不透明度を上手く使い、柔らかい白色のシャドウを作りました。
シャドウの色を白色に設定する際は、描画モードを「通常」に設定しておくことをおすすめします。
※黒い背景に「乗算」を設定すると、シャドウが透明になったように見えなくなります。

まとめ

ドロップシャドウについて、基本から活用法までご紹介しましたが、いかがだったでしょうか。
設定する項目がたくさんあるので、デザインの幅も広がります。
ワンパターンになりがちなドロップシャドウですが、いろいろ試して、デザインによってしっかり使い分けができる
ようになりましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticlePhotoshopで写真にモザイクを入れる方法