COLUMNお知らせ・コラムSCROLLホームお知らせ・コラムPhotoshopを使って写真をエモーショナルにする4つのテクニックALLすべてNEWSお知らせMARKETINGマーケティングコラムDESIGNデザインコラムMANUALマニュアル・資料RECRUIT採用情報DESIGNPhotoshopを使って写真をエモーショナルにする4つのテクニック2023.10.31昨今のレトロブームに伴い、感情が揺さぶられるような写真がInstagramなどのSNSで流行中です。フィルムカメラを使って撮った「どこか懐かしい雰囲気のある写真」や、柔らかさや透明感のある写真が人気を博しています。このような写真は英語で「感情的」という意味の「emotional」という言葉から「エモい」とも言われています。WEB制作の現場においても、「エモーショナル」という言葉をキーワードとした事例は、若者をターゲットとしたホームページで数多く見られ、エモい写真をふんだんに使ったWEBデザインもよく見かけるようになりました。人それぞれに感じ方の異なる概念ではありますが、今回のコラムでは巷で「エモい」と言われる写真に使われているテクニックをPhotoshopのレタッチで再現しました。若者をターゲットにしたWEBデザイン制作を考えている方や、Photoshopを使って「エモい写真」を作りたい方はぜひ参考にしてみてください。今回のまとめ多重露光のように複数の写真を合成する多重露光とはカメラの撮影方法の一つで、1枚の写真の中に複数の写真を写し込む技術のことを指します。元々はフィルムカメラで使われていた技術ですが、最近ではデジカメでも撮影することができます。多重露光で撮影した写真はビジュアルのインパクトが強く、印象的な写真に仕上がります。複数のシーンを映り込ませるため、ストーリー性のあるキラキラとした写真になります。アーティスティックな写真のため、SNSでも注目されやすい表現手法です。本来、多重露光の写真は撮影時のカメラの設定を変えておく必要がありますが、Photoshopの合成技術があれば後からでも複数の写真を組み合わせて多重露光のような写真を作り上げることができます。多重露光の合成方法ここからはPhotoshopを使って多重露光の写真を合成する方法をご紹介します。写真の準備まず多重露光用の写真を2枚用意します。今回紹介する方法では「人物のシルエット」に「花火」の写真を合成します。どんなシーンの写真でも合成すること自体は可能ですが、同じような写真ではストーリー性が感じられないため、ここでは全くシーンの違う写真を選定しましょう。多重露光では合成元の写真のシャドウ部分に、合成する写真が浮き出てきます。そのため、明るすぎる写真や、コントラストが無い写真では、表現が難しくなるため、全体的に暗く、明るい部分とのコントラストが強い写真を選びましょう。次にベースとなる写真をPhotoshopに配置し編集します。合成する写真を合成元写真の上に配置し微調整を加える次に、合成する写真を合成元写真の上に配置し、描画モードを「比較(明)」にします。すると合成元写真のシャドウ部分に合成する写真の明るい部分が浮き出てきたかと思います。あとは最終イメージに合うよう合成する写真のサイズや位置、不透明度を調整しましょう。場合によっては合成する写真にマスクをかけるなどして、不要な部分が映り込まないようにしてもいいでしょう。色褪せた写真風に仕上げる長い年月をかけて日焼けし、色褪せたような写真もレトロでエモい写真と言えるでしょう。色褪せた写真は日焼けでセピア調になったり、写真の鮮明度が薄れてコントラストが全体的に低くなるのが特徴です。色褪せた写真風の加工方法トーンカーブやぼかしフィルターを駆使した経年劣化して色褪せた写真の再現方法をご紹介します。色調補正まずは写真をPhotoshopで開き、色調補正を加えていきます。後からでも設定を変更できるよう調整レイヤーを使って編集するのがおすすめです。トーンカーブを調整していきます。このステップでは青みのコントラストと色を弱く、赤みを強く、緑みを強くすることを意識して調整しましょう。トーンカーブを開き、まずはブルーを調整していきます。ブルーはコントラストと色を弱くするため、左下角のポイントを上に、右上角のポイントを下に移動させます。続いてレッドを調整していきます。赤みを強くするため、トーンカーブが上に膨らむように調整します。続いてグリーンを調整します。レッド同様、緑みを強くするため、トーンカーブが上に膨らむように調整します。次にRGBのトーンカーブを調整します。波の形は写真によって異なりますが、今回の作例ではシャドウ部分をマットな質感になるよう左下のポイントを上に移動させ、中間あたりをやや上に膨らむようにしました。続いてぼかしフィルターを適用します。メニュー「フィルター」→「ぼかし」→「ぼかし(表面)」を写真に適用しディテールを潰します。写真によって調整が必要ですが、今回の作例では「半径:3px」「しきい値:100px」にして適用しました。ノイズを加える最後に写真にノイズを加えます。した質感にすることで、昔のフィルムカメラで撮ったような雰囲気にすることができます。解像感を残しておきたい場合は、この工程を省いても大丈夫です。メニュー「フィルター」→「ノイズ」→「ノイズを加える」を選択し、写真にノイズを加えます。今回の作例では「量:12%」「均等に分布」を設定しました。被写体の背景をぼかす次にご紹介するのは被写体の背景をぼかすテクニックです。撮影時のカメラの設定で背景のボケ具合は変えることができますが、このテクニックは後からでも被写体の背景をぼかすことができます。やりすぎると不自然な写真となってしまうため注意が必要です。レイヤーに分けて背景のボケ具合を調整していきます。紹介する方法で使用するフィルターはスマートフィルターにすることで、後からでも微調整ができるようになります。なるようにレイヤー名をリネームします。(被写体の場所によってレイヤーの順序は変更してください。)「中景」のレイヤーを非表示にした後、「遠景」と「近景」のレイヤーにぼかしフィルターを適用します。この時「遠景」は大幅にぼかし、「近景」は少しボケる程度に値を調整します。次に遠景と近景のレイヤーにマスクをかけていきます。「近景」のレイヤーをアクティブにして、ピクセルマスクを作成後、グラデーションツールの「線型グラデーション」を使って遠くから近くにかけて、ぼけ具合が変化するように調整します。その後、「中景」レイヤーを表示し、被写体をオブジェクト選択ツールで選択後、メニュー「レイヤー」→「レイヤーマスク」→「選択範囲外をマスク」を選択します。すると被写体以外の背景がぼけた状態の写真となります。最後に必要に応じて調整レイヤーを作成し、写真の色調を補正します。今回の作例ではトーンカーブを使用しました。色調補正を使ってエモい雰囲気に仕上げる色調補正を使ってエモい雰囲気に仕上げるテクニックです。基本の色調補正だけでもポラロイド写真風にしたり、クロスプロセス風の写真にしたりと、さまざまな表現方法があります。ポラロイド写真風に仕上げる方法まずポラロイド写真風に仕上げる方法をご紹介します。写真を開き、メニュー「レイヤー」→「新規塗りつぶしレイヤー」→「べた塗り」を選択し、黄色のべた塗りレイヤーを作成します。(べた塗りレイヤーの色は写真によって適宜変更してください。)べた塗りレイヤーの描画モードは「オーバーレイ」にしておきます。同様にグリーン、ブルーのべた塗りレイヤーを作成し、全て描画モードを「オーバーレイ」にすると完成です。写真が明るくなり過ぎてしまう場合はべた塗りレイヤーの不透明度を変更したり、写真のレイヤーに対してトーンカーブを適用し、明るさを調整してください。写真をPhotoshopで開き、メニュー「レイヤー」→「新規調整レイヤー」→「トーンカーブ」を開きます。トーンカーブの設定ウィンドウで「プリセット」の中から「クロスプロセス(RGB)」を選択するとクロスプロセス写真風になります。色が鮮やかになり、コントラストが強くなるので、適宜トーンカーブを調整してください。Rawフィルター」を選択します。表示されるダイアログボックス内で「レンズ」の中に「周辺光量補正」という項目があるので、マイナスの値に設定し周辺光量を落とします。写真が暗くなり過ぎないよう、必要に応じて「中心点」の値を変えて暗くなる範囲を調整してください。今回のまとめ今回のコラムではPhotoshopを使って写真をエモくする方法を紹介しました。今回紹介したようなレタッチを行うことで、ビジュアルとしてのインパクトを増すことができたり、より印象的な写真にすることができるのでぜひ参考にしてみてください。今回紹介したテクニックは、他のテクニックと組み合わせることも可能です。やり過ぎには注意ですが、ポラロイド風の写真にノイズを加えたりなどしてもいいでしょう。著者情報AUTHORWEBデザイナーD.M.前職では、ITコンサルティング会社での勤務を経てWEB制作会社に転職し、ディレクターとして勤務。株式会社オンカに入社後は、WEBマーケティングに関する最新の知見や技術、WEBデザインの最新トレンドを取り入れて幅広い業種のホームページ制作に尽力している。