大阪市、西区キララ九条商店街・中央区のCTP ITschool、ITsupport。会社、経営者等の困った事も解決致します。

会社概要 サイトマップ

大阪の西区・中央区、ITスクールとITサポートならCTP

[受付時間] 平日:9:00〜20:00 土日:10:00〜19:00
お問い合わせは06-6231-6870まで!

無料体験のお申し込みはこちら!

スタッフブログ

2013年8月2日

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

 

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

 

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

 

画像の場合

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

消しゴムツールを使って地道に消していくこともできますが、それでは手間と時間がかかってしまいます。
まずは、レイヤーパレットから『背景レイヤー』をダブルクリックしてレイヤー0に変換します。
ga02
この背景レイヤーにはロックがかかっていて編集することができません。編集できるように名前を変えてしまいましょう。

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

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

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

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

 写真の場合

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

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

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

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

『ペンツール』を長押ししていると、『アンカーポイントの切り替えツール』が出てきます。これを使うことでアンカーポイントから伸びているハンドルを操作し調節することができます。(Altキー+ハンドルをクリックでも可能です。)
sya05
この操作のおかげで、後から細かい調節ができるため苦手な方はまず一旦大まかに切り抜きたい部分を囲ってしまうのも良いと思います。

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

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

それではメニューバーから『選択範囲』を選び、その中の『選択範囲を反転』をクリックしてください。選択範囲が反転して不要な背景を囲っています。
sya08
sya09
例では分かりやすいように、反転して選択された範囲に色をつけています。

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

注意

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

 

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

 

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

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

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

 

 

関連するブログ

パソコン教室morimori Photoshop講座紹介

Photoshopで簡単にできる画像・写真の加工方法

【Photoshop】シームレス(継ぎ目のない)パターンを作る方法

【Photoshop】テクスチャを使ってオシャレなデザインを!

Photoshopで写真に写ったゴミ・不要物を綺麗に消す方法

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

 


戻る
≪ 前の記事へ次の記事へ ≫