MB-Support

パソコン初心者のサポートページ

透過 GIF 画像の作り方と作る意味 IrfanView No2


前回 からの続きです。 デスクトップに保存した「holmes.png」を右クリックして、「プログラムから開く(H)」を左クリックします。 ここで、「IrfanView」が表示されないのであれば、「規定のプログラムの選択(C)」を左クリックします。



「推奨されたプログラム」、または、「ほかのプログラム」を展開して、「IrfanView」を探します。 存在しなければ、「参照(B)」ボタンを左クリックします。



「IrfanView」は、通常アプルケーションがインストールされる C ドライブの Program Files フォルダー内に存在します。 「IrfanView」フォルダーをダブルクリックします。



実行ファイル「.exe」の拡張子を左ダブルクリックします。



以上で、「ほかのプログラム」に「IrfanView」が表示されます。 最後に「この種類のファイルを開くときは、選択したプログラムをいつも使う(A)」のチェックを外し(左クリック)、「OK」ボタンを左クリックします。次回から、右クリック→「プログラムから開く(H)」に「IrfanView」が表示されるので、起動が簡単になります。



「IrfanView」で「holmes.png」を開いた状態が右。



「ファイル(F)」→「名前を付けて保存(S)」を左クリックします。



保管場所は、デスクトップにします。ファイルの種類は「GIF-Compuserve GIF」に変更します。 ファイル名はそのままで問題ありません(デスクトップに既に存在している holmes ファイルは、拡張子が png のため)。 「保存(S)」ボタンを左クリックします。



「JPEG / GIF 保存の設定」が表示されます。 GIF の「透過 GIF で保存(T)」にチェックを入れ、「透過色を設定して保存(T)」にチェックを入れます。 「保存(S)」ボタンを左クリックします。



透過する色を選択します。今回はテストで白と黒からなる画像を作成しました。 透過したい色は白なので、白い部分にカーソルを移動して左クリックします。



左が元の png 形式の画像、右が今作成した透過GIF。



早速、ホームページに埋め込んでみましょう。 相対パスのファイル名の拡張子を、png から gif に変更します。ローカルでは拡張子の大文字小文字は曖昧ですが、実際にホームページとして公開する場合は重要になり、「holmes.GIF」と「holmes.gif」は別物となります。 拡張子の指定を間違えると、画像は表示されません。メモ帳を上書き保存します。



結果は右。透過GIFで背景の白かった部分が透過となり、ホームページの背景色を赤に変更しても、画像が違和感無く溶け込んでいます。



今回は物体が黒、背景が白の二色からなる画像を作成しましたが、場合によっては背景色の白だけを透過して、物体の内側に存在する同色の白を透過したくない事もあるでしょう。 画像の内側に白抜きの文字を埋め込んだ場合など。 白を透過した場合、白抜きの文字色は、ホームページの背景画像に左右されます。 背景だけを確実に透過したいならば、ペイントで背景を白意外に無理つぶします。 例えば、右は緑を指定して、無理つぶしを実行した結果です。 塗りつぶしは、クリックされた同系色を一瞬で指定された色に変更します。



こうして保存された画像を「IrfanView」で読み込み、GIF で保存します。 透過する色は緑なので、緑の部分をどこでもいいから左クリックします。



以上で、背景色だけが透過となり、物体の内側の白の部分は不透過のままを維持できます。 ホームページの背景色が常に白であれば、その色に合わせて画像の背景色も設定できます。 しかし、スタイルシートで複数のページの背景色を一括指定できるため、背景色を変更する度に画像を作り直す作業は大変です。 画像の背景色を不透過で保存すれば、ホームページの背景色の変更にも耐えられます。




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項