【初心者向け】ドロップシャドウを使って文字や図形に影をつける方法【Photoshop】

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

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

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

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

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

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

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

簡単にいうと

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

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

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

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

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

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

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

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

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

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

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

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

不透明度

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

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

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

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

角度

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

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

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

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

距離

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

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

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

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

スプレッド

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

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

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

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

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

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

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

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

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

サイズ

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

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

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

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

描画モード

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

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

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

初心者の方は

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

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

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

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

まとめ

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

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

ASK
ASK
ぜひ今回の記事を参考にしてドロップシャドウを使ってみてください!
Photoshopのレイヤー効果を学ぼう
デザイナーを目指すならスクールに通おう

当サイトでは、
本気でWebデザイナーになりたいならデザインスクールに通うことをおすすめしています。

なぜかというと、デザインの勉強は独学では難しいからです。

独学が難しい理由

  • モチベーション維持が難しい
  • 自分のデザインの良し悪しを判断できない
  • 無意識のうちに、好きなデザインばかりを作ってしまう
  • いくら勉強しても就職できるかは別問題

デザインというものは勉強すればするほど上達できるわけではありません。

プロに見てもらいながら、正しく勉強して初めて、デザインは上達するんです。

独学で無駄な時間を費やすくらいなら、多少お金はかかってもWebデザインスクールに通って最速でデザイナーになるべきです!

当サイトおすすめのWebデザインスクールについては下記リンクよりご覧ください!

おすすめWedデザインスクール17選!現役デザイナーが解説します!
Photoshop講座
スポンサーリンク

応援クリックをポチッとお願いします!
ブログランキング・にほんブログ村へ   

ハジデザ | 初めてのWebデザイナー転職

コメント