Photoshopを使って画像の背景を透明にする方法を解説

・画像の背景を透明にする方法を知りたい

・背景が透明な画像の保存方法を知りたい

PhotoshopはAdobe社が手がける画像編集・加工ソフトです。あらゆる機能が搭載されており、画像の背景を透明にすることもできます。

本記事では、Photoshopを使って画像の背景を透明にする方法と保存方法を解説します。
目次

Photoshop|画像の背景を透明にするメリット

「画像の背景を透明にする」とは、その名の通り背景色を透過させることです。通常、ロゴやイラスト画像では背景が白色になっているため、ポスターやチラシを作るときに背景色も同時に写り込んでしまいます。

Photoshopを使うことで、以下のようなシーンで活用できます。

【画像の背景を透明にするメリット】

・YouTube動画のテロップやサムネイルに活用しやすい

・Webサイトのバナーや名刺のデザインに使える

画像の背景を透過させるのは難しいイメージもありますが、Photoshopを使うと初心者でも簡単に背景を透明にできます。

Photoshop|画像の背景を透明にする3つの方法

Photoshopを使って画像の背景を透明にする方法をご紹介します。

・1から作品をつくる場合

・すでにある画像や写真を使う場合

・背景色が複雑な場合

上記のように状況に応じて方法が異なるため、ご自身の目的に合わせて手順を確認してみてください。

画像の背景を透明にする方法|1から作品をつくる場合

【手順】

  1. 新規ドキュメントを作成する
  2. 「プリセットの詳細」から「カンバスカラー」を透明にする
  3. 作品づくりをおこなう
  4. 保存する

①新規ドキュメントを作成する

Photoshopを開き、新規ドキュメントを作成します。

【Photoshop|新規ドキュメントの設定画面】

・縦横のサイズ

・方向

・解像度

・カラーモード

・カンバスカラー

・ファイルの名前

など

これらはご自身が作成するものに合わせて設定してください。

②「プリセットの詳細」から「カンバスカラー」を透明にする

photoshop_画像の背景を透明にする方法_1から作品をつくる場合1

「プリセットの詳細」画面から、カンバスカラーのタブを開き、カラーを透明に指定します。

すると、以下のように背景色が透明なカンバスが表示されます。

photoshop_画像の背景を透明にする方法_1から作品をつくる場合2

この画面でロゴや画像に編集を加えて書き出すことで、背景が透明な画像を作成できます。

画像の背景を透明にする方法|用意された画像を使う場合

photoshop_画像の背景を透明にする方法_用意された画像を使う場合

画像・ロゴにある白い背景を透明にする方法を解説します。WebサイトのバナーやYouTubeなどのサムネイル作成にも活用できるので、ぜひ参考にしてみてください。

【画像・ロゴの背景を透明にする手順】

  1. Photoshopに画像を読み込む
  2. 「マジック消しゴムツール」で透明にしたい色を選択する

【画像の背景を透明にする方法|1から作品をつくる場合】の章を参考に、新規ドキュメントでカンバスのカラーを透明に設定しておきましょう。

①Photoshopに画像を読み込む

photoshop_画像の背景を透明にする方法_用意された画像を使う場合_画像を読み込む

デスクトップやファイルにある素材をドラッグ&ドロップ、またはファイルから「読み込み」を選択して画像を配置します。

配置後はカンバスと画像のサイズが一致しないことが多いため、移動ツールなどを使って隙間がないように配置します。

②「マジック消しゴムツール」で透明にしたい色を選択する

「マジック消しゴムツール」は、クリックした箇所の色が消去されるツールです。特に背景が単色の場合はキレイに消去できるため、あらゆるシーンで活用できます。

メニューから「マジック消しゴムツール」を選択してから、透明にしたい色を選択します。今回は、りんごの背景である白色を指定しました。

photoshop_画像の背景を透明にする方法_用意された画像を使う場合_色を選択

上記画像の通り、白の背景が透明になりました。このまま保存をすることで、バナーやサムネイル作成などに活用できます。

「マジック消しゴムツール」は隣接の使い分けが重要

「マジック消しゴムツール」を使って背景を透明にするときは、隣接の使い方を覚えておきましょう。

photoshop_画像の背景を透明にする方法_マジック消しゴムツール1

イラストやテキストの中にある白い背景を透明にしたいときは、隣接の機能が便利です。

【隣接の特徴】

・隣接にチェックを入れる:同色の隣接した部分のみ透過する

・隣接のチェックを外す:同色であれば隣接していなくても透過する

photoshop_画像の背景を透明にする方法_マジック消しゴムツール2

隣接のチェックを外してから「マジック消しゴムツール」を使うと、すべての白い背景が透明になります。

photoshop_画像の背景を透明にする方法_マジック消しゴムツール3

一方で、隣接にチェックを入れて「マジック消しゴムツール」を使うと、以下画像のようにロゴやイラストの中にある背景は白く残りました。

photoshop_画像の背景を透明にする方法_マジック消しゴムツール4

このように「マジック消しゴムツール」は、隣接の使い分けによって仕上がりが異なります。

③画像の背景を透明にする方法|背景が複雑な場合

photoshop_画像の背景を透明にする方法_背景が複雑な場合

冒頭では「マジック消しゴムツール」を使って背景を透明にする方法をご紹介しました。

しかし、「マジック消しゴムツール」は単色のみ対応できるので、上記画像のように複雑な背景を透明にすることはできません。そんなときに便利なのが選択ツールです。

【選択ツールの種類】

・オブジェクト選択ツール

・クイック選択ツール

・自動選択ツール

どの方法でも被写体を選択できますが、髪の毛などの細かいパーツを選択するならクイック選択ツールが適しています。

【複雑な背景を透明にする方法】

  1. Photoshopに画像を読み込む
  2. 選択ツールを起動する
  3. 被写体を囲む
  4. 選択範囲をカットしたレイヤーを作る

※手順①・②の方法については割愛します。

①選択ツールで被写体を囲む

photoshop_画像の背景を透明にする方法_選択ツールで被写体を囲む

選択ツールを起動後、被写体を囲みます。時間のかかる作業ですが、丁寧にやることで仕上がりもキレイになります。使用するのは、クイック選択ツールがおすすめ。服のラインや髪の毛もキレイに選択できます。

③選択範囲をカットしたレイヤーを作る

photoshop_画像の背景を透明にする方法_選択範囲をカットしたレイヤーを作る

被写体を選択後、右クリックでメニューを開き「選択範囲をカットしたレイヤー」を選択します。

レイヤーを開き、元データ左の「目のアイコン」をクリックして非表示・または削除すると、以下画像のように被写体だけを切り抜いた画像を作成できます。

photoshop_画像の背景を透明にする方法_

状況に応じて「境界のぼかし」や「不透明度」などを調節してみてください。

Photoshopにはさまざまな機能が搭載されており、他の方法でも背景を透明にすることができます。方法に正解はないので、ご自身のやりやすい方法を試してみてください。

フォトショップで透明な背景の画像を保存する方法

透明な背景の画像を保存する方法は以下の通りです。

【画像を保存する方法】

  1. ファイル
  2. 書き出し(GIFまたはPNGなどファイル形式を選択)
  3. WEB用に保存
書き出す前に背景が透明になっているのか確認しましょう。

まとめ

今回はPhotoshopで画像の背景を透明にする方法を解説しました。

【おさらい】

・Photoshopは消しゴムツールや選択ツールを使うと画像の背景を透明にできる

・1から作品をつくる場合は、カンバスの背景を透明に設定しておく

・すでにある画像や写真を使う場合は選択ツールまたはマジック消しゴムツールを使う

・背景色が複雑な場合は選択ツールで被写体と背景を分ける方法がおすすめ

・マジック消しゴムツールを使うときは「隣接」の機能を覚えておく

背景だけを透明にするのは難しいと感じる方は多いと思いますが、Photoshopを使えば誰でも簡単にできるとわかりました。

なかでも「マジック消しゴムツール」は、ワンクリックで背景を透明にできる便利なツールです。

今回ご紹介したPhotoshopの各種ツールは、背景を透明にする以外にも活用できます。何度も繰り返しながら、使い方をマスターしましょう。

最後になりますが、WEBデザインの技術を駆使すれば、副業で稼ぐことから自身の仕事にすることもでき、あなたの可能性をさらに高めていくことが可能です。

フォトショップの使い方についてもっと知りたいのですが...

フォトショップのできることや、細かい動作の使い方については「フォトショップでできることは?使い方を5つに分けて徹底解説」にて纏めております。

Adobe製品をコスパ良く使う方法はありますか?

実は公式サイトで購入するよりも、デジハリのAdobeマスター講座を使うことによって、公式HPからを買うよりも約50%(30000円相当)安くAdobeCCコンプリートプランを使うことが可能です。

細かい情報は「Adobe CCを安く購入する裏ワザ」に纏めてあります。

WEBデザインで副業したいですが、まずは何から始めれば良いですか?

WEBデザインで副業をする方法としては「案件を取って仕事をこなす」必要があります。

案件を取って仕事をこなす場合、クラウドソーシングサイトを使って仕事を簡単に受注することが可能です。「副業におすすめのクラウドソーシングサイト8選」の記事をご覧下さい。

WEBデザインでフリーランスになる、もしくは就職を目指しているのですが、どのように行動していけば良いですか?

WEBデザインで自立する為には、部分的にではなく満遍なくスキルを身につけることが必要です。

WEBデザインスクールに通うと、段階的にスキルアップできますし、就職のサポートまで行ってくれる場所もあります。

将来本気で稼ぎたいと感じている方は、是非通ってみると良いでしょう。「WEBデザインスクールのおすすめ」に詳しく纏めてあります。

興味のある内容がありましたら、是非上記の記事も確認して見て下さいね。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる