【Photoshop】背景を透明にして線画だけ表示させる方法を徹底解説forフォトショビギナーズ

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）で白い背景を削除して透明にし、線画だけ残す方法を解説します。
例えば線画のJPEG画像をダウンロードし、線画のみ抽出して背景透過のPNGにする時など。
何かと使う機会の多い便利な線画抽出テクニックです。

フォトショ初心者の方でも再現できるよう、順を追って背景除去の方法を解説します。

この記事の目次

背景を消す対象のサンプル画像

背景を除去する対象のサンプル画像です。
白背景の上にクルマの線画が描かれたJPG画像です。

背景透過のアイコンとして使いたいのに…そういった方にオススメの手法を解説します！

マジック消しゴムツールで背景を削除

マジック消しゴムツールを使った背景を透明にする方法です。
便利なツールですが、分かりづらい場所にあるので意外と存在を知らない方が多い不遇なツールです。
是非使ってみて使って下さい。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

画像を読み込む

Photoshopに対象となる画像を読み込みます。
ドラッグ&ドロップで読み込み可能。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

STEP.2

レイヤーパネルを確認

JPG画像単体を読み込んでレイヤーパネルを見ると [ 背景 ] になっています。
鍵アイコンをクリックして通常のラスターレイヤーにします。

※レイヤーパネルが非表示の場合は [ F7 ] を押しましょう。

STEP.3

マジック消しゴムツールを選択

[ マジック消しゴムツール ] を選択します。
[ 消しゴムツール ] 上を左クリック押しっぱなしにすると表示されます。

※それでも非表示の場合はツールバーをカスタマイズして表示させましょう。

STEP.4

不要な背景をクリック

不要な個所をクリック。
すると簡単に白い背景を消して透明にできます。

FINISH

完成

残っている白背景をクリックして削除したら完成！
簡単に白い背景を削除して透過の画像が作れます。

3種の消しゴムツールの使い方をマスターしよう

【Photoshop】3種類の消しゴムツールの違いと使い方を徹底解説forフォトショ初心者

フォトショに備わっている3種類の消しゴムツールの使い方を徹底解説します。
知っているようで意外と知らない消しゴムツール、併せてチェックされてみませんか？

色域指定を使って背景を透明にする方法

色域指定による選択範囲の作成はフォトショップでよく使う機能の一つです。
背景を透明にする以外にも使えるので覚えておいて損はありませんよ！

STEP.1

画像を読み込む

対象画像を読み込み、ラスターレイヤーにしておきましょう。
先のSTEP.2までの状態です。

Photoshop未導入の方はフォトプラン公式サイト（月額は最安の1,180円）から入手しておきましょう。

STEP.2

色域指定を実行

[ 選択範囲 ] → [ 色域指定 ] を実行します。

色域指定のダイアログ画面が開きます。
白い背景個所をクリックすると自動的に白背景全体が選択されます。

許容値を上げると線画と背景の間にある中間色が除去。
下げると中間色が残りやすくなります。

設定が完了したら右上の [ OK ] をクリック。

STEP.3

選択範囲が作成される

白い背景だけ選択範囲が作成されました。

FINISH

背景を削除したら完成

[ Delete ] または [ BackSpace ] を押すと背景を削除できます。
背景を残したい場合はレイヤーマスクを使いましょう。

最後に [ Ctrl + D ] で選択範囲を解除したら完成です。

透過PNGの作り方

せっかく背景透過にしてもJPG画像にすると意味がありません。画像単体を書き出す際はPNG形式がオススメです。

[ Ctrl + Shift + S ] → [ 名前を付けて保存 ] → [ ファイルの種類：PNG ] にして保存しましょう。

なお、コチラの記事で超便利なスライスツールとWeb用に保存(従来)を使った書き出し方法を徹底解説しています。
Webデザイナーなら絶対マスターしておきたい書き出し方法ですよ。

乗算を使う方法

レイヤーの描画モードを乗算にする方法です。
お手軽ですが、線画自体を抽出している訳では無いので用途によって使い分けて下さい。

STEP.1

画像を読み込む

背景が白色の線画を読み込みます。
スマートオブジェクト、ラスターレイヤー、どちらでも構いません。

Photoshop未導入の方は事前にAdobe公式サイトから入手しておきましょう。

STEP.2

描画モードを乗算に変更

レイヤーパネルを開きます。
レイヤーの描画モードを [ 乗算 ] に変更します。

FINISH

完成

ぱっと見、全く見た目が変わっていません。

しかし線画レイヤーの下に新たにレイヤーを追加して塗りつぶしてみましょう。
白い背景が透けて背景色が表示されました。

白い紙に線画を描いてスキャンした絵に色を乗せたい時に便利な手法です。

もしイラスト単体のPNGが必要な場合、色塗り後に別途背景を除去する必要があります。
しかしイラストの線画の雰囲気を壊さない利点があります。

複雑なオブジェクトの背景を削除

比較的簡単な形状の図形を使った背景除去の例でしたが、人物や毛身の毛など複雑な形状のオブジェクトの背景を透明にする際に役立つ方法をいくつか紹介します。

オブジェクト選択ツール

オブジェクト選択ツールの [ 被写体を選択 ] を活用した人物切り抜きテクニックです。
わずか数秒でキレイに細かな髪の毛が切り抜き可能！

【Photoshop】秒速で人物の髪の毛をキレイに切り抜く方法【オブジェクト選択ツールの応用】

プロパティパネルから背景を削除

STEP.1

画像を読み込む

対象画像を読み込み、ラスターレイヤーにしておきます。

スマートオブジェクトとラスターレイヤーについてはコチラの記事で詳しく解説しています。

STEP.2

背景を削除を選択

[ プロパティ ] を開きます。
パネル内の [ クイック操作 ] → [ 背景を削除 ] をクリックします。

非表示の場合は
[ ウィンドウ ] → [ プロパティ ]
で表示できます。

FINISH

完成

自動的に背景が綺麗に削除されます。
作業時間数秒で終わり、超簡単ですね。

OMAKE

被写体を選択だと？

[ 被写体を選択 ] を適用するとレイヤーマスクで背景を非表示にしてくれます。
選択範囲は [ 背景を削除 ] と同様、お好みで使い分けて下さい。

クイック選択ツールを活用

クイック選択ツールを使うと様々なオブジェクトの選択範囲を簡単に作れます。
素材の必要な選択範囲を高速で作成し、サクッと組み合わせて全く違うグラフィックを超短時間で作成可能！

※クイック選択ツールの使い方はコチラの記事で完全解説しています。

ペンツールを使って自力で

手動で選択範囲を作るのであればペンツールやレイヤーマスクを駆使してチマチマと行うのがベストです。
時間は掛かりますが、手作業による丁寧な切り抜きをしたい方には必要な工程です。

【Photoshop】ペンツールの基本操作と写真の切り抜きを徹底解説forフォトショ初心者

【Photoshop】レイヤーマスクの使い方を徹底解説forフォトショ初心者

高品質なシームレスパターン素材

非常に高品質なPhotoshop用のシームレスパターン素材です。
全て商用利用可能！
継ぎ目が無いワンランク上の背景デザインが即実現できます。

#01 Hand Drawn Graphic Floral Pattern Set Layout

手描き花柄のシームレスパターンです。
15種類もの豊富なパターンが収録されているので汎用性が非常に高い素材です。

ダウンロード

#02 Thai Asian Patten Contemporary Pastel Color

和柄やアジアンテイストなシームレスパターンセットです。
12種類収録、非常に高解像度で作成されているのでアイコン等に使えます。

ダウンロード

#03 Pattern Geometric Watercolor

水彩で描いた幾何学模様のパターン素材です。
PSDをダウンロードしてフォトショップにパターン定義するだけ！

ダウンロード

#04 Liberty Style Floral Pattern

美しい花柄のシームレスパターンです。
包装紙や背景デザインにそのまま使えます。

ダウンロード

#05 Pattern Christmas Snow

雪の結晶のシームレスパターンです。
雪の結晶はクリスマス以外にも汎用的に使えるモチーフですよ。

ダウンロード

フォトショで使えるパターン素材

【Photoshop】高クオリティな背景パターン素材14選【シームレス】

Photoshopで使える背景パターン素材14選です。
商用利用可能なシームレスパターン素材を更にチェックされてみませんか？

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）で画像の背景を削除して線画だけの透過画像を作る方法でした。

一番ベーシックな方法がマジック消しゴムツールと色域指定を使った背景除去テクニックです。
イラストに用いる線画なら乗算でお手軽に行えます。

人物や複雑なオブジェクトの切り抜きや背景除去にはオブジェクト選択ツールやクイック選択ツールなどが有効的なので上手く使い分けるようにしましょう。

ではまた！