好きな映画の配色を写真で再現するための簡単テクニック

Pocket
LINEで送る

前回に引き続き、映画のカラースキームの話です。今回は、二つほど映画のカラースキームを知るためのヒントを得られるサイトをご紹介。更にそのサイトの色合いをPhotoshopなどで再現する方法です。

映画ならではのカラー

ニュートラルに撮っている映画ももちろんあるのですが、ニュートラルに思えるものでもやはり何かしら写真で言うところの色調補正は入っています。昔は映画もフィルムの時代だったので、フィルム毎の特色もありますよね。

現在でも、フィルムで撮影する監督はいます。例えば先日公開されたダンケルクを撮影したクリストファー・ノーラン監督なんかはフィルムながらデジタルの解像感を凌ぐと言われているIMAXフィルムを使用した撮影をしたことが話題になっています。

自分も映画館で鑑賞しましたが、フィルム独特の色味とマジックアワーの色合い、霧のイメージなどが重なって非常に魅惑的な色使いになっていました。

映画毎のカラースキームがわかるサイト

今回ご紹介するのは、映画ごとに使用されている具体的なカラースキームがわかるサイト。

Movies In Color

via http://moviesincolor.com/

まずは Movies In Color というサイト。
グラフィックデザイナーの方が個人で運営されているそうです。
早速、トップページではアメリのワンシーンにおけるカラーパレットが表示されています。

ハイライト・ミッドトーン・シャドーそれぞれで使用されている色がわかりやすく表示されていますね〜。

階調ごとに、どういう色合いが使われているかがわかるので、これらの色にRAW現像などで近づけてみると映画のようなカラーを再現しやすくなります。

The Color of Motion

via http://thecolorsofmotion.com/films

次に、こちらは The Color of Motion というサイト。

映画それぞれフレームごとのカラーがわかる

このバームクーヘンのような謎の画像は、映画のワンシーンそれぞれの色を繋げたものになります。
全てのフレームごとに色をまとめて階調で表現してくれているんですね。
ただのバームクーヘンかミルフィーユ的なものかと思ったら違うんですね〜

ゴッドファーザーの場合

The Godfather というバームクーヘンをクリックしてみると、こんな画像が出てきます。このように、マウスオーバーしているポイントのフレーム数、映画内の分、カラーコードが分かる仕組みです。恐ろしい取り組み・・・!

一体誰が考えたんですかね〜。よくぞとしか言いようがありません。しかもこのバームクーヘン画像のプリントが買えるという仕組み(笑)

誰が買うんだ〜!

スチール画像も確認できる

そして、バームクーヘンの一層をクリックすると、そのフレームのスチール画像をみることができます。わかりやすいですね!そしてここでもやはりカラーコードやフレーム数が確認できます。

カラーコードを活用する方法

そしてこれらのサイトを更に活用する方法ですが、先ほどから出ているカラーコードというモノを利用します。

Color Zilla で色を探す。

このColor Zillaというツールに限りませんが、ブラウザの拡張機能でウェブサイトの色を拾ってくれるプラグインがいくつかあります。

その中でも、今回はGoogle Chrome用のColor Zillaというものを利用してみましょう。
サイトをGoogle Chromeで開いて、Color Zillaをインストールします。
このアドオンをインストールすると、スポイトツールでマウスオーバーした色のカラーコードを判別できるようになります。

例えば Movies In Colors をサンプリングした例です。
ここでは、 #FFFFFF という色の16進数でのカラーコードがわかります。

もちろん写真そのものの上にスポイトをおいてもわかります。

The Colors of Motion の場合は、デフォルトでフレーム全体のカラーコードはわかりますが、スチール画像まで飛んでそれぞれの色をサンプリングしてみると、マウスオーバーした場所のカラーコードがわかりますね。便利!

カラーコードとは

そもそもカラーコードとは、という話ですが、色を16進数で表現したコードで、光の三原色を元にしています。

0からFの6桁の数字で表現される16進数のコード。左からRGBで二桁ずつ、シャープに続けて赤・青・緑の順で表現されています。つまり、#2E2F3Eというコードであれば、赤(2E)・緑(2F)・青(3E)ということですね。

数字は、16進数なので0からFまで16桁が使えます。(なので16進数)
つまり、一番数値の低い#000000というのは、赤青緑が全て一番暗い状態、つまり黒です。
その反対の、#FFFFFFというのは、赤青緑がもっとも明るい状態、つまり白ですね。

光の三原色なので、そうなります。二桁の16進数であれば、赤青緑それぞれで256段階の階調を表現することができるので、三色を組み合わせと約1677万色の表現が可能になります。写真に限らず例えば、いま見ているこういうウェブサイトの色合いなんかもこういったカラーコードを元に表現されています。(ウェブサイトに関してはブラウザやOSなどの影響で全ての色を表現できるとは限りませんが。)

カラーコードを元に再現する。

さて、そんなこんなで、簡単に色をサンプリングする方法がわかりました。ブラウザの拡張機能プラグイン、スクリーンショットをPhotoshopのスポイトツールで取得するでもサンプリングの方法は色々とあります。そして取得したカラーコードを利用してみるのはPhotoshopがもっとも手軽でしょう。

カラーコードから色を選択する。

Photoshopで描画色や背景色、またはカラーパレットなどを開いてカラーコードから色を用意します。
今回は、上記写真のように描画色を選択して、カラーコードを反映してみましょう。

カラーピッカーでカラーコードを指定

描画色をクリックすると、上記のようなカラーピッカーがひらきます。矢印のとこにある6桁の数字カラーコード
こちらに、先ほどThe Colors of Motionでゴッドファーザーからいただいたカラーコードを取得してみます。
そうすると、先ほどから見慣れた例の色が再現されますね。

カラーコードで塗りつぶしてみよう

カラーピッカーで作成した色で今度は塗りつぶしてみます。
Control + I で新規レイヤーを塗りつぶしてみるとこんな感じに。
ただのカーキのような色になりましたね笑

色を反映させてみよう

そして、新規レイヤーで作成した #5A564B のカラーコードレイヤーを、描画モード「カラー」にして不透明度を50%程度に下げてみました。

Before / After

映画の再現とはいきませんが、だいぶトーンが近づいた感じになりました。

工程まとめ

今回の工程をまとめてみます。

今回は一つわかりやすい具体例をということで上記方法をとりましたが、あまりおすすめできる方法ではないと言っておきます。
これはわかりやすい使用例で、実際はこういった塗りつぶしではなく、RAW現像時グラデーションツールトーンカーブなどその他の方法を利用した無限の応用があります。今回のようにカラーコードで取得した色で塗りつぶすだけではなく、このカラーコードがわかれば、その他の方法でその色に近づけていくという方法もとれるわけです。

このあたりは頭を柔らかくする必要があります。

今回の流れ

  1. Color Zillaなどで色をサンプリングする。
  2. Photoshop のカラーピッカーで取得したカラーコードを再現する。
  3. 新規レイヤーを作成しカラーコードで塗りつぶし。
  4. 描画モードをカラーに変更。
  5. 作成した塗りつぶしレイヤーの不透明度を50%にする。

一例ですが、具体的に映画のカラースキームを知って、それを応用する方法をご紹介してみました。
ちなみに、ふざけた事を言うようですが、この方法をまんま使ったことは個人的には一度もありません(笑)
こういうことができるなあ〜と、このサイトを知った時に思ったのでした。

Pocket
LINEで送る