画面の映り込みを消そう!ちょっとクオリティがアップするPhotoshop小技


こんにちは。デザインチームのスギムラです。
先日キングスマンゴールデンサークルで4DXデビューをしてきました。
アクションシーンでガッタンガッタン椅子は揺れるわ背後から何かに撃たれるわ水がかかるわ、2時間アトラクション乗った気分でした。

さて今回は、Photoshopで写真編集をする時に役立つ小技をご紹介します。

写真素材の画面に映り込みが!どうやって消せばいい?

もらった写真素材、よくみたらパソコン画面やテレビ画面に人やものが映りこんでる…
なんて経験はありませんか?

  • スタンプで消してみようとしても面積が広すぎて無理!
  • 黒い画面だから塗りつぶせばいいや!と思って塗りつぶしてみてものっぺりして写真ぽくない!

などなど。そんなお悩みを簡単に解決する方法をご紹介します。

今回はBPS社内で撮った写真を例に使います。

両方のパソコン画面に椅子やらなにやらが映り込んでます。このままでも使えないことはないですがどうせなら何も映り込んでない画面にしたい。ということでこれをいい感じに消していこうと思います。

目次

  1. 画面に合わせてマスク作成
  2. グラデーションレイヤーを作成
  3. ノイズをかける(一番重要!)

1. 画面に合わせてマスク作成

まずは左側のパソコン画面から。
パソコン画面は直線なので簡単にマスクが作れます。サクサク囲みましょう。

1-1. 選択ツールで画面を囲む
1-2. 囲んだままトーンカーブレイヤーを新規作成
1-3. マスク付きのレイヤーが完成

できました。
はみ出てたりする細かいところを微調整します。これはあとからでも大丈夫です。

【補足】マスクをなぜトーンカーブレイヤーにかけているのか

このあとクリッピングマスクでさらに色々な修正をのせていくためです。
それなら「空の新規レイヤーでもいいのでは?」と思われるかもしれませんし、もちろんそれでも機能上は問題はないです。
ただ「空の新規レイヤー」は何十枚もレイヤーを重ねていくと、中に絵を描いているレイヤーと混同してしまう可能性があります。
そのためこういう「マスクだけで中身はない」ようなものには調整レイヤーを使うことを私は習慣づけてます。トーンカーブを調整していなければ他レイヤーになんの影響もないレイヤーですので(「レベル補正」や「色相彩度」といったレイヤーも同様です)
こういった小さな修正なら上記のようなことは無いですし、その辺りの感覚は作業者によって違うので扱いやすいものにしてみてください。

2. グラデーションレイヤーを作成

2-1. 新規レイヤーを作成
2-2. グラデーションツールを選択
2-3. 画面の一番暗いところと明るいところの色を取ります(大体で大丈夫です)
2-4. 光源を確認しつつグラデーションを引く

出来ました。


これだけでもなんだかいい感じにな気もするんですが。

ここだけ「塗りつぶしました」感が気になります。
小さいサイズの画像なら、もちろんここで終わってもそこまで問題ないです。
が、今回はもうひと手間加えてもっとナチュラルな修正を加えてみましょう。

3. ノイズをかける

これが今回の小技で一番重要です。色々な写真レタッチにも応用ができます。

3-1. ノイズを加えるレイヤーの下準備

新規レイヤー作成→塗りつぶしでグレー50パーセントレイヤーを作ります

新規レイヤーを作成。

レイヤーを塗りつぶすには、編集/塗りつぶしを選択。

内容>50%グレーを選択してOK

50%グレーのレイヤーができました。

3-2. 作ったレイヤーに実際にノイズを加える

上記で作ったグレーのレイヤーをグラデーションレイヤーにクリッピングしておきます。

グレーのレイヤーを選択したまま、フィルター/ノイズ/ノイズを加えるを選択。

元写真と比べながらノイズ量を調整します。今回は「2%」に設定します。ぴったり合うことは難しいのでここは大体で構いません。

周りに比べてノイズがちょっとはっきりしてるな?もう少し粗めかな?と感じたので
ノイズレイヤーを130%に拡大しました。

いい感じにノイズができました。

3-3. レイヤーモードを「オーバーレイ」

作ったノイズレイヤーをレイヤーモード「オーバーレイ」に変更。
透明度も「80%」に変更してより周りとなじませます。

パソコンの画面枠(写真のまま)との違いがわからないくらいになじみました!

ノイズありとなしで比べてみました。

微妙な違いですが、ありとなしならある方が断然良い!(はず)

おまけ

隣のmac画面も同じ要領で映り込みを綺麗にしてみました。

【補足】

  • macの画面はツルツルして光沢があるので完全に映り込みを消すより、不透明度を下げて(90~95%程度)微妙に映り込みがあるくらいのほうがそれっぽくなる。
  • 周りの黒い枠部分も映り込みがあるのでそちらにも別途マスクを作成して同様に映り込みを消しています。
  • 「トーンカーブレイヤー」は色味の調整に使っているのみなので説明は省きます。グラデーションでいい感じの色が出せたらこちらは必要ないです!

完成

完成しました~!やった~!
塗りつぶせばこんなにめんどくさくないのでは?という人もいるかもしれませんが
やっぱり細部にこだわる方法を知っておいても損はないのではと思います。

今回はパソコン画面を例にしてみましたが、写真編集の際にPCで書き込んだものは、ノイズを乗せると大体がなじみます(たぶん)
なんだか写真に合わないな~?と思ったらノイズをかけてみるのはいかがでしょうか。

応用としてアスファルトを綺麗にしたり建物の窓を綺麗にしたりなどいろいろと使い道も紹介したいのですが
それはまた次の機会で!

そろそろ写真編集以外の記事もやろうかなと思いつつデザインチームのスギムラでした。

デザインに関するお問い合わせ

弊社では、ページ制作の業務範囲内で写真レタッチも請け負っております。
写真を効果的に使ったWebページ制作をお考えの方はぜひBPSへご相談を!

BPS x DESIGN

関連記事(デザイン)

Photoshopで写真レタッチ!昼の風景をクリスマスの夜に変えてみよう

Photoshop: スライス卒業で高速コーディング!効率的な画像切り出し方法2選

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

sugimura

Webデザイナー、イラストを描いたり写真のレタッチをしてみたり。ミーハーなのでエンタメ感がするものはだいたい好き。

sugimuraの書いた記事

関連する記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ