グラデーションな背景に乗っているモノを比較的綺麗に切り抜く小技

デザインカンプが上がってきたけど、 PSD じゃなくて PNG だった……。とか、 PSD だけど肝心のレイヤーが結合されてて……。みたいなことは、業務でマークアップに携わったことのある人ならば経験があるはず。常に時間のないマークアップエンジニアにとって、こういう窮地に立たされた場合にもへこたれず、敢然と立ち向かう勇気が必要です。

この間の社内勉強会で少し評判のよかった画像切り抜き方法をひとつ紹介します。思いつく人はいるとおもうけど、自分で編み出した手法なので、広く知られた技術ではないと思う。

やりたいこと

f:id:tsmd:20130219020121p:plain

↑これを

f:id:tsmd:20130223013114p:plain

↑こうしたい。ちょっとジャギっていますが問題なし。なぜ問題ないかというと、大体のケースでこれで十分だからです。背景をごっそり差し替えるケースでジャギがあると問題ですが、そういう想定ではないということで。それに、中途半端にアルファチャンネル(半透明)を使って切り抜きをしようとすると、肝心の前景がちょっと汚くなったりすることが多い。

どう切り抜くか。愚直にやれば自動選択ツールでちまちま選択範囲を広げていく手法をとるけれども、今回紹介する手法を使えば、条件さえ合えば綺麗にかつ素早く切り抜けます。

手順

  1. 切り抜きたい画像を開く。開いた画像は背景レイヤーとなっているので、通常のレイヤーに変換する。レイヤーを複製しておく。

    f:id:tsmd:20130223013950p:plain

  2. グラデーションを構成するパターンに当たる部分を選択して、コピー。

    f:id:tsmd:20130223014743p:plain

  3. コピーしたものを貼りつけると新しいレイヤーができる。自由変形ツール(Ctrl+T)を使って、貼りつけたパターンを引き伸ばす。今回は縦方向のグラデーションなので横に引き伸ばした。

    f:id:tsmd:20130223013020p:plain

  4. ここがミソ。引き伸ばしたパターンのあるレイヤーの描画モードを「差の絶対値」にする。そうすると、グラデーションだった部分が綺麗に真っ黒になる。

    f:id:tsmd:20130223014031p:plain

  5. あとは簡単。4番で描画モードを設定したレイヤーと、その下のレイヤーを結合する。自動選択ツールで許容値0、アンチエイリアスオフ、隣接オフとし、真っ黒の部分を選択。

    f:id:tsmd:20130223014032p:plain

    f:id:tsmd:20130223014041p:plain

  6. 不要な部分を削除。できあがり。

    f:id:tsmd:20130223014046p:plain

    f:id:tsmd:20130223013114p:plain

注意点など

条件が整った場合にのみ使えるテクニックです。

  • 元となる画像が可逆圧縮系のフォーマット(つまりPNGかGIF)であること。
  • グラデーションが縦か横90度単位で進行していること。
  • グラデーションや減色時にディザが使われていないこと。

ぼやけてたり影が落ちている前景には向きません。

あくまでも、背景のグラデーションと同じ色の部分を消す技術です。

前景で真っ黒(#000000)が使われている場合、自動選択がうまくいきません。

最初にレベル補正などで真っ黒の部分をなくしてから上記手順を行い、選択範囲を保存してからやり直せばオッケイ。

ていうかPSDをもらいましょう。

この技は最終手段として使いましょう。