フォトショップ エレメンツ ビギナーのために
                        Windows編

画像の透過、背景を透明に

ホームページ作成において掲載写真の各種画像編集が必要になります。 当サイトでは、PhotoshopElements初心者を対象として ホームページ作成・運営で必要な各種画像編集を中心とした操作を紹介します。

画像の透過、背景を透明に − 概要



ホームページへイラスト画像を掲載する場合、画像の背景色とホームページの背景色が溶け込まず違和感を与える場合があります。
この様な場合、イラスト画像の背景色を透明にし図柄の部分だけにすると、ホームページ背景色に溶け込みスッキリした感じになります。

この 「画像の透過処理、背景を透明に」 ページでは、イラスト画像の背景色を透明にする操作を説明します。


■ 画像の透過処理のイメージ ■

 2つのオリジナル画像(イラスト画像)の背景色(白)を透明にします。
 画像は、背景色と図柄色が、ハッキリと違う画像と似通った画像の2種類で操作説明します。
 オリジナル画像は、JPEG形式です。また透過処理後は、GIF形式です。
 イメージ図は、見易い様にページ背景を薄い青にしてあります。


●背景色と図柄色がハッキリしている画像

透過処理前イメージ
透過処理前イメージ JPEG形式ファイル




  
背景色を透明に



透過処理後イメージ
透過処理後イメージ GIF形式ファイル

●背景色と図柄色が似通っている画像

透過処理前イメージ
透過処理前イメージ JPEG形式ファイル




  
背景色を透明に



透過処理後イメージ
透過処理後イメージ GIF形式ファイル

※オリジナル画像(イラスト画像)をダウンロードすることができます。 ダウンロードし 「操作方法」 に従い操作を試してみてはいかがでしょうか。

■オリジナル画像のダウンロード方法
@ オリジナル画像をクリックすると画像イメージが表示されます。
A 表示画像内を 「右クリック」 し 「名前をつけて保存」などを選択するとダウンロードできます。



画像の透過、背景を透明に− 操作方法


1. モードの確認
モードの確認
モードの確認
「画像編集モード」 、 「スタンダード編集」 であることを確認します。

2. 画像を開く

(1)画像を開く

   ファイルの開き方は、「 ファイルを開く 」を参照ください。
(2)オリジナル画像の表示
オリジナル画像の表示
オリジナル画像の表示
JPEG形式のオリジナル画像(イラスト画像)が表示されます。

レイヤーパレット(ウインドウ右側)には、背景のレイヤーのみが表示されています。
3. 画像背景の透過処理

(1) マジック消しゴムツールの選択

マジック消しゴムツールの選択
マジック消しゴムツールの選択
『ツールボックス』 から 『マジック消しゴムツール』を選択します。

ツールボックスに『マジック消しゴムツール』が表示されていない時、『消しゴムツール』などのアイコン右下の三角印を長めにクリックし続けます。
プルダウンメニューが表示され、その中にマジック消しゴムツールがあります。
マジック消しゴムツールの選択
マジック消しゴムツールの選択
プルダウンメニュー から 『マジック消しゴムツール』を選択します。
(2) オプションバーの表示

オプションバーの表示
オプションバーの表示
『マジック消しゴムツール』 が選択されるとマジック消しゴムツール用のオプションバー表示になります。
このオプションバーで透過の設定をします。
(3) オプションバーの設定

■許容値
 マジック消しゴムで消去する範囲(色の近さ)を設定します。
 この値が小さい時、クリックし位置の色に近い色だけが消去対象になります。
 この値が大きい時、クリックし位置の色に近い色の範囲が大きくなり消去されます。

 背景と図柄の色がくっきり分かれている画像の時、大きな値にし、
 背景と図柄の色が似通っている時、この値を大きくすると図柄まで消去されてしまいます。
 値を小さくし消去します。

■アンチエイリアス
 チェックを入れると消去する部分のエッジが滑らかになります。

■隣接
 チェックを入れるとクリック位置に隣り合う(続く)色を消去対象にし、
 チェックを外すと画像内全てを消去対象にします。

■不透明度
 消去の度合いを設定します。
 この値が小さい時、消去した色が半透明になり、透けた感じ(?)になります。
 この値が大きい時、透明になり、ホームページ掲載時にはページ背景色になります。

<サンプル画像の設定>
・許容値:100を設定
・アンチエイリアス:チェックを入れる
・隣接・チェックを外す(チェックを入れると車の窓部分が消去されません)
・全レイヤーを対象:チェックを外す(レイヤー1個のため)
・不透明度:100を設定

背景色を消去
背景色を消去
画像の背景色部分をクリックします。
背景色が透明に
背景色が透明に
クリックすると、グレーの格子模様になります。
この格子模様が透明になった部分です。

※透明部分の格子模様は、メニューバー『編集』→『環境設定』→『透明部分』の『透明色の設定』で設定された模様が表示されます。

4. 透明色の画像ファイル保存

(1) ファイル形式について
  JPEG形式ファイルは、透明色をサポートしていません。

  GIF形式ファイルでは、透明色をサポートしています。
  ファイルの保存は、 『GIF形式』 で保存します。

(2) Web用保存の選択
Web用に保存の選択
Web用に保存の選択
ホームページ掲載用に作成しますので、『Web用に保存』で保存します。

メニューバー『ファイル』→『Web用に保存』を選択します。
Web用保存ダイアログの表示
Web用に保存ダイアログの表示
Web用に保存のダイアログが表示されます。

保存ファイル形式が、 『JPEG』になっている場合、『保存後イメージ』の様に背景部分が白になってしまいます。
(3) Web用保存形式 GIFの設定
GIF保存形式設定
GIF保存形式の設定
保存形式にGIFを選択します。
表示がGIF用に変わります。
透明・保存形式の設定
透明・保存形式の設定
『透明部分』にチェックを入れます。

これで背景部分が、透明になります。
OKをクリックします。

(4) 最適化ファイルを別名で保存ダイアログの設定
最適化ファイルを別名で保存ダイアログの設定
『最適化ファイルを別名で保存』ダイアログの設定
最適化ファイルを別名で保存ダイアログが表示されます。

保存するファイル名を設定します。
※ファイルの種類は、 GIFです。
OKをクリックします。
警告メッセ−ジ
警告メッセ−ジ
OKをクリックすると画像ファイルが保存されます。

この時、左の警告メッセージが表示される場合があります。

警告メーッセージについては、「 Web用に保存 」を参照ください。

5. 画像の透過処理の完成イメージ  − できあがり〜! (^^)


透過画像の完成イメージ
透過画像の完成イメージです。

透明になっていることを確認し易い様に背景色を薄い青にしています。


6. 『別名で保存』する場合
別名で保存する場合
別名で保存する場合
『Web用に保存』ではなく『別名で保存』する場合

別名保存ダイアログのファイル形式に GIFを設定します。
透明の設定
透明の設定
『インデックスカラー』ダイアログで 『透明』 にチェックをいれます。


背景色と図柄色が似通った画像の背景を透明に− 操作方法


7. オリジナル画像の表示
オリジナル画像の表示
オリジナル画像の表示
オリジナル画像(イラスト画像)を開き、表示します。

この画像は、背景色と図柄色が似通った色になっています。
この背景色を透過処理します。
手順は、上記の項目6番までと同じでマジック消しゴムを使用し、オプションバーの透過の設定が若干異なってきます。

※途中の手順は省略します。上記の項目6番までの説明を参照ください。

8. マジック消しゴムのオプションバーの設定、背景の消去

(1) オプションバー: 許容値 100の場合
オプションバー: 許容値 100の場合
オプションバー: 許容値 100の場合
マジック消しゴムのオプションバー:許容値を100に設定し、背景をクリックしました。

背景色が消去されるとともに図柄色を一部消去されてしまいました。
許容値を再設定し試行してみます。

※一旦、マジック消しゴムにて消去された画像は、取り消し後、元に戻し試行します。

メニューバー『編集』→『マジック消しゴムツールの取り消し』を選択します。

(2) オプションバー: 許容値 5の場合
オプションバー: 許容値 5の場合
オプションバー: 許容値 5の場合
マジック消しゴムのオプションバー:許容値を5に設定し、背景をクリックしました。

許容値を50→30→10→5と変化再設定し試行してみました。
薄いグレー部分が消去されてしまい、許容地5できれいに消去できました。

画像の絵柄にもよりこの値は違ってきます。色々試行錯誤してください。
それでもきれいに消去できない時は、『消しゴムツール』で消します。

9. 画像の透過処理の完成イメージ  − できあがり〜! (^^)


透過画像の完成イメージ
透過画像の完成イメージです。

透明になっていることを確認し易い様に背景色を薄い青にしています。