Photoshopのドロップシャドウの使い方をマスターするチュートリアル

ドロップシャドウはウェブデザインで非常に人気のあるエフェクトです。
このドロップシャドウのエフェクトを使いこなすために、Photoshopのドロップシャドウの各種設定の使い方を紹介します。

サイトのキャプチャ

How to Use Drop Shadows in Photoshop

下記は各ポイントを意訳したものです。

ドロップシャドウとは

ドロップシャドウの主な用途は、2Dのイメージで3Dの奥行きをシミュレートすることです。これはオブジェクトが3Dの空間で背景の上に浮いていることを表すために、オブジェクトの後ろにオフセットのシャドウをつけます。

下記の例はドロップシャドウを変えることで、光源の大きさや距離の違い、背景からの距離が異なるのが分かるでしょう。シャドウを調整するだけで、イメージの見た目を劇的に変えることができます。

サイトのキャプチャ

レイヤースタイルのドロップシャドウ

まずは、Photoshopのレイヤースタイルのドロップシャドウを見てみましょう。レイヤースタイルの左のリストから「ドロップシャドウ」を選択すると、ドロップシャドウの各設定が表示されます。
繊細なドロップシャドウはあなたのデザインに刺激を与える最も良いエフェクトの一つです。

Photoshopのキャプチャ

描画モード

描画モードはシャドウの描画モードを設定します。
たいていの場合は「乗算」か「焼き込み(リニア)」を使用し、これはシャドウをオブジェクトの後ろにあるように暗くします。また、右のカラーピッカーでシャドウのカラーを変更することもでき、ちょっと特別なエフェクトを得ることもできます。

Photoshopのキャプチャ

下記の例は左がシャドウをブラックに、右が暗いブラウンにしたものです。シャドウのカラーを変えるだけで、まったく異なるスタイルになります。

サイトのキャプチャ

不透明度

不透明度のスライダーはシャドウがどのくらい透明かどうかを設定します。100%が完全に不透明で、0%が完全に透けて見える透明です。

Photoshopのキャプチャ

不透明度を25%と60%に設定してみました。不透明度を変えることにより、シャドウが目立つようになります。

サイトのキャプチャ

角度

角度を設定することで、光源の位置が定まります。また、「包括光源を使用」をチェックすることで、他のエフェクトも共通の光源になります。チェックをはずすことで他のエフェクトとは無関係に光源とシャドウの角度を設定できますが、たいていの場合はチェックして利用するほうがいいでしょう。なぜなら、光源は同一のものを持つことが望ましいからです。

Photoshopのキャプチャ

角度を変えることで、シャドウの入り方が変わります。「包括光源を使用」がチェックされているので、エンボスのエフェクトにも同じ角度が適用されています。

サイトのキャプチャ

距離

距離のスライダーはオブジェクトと背景の間の見た目上の距離を設定します。

Photoshopのキャプチャ

距離を左の2pxから、右の9pxに変更することで、右の方が手前にアップしたようなホバー時のような感じになります。

サイトのキャプチャ

スプレッド

スプレッドはシャドウのエッジのぼかしの設定です。たいていのシャドウは0%などの小さい数字がよいでしょう。エッジを強調したシャドウにするには100%にします。

Photoshopのキャプチャ

典型的なドロップシャドウは0%でよいでしょう。エッジを強調したハードなシャドウは100%は設定できます。

サイトのキャプチャ

サイズ

サイズはシャドウの見た目上のサイズを設定します。0にするとシャドウはオブジェクトとまったく同じ大きさです。

Photoshopのキャプチャ

サイズを大きくするということは、シャドウのサイズを単に大きくということではなく、柔らかさを与える効果もあります。

サイトのキャプチャ

輪郭

輪郭はデフォルトの「線形」以外にも多くの形があり、さまざまな形状でシャドウを次第に薄くさせることができます。「アンチエイリアス」のチェックをはずすことでパフォーマンスがあがりますが、シャドウの質が低下してしまいます。

Photoshopのキャプチャ

下記の例では輪郭を「U」の字にして、シャドウを後光のようなエフェクトにしています。

サイトのキャプチャ

ノイズ

ノイズはシャドウにざらっとした感じを与える設定です。もし土やコンクリートのようなスタイルを作るのであれば、ノイズを加えるとよいでしょう。フラットなシャドウは0%にしておきます。

Photoshopのキャプチャ

ノイズの量は慎重にしてください。下記は15%のノイズ量ですが、かなり勇気のいる量です。スライダーの範囲としては、0%-25%が目安です。

サイトのキャプチャ

ノックアウト

「レイヤーがドロップシャドウをノックアウト」はどういう意味でしょう。これが意味するものは非常にシンプルで、ある特定の状況で適用するだけです。この設定は基本的にはチェックした状態で使用します。

Photoshopのキャプチャ

下記はノックアウトの左がチェックをつけたもの、右がはずしたものです。左は透明のマスクがあり、塗りが透明でもその範囲にはシャドウが見えません。右はドロップシャドウが完全に見えるようになります。

サイトのキャプチャ

設定の保存と初期化

レイヤースタイルのそれぞれのエフェクトの設定を保存したり、読み込むことができます。「初期設定にする」をクリックすることで、Photoshopが現在のエフェクトをデフォルトの設定として利用できます。

Photoshopのキャプチャ

ドロップシャドウのサンプルファイル

元記事では、下記のサンプルファイルがダウンロードできます。
ドロップシャドウの設定をいろいろ試してみてください。

サンプルのキャプチャ

ドロップシャドウのサンプルのPSD

top of page

©2017 coliss