Photoshopで画像や写真の背景を透明にする方法

2013年8月2日

こんにちは、株式会社キタオでデザイナーをしている坪井です。
前回、前々回とWEBで使える知識をご紹介しましたが、今回はWEBサイト制作とDTP制作の両方で使えるPhotoshopでの画像の透過処理についてご紹介させていただきます。

皆さんは「WEBサイトのこの場所にこの画像を置きたい」「このチラシのこの部分にあの画像が使いたい」といった時に、画像についている背景の色が邪魔だと感じたことはないでしょうか。
画像に背景が残ったままだと全体の見栄えも悪くなり、単純に取ってつけただけという感じになってしまいます。
画像の背景を透明にすることで違和感なく見えるようにするため、画像の場合と写真の場合に分けて透過処理のやり方を学んでいきましょう。

画像の場合

例として、パソコン教室morimoriのキャラクターであるmorimori先生の画像を使ってみます。

消しゴムツールを使って地道に消していくこともできますが、それでは手間と時間がかかってしまいます。
まずは、レイヤーパレットから『背景レイヤー』をダブルクリックしてレイヤー0に変換します。

この背景レイヤーにはロックがかかっていて編集することができません。編集できるように名前を変えてしまいましょう。

そして、ツールボックスの『消しゴムツール』を押し続けると現れる『マジック消しゴムツール』を選択してみましょう。

あとは消したい色の上でクリックするだけです。
背景が透明になると、グレーと白の市松模様の背景になります。

このとき、オプションバーの『隣接』のチェックを外していると消したい色が消したくない色で分断されていても、消したい色だけ一気に消すことができます。

ただし、背景が単色でない画像は『マジック消しゴムツール』に向いていません。
その場合は次の写真の場合と同じ処理で対応しましょう。

写真の場合

例として、フリー素材として配布されていた花の画像を使ってみます。

背景が多色で複雑な写真は、ペンツールを利用して不要な背景を消すことができます。
それでは、最初に画像の場合と同様にレイヤーパレットから『背景』レイヤーをダブルクリックして、名前を変えてしまいましょう。

次に、ツールバーから『ペンツール』を選択します。

そしてクリックでアンカーポイントを作りつつ、切り抜きたい部分をなぞってパスを作成していきましょう。

『ペンツール』を長押ししていると、『アンカーポイントの切り替えツール』が出てきます。これを使うことでアンカーポイントから伸びているハンドルを操作し調節することができます。（Altキー+ハンドルをクリックでも可能です。）

この操作のおかげで、後から細かい調節ができるため苦手な方はまず一旦大まかに切り抜きたい部分を囲ってしまうのも良いと思います。

パスで囲い終わったら、パスレイヤーの下にある『パスを選択範囲として読み込む』アイコンをクリックしてください。

すると、パスの実線が点線の点滅に変わります。これで範囲内が選択されました。

それではメニューバーから『選択範囲』を選び、その中の『選択範囲を反転』をクリックしてください。選択範囲が反転して不要な背景を囲っています。

例では分かりやすいように、反転して選択された範囲に色をつけています。

メニューバーの『編集』から『消去』をクリックすれば背景が消えて透明になります。

注意

画像の透過処理が終わってもまだ気は抜けません。
ここで保存形式をJPG形式にしてしまうと、折角透過した背景が白く塗りつぶされてしまうのです。
保存するときはPNG形式かGIF形式にするように気を付けましょう。
また、保存の際に『透明部分』のチェックボックスに必ずチェックを入れるようにしましょう。

これで背景が透明な画像を作成することができます。
下のオブジェクトが透けて見えるようになり、色のついた背景に画像を置いても見栄えが悪くなることもありません。
特にWEBの方では多く利用されており、WEBサイトやブログを作成していく上で重要になってくる手法です。
しっかりマスターして、WEBサイト制作やDTP制作をより良いものにしていきましょう。

パソコン教室morimori Photoshop講座に興味を持っていただいた方
ぜひこの機会にどうぞ。

Photoshop講座の詳細はこちらになります。

パソコン教室morimoriは、随時無料体験をやっております。