【7選】photoshopで作るドロップシャドウのツボとコツ!未経験でもワンランク上のWebデザイナーを目指す方法




中の人
こんにちは。
デザイナーは魔法使いじゃないと思ってるcoffeebreakの中の人です。

この記事の存在に気づいてしまったことは、photoshop(フォトショップ)で「ドロップシャドウ(影)の付け方にいつも苦労している」と悩んでいるのではないでしょうか?

もしかしたら、この記事を読み終わるとプロのドロップシャドウのノウハウが身に付つくかもしれません。

影は主にドロップシャドウ(影)という効果を駆使してデザインしていきます。
自分で作ってる時はデザインになじませて影をササッと用意して納品してきたので気にしてなかったですが、様々なデザインテイストで作っているうちにドロップシャドウ(影)は「デザインによって用途がどんどん変えないといけない!」という事が分かってきました。

ドロップシャドウ(影)が濃かったり、薄かったり、縁取られたり、フィルタでぼかしたり、ぼかしツールで書いたりと様々で、料理で言うと調味料というか味付けしだいで美味しくなるイメージに似ています。

今からWebデザイナーとして腕を磨いていく人、未経験でフォトショップの使い方を勉強している人はドロップシャドウ(影)のさじ加減を意識して作ってみる事をおすすめします。

ドロップシャドウ(影)は色味とパラメータのちょっとしたツボとコツを掴むだけでphotoshop(フォトショップ)で「使える影」は作れるのでがんばってやってみましょう!

記事の最後に編集済みのPSDファイルをダウンロードできるようにしました!
ぜひ記事のやり方をパクってドロップシャドウ(影)をマスターしてください!

ご注意
独学出身という事もあり私のデザインノウハウはセオリーと違う場合が多々あります。
そんな時は、やっぱり変な人だなと思いながら記事を読んでいただければ幸いです。

ドロップシャドウ(影)は味付け程度

デザインされたパーツになんでも間でもドロップシャドウ(影)を加えてもクドイだけです。
味付けの濃い料理を作っていると思ってください。さらっと必要な部分だけに効果をつけていきましょう。

中の人
デザインは料理の味付けで表現するとわかりやすいよ。
でも料理を作らない人には通じないので注意が必要だよ。

影はデザインを崩す場合もある

効果的にドロップシャドウ(影)を加えても逆に似合わない場合もあります。
濃淡の調整といったパラメータの調整で修正可能なケースが多いので要望にあった調整を心がけましょう。

影をなじませる工夫

Webデザイナーを目指している多くの人が見逃している工夫があります。

それが、

影の色です!

多くの人が黒色をベースの透過させてドロップシャドウ(影)を作っているのですが、背景色を抽出してその色を濃くしたものをドロップシャドウ(影)に設定してみましょう。

影がデザインによくなじみます。

ドロップシャドウ(影)まとめ①

私が、よく使うドロップシャドウ(影)をまとめてみました。
DLのリンクから編集ファイルをゲットできるので、パラメータの確認をしてみてください。

1.薄い影

薄いドロップシャドウ(影)は、デザイン(パーツ)の邪魔をせずに影の役割を果たせるので幅広く活用できます。

実際の仕上がりです。

パラメータ設定です。

しかし、

なんでもかんでも薄い影が良いという訳ではありません。

逆に濃くする事で訴求を強調する効果も必要なケースもあります。

2.濃い影

影は薄くするとキレイに仕上がるという情報があります。そのノウハウは作るうえで正解かもしれません。
しかし、訴求力を求める場合は影を濃くするという効果は有効な手段なのです。
ドロップシャドウ(影)の濃淡は目的に合わせて使い分けをする事でデザイン力が備わっていきます。

中の人
たとえば、バラエティ番組とかは派手な効果をつけるよね。
業界が違えば、求められる用途が変わってくるよ。

実際の仕上がりです。

パラメータ設定です。

中の人
他にも濃淡の使い分けをマスターしておけば、バラエティ豊かなデザイン性を求められるLPデザインでも幅広い対応ができるようになるよ。

3.シャープな影

iPhoneの登場とともにアプリのUIデザインが流行しましたが、その時に活用されたのがシャープな影に調整したドロップシャドウですね。
Webサイトではカチッとした仕上がりを求める時に、味付け程度にシャープな影を落とすデザインを施します。

実際の仕上がりです。

パラメータ設定です。

中の人
シャープな影はツール系アプリのUIデザインで活用した人も多いよ。

4.縁取りの影

シャープな影の派生型です。シャープにした影を距離と大きさで調整しデコぽく仕上げます。ライトで軽めなデザインに合わせると良いです。

実際の仕上がりです。

パラメータ設定です。

中の人
お菓子メーカーや食品メーカーのデザイナーさんはこの影の神レベルで使いこなすよ。
いろんなパッケージデザインをみて影の付き方を勉強してみてね。

5.内側の影

シャドウ効果で内側に影を付けるやり方で、photoshopの古いバージョンからかる効果ですね。
こちらもiPhoneの登場とともにUIデザインが流行し注目されたた影の付け方です。

実際の仕上がりです。

パラメータ設定です。

6.拡散型の影

Webサイトデザインで活用する幅は少ないかもしれませんが、広告デザインでは重宝する影の付け方です。
ネット上では拡散型ドロップシャドウという名称で呼ばれていますね。
めいいっぱいぼかしを効かせて、影の距離を調整する事で表現する方法です。

実際の仕上がりです。

パラメータ設定です。

中の人
私は、背景処理でこの影を使う事があるよ。
あとは文字の透明度を0にして影のみとか、変化を付けたいときに試してみてね。

ドロップシャドウ(影)まとめ②

まとめ①は基本的なドロップシャドウ(影)の方法です。②では変則的な手法をまとめてみました。

7.影を使った複合技

CC上位バージョンから効果を追加できます。これにより何重にも重なった影を演出できるので、
複雑なライティング環境で撮影されたオブジェクトの影を表現できます。

実際の仕上がりです。

パラメータ設定です。

ドロップシャドウのたった1つの注意点

デフォルト状態のドロップシャドウ(影)は影の角度を1つに固定しています。
角度のチェックを外す事で全ての影の角度を任意に調整可能です。
しかし、意図があって独立させておかないとバラバラなデザインに仕上がりドロップシャドウ(影)の説明がつかなくなります。

ドロップシャドウ(影)の記事は以上です。
さいごにツボとコツをまとめておきました。

  • 影は薄いだけではない用途に合わせて濃くする事も検討する
  • パラメータを上手く調整することでシャープな影、内側の影、拡散型の影を作り出す事ができる
  • ドロップシャドウ(影)は重ねる事ができる
  • 実際の光の角度に合わせて影を加える
  • ノイズ効果というった独特な手法も活用するケースはある
中の人
私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、
最後まで読んでいただいて感謝いたします。
ささやかながらPSDを用意したよ。

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【簡単!】気持ちのよい文字組み(カーニング)をマスターしてWebデザインスキルを磨こう!

2018.11.24

化粧品・コスメで訴求がしっかりしているランディングページ(LP)のデザイン6選

2018.01.28

【第1回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.15

【第5回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.11.13

【Webデザイン上達のコツ5選】普段の生活の中で、デザイン力を身につける方法!

2018.11.23


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google