見出し画像

#026 よくみるエフェクト(影と遠近感)の表現方法

おはようございます。こんです🦊
こちらのnoteで宣言した通り、昨日インプットしたことを記録します。今日で26日目。いよいよ、ラストスパート!

前回まで、お仕事上は出番の少なそうなエフェクトのチュートリアルに取り組んでましたがせっかくなので、今回はよくみるエフェクトについてやり方をインプットすることにしました。

今回のインプットの目的


  • よくみるエフェクト(影の付け方、遠近法の表現)についてやり方をあらためて習得し、時短につなげたい。


参考にしたデザイン


参考①:化粧品の真下にのびる影

出典:https://www.pinterest.jp/pin/718816790544654026/

参考②:人物の影

出典:https://design-library.jp/13795

参考③:遠近感のある表現

出典:https://www.pinterest.jp/pin/3377768459241686/

今回のインプットの成果


今回は、トレースというほどではないので、細かいバナー分析は行っていません。
参考1:影の作り方
参考2:画像や文字に自然な影をつける2つの簡単な方法
参考3:ぼかしを使った遠近感の作り方

参考サイトを見ながら、化粧品の影は「ぼかし(ガウス)」で作成し、人物の影はドロップシャドウでも作ってみて比較をしました。
※余談ですが、私は羊が大の苦手なので参考サイトの素材ではなくフラペチーノでやりました。

素材はUnsplashからダウンロード
素材はUnsplashからダウンロード
フラペチーノは、参考バナーから切り抜きました。
いちごはぱくたそからダウンロード。
  • 化粧品の影は、カラーオーバーレイで作成可能。ただし、参考①のように透明感のある(元素材を活用?)影をうまく作れなかったので引き続き練習!

  • 人物の背景でわかるように、ドロップシャドウで影をつけることもできるが若干不自然な感じがするのと範囲が限定されてしまう。影は、ぼかし(ガウス)で作るのが良さそう。

  • 奥にあるものを小さく、手前にあるものを大きく・且つぼかして配置することで遠近感が表現されて躍動感のある構図になる。また、ほかのトレースでも学んだが、商品の近くはあまり素材を配置せず・もしくは小さくするorぼかすことで商品そのものが一番目立つ構図になる。

  • いちごの素材には、遠近感の他に、フラペチーノの画像とトーンがあうように露光量を調整したクリッピングマスクをかけると、バランスが○。


おわりに

最後まで見てくださりありがとうございます。
これまでなんとなくやっていた、影や遠近法ですが作りたいものによってやり方がいくつかあり、表現も変わることがよくわかりました。必要に応じて使い分けて、バナーを作っていきたいと思います。
改めて習得してよかった!!

この記事が気に入ったらサポートをしてみませんか?