Topics インフォコネクト最新情報

【Photoshop】屈折した影を作る方法をご紹介!

【Photoshop】屈折した影を作る方法をご紹介!

Photoshopの豆知識

こんにちは!WebデザイナーのAYAです!
今回は『人物や商品に影を付けたいけど、屈折した影ってどうやって加えるんだろう…』?そんな時に使える方法をご紹介します。

【Photoshop】屈折した影を作る方法をご紹介!

完成版はこちらです!
さっそく、Photoshopで屈折した影を作成する手順を見ていきましょう。

【Photoshop】屈折した影を作る方法をご紹介!

まず最初に、背景画像と、商品画像(このブログでは以下グロス)を用意しておきます。?商品画像は事前に切り抜いておきましょう。

【Photoshop】屈折した影を作る方法をご紹介!

グロスをコピーして、【イメージ→色調補正→色相・彩度】を選択します。

【Photoshop】屈折した影を作る方法をご紹介!

彩度と明度を-100まで下げます。

【Photoshop】屈折した影を作る方法をご紹介!

次に、不透明度を40%くらいに下げて、?レイヤーをグロスにの下に移動します。

【Photoshop】屈折した影を作る方法をご紹介!

グロスのコピーを選択した状態で、【編集→遠近法ワープ】を選択します。

【Photoshop】屈折した影を作る方法をご紹介!

まず、壁の境目までドラッグアンドドロップします。

【Photoshop】屈折した影を作る方法をご紹介!

次は下から、壁の境目までドラッグアンドドロップします。
この時、画像の青枠のように、壁の境目がずれないように注意しましょう。
ドラッグアンドドロップで選択したら、画面上部にある『ワープ』をクリックして影を動かします。

【Photoshop】屈折した影を作る方法をご紹介!

影をイメージ通りに動かしたら、【フィルター→ぼかし→ぼかし(ガウス)】でいい感じのところまでぼかします。

【Photoshop】屈折した影を作る方法をご紹介!

最後にカラーオーバーレイで影の色を調整します。

【Photoshop】屈折した影を作る方法をご紹介!

完成です。
 

いかがでしたか。この方法を応用すれば、広告バナー、ウェブサイトの画像素材など、どんな場面でも目を引くデザインになるのではないでしょうか。

屈折した影を駆使した作品は、視覚的なインパクトを与え、プロフェッショナルな印象を与えることができます。
ぜひ一度試してみてくださいね!
 

Webの豆知識]関連記事

Service

Contact

インフォコネクトに相談してみませんか?

経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください