• LIGの広告成功事例
WEB

【Photoshop加工チュートリアル】写真に雨を降らせよう!

【Photoshop加工チュートリアル】写真に雨を降らせよう!

こんにちは、メディア事業部デザイナーの佐藤タカアキ(@sato_tkaaki)です。
最近隣の席のまゆが時折「ふふっ。ふふふふふ」と一人で呟いているのを見て底知れない闇を感じずにはいられません。

ところで皆さんは、闇と雨の関連性については知っていますか?
ここでいう闇とは心の闇のことで、人は雨を見ると心の闇をさらけ出すことに躊躇しなくなるらしいです。(たしかに雨の日のTwitterは皆いつもと違う気がする・・・)
また、映画やドラマでも雨に降られるシーンは悲しみを表現していることが多いですよね。

そんなこんなで、今回はPhotoshopを使って簡単に雨を降らせる加工方法をご紹介したいと思います。
せっかくの機会なので、人物モデルに「水もしたたるいい男」を用意しました。
それではいってみましょう。

写真を読み込む

まずは雨を降らせる前に、人物や背景などの下準備から始めていきましょう。

02

Photoshopを起動し、あらかじめ用意しておいた「水もしたたるいい男」を読み込みます。Photoshopにペッ!っと貼るだけなので2秒くらいで済みますね。

写真を切り抜く

人物写真を切り抜くとき、髪の毛の切り抜きって最高に面倒ですよね。

03

ただ、雨を降らせる合成をするときは、どのみちモデルの境界線は(背景と馴染ませるため)ぼかすので、ザックリで大丈夫です。

背景をつくる

写真を置く

背景に大雨の写真を置きます。

04

背景は2枚重ねて作りたいので、複製して上の写真は非表示にしておきましょう。

写真をぼかす

05

複製した大雨写真のうち下のレイヤーの写真を「フィルター」→「ぼかし」→「ぼかし(ガウス)」でぼかします。今回は10pxに設定しました。

写真を重ねる

06

次に、非表示にしておいた上のレイヤー写真を表示させ、不透明度を60%にし描画モードをソフトライトに設定します。

レイヤー順序を入れ替える

07

現時点でレイヤーは上から「人物写真」→「雨①」→「雨②」となっていると思いますが、これを「雨①」→「人物写真」→「雨②」の順に入れ替えます。

人物写真の色調補正

上の過程で人物写真がだいぶ雨に馴染んだかと思います。
ここから、より全体図に馴染ませるために人物写真自体を加工していきましょう。

Camera Raw フィルターで色調補正

人物写真を選択し、「フィルター」→「Camera Raw フィルター」を選択します。

09

基本補正の色温度を-10、色かぶり補正+5、コントラストを+40、ハイライトを+10、シャドウを+20、白レベルを+10、明瞭度を+100に。ディティールのシャープ適用量を20、グレースケール(彩度)のブルーを+30に設定します。
ついでに、露光量フィルターを使用し顔のほっぺた部分に光を当てましょう。

人物写真の輪郭をぼかす

より馴染ませるために、人物写真と背景写真の境界線をぼかしていきます。

10

人物写真をラスタライズ後、ぼかしツールで輪郭部分をぼかしていきましょう。こうすることで、背景に馴染むだけでなく写真の遠近感も出てきてより立体感が増します。

人物写真の一部分をヌルっとさせる

人物写真がより雨に濡れてる感じを出します。

11

人物写真を複製し、上の人物写真を「フィルター」→「アーティスティック」→「ラップ」でヌルっとさせます。
数値はハイライト10、ディティール10、滑らかさ6くらいで良いかと思います。

雨を降らす

ここまで少し長くなりましたが、ここからいよいよ雨を降らしていきます。(背景で既に雨降ってるじゃねえかというツッコミは受け付けません)

新規レイヤーを作成

12

一番上に新規レイヤーを作成し、黒く塗りつぶします。

フィルター効果で雨の元をつくる

レイヤーが真っ黒になったら「フィルター」→「描画」→「ファイバー」を選択します。

13

ここでの数値はお好みで結構ですが、だいたい変化が50〜60、強さが10くらいが良いかと思います。

動きをつける

雨の元画像ができたら、より雨っぽくするために動きをつけていきます。

14

不透明度を25%くらいにし、「フィルター」→「ぼかし」→「ぼかし(移動)」を選択します。
数値は、距離が50〜60、角度はその時々の写真によって調整しましょう。

色調補正

人物写真に続いて、この雨も色調補正していきます。

15

レベル補正フィルターを使用し、適当に調整してください。(やらなくてもいいです)
適当に調整したら雨画像の描画モードを比較(明)に設定しましょう。

より雰囲気を出すために

寄り道もしましたが、雨の降らせ方としては上記の加工方法で完了です。
ただ、雨というものはあくまでも主役ではなく演出のうちの1つだということを心に留めておいてください。
ここからは、より人物写真が際立つ演出を行っていきます。

とりあえず日本刀を加えてみる

なんの変哲もない日本刀を置きました。

16

こちらも2本の刀を重ねており、上の刀の描画モードをオーバーレイ、下の刀はラップ加工を施して背景に馴染ませています。

水しぶきをつける

激しい雨が刀を弾く表現を取り入れることで、刀に躍動感が生まれます。

17

水しぶきは「水しぶき ブラシ」などで検索するとやさしい職人さんたちが大量に配布してくれてますのでそちらをご参照ください。

別種の雨を少し足す

先ほどとは違うタイプの雨を作ります。

18

縦に細長い長方形を作ったら、「フィルター」→「ぼかし」→「ぼかし(移動)」を選択します。
数値は角度が-80、距離は120くらいがちょうどよいと思います。適当な数を作成し配置したら、描画モードを「オーバーレイ」に設定します。

桜ふぶきを足してみる

日本刀と言ったら桜ふぶきだろうという単純な思いつきから足してみました。こちらも「さくらふぶき ブラシ」などで検索して探してみてください。

19

半ばおふざけで入れた感もありますが、今回の人物写真は遠くを見つめる表情をしているので、一枚絵の中で遠近感や奥行きを出すためには良いスパイスになります。
なので、ブラシをそのまま使うだけでなく、花びらによってサイズ・透明度を変えたり、ぼかしてみたりして色々調整してみましょう。

仕上げ

最後に頬に十字傷をつけ、全体のトーンカーブを調整したら完成です。

20

人間の表情に何かを加工するときは、角度や露光量、シャドウに注意して合成しましょう。

さいごに

Photoshopは本当にさまざまな機能があり、なんでもできる魔法のツールですが、その機能の多さゆえに使ったことのない機能があるかと思います。
今回1枚の絵を作っていく中で、ジャンル違いの機能を多々組み合わせて使いました。説明書を読んで機能を理解するのはもちろんですが、それ以上に実際に使用してみて感覚で覚えていくのも1つの手です。
作りたい絵のイメージが出来上がったら、完成図から逆算してレイヤーを切り分け一気に作りこんでいきましょう。

次回もまた、Web業界ではあまり需要のないPhotoshop画像合成記事を書いてみたいと思います。

それではまた。

 

【Photoshopの機能を使いこなす!】

Photoshopでゲームのようなドット絵を描く方法と設定&おすすめツール

Photoshopで芝生やレンガの写真からシームレスなパターンテクスチャ素材を作る方法

Photoshopで濃淡をつけて山脈のような3D画像を作成する方法

PhotoshopとIllustratorで画像をポリゴン風に加工する方法

Photoshopのハイパスフィルタを使った凄いレタッチの紹介

この記事を書いた人

佐藤タカアキ
佐藤タカアキ デザイナー 2014年入社
3年目に突入したのですが、デザイナー兼カメラマン的なフワフワした立ち位置で、良くも悪くも毎日多忙な日々を送っているフリをしています。