こんにちは。6年目webデザイナーのさなです。
仕事で写真に太陽光をプラスすることがあったので、記録しておこうと思います。
フリー素材で思うようなものが見つからなかったので作ってみました。
![光の加工前と加工後](https://iroiro-lemon.com/wp-content/uploads/2020/07/before_after-1024x526.jpg)
実際に仕事で使用したものではなく、この記事用に作ったものです。
数値などは加工したい画像によってアレンジしてください。
Contents
放射状の光を入れる(7step)
![放射状の光を入れる](https://iroiro-lemon.com/wp-content/uploads/2020/07/shakou.jpg)
Step
加工する画像を開き、背景レイヤーを複製する。
※レイヤー名は「斜光」としました。
![レイヤーを複製](https://iroiro-lemon.com/wp-content/uploads/2020/07/layer-duplication.jpg)
Step
「斜光」レイヤーを右クリックして「スマートオブジェクトに変換」を選ぶ。
![スマートオブジェクトに変換](https://iroiro-lemon.com/wp-content/uploads/2020/07/smart-object.jpg)
memo
スマートオブジェクトにしておくと、後からレイヤーパネル上で③〜⑦の工程を後から調整できます。
![レイヤーパネルでフィルターの調整](https://iroiro-lemon.com/wp-content/uploads/2020/07/memo.jpg)
Step
「フィルター」→「描画」→「雲模様1」を選択する。
※描画色と背景色は白(#ffffff)と黒(#000000)にしておきます。
![雲模様](https://iroiro-lemon.com/wp-content/uploads/2020/07/kumomoyou.jpg)
Step
「イメージ」→「色調補正」→「2階調化」を選択。
「2階調化する境界のしきい値」を『150』に設定する。
「2階調化する境界のしきい値」を『150』に設定する。
※この数字は画像によってちょうど良いところが違うので、白黒のバランスをみて調整してください。
![2階調化](https://iroiro-lemon.com/wp-content/uploads/2020/07/nikaichouka.jpg)
![しきい値](https://iroiro-lemon.com/wp-content/uploads/2020/07/nikaichouka_150.jpg)
![2階調化後](https://iroiro-lemon.com/wp-content/uploads/2020/07/nikaichouka_ex.jpg)
Step
「フィルター」→「ぼかし」→「ぼかし(放射状)」を選択。下記のように設定します。
- 【量】100
- 【方法】ズーム
- 【ぼかしの中心】右上へドラッグ
![ぼかし/ガウス(放射状)](https://iroiro-lemon.com/wp-content/uploads/2020/07/bokashi.jpg)
![量・方法・ぼかしの中心を設定](https://iroiro-lemon.com/wp-content/uploads/2020/07/bokashi_set.jpg)
![ぼかし設定完了時](https://iroiro-lemon.com/wp-content/uploads/2020/07/bokashi_2.jpg)
Step
描画モードを「スクリーン」に、不透明度を「60%」に設定。レイヤーを拡大・回転させて光の位置を調整する。
![1.描画モードをスクリーン、不透明度を60%に](https://iroiro-lemon.com/wp-content/uploads/2020/07/layer.jpg)
![レイヤーを拡大・回転](https://iroiro-lemon.com/wp-content/uploads/2020/07/kaiten_kakudai.jpg)
![設定完了時](https://iroiro-lemon.com/wp-content/uploads/2020/07/layer2.jpg)
Step
ベクトルマスクを追加し、ブラシツールの「ソフト円ブラシ」を選択。
不透明度とブラシの大きさを調整して斜光に濃淡をつけるようにベクトルマスクを塗る。
不透明度とブラシの大きさを調整して斜光に濃淡をつけるようにベクトルマスクを塗る。
![マスクの追加](https://iroiro-lemon.com/wp-content/uploads/2020/07/mask.jpg)
![ソフト円ブラシを選択して不透明度を調整](https://iroiro-lemon.com/wp-content/uploads/2020/07/brush.jpg)
![光の濃淡調節後](https://iroiro-lemon.com/wp-content/uploads/2020/07/shakou.jpg)
スポットライトを追加する(3step)
![スポットライト追加時](https://iroiro-lemon.com/wp-content/uploads/2020/07/spotlight3.jpg)
Step
背景レイヤーを複製し、スマートオブジェクトにする。
- この工程は上の「放射状光を入れる」Step1、Step2と同じです。
- レイヤー名は「スポットライト」としました。
Step
「スポットライト」レイヤーを選択し、「フィルター」→「描画」→「照明効果」選択する。
スポットライトの大きさや角度などを調整し、「属性」パネルの数値も調整していきます。
スポットライトの大きさや角度などを調整し、「属性」パネルの数値も調整していきます。
![「フィルター」→「描画」→「照明効果」選択し、大きさや角度を調整。](https://iroiro-lemon.com/wp-content/uploads/2020/07/spotlight.jpg)
大きさや角度を調整。
![属性パネルの数値を調整](https://iroiro-lemon.com/wp-content/uploads/2020/07/spotlight2.jpg)
![スポットライト設定完了時](https://iroiro-lemon.com/wp-content/uploads/2020/07/spotlight3-1.jpg)
Step
「スポットライト」レイヤーをスクリーンに設定して不透明度を調整する。
今回は80%にしています。
![レイヤーをスクーンに設定して不透明度を調整](https://iroiro-lemon.com/wp-content/uploads/2020/07/spotlight4.jpg)
![スポットライト設定完了時](https://iroiro-lemon.com/wp-content/uploads/2020/07/spotlight3.jpg)
レンズフレアを作る(3step)
![](https://iroiro-lemon.com/wp-content/uploads/2020/07/hikari_kakou.jpg)
Step
「べた塗り」#000000のレイヤーをつくる。
![ベタ塗りを追加](https://iroiro-lemon.com/wp-content/uploads/2020/07/betanuri.jpg)
Step
「フィルター」→「描画」→「逆光」を選ぶ。
明るさの%を調整し「50-300mmズーム」チェックを入れ、光源をドラッグして右上に持っていく。
![「フィルター」→「描画」→「逆光」を選ぶ](https://iroiro-lemon.com/wp-content/uploads/2020/07/gyakkou.jpg)
![](https://iroiro-lemon.com/wp-content/uploads/2020/07/gyakkou2.jpg)
![3.設定完了時](https://iroiro-lemon.com/wp-content/uploads/2020/07/gyakkou3.jpg)
Step
レイヤーをスクリーンに設定し、位置の調整をして完成です。
今回はしていませんが、拡大・回転などをしてちょうど良いところを見つけてください。
![スクリーンに設定](https://iroiro-lemon.com/wp-content/uploads/2020/07/gyakkou5.jpg)
![サイズや位置の調整](https://iroiro-lemon.com/wp-content/uploads/2020/07/gyakkou4.jpg)
![](https://iroiro-lemon.com/wp-content/uploads/2020/07/hikari_kakou.jpg)
最後に
最後までご覧いただきありがとうございました。
素材の作り方はたくさんあって日々勉強中です。
必要になったらすぐ思い出せるようにここに書き残すことにしました。
よろしかったらみなさんもお役立てください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://iroiro-lemon.com/wp-content/uploads/2022/06/adobecc-otoku-300x186.jpg)
【社会人・学生別】値上げしたAdobe CC [個人版]を最安で購入する方法
2022年4月Adobe CCの個人版・法人版の一部プランが値上げされました。 この記事では、 個人版のどのプランがどれだけ値上げされたのか 【学生・社会人別】Adobe Creativ…
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://iroiro-lemon.com/wp-content/uploads/2021/11/about-xd-300x186.jpg)
無料で使えるAdobe XDとは?実際にWebデザインをした感想と有料版との違い
こんにちは。7年目Webデザイナーのさなです。 今さらながら先日はじめてXDでwebデザインを制作して納品しました。 XDには前から興味があったのですが、日々の業務に追わ…