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

この記事では、白黒(モノクロ)画像の白い領域を透明化する手順についてまとめます。

例えばこのような透過していない画像、

白い部分を透過させたい!ってことがよくあります。

Photoshop上では下レイヤの素材によっては乗算などをするだけで解決できる場合もありますが、例えば単体の画像としてウェブの素材として使いたい場合などでは、ちゃんと透過したものを用意する必要があります。

この記事では、Photoshopを使って白い部分をちゃんと透過処理する方法のお話しです。
※同様の手順で階調が反転したものであれば黒い領域の透明化も可能です。

自動選択ツールや、色域指定選択で削除する方法ですと、マスクしたい領域が痩せてしまったり、エッジに白が残ってしまったりするので、ここでは、レイヤーの透明マスクを使用することで、キチント 透過処理をします!
※ 本記事では、Adobe Cloud Photoshop 2020 を用いて解説しています。旧記事 Photoshop CS6での解説はこちら にあります。

手順

1. 素材画像を開く

まずは、透明化処理をしたい画像を開きます。

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

2. 画像をコピーする

開いた画像を後の作業で使用するため、画像をコピーしクリップボードに入れておきます

すべてを選択し(Command+A または Ctrl+A)、コピー(Command+C または Ctrl+C)を実行します

メニューから行うには、

選択範囲 → すべてを選択

編集コピー

の手順です。

3. マスクを追加する

下の画像で(1)で示した、マスクを追加 ボタンをクリックします。

するとレイヤーに、(2)で示した枠が表示されます。

素材となる画像を開く

4. マスクを表示

次に、マスクを表示させます。Altキーを押しながら赤矢印のマスク枠をクリックします。

モノクロの画像の白い領域の透明化すると、画面はこのようになります。

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

5. マスクに元の画像を貼り付ける

この状態で貼り付け(Command+V または Ctrl+V)を行います。

手順2で元画像がコピー状態にありますので、貼り付けを実行すると画面はこのようになります。

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

6. 階調の反転を行う

次に、階調の反転行います。

メニューから、

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

をクリックします。

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

すると、画面はこのようになります。

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

7. 完成

赤矢印の枠をクリックすることで、マスク表示状態から抜けることができます。

完成しました。

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

この状態で、PNGなどで書き出し保存することで透明化した素材を使用することができます。

2.まとめ

気になるエッジ部分も、綺麗に透過することができました。

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

カラー画像の透明化については、こちら↓の記事でまとめています。

関連記事

この記事は、カラー画像の黒成分を透明処理ついてPhotoshopを使った方法を説明をします。 また記事の最後では、Photoshopアクションファイルの配布もしています。 ※ 本記事では、Adobe Cloud Photosho[…]

>INSTAHACK インスタハック Twitter

INSTAHACK インスタハック Twitter

INSTA HACK(インスタハック)は、テック系、Web制作系を中心とした記事を掲載するブログです。Twitterで最新の記事をおしらせしています。

CTR IMG