Photoshopのドロップシャドウの使い方をマスターするチュートリアル
Post on:2012年5月14日
sponsors
ドロップシャドウはウェブデザインで非常に人気のあるエフェクトです。
このドロップシャドウのエフェクトを使いこなすために、Photoshopのドロップシャドウの各種設定の使い方を紹介します。
How to Use Drop Shadows in Photoshop
[ad#ad-2]
下記は各ポイントを意訳したものです。
ドロップシャドウとは
ドロップシャドウの主な用途は、2Dのイメージで3Dの奥行きをシミュレートすることです。これはオブジェクトが3Dの空間で背景の上に浮いていることを表すために、オブジェクトの後ろにオフセットのシャドウをつけます。
下記の例はドロップシャドウを変えることで、光源の大きさや距離の違い、背景からの距離が異なるのが分かるでしょう。シャドウを調整するだけで、イメージの見た目を劇的に変えることができます。
レイヤースタイルのドロップシャドウ
まずは、Photoshopのレイヤースタイルのドロップシャドウを見てみましょう。レイヤースタイルの左のリストから「ドロップシャドウ」を選択すると、ドロップシャドウの各設定が表示されます。
繊細なドロップシャドウはあなたのデザインに刺激を与える最も良いエフェクトの一つです。
[ad#ad-2]
描画モード
描画モードはシャドウの描画モードを設定します。
たいていの場合は「乗算」か「焼き込み（リニア）」を使用し、これはシャドウをオブジェクトの後ろにあるように暗くします。また、右のカラーピッカーでシャドウのカラーを変更することもでき、ちょっと特別なエフェクトを得ることもできます。
下記の例は左がシャドウをブラックに、右が暗いブラウンにしたものです。シャドウのカラーを変えるだけで、まったく異なるスタイルになります。
不透明度
不透明度のスライダーはシャドウがどのくらい透明かどうかを設定します。100%が完全に不透明で、0%が完全に透けて見える透明です。
不透明度を25%と60%に設定してみました。不透明度を変えることにより、シャドウが目立つようになります。
角度
角度を設定することで、光源の位置が定まります。また、「包括光源を使用」をチェックすることで、他のエフェクトも共通の光源になります。チェックをはずすことで他のエフェクトとは無関係に光源とシャドウの角度を設定できますが、たいていの場合はチェックして利用するほうがいいでしょう。なぜなら、光源は同一のものを持つことが望ましいからです。
角度を変えることで、シャドウの入り方が変わります。「包括光源を使用」がチェックされているので、エンボスのエフェクトにも同じ角度が適用されています。
距離
距離のスライダーはオブジェクトと背景の間の見た目上の距離を設定します。
距離を左の2pxから、右の9pxに変更することで、右の方が手前にアップしたようなホバー時のような感じになります。
スプレッド
スプレッドはシャドウのエッジのぼかしの設定です。たいていのシャドウは0%などの小さい数字がよいでしょう。エッジを強調したシャドウにするには100%にします。
典型的なドロップシャドウは0%でよいでしょう。エッジを強調したハードなシャドウは100%は設定できます。
サイズ
サイズはシャドウの見た目上のサイズを設定します。0にするとシャドウはオブジェクトとまったく同じ大きさです。
サイズを大きくするということは、シャドウのサイズを単に大きくということではなく、柔らかさを与える効果もあります。
輪郭
輪郭はデフォルトの「線形」以外にも多くの形があり、さまざまな形状でシャドウを次第に薄くさせることができます。「アンチエイリアス」のチェックをはずすことでパフォーマンスがあがりますが、シャドウの質が低下してしまいます。
下記の例では輪郭を「U」の字にして、シャドウを後光のようなエフェクトにしています。
ノイズ
ノイズはシャドウにざらっとした感じを与える設定です。もし土やコンクリートのようなスタイルを作るのであれば、ノイズを加えるとよいでしょう。フラットなシャドウは0%にしておきます。
ノイズの量は慎重にしてください。下記は15%のノイズ量ですが、かなり勇気のいる量です。スライダーの範囲としては、0%-25%が目安です。
ノックアウト
「レイヤーがドロップシャドウをノックアウト」はどういう意味でしょう。これが意味するものは非常にシンプルで、ある特定の状況で適用するだけです。この設定は基本的にはチェックした状態で使用します。
下記はノックアウトの左がチェックをつけたもの、右がはずしたものです。左は透明のマスクがあり、塗りが透明でもその範囲にはシャドウが見えません。右はドロップシャドウが完全に見えるようになります。
設定の保存と初期化
レイヤースタイルのそれぞれのエフェクトの設定を保存したり、読み込むことができます。「初期設定にする」をクリックすることで、Photoshopが現在のエフェクトをデフォルトの設定として利用できます。
ドロップシャドウのサンプルファイル
元記事では、下記のサンプルファイルがダウンロードできます。
ドロップシャドウの設定をいろいろ試してみてください。
ドロップシャドウのサンプルのPSD
sponsors
