ガジェット通信

見たことのないものを見に行こう

【Photoshop小技 Vol.1】切り抜き画像に影をつけてなじませる

DATE:
  • ガジェット通信を≫

こんにちは! デザイナーの藤田です。
今回のブログではこれからWebデザイナーを目指していくという方向けに、普段よく使うPhotoshopの小技を紹介したいと思います。

【こちらもおすすめ】

切り抜き画像に影をつけてなじませる

切り抜いた画像をそのまま背景に配置したとき、浮いた感じがして背景になじまなかったり、シンプル過ぎてもう少しアクセントがほしくなったりしたことはありませんか? そんなときによく使う手法です。

それではやってみましょう。

まず、切り抜き画像を用意します

今回の記事では以下の画像素材を使用しております。

Cup of coffee with a dark cap|fotolia
https://jp.fotolia.com/id/90405596

画像の切り抜き手法は、以下の記事を参考にしてみてください。

影をつくる

配置した画像を「レイヤー」→「レイヤーを複製」から複製を行います。
※やり直しがきくようにスマートオブジェクトに変換しておきましょう。

 

複製した画像を「編集」→「画像変形」から影を表示させたい方向にゆがませます。

 

複製画像に「フィルター」→「ぼかし」→「ぼかし(ガウス)」を加えます。

 

複製画像に「レイヤー」→「レイヤースタイル」→「カラーオーバーレイ」を加え、複製レイヤーを黒く塗りつぶします。

影の質感をリアルにする

影の質感をリアルにするために、紙コップから離れた位置にある影は薄くなるようにしましょう。

複製画像にレイヤーマスクを追加します。

 

レイヤーマスクを選択した状態で「黒→白のグラデーション」を影にかけていきます。

 

位置や不透明度を調整し、より自然に見えるように仕上げていきます。

光源をつくる

いよいよ仕上げです。
「配置した影」と「前面のコップ」と「背景」をなじませていきます。

影を作成したレイヤーの背面に新規レイヤーを追加し、任意の色で塗り、影の向かう方向が暗くなるようにグラデーションをかけていきます。

 

紙コップの画像に調整レイヤー「明るさ・コントラスト」を加え、クリッピングマスクをかけた状態で画像の明るさを暗くします。

 

紙コップが暗くなったら、調整レイヤー「明るさ・コントラスト」の「レイヤーマスク」を選択し、描画色に黒を選択した状態で、紙コップの左半分をブラシツールでなぞります。

 

完成! 最後に作成したレイヤーを統一し色味を調整したら、完成です。

※作成した画像のコントラストと彩度が弱かったので調整をしております。
色味の調整方法は以下の記事を参考にしてみてください。

まとめ

いかがでしたか?

切り抜いただけの画像と見比べると、最後の画像の方が魅力的に見えますよね?
こちらの手法は、切り抜いた商品画像や人物の紹介画像をデザインに使用する際によく使う手法なので、ぜひ皆様もお試しください。

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

TOP