画像の透過、背景を透明に － 概要
ホームページへイラスト画像を掲載する場合、画像の背景色とホームページの背景色が溶け込まず違和感を与える場合があります。
この様な場合、イラスト画像の背景色を透明にし図柄の部分だけにすると、ホームページ背景色に溶け込みスッキリした感じになります。
この 「画像の透過処理、背景を透明に」 ページでは、イラスト画像の背景色を透明にする操作を説明します。
■ 画像の透過処理のイメージ ■
２つのオリジナル画像（イラスト画像）の背景色（白）を透明にします。
画像は、背景色と図柄色が、ハッキリと違う画像と似通った画像の２種類で操作説明します。
オリジナル画像は、ＪＰＥＧ形式です。また透過処理後は、ＧＩＦ形式です。
イメージ図は、見易い様にページ背景を薄い青にしてあります。
●背景色と図柄色がハッキリしている画像  透過処理前イメージ ＪＰＥＧ形式ファイル |
背景色を透明に |
透過処理後イメージ ＧＩＦ形式ファイル |
●背景色と図柄色が似通っている画像  透過処理前イメージ ＪＰＥＧ形式ファイル |
背景色を透明に |
透過処理後イメージ ＧＩＦ形式ファイル |
※オリジナル画像（イラスト画像）をダウンロードすることができます。 ダウンロードし 「操作方法」 に従い操作を試してみてはいかがでしょうか。
■オリジナル画像のダウンロード方法
① オリジナル画像をクリックすると画像イメージが表示されます。
② 表示画像内を 「右クリック」 し 「名前をつけて保存」などを選択するとダウンロードできます。
|
|
画像の透過、背景を透明に－ 操作方法
１． モードの確認 |
|
モードの確認 |
「画像編集モード」 、 「スタンダード編集」 であることを確認します。 |
２． 画像を開く （１）画像を開く ファイルの開き方は、「 ファイルを開く 」を参照ください。 |
|
|
（２）オリジナル画像の表示 |
|
オリジナル画像の表示 |
ＪＰＥＧ形式のオリジナル画像（イラスト画像）が表示されます。 レイヤーパレット（ウインドウ右側）には、背景のレイヤーのみが表示されています。 |
|
３． 画像背景の透過処理 （１） マジック消しゴムツールの選択 |
|
マジック消しゴムツールの選択 |
『ツールボックス』 から 『マジック消しゴムツール』を選択します。 ツールボックスに『マジック消しゴムツール』が表示されていない時、『消しゴムツール』などのアイコン右下の三角印を長めにクリックし続けます。 プルダウンメニューが表示され、その中にマジック消しゴムツールがあります。 |
マジック消しゴムツールの選択 |
プルダウンメニュー から 『マジック消しゴムツール』を選択します。 |
|
（２） オプションバーの表示 |
|
オプションバーの表示 |
『マジック消しゴムツール』 が選択されるとマジック消しゴムツール用のオプションバー表示になります。 このオプションバーで透過の設定をします。 |
|
（３） オプションバーの設定 |
■許容値
マジック消しゴムで消去する範囲（色の近さ）を設定します。
この値が小さい時、クリックし位置の色に近い色だけが消去対象になります。
この値が大きい時、クリックし位置の色に近い色の範囲が大きくなり消去されます。
背景と図柄の色がくっきり分かれている画像の時、大きな値にし、
背景と図柄の色が似通っている時、この値を大きくすると図柄まで消去されてしまいます。
値を小さくし消去します。
■アンチエイリアス
チェックを入れると消去する部分のエッジが滑らかになります。
■隣接
チェックを入れるとクリック位置に隣り合う（続く）色を消去対象にし、
チェックを外すと画像内全てを消去対象にします。
■不透明度
消去の度合いを設定します。
この値が小さい時、消去した色が半透明になり、透けた感じ（？）になります。
この値が大きい時、透明になり、ホームページ掲載時にはページ背景色になります。
＜サンプル画像の設定＞
・許容値：１００を設定
・アンチエイリアス：チェックを入れる
・隣接・チェックを外す（チェックを入れると車の窓部分が消去されません）
・全レイヤーを対象：チェックを外す（レイヤー１個のため）
・不透明度：１００を設定
背景色を消去 |
画像の背景色部分をクリックします。 |
背景色が透明に |
クリックすると、グレーの格子模様になります。 この格子模様が透明になった部分です。 ※透明部分の格子模様は、メニューバー『編集』→『環境設定』→『透明部分』の『透明色の設定』で設定された模様が表示されます。 |
４． 透明色の画像ファイル保存
（１） ファイル形式について
ＪＰＥＧ形式ファイルは、透明色をサポートしていません。
ＧＩＦ形式ファイルでは、透明色をサポートしています。
ファイルの保存は、 『ＧＩＦ形式』 で保存します。
|
（２） Ｗｅｂ用保存の選択 |
|
Ｗｅｂ用に保存の選択 |
ホームページ掲載用に作成しますので、『Ｗｅｂ用に保存』で保存します。 メニューバー『ファイル』→『Ｗｅｂ用に保存』を選択します。 |
Ｗｅｂ用に保存ダイアログの表示 |
Ｗｅｂ用に保存のダイアログが表示されます。 保存ファイル形式が、 『ＪＰＥＧ』になっている場合、『保存後イメージ』の様に背景部分が白になってしまいます。 |
|
（３） Ｗｅｂ用保存形式 ＧＩＦの設定 |
|
ＧＩＦ保存形式の設定 |
保存形式にＧＩＦを選択します。 表示がＧＩＦ用に変わります。 |
透明・保存形式の設定 |
『透明部分』にチェックを入れます。 これで背景部分が、透明になります。 ＯＫをクリックします。 |
|
（４） 最適化ファイルを別名で保存ダイアログの設定 |
|
『最適化ファイルを別名で保存』ダイアログの設定 |
最適化ファイルを別名で保存ダイアログが表示されます。 保存するファイル名を設定します。 ※ファイルの種類は、 ＧＩＦです。 ＯＫをクリックします。 |
警告メッセ－ジ |
ＯＫをクリックすると画像ファイルが保存されます。 この時、左の警告メッセージが表示される場合があります。 警告メーッセージについては、「 Ｗｅｂ用に保存 」を参照ください。 |
|
５． 画像の透過処理の完成イメージ － できあがり～！ (^^) |
|
| 透過画像の完成イメージです。 透明になっていることを確認し易い様に背景色を薄い青にしています。 |
|
６． 『別名で保存』する場合 |
|
別名で保存する場合 |
『Ｗｅｂ用に保存』ではなく『別名で保存』する場合 別名保存ダイアログのファイル形式に ＧＩＦを設定します。 |
透明の設定 |
『インデックスカラー』ダイアログで 『透明』 にチェックをいれます。 |
背景色と図柄色が似通った画像の背景を透明に－ 操作方法
７． オリジナル画像の表示 |
|
オリジナル画像の表示 |
オリジナル画像（イラスト画像）を開き、表示します。 この画像は、背景色と図柄色が似通った色になっています。 この背景色を透過処理します。 手順は、上記の項目６番までと同じでマジック消しゴムを使用し、オプションバーの透過の設定が若干異なってきます。 ※途中の手順は省略します。上記の項目６番までの説明を参照ください。 |
８． マジック消しゴムのオプションバーの設定、背景の消去 （１） オプションバー： 許容値 １００の場合 |
|
オプションバー： 許容値 １００の場合 |
マジック消しゴムのオプションバー：許容値を１００に設定し、背景をクリックしました。 背景色が消去されるとともに図柄色を一部消去されてしまいました。 許容値を再設定し試行してみます。 ※一旦、マジック消しゴムにて消去された画像は、取り消し後、元に戻し試行します。 メニューバー『編集』→『マジック消しゴムツールの取り消し』を選択します。 |
（２） オプションバー： 許容値 ５の場合 |
|
オプションバー： 許容値 ５の場合 |
マジック消しゴムのオプションバー：許容値を５に設定し、背景をクリックしました。 許容値を５０→３０→１０→５と変化再設定し試行してみました。 薄いグレー部分が消去されてしまい、許容地５できれいに消去できました。 画像の絵柄にもよりこの値は違ってきます。色々試行錯誤してください。 それでもきれいに消去できない時は、『消しゴムツール』で消します。 |
|
９． 画像の透過処理の完成イメージ － できあがり～！ (^^) |
|
| 透過画像の完成イメージです。 透明になっていることを確認し易い様に背景色を薄い青にしています。 |
|
|