画像の透過、背景を透明に － 概要
Webサイトへイラスト画像を掲載する場合、画像の背景色とホームページの背景色が溶け込まず違和感を与える場合があります。
この様な場合、イラスト画像の背景色を透明にし図柄の部分だけにすると、Webサイトに溶け込みスッキリした感じになるかも。。。
当ページでは、フォトショップ エレメンツのマジック消しゴムツールを使用し、イラスト画像の背景色を透明にする操作を説明します。
■ 画像の透過イメージ
イラスト画像を使用し、背景を透明にする操作を説明します。
操作は、背景と図柄のコントラストが強く、クッキリした画像とコントラストが弱い画像の２パターンにて説明します。
画像の透過、背景を透明に－ 操作方法
１．画像を開く
（１）画像を開く
ファイルの開き方は、「ファイルを開く」を参照ください。
（２）画像の表示
画像が、表示されます。
サンプルでは、JPEG形式のイラスト画像であり、表示倍率59％で表示されています。
レイヤーは、「背景レイヤー」です。
２．マジック消しゴムツールの選択、設定
（１）マジック消しゴムツールの選択
ツールボックスから「マジック消しゴムツール」を選択します。
ツールボックスに「マジック消しゴムツール」が表示されていない場合もあります。
この時、次の関連ツールが表示されており、それを選択します。
＜関連ツール＞
①消しゴムツール
②背景消しゴムツール
③マジック消しゴムツール
（２）ツールオプションバーの表示
タスクバーの「ツールオプション」ボタンを押下します。
ツールオプションバーが表示され、その左端に関連ツールが表示されます。
マジック消しゴムツールが、選択されている事を確認／選択します。
（３）ツールオプションの設定
マジック消しゴムツールのオプションを設定します。
＜許容値＞
マジック消しゴムで消去する範囲（色の近さ）を0～255の範囲で設定します。
許容値が小さい時、クリック位置の色に近い色が消去対象になり範囲が狭くなります。
値が大きい時には、消去色の範囲が広くなります。
＜不透明度＞
消去の度合いを設定します。
マジック消しゴムで消去すると通常透明になりますが、100％に設定すると完全な透明になり、それ以下では、その設定に合わせて半透明になります。
＜隣接＞
クリックした色（ピクセル）と隣り合わうピクセルのみを対象にするか否かを設定します。
隣接チェックを入れるとクリック位置に隣り合う色を対象にし、
チェックを外すと画像内全ての色を対象にします。
サンプルでは、次のオプション設定しています。
・許容値 55
・不透明度 100%
・隣接 チェックを外す
３．背景を消す
（１）マジック消しゴムツールの実施
消去する背景のいずれかの場所をクリックします。
サンプルでは、背景（白）と図柄（赤）のコントラストが強く、背景が簡単に消去されています。
マジック消しゴムツールでは、背景レイヤーが通常のレイヤーに変わり、消去部分が透明になります。
（２）完成イメージ（背景を削除）
背景色を削除し透明に できあがり～～～！
※背景は、透明です。
わかりやすくするために画像の周りを緑色の線で縁取りしています。
※画像は縮小表示しています。
４．取り消し／やり直しボタン
＜タスクバー＞
＜メニューバー＞
画像編集時の取り消し／やり直しの時には、タスクバーの「取り消し」／「やり直し」ボタンを使用します。
またメニューバーの「編集」、「取り消し」／「やり直し」の選択でも操作できます。
ショートカットもあります。
取り消し：Ctrl ＋ Z
やり直し：Ctrl ＋ Y
５．画像ファイルの保存
上記操作で作成した画像イメージには、透明データを含んでいます。
JPEG形式の保存では、透明データはサポートされていません。
PNG形式、GIF形式などは、透明データを保存できます。
ファイルのデータ保存は、「ファイルを保存」を参照ください。
画像の透過、背景を透明に－ 操作方法
コントラスの弱い画像
１．画像を開く
（１）画像を開く
ファイルの開き方は、「ファイルを開く」を参照ください。
（２）画像の表示
画像が、表示されます。
サンプルでは、JPEG形式のイラスト画像であり、表示倍率66.5％で表示されています。
このサンプルは、背景と図柄のコントラストが若干弱い部分があり、背景削除に於いて若干注意が必要です。
２．マジック消しゴムツールの選択、設定
（１）マジック消しゴムツールの選択
前述と同様にツールボックスから「マジック消しゴムツール」を選択します。
（２）ツールオプションバーの表示
タスクバーの「ツールオプション」ボタンを押下します。
ツールオプションバーが表示されます。
３．オプション設定とツール実施（その１）
（１）オプションの設定
マジック消しゴムツールのオプションを設定します。
設定値は、前述サンプルと同じにします。
＜設定値＞
・許容値 55
・不透明度 100%
・隣接 チェックを外す
（２）マジック消しゴムツールの実施
削除対象の背景部分をクリックすると背景が削除されますが・・・
サンプルでは、背景が削除されましたが、コントラスの弱い部分も消えてしまいました。
ツールオプションの許容値が大き過ぎたようです。
（３）ツール操作の取り消し
タスクバーの取り消しボタンを押下し、直前の操作を取り消します。
４．オプション再設定とツール実施（その２）
（１）オプションの再設定
ツールオプションを見直し、再設定します。
サンプルでは、背景と図柄でコントラストが弱い部分があり許容値を小さくし色の消去範囲を狭くします。
＜設定値＞
・許容値 55を15に変更
・不透明度 100%
・隣接 チェックを外す
（２）マジック消しゴムツールの再実施
削除対象の背景部分をクリックすると背景が削除されますが・・・
窓の部分のみが残ってしまいました。
５．オプションの再設定とツール実施（その３）
（１）オプションの設定
ツールオプションを見直し、再設定します。
サンプルでは、許容値を小さくしたため、背景（白）のと色の範囲差で消去範囲外になったようです。
引き続き、「隣接」をチェックし、窓のみを消去する様に設定変更します。
＜設定値＞
・許容値 15をそのまま
・隣接 チェックを入れる
・不透明度 100%
（２）マジック消しゴムツールの実施
窓の部分をクリックします。
窓の中が消去されました。
※サンプルでは、オプション「隣接」をチェックなしであれば図柄の一部が消去されてしまいます。
（３）完成イメージ（背景を削除）
サンプルのイラスト画像は、マジック消しゴムツール ２回の操作にてできました。
できあがり～～～！
※背景は、透明です。
わかりやすくするために画像の周りを緑色の線で縁取りしています。
※画像は縮小表示しています。
６．画像ファイルの保存
上記操作で作成した画像イメージには、透明データを含んでいます。
JPEG形式の保存では、透明データはサポートされていません。
PNG形式、GIF形式などは、透明データを保存できます。
ファイルのデータ保存は、「ファイルを保存」を参照ください。