Photoshop:モノクロの画像の白い領域の透明化

Photoshopで、モノクロの画像の、白い領域を透明化(グレーは半透明に)する方法の紹介。
本ブログで2番目に人気のエントリーになりました!

例えばこんな画像、、、

asset0

白い部分を透過させたいな!ってことがあって、
無論PhotoshopやFlash上では、乗算とかフィルタで一発なんだすけど、
例えばHTML上の表示で使いたい場合、難しいので、
透過したものを用意する必要があるので、
Photoshopを使って実現する方法のお話しです。

※同様の手順で階調が反転したものであれば黒い領域の透明化も可能です。

自動選択ツールや、色域指定選択で削除する方法ですと、
マスクしたい領域が痩せてしまったり、
エッジに白が残ってしまったりするので、
ここでは、レイヤーの透明マスクを使用します。

1.素材となる画像を開く

名称未設定 2 @ 100% (レイヤー 1, RGB_8) *

次に準備として、この画像の階調を反転したものを用意します。

2.階調を反転した画像の準備

素材の画像を、すべてを選択しコピー(クリップボードに入れる)しておいて
新規ウィンドウを作成し貼り付け、

メニューから、

イメージ→色調補正→階調の反転

を実行します。

asset1

できた画像はこんなかんじ
名称未設定 3 @ 100% (グループ 1, RGB_8) *

この階調反転されたこの画像を、すべてを選択し
コピー(クリップボードに入れる)しておきましょう。

3.透過処理

最初の、素材画像のウィンドウに戻ります。

素材画像のレイヤーが選択状態になってることを確認し、メニューから

レイヤー → レイヤーマスク → 透明部分をマスク

を実行します。

asset2-1

すると、レイヤーに白い枠(レイヤーマスクサムネイル)が表示されるので、
それを alt(optionキー) を押しながらクリックします。
名称未設定 2 @ 100% (レイヤー 1, レイヤーマスク_8) *

この状態で、ペースト(編集→ペースト)を実行します。
名称未設定 2 @ 100% (レイヤー 1, レイヤーマスク_8) *-1

その後、レイヤーをクリックすると、黒い部分がマスクされ、
これまで白く塗りつぶされた部分が透過してることが確認できると思います。
名称未設定 2 @ 100% (レイヤー 1, RGB_8) *-1

気になるエッジ部分も、綺麗に透過されていることがわかります。
名称未設定 2 @ 500% (レイヤー 1, RGB_8) *-1