【Photoshop】ドロップシャドウをさりげなく使ってキレイ目デザインを作る方法

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）のレイヤー効果の1つに「ドロップシャドウ」という機能があります。
便利なの機能なので使われている方も多いはずです。

そんなドロップシャドウの使い方で気を付けておくと良いポイントを解説します。
フォトショ使ったデザイン制作の初心者の方にオススメのコンテンツです。

では早速始めていきましょう！

この記事の目次

ドロップシャドウとは？

ドロップシャドウとはレイヤー効果の1つです。
対象レイヤー内のオブジェクトに対して影を落とすことができます。

ドロップシャドウの操作にはPhotoshopが必須。
未導入の方はフォトプラン公式サイト（月額は最安の1,180円）から入手できます。

レイヤー効果の基本操作と応用

ドロップシャドウをはじめとしたレイヤー効果の使い方は下記で紹介しています。

【Photoshop】レイヤースタイル、レイヤー効果の使い方とコピペ方法

【Photoshop】レイヤースタイルで水滴や汗を作る方法【PSD有り】

ドロップシャドウのちょっとした差

イモ臭いドロップシャドウの例です。
2000年代初頭のWEBサイトの文字装飾で使われそうなドロップシャドウです。
アリと言えばアリなのですが、何となく「もちゃっ」としていますよね。

影の距離や濃さを気持ち抑えめにし、シャドウが「あるか無いか」くらいの加減にしてあげるとキレイ目にできます。
わずかな立体感を感じられるくらいの塩梅。
ドロップシャドウは「頬張り過ぎ」に注意です。

ドロップシャドウありと無しを比較しました。
微妙な違いでドロップシャドウがあるか分からないくらいです。

この「ドロップシャドウがかすかに感じられる」程度がポイントです。

ドロップシャドウを使ったサンプル

写真素材にドロップシャドウを適用した文字を乗せた例です。

なお、使用している無料素材はコチラで詳しく解説しています。
素材の品質を重視するなら断然AdobeStockがオススメです。

黒っぽい写真に影を落とした場合

黒っぽい写真にドロップシャドウを適用した例。
※クリックすると拡大します。

上がドロップシャドウあり、下がドロップシャドウ無しです。
白抜き文字を配置するだけでも良いのですが、少しドロップシャドウを効かせるとで質感や奥行き感を付与できます。

白っぽい写真に影を落とした場合

白っぽい写真にドロップシャドウを適用した例。
※クリックすると拡大します。

背景色が変わるだけでドロップシャドウの印象も随分と変わります。

カラーの付いた写真に影を落とした場合

色の付いた背景にドロップシャドウを落とした例。
※クリックすると拡大します。

ドロップシャドウの色を微妙に変えています。
上は背景色を濃く（#462d00）したもの、下は単なる黒（#000000）です。
背景色に寄せると色馴染みが良くなります。
ちょっとした事ですが、こういう所の積み重ねが仕上がりに関係してきます。

サンプルPSD

fantiaで当記事のサンプルPSDを公開しています。
よかったらダウンロードしてください！

※PSDを編集するにはPhotoshopが必須、未導入の方はAdobe公式サイトから入手しておきましょう。

写真を大変身させる高品質エフェクト

単なる写真を超短時間で全く違った表現にできる高品質なエフェクトです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのフォトショエフェクトです。

#01 Realistic Watercolor Photo Effect Mockup

水彩風エフェクトです。
タッチが違えば同じ水彩でも全く別物となります。
着彩や線画の残し方、ブラシの筆跡やリアルな水彩用紙の質感など、隙がありません。

ダウンロード

#02 Detailed Oil Paint Effect Mockup

筆のタッチ1本1本までリアルに再現してくれる油彩風エフェクトモックアップです。
本当に油彩で描くと何時間、何十時間と掛かりますが、このPSDをダウンロードして適用すると一瞬で終わります。

ダウンロード

#03 Splatter Paint Stains Art Portrait Effect Mockup

絵具のしぶきで描いたようなタッチにできるフォトショップ用エフェクトです。
背景透過にした人物に適用するだけでサンプルのような仕上りになります。

ダウンロード

#04 Pencil Sketch Effect

鉛筆タッチにしてくれるPhotoshopエフェクトです。
手数の多いタッチを一瞬でリアルな鉛筆タッチにできます。

ダウンロード

#05 Vintage Retro Comic Effect Filter Mockup

ビンテージな雰囲気を残したコミック風にしてくれるエフェクトです。
ドットの付け方がレトロで良い感じですね。

ダウンロード

#06 Engraved Old Print Effect

まるで紙幣に描かれている人物のような質感にしてくれるPhotoshop用のエフェクトモックアップです。
再現度が激高、非常にハイクオリティなエフェクトの一つです。

ダウンロード

Photoshop用の高品質なエフェクト集

Photoshopで使える商用利用可能な高品質エフェクトをピックアップしました。
フォトショ初心者の方でもプロの品質を圧倒的短時間で実現できるチートアイテムです。

【Photoshop】写真を全く違うグラフィックに変える高品質なエフェクト50選【商用可】

【Photoshop】写真を超短時間で大変身させる高クオリティなエフェクト51選【商用可】

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）のドロップシャドウの使い方のコツについてでした。
慣れないうちはついドロップシャドウを濃くして落としがちです。

ドロップシャドウを強くしすぎると野暮ったさが出てしまうので要注意！
さらりとしたドロップシャドウの使い方をするとキレイ目デザインに寄せることができます。
ちょっと設定の値を変えるだけで印象が変わってくるので、意識をしながら調整を入れてみて下さい。

また、noteで当記事で作成したサンプルPSDを無料配布しております。

ではまた！

レイヤー効果を使った作例

レイヤー効果の基本や作例、無料のレイヤースタイルを紹介しています。

【Photoshop】レイヤースタイル、レイヤー効果の使い方とコピペ方法

【Photoshop】レイヤースタイルで水滴や汗を作る方法【PSD有り】