差の絶対値っていつ使うの?Photoshopで1pxも漏らさず差分チェック!

14 デザイナー Photoshop テクニック ウェブデザイン

いいね

こんばんは、デザイナーのMouriです。

デザイナーの皆さんは日頃からPhotoshopを使っていると思いますが、その使い方は十人十色。同じチーム内でさえ

「え!?切り抜きそう行く!?」

と驚くこともしばしば。


そんな中、私は特に描写モードを多用するほうだと自覚しています。
・乗算
・スクリーン

なんかは定番中の定番ですが、写真のレタッチなどでは
・カラー
・輝度
・ソフトライト

など状況に合わせて描写モードを重ねて行きます。

しかし、「こいつだけは使い所が無い・・・」な奴が居ます。

『差の絶対値』ってなんだ・・・

Adobeによれば。

差の絶対値  各チャンネル内のカラー情報に基づいて、合成色を基本色から取り除くか、基本色を合成色から取り除きます。明るさの値の大きい方のカラーから小さい方のカラーを取り除きます。ホワイトと合成すると基本色の値が反転しますが、ブラックと合成しても変化はありません。 引用:Adobe-描画モード

うん(わからん)

実際にやってみたらいい

ということで、2枚の画像を用意しました。
『A』と『B』の画像を重ねて、上のレイヤーを『差の絶対値』にしてみます。

すると、左右の白と黒はどちらも白になり、真ん中は黒になりました。
しかし、『A』『B』の文字が重なっているところは部分的に色が残っています。

結論 『同じ色のピクセルは黒く塗りつぶされる』

本当にざっくりです。
色をどのように処理しているかなど細かいことを言えばきりが無いのでこの認識でいてもらえればOKです。

ということは、全く同じものを差の絶対値で合成すると以下のようになるということですね。

差分チェックに使えるんじゃなかろうか

『同じ色のピクセルは黒く塗りつぶされる』という特性で真っ先に思い浮かぶ活用法といえば差分チェックです。

「目視でやりゃあいいじゃない・・・」と言われる方、ごもっともです。
だけど面倒だしエラーも起きます、人間だもの。

と、言うことでこんな意地が悪い感じのバナーを作ってみます。
AとB、それぞれ違いがあるのですがパッと見でわかりますでしょうか?

A


B


おわかりいただけるだろうか。

時間をかけて双方チェックをすればきっと見つけられると思います、しかし私はこの2つの差分を一瞬で見抜きたいのです。
そこで、2つのバナーを重ねて『差の絶対値』で描写してみましょう。
すると・・・

なにか見えてきました!
該当箇所の画像をチェックしてみましょう。

なんと渋谷がいたるところにありました!
これでは渋谷が3つになってしまいます、そんなことになればハロウィンの度に東京が世紀末になってしまう所でした。

結論『差分チェックに十分応用できる』

この原理を応用すれば、WEBページのスクリーンショットから、開発コードのキャプチャまで、ビットマップデータにできるものはほぼなんでも差分がチェックできます。

目で追って探すことも大事ですが、有名なコピペ

こんちには みさなん おんげき ですか? わしたは げんき です。
この ぶんょしう は いりぎす の ケブンッリジ だがいく の けゅきんう の けっか
にんんげ は もじ を にしんき する とき その さしいょ と さいご の もさじえ あいてっれば
じばんゅん は めくちちゃゃ でも ちんゃと よめる という けゅきんう に もづいとて
わざと もじの じんばゅん を いかれえて あまりす。
どでうす? ちんゃと よゃちめう でしょ?
ちんゃと よためら はのんう よしろく  
http://www.itmedia.co.jp/news/articles/0905/08/news021.html

のように、「こうであるはず」という先入観で睨めっこしていても簡単にスルーしてしまうものです、もちろん得手不得手もありますが・・・(ちなみに私はかなり不得手)

ぜひ皆さんもWEBページやバナー、いつも頭を悩ませてくれるサイゼリヤの間違い探しなどで活用いただければと思います。



アカウント登録をするとコメントを書くことができます

採用検索 - 詳細条件の設定