画像編集:オーバーレイについて調べてみた

前の記事で、画像の合成にオーバーレイという方法を使ったのですが、
どうにもうまくイメージできなかったので調べてみた。

簡単にPHPで書いてみると

if ($a < 128){
    $value = $a * $b * 2 / 255;
}else{
    $value = 2 * ($a + $b - $a * $b / 255) - 255;
}
if ($value > 255){ $value = 255;}

という式みたいです。

うん。わけわからんですね。

僕もわけがわかりませんでした。
なので、具体的な色を使って考察してみたいと思います。

臙脂(#b94047)に対して、

黒(#000000)と、

灰色(#7f7f7f)と、

白(#ffffff)
を混ぜてみたいと思います。

混ぜる際、臙脂を $a、混ぜる色を $b とします。
※臙脂色を使った理由ですが、赤(#ff0000)など、極端(ff や 00)な色は変化がわかりづらいため

まず黒をオーバーレイで混ぜてみます。
すると

こんな色(#730000)になりました。
混ぜ合わせる色が 黒 の場合、元の色が 128 未満だと黒に
128以上だった場合は若干暗くなるようです。

次に、白をオーバーレイで混ぜてみます。
すると

こんな色(#ff808e)になりました。
混ぜ合わせる色が 白 の場合、元の色が 128以上だった場合は白に
128未満だった場合は元の色の倍の値になるようです。

最後に、灰色をオーバーレイで混ぜてみます。
すると

変わりません(#b94047)。
これは、計算式に当てはめて計算すると、
ピタリ同じ数値にはならないのですが、四捨五入すると同じ数値になります。

これを利用することで、透過値だけを元画像に反映することができるんですね。

あー、スッキリした。