デザインその他

デザイナーも数学的アプローチを

はじめまして、デザイン部大阪デザイン課の本田です。

プログラマーに対しては「クリエイティブな発想を持って開発を云々…」みたいなことを言われる昨今ですが、翻って、デザイナーにも数学や科学的な知識や感覚をベースにツールを扱う考え方があってもいいのでは？

数学的に考える

題材として今回選んだのは、グラデーション。

写真をレタッチしたり、グラデーションを含んだ画像を作成したときに、画像がガタガタになってしまったなんていう経験をお持ちの方はおられませんか？

その原因は、トーンジャンプなのです。

↑Photoshop のグラデーション機能で生成したグラデーションにトーンカーブで調整をかけ、トーンジャンプのシマシマが発生した状態。右のヒストグラムでも、トーンジャンプが発生しているのが分かる。(クリックし、実寸で見て下さい)

トーンジャンプとはなにか

デジタルの画像は御存知の通り RGB の組み合わせで出来ています。

そして各 RGB は 8bit の階調を持っています。

8bit の階調というのは、2^8=256 階調。

つまり、最も明るい部分から最も暗い部分まで、256 段の階段で表現されているのです。

この 256 段しかない階調をいろいろ触ると、256 段あるのにそのうちの 100 段くらいの飛び飛びになったり、レンジの狭めの画像だったりすると 20 段くらいしかなかったりするわけです。

これがトーンジャンプとして見えてくるわけです。

↑ハワイはダイヤモンドヘッドの写真にトーンカーブの調整をかけ、無理やり 32 階調に落としこむ。空部分にトーンジャンプが出現している。ヒストグラムを見ると、各色たった 32 本の輝度の分布になっているのが分かる。空の部分に至っては、6 階調ほどしかない。(クリックし、実寸で見て下さい)

WEB 上の Photohsop の Tips などで、空のグラデーションを滑らかにする方法などがあり、レタッチ後にトーンジャンプ部分をさらになめらかにぼかす方法などが紹介されていますが、上記のように階調の少なさが原因なので、レンジの狭いグラデーションなどの場合は根本的な解決にならないことが多いのです。

階調を増やしたいが…！

じゃあ、YOU 階段の段数を増やしちゃいなよ！と言う話なのですが、一般的に使用されている画像のフォーマットがそれを許しません。

JPEG も PNG も基本的には 8bit の階調しかサポートしていません。
(16bit をサポートしているフォーマットは多々ありますが、一般的に広く使用されてはいない状況です)

その上、我々が使用しているパソコンやディスプレイなどの表現能力も 8bit の物がほとんどです。

じゃあ、やりようないじゃん！というふうに思うかもしれませんが、ここで数学的知見の出番なのです。

量子化誤差

このトーンジャンプの正体は、数学的に言うと「量子化誤差の蓄積」。

量子化誤差とは？という方は、Wikipedia を見てみて下さい。
量子化誤差 − Wikipedia

画像データというのはすでに量子化されているのですが、その量子化された段階上のデータを決まった段階でしかさわれない状況が、この「蓄積」を発生させるのです。

よく「トーンカーブを何回も使わない」とか「調整は一発で」などと言われますが、その理由はこれなのです。

ディザリング

そしてこの量子化誤差を是正する方法が「ディザリング(ディザ)」です。

「ディザリングって何よ？テザリングの間違いじゃないの？」というふうに思う方もおられるかもしれませんが、詳しくはこれまた Wikipedia をご残照ください。
ディザ − Wikipedia

でもやっぱり階調を増やす

トーンジャンプをなくすためには極論は量子化されていないアナログで、階調が無限大の状態で触ればよいのですが、それはこのデジタルな世の中では無理ってお話しで、かつ最終アウトプットの画像フォーマットもそれを許さない。

ではどうするかって言うと、「より階調の高い状態で作業して、ディザリングしながら 8bit に落とす」というやり方です。

Photoshop など、16bit を扱える画像処理アプリケーションでは、それが可能です。

16bit は 2^16=65536 階調と 8bit の 256 倍細かい階調を持っています。

つまり、16bit で画像を触れば、16bit 上で多少量子化誤差の蓄積があっても、8bit に落とした段階では無視できる誤差になっているのです。

100 万円単位の話をしているときに、うまい棒を数本買うかどうかはどうでもいいこと、みたいなものです。

ただし、常に 16bit で作業すると PC のメモリも食いますし、データも重くなってしまいます。ではどうするか…。

動的なレイヤー

Photoshop には色調補正する場合において、画像を直接触る方法と、色調補正自体をレイヤーにしてしまう調整レイヤーを使う方法と、2 種類あります。

グラデーションも直接グラデーションを描いてしまう方法と、レイヤースタイルやグラデーションレイヤーという方法の、2 種類があります。

これらの後者のものを勝手に「動的なレイヤー」と名付けたいと思いますが、ようはいつでも触れるし、モードが変わっても変更後のモードでちゃんと動いてくれるものを指しています。

8bit のまま直接触ってしまうとその後 16bit にしようが 8bit で触ったまま持って行かれますが、動的レイヤーだと 16bit にした段階で 16bit として処理されます。

つまり 256 しかなかった階調が、65536 の階調で描かれます。(動的レイヤーでない場合は 65536 中の飛び飛びの 256 段階の階調として処理されてしまいます。)

↑グラデーションレイヤーのまま 16bit モードに変換したもの。シマシマは目視できるものの、階調がなめらかになりシマシマの間隔が狭く(つまり滑らかに)なっている。(クリックし、実寸で見て下さい)

16bit モードでレイヤーを統合し、1枚の画像にします。この段階で「16bit では量子化しているが、8bit 目線で見ると些細な誤差」を持った画像が生成されます。

↑画像の見た目に変化はないものの、右のヒストグラムを見るとトーンのジャンプがなくなっているのが分かる。(クリックし、実寸で見て下さい)

いよいよディザリング

ただこのままだと本当に 16bit の画像になってしまうので、8bit に戻さねばなりません。

かと言って、特に特別な操作をする必要はなく、Photoshop では、16bit から 8bit への変換時にディザリングを行ってくれます。

8bit に落とし込んだ画像は当然 256 階調ですが、各トーンの間をディザリングで滑らかにしてくれています。

↑8bit 上で 32 階調に落とした画像も 16bit を経ることで、右のヒストグラムを見ると、全く階調を失うことなく復元される。(クリックし、実寸で見て下さい)

↑グレーのグラデーションは、トーンが完全になめらかになり、トーンジャンプは全く確認できない。狭いレンジでもトーンジャンプが見えないのは、ディザのおかげ。(クリックし、実寸で見て下さい)