ウェブアートデザイナー
FTPツール
ウェブアニメータ
HotMediaクリエーター
デジすたマーカー2


ウェブマスターのためのノウハウ
Web制作に役立つ無料ツール

ホームページビルダー14!メーカー提供:1,000円キャシュバックキャンペーン中

ホームページビルダー14
IBM ホームページ・ビルダー14

1位ホームページビルダーの裏技
2位ビルダーの基本操作
3位動画でわかるビルダー
4位無料テンプレート
5位ビルダーの設定

GIF画像の縁を透明化して背景になじませる

トップ >> 応用編インデックス

アイコンやボタンなどの画像には、GIF画像を使います。 (デジカメで撮った写真などの場合は、JPEGです。)

アイコンなど、GIF形式の画像をページに挿入したときに、背景に色を付けたりした場合にアイコンの画像の縁の部分が浮いてしまって、背景の色となじまないことがよくあります。

下の図は、ホームページビルダーで背景色を緑色に設定し、付属の素材からバーコード型のボタンを貼り付けた所です。

背景に色を付けてしまったために、バーコードの周りの白い色となじんでいない感じがします。

このような場合、GIF画像ではある1色を透明色にすることができます。

透明色ということは、後ろにある色もそのまま透けてしまうということですから、あとで背景色を変更しても、それにあわせて画像を編集する必要はありませんから、便利ですね。

画像の透明化を行うには、GIF画像を右クリックします。

ショートカットメニューから「画像を編集」-「画像の編集」とクリックします。

すると、「画像の編集」ダイアログが現れます。ここで「透明化」ボタンをクリックします。

マウスポインタがスポイトの形状に変わります。
その状態でスポイトの先を透明化したい色のところへもっていき、クリックします。

下図のようにスポイトの先に合わせた(一続きの)色が透明化されました。

これで、「OK」ボタンをくりっくすると、下図のように背景色がそのまま表示されてきます。

画面で見るとすこーし白い部分が残ってしまっています。
これは、やり方が悪いとかではなくて、これがホームページビルダーでできる処理の限界のようです。

さらにディテールにこだわるのであれば、Photoshopとかプロ向けのソフトが必要になります。



ネットショップを運営する
アフィリエイトで副収入
資格で稼ぐ

初心者向け用語集
ホームページの基礎知識
ショートカットキー一覧表
格安Web素材入手法
サイトの構想アイディア創出法

Powered by ITSpace Inc.
ホームページビルダーは日本IBMの登録商標または商標です。