2025.07.10

Photoshop(フォトショ)で白背景の画像を影ごと切り抜き、透過PNG画像にする方法

透過方法

1.画像をphotoshopで開く

まず画像を用意し、Photoshopで開きます。

画像は白い背景にしてください。
もし背景が黄色っぽい白だったりする場合は、レベル補正や色調補正で調整してください。

今回はPhotoshop内の自動生成機能で、赤い車を用意しました。

2.被写体を選択する(影は切り抜かない)

車のみを選択ツールで囲みます。影は含めないでください。

選択する方法はいくつかありますが、今回はクイック選択ツールを使用します。
車の上をドラックして選択状態にしてください。

3.レイヤーの複製

選択状態のまま、レイヤーを複製を選びます。選択したもののみのレイヤーが追加されました。

4.色調補正で無彩色に

今複製したレイヤーではなく、もとのレイヤーをアクティブにします。(車も影も背景もあるもの)
※アクティブ…現在選択されて編集可能な状態のレイヤー

画面上部のメニューバーから、以下を開きます。
「イメージ」→「色調補正」→「色相、彩度」

色相・彩度ウィンドウが立ち上がったら、彩度を「-100」にします。

5.レベル補正で、影を濃くする

先ほど同様、上部メニューバーから下記を開きます。

「イメージ」→「色調補正」→「レベル補正」

一番左のバーを右に動かすと濃くなっていきます。
ここは好みですが結構濃い目にした方が良いです。

最終的に影の部分しか使わないので、レベル補正で被写体(車)が濃くなってしまっても気にしなくて大丈夫です◎

また背景が真っ白でない場合は、影以外のいらない要素を消しゴムツールで消しておくときれいに仕上がります。

6.チャンネルウィンドウでアルファチャンネルに貼り付ける

「ウィンドウ」→「チャンネル」を開きます。

チャンネルウィンドウの新規チャンネルを作成でアルファチャンネルを追加します。

画面が真っ黒になればOKです。

RGBチャンネルをアクティブにした状態で
Ctrl+Aで全選択します。
(もしくは「上部メニューバー」→「選択範囲」→「すべて選択」)

その後、Ctrl+C でコピーします。

今度はアルファチャンネルを選択し、Ctrl+Vで貼り付けると、黒かったアルファチャンネルが画像の状態になります。

7.選択範囲を読み込みから反転させる。

「選択範囲」→「選択範囲を読み込む」を開きます。

「反転」を有効にし、OKを押してください。

8.新規レイヤーを影色で塗りつぶす

選択範囲が指定されたまま、レイヤーウィンドウから新規レイヤーを追加します。

ブラシツールに持ち替え、影にしたい色に変更後、塗りつぶします。
ワンストロークで塗りつぶしてください。
黒色が自然で無難な影になります。

選択範囲を解除し、最初に切り抜いた被写体レイヤーと、今塗りつぶした影レイヤー以外を非表示にしたら、完成です!

「ファイル」→「書き出し」→「PNGとしてクイック書き出し」で書き出せば透過画像になりますし、背景や文字を合成してもOKです。

まとめ

影ごと切り抜き、透過PNG画像で書き出す方法を紹介しました。

影事切り抜く方法は他にもありますが、PNGで書き出すと影が消えてしまうこともあります。このテクニックをつかって表現の幅を広げましょう!

 この記事を書いた人

まそ

将来はパンになりたい子にハマってます。

すべての投稿を確認する

デザインのお悩み、
私たちにお任せください

ジグノシステムジャパンでは、デザインだけでなく、システム構築、メタバース、XRAR、3D豊富な経験からお客様のお悩みを解決いたします

CONTACT

share

知ると誰かに話したくなる!身近なモノの「なんで?」をデザイン視点で解き明かす!

2026.10.07

身近な話題から考える「言葉」と「行動」が持つ意味~アプグレってどういう意味?~

2026.10.01

【Adobe Premiere 26.5】新機能「 生成メディアツール」で効果音が作れるようになったので触ってみる

2026.09.24

WEB・グラフィックデザイナーは試す価値あり!「印刷用ルーペ」でグラフィック表現の解像度を上げよう

2026.09.02