Photoshopのドロップシャドウ使い方【文字・図形に影をつける】

Photoshop講座
この記事は約 2 分で読むことができます。

この記事は約 2 分で読むことができます。

Photoshop(フォトショップ)を使う上で必須となるレイヤースタイル・効果について解説する記事の第3弾!

今回は『ドロップシャドウ』編です!

ASK
ASK
※この記事はPhotoshop(フォトショップ)を使ったことがない方や、レイヤースタイルって何?というような初心者の方向けの内容です。

レイヤースタイル・効果とは

Photoshop では、シャドウ、光彩、ベベルなどの様々な効果を使用して、レイヤーの内容の外観を非破壊的な方法ですばやく変更できます。レイヤー効果は、レイヤーの内容にリンクされています。レイヤーの内容を移動または編集すると、変更された内容にも同じ効果が適用されます。
出典:https://helpx.adobe.com/jp/

こちらがadobe公式サイトの説明ですが、わざと難しく書いてませんか?(笑)

簡単にいうと

  • レイヤー効果を使うと文字やシェイプなどに装飾を施すことができる
  • 例えば境界線、影、グラデーションなど
  • その装飾を他のレイヤーに移したり、コピーすることができる

ということが書いてあります。

デザインをするうえで必須スキルとなりますので、頑張ってマスターしましょう!

ドロップシャドウの基本設定

ドロップシャドウを使うことでレイヤーに影をつけることができます。

実際にやってみましょう!

まずはダイアログを開きます。影を付けたいレイヤーをダブルクリックしてください。

ドロップシャドウのダイアログ

いろいろな値がありますが、初心者の方が覚えるべきものは

  • 不透明度
  • 角度
  • 距離
  • スプレッド
  • サイズ
  • 描画モード

この6つをまずは完ぺきに使いこなせるようになりましょう!

ASK
ASK
ほかの値に関しては、たまーにしか使わないので、一旦無視してもらって大丈夫です。

不透明度

ドロップシャドウの不透明比較画像

不透明度の値を変えることで影の濃さを変えることができます。

値が小さいほど薄く、大きいほど濃くなります。

影が濃いとダサくなるので、ある程度薄くしておきましょう!

角度

ドロップシャドウの角度比較画像

角度の値を変えることで影がどの方向に付くかを決めることができます。

ですが、基本的には右下につけておけばそれっぽくなります(笑)

値によって影の方向を変えられるということだけ覚えておきましょう!

距離

ドロップシャドウの距離比較画像

0だと影が対象の真下に位置し、大きくなるほど対象から離れていきます。

離れる方向は先ほど決めた角度に依存しています。

迷ったら小さい値を設定しておけば問題ないでしょう。

スプレッド

ドロップシャドウのスプレッド比較画像

スプレッドはいわば鮮明度です。

値が小さいとぼんやりとぼやけた影、大きいほどはっきりとした影になります。

注意したいのは濃さが変わるわけでないということ!

不透明度を60%にしている場合、60%の濃さのままはっきりとした表示になります。

画像の一番右はスプレッド100%に設定しているのですが、ここまでくると影というよりベタ塗りですね。

ドロップシャドウのスプレッドで立体文字を作る方法1

このように影を右下にずらして配置することで簡単に立体的な文字を作ることができます。

描画モード横をクリックすると影の色を変えることもできるので試してみてください!

サイズ

ドロップシャドウのサイズ比較画像

その名の通り影の大きさを決める値です。

値が大きくなるほど薄くぼんやりとした表示になります。

それを加味して先ほどのスプレッドと不透明度を一緒に調整しましょう!

描画モード

上記5つの値を設定したら最後に描写モードを選択しましょう。

といってもほとんどの場合は「通常」のままで大丈夫です。

写真に文字を乗せる場合など、たまーに使うことがあるくらいです。

初心者の方は

  • 通常
  • 乗算
  • スクリーン
  • オーバーレイ

この4つの違いを覚えておくといいでしょう!

光彩(外側)の描画モード比較画像

通常 基本的にはこのモードを使うことをおすすめします。
描画効果がかからず、背景の影響を受けません。
乗算 乗算は背景と色をかけ合わせて表示します。
明るい部分は暗く、暗い部分はより暗くなります。
スクリーン スクリーンは乗算と逆です。
暗い部分は明るく、明るい部分はより明るくなります。
オーバーレイ オーバーレイは乗算とスクリーン2つの要素を併せ持ちます。
背景が暗いと「乗算の効果」背景が明るいと「スクリーンの効果」が適用されます。
感覚的には乗算とスクリーンのいいとこどりって感じです!
全体的に鮮やかさが上がったように見えるので、「不透明度」を調整して使うといいでしょう。

📖 Photoshopをもっと本格的に学びたい方へ

Photoshopはプロのデザイナーなら必須のツールです。独学では遠回りになりがちなスキルも、デジLIG(旧LIG)なら現役デザイナーに教わりながら最短で習得できます。補助金を活用すれば、費用の最大70%が還付されます。

※完全無料・オンライン可・強引な勧誘なし

このスキルをWebの仕事に活かすには?

ドロップシャドウをはじめレイヤースタイルを使いこなすと、バナー・LP・Webデザインの現場でそのまま活かせるスキルになります。

Webデザイナーへの転職・フリーランス独立を考えているなら、Webデザイナー転職に強いエージェント10選で自分に合ったサポートを見つけましょう。未経験OKのエージェントも掲載しています。

まとめ

自分の作ったバナーが、なんかのっぺりしているなぁと悩んでいる方は文字に影をつけてみるのをおすすめします!

影をつけるとデザインが立体的になるので初心者感がだいぶ消えると思いますよ!

ASK
ASK
ぜひ今回の記事を参考にしてドロップシャドウを使ってみてください!
Photoshopのレイヤー効果を学ぼう

Photoshopなどのデザインスキルを本格的に仕事にしたい方は、デジLIG(デジタルハリウッドSTUDIO by LIG)の評判・料金・補助金解説もあわせてご覧ください。

よくある質問

Q. Photoshopのドロップシャドウとは何ですか?

レイヤースタイルの一種で、オブジェクトの下に影を追加する機能です。文字やアイコンを浮き上がって見せたり、立体感を演出したりするのに使われます。

Q. ドロップシャドウで調整できる主な設定項目は?

角度(光源方向)・距離(影のずれ量)・スプレッド(影の広がり)・サイズ(ぼかし具合)・不透明度・カラーを調整できます。各パラメータを組み合わせることで自然な影から大げさなエフェクトまで幅広く表現できます。

Q. Photoshopのレイヤースタイルを実務レベルで使いこなすには?

光彩・境界線・ドロップシャドウなど複数のスタイルの使い分けに慣れることが重要です。デジLIG(旧LIG)のようなデザインスクールで現役デザイナーの指導を受けることで、実案件で通用するPhotoshopスキルを効率よく習得できます。

よくある質問(Photoshop ドロップシャドウ)

Q. ドロップシャドウとはPhotoshopのどの機能ですか?

「レイヤースタイル」の一種で、テキストや画像・図形の背後に影(shadow)を追加する機能です。レイヤーをダブルクリックして「レイヤースタイル」ダイアログを開き「ドロップシャドウ」を選択します。

Q. ドロップシャドウの色・角度・サイズは変えられますか?

はい。すべて数値で細かく調整できます。「カラー」「角度」「距離(オブジェクトと影の間隔)」「スプレッド(影の輪郭のぼかし具合)」「サイズ」の5項目を設定します。

Q. 文字と画像の両方にドロップシャドウをつけられますか?

どちらにも適用できます。テキストレイヤー・画像レイヤー・シェイプレイヤーすべてにレイヤースタイルとして適用可能です。

あわせて読みたい

独学でWebデザインを学んでいる方 → 独学の限界を感じているサインを確認する

📌 Photoshopを仕事に活かしたい方へ

独学でPhotoshopを学んだ先のキャリアパスを解説しています。

Photoshopを仕事にする手順はこちら →

このPhotoshopスキルをポートフォリオで証明したい方はこちら:
Webデザイナー転職に強いスクール&ポートフォリオ対策まとめ【2026年版】

コメント