「SE New Feature No.15」の編集履歴(バックアップ)一覧に戻る

SE New Feature No.15 - (2005/10/20 (木) 08:59:09) のソース

<span style=
"font-size: 12pt; color: #0000FF; font-weight: bold;width:400;filter:dropshadow(color='#88ee33',offX=1,offY=1,positive=1)">
透過画像が簡単に作れます!</span><br>
<br>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"><img src=
"http://limeworld.chu.jp/neo_newfeature/images_pbse/point01.png" width="15"
height="15" align="left"></td>
<td><span style=
"font-size: 12pt; color: #88ee33; font-weight: bold;width:720;filter:dropshadow(color='#4040ff',offX=1,offY=1,positive=1)">
Webで公開する透過画像の作り方</span></td>
</tr>
</table>
<br>
<img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"><br>
<br>
1. まず PictBear SecondEdition
で作ることが出来る透過画像の種類を確認しておきましょう。<br>

一般的に透過画像といえばGIF形式を思い浮かべると思われますが、現在のフリーソフトでGIF形式の対応をしているものはほとんど存在しません。(一部アプリケーションを除く)<br>

Web上のホームページなどで使用できる一般的な透過画像で、GIF形式に変わるものとして出てきたのがPNG形式になります。<br>

PictBear SecondEdition
ではこのPNG形式の透過画像を作成できるようになりました。<br>

ライムのホームページで使用されている画像は基本的にPNG形式で作成された物がほとんどです。<br>

(一部GIF動画とJPEG形式を使用)<br>
<br>
PictBear SecondEdition
でPNG形式以外で透過画像をサポートしているのは、PBX形式だけですが、このフォーマットはPictBear
独自のフォーマットですので、PictBear以外では表示することが出来ませんので、実質Web上で使用できる透過画像の製作は、PNG形式だけになります。<br>

<br>
また、このPNG形式の透過画像にも2種類あることを確認しておきます。<br>

PictBear
Ver1.xの時からサポートされていたフルカラー画像のアルファチャンネルを使用した透過画像と、PictBear
SecondEditionからサポートされた256色以下のインデックスカラーで使用できる透過画像になります。<br>

フルカラー画像のアルファチャンネルを使用した透過画像は、一部のブラウザで標準対応していないことからWeb上であまり見かけないのが現状です。<br>

PNG形式で透過画像としてWeb上で使用されているほとんどが256色以下のインデックスカラーで作られた物です。<br>

<br>
ではさっそくその256色以下のインデックスカラーで使用できる透過画像の作り方を説明してみます。<br>

<br>
<img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"><br>
<br>
2. まず、透過させる画像を用意します。<br>
ここでは下図のイメージを使用して説明してみます。<br>
<br>
<img src="http://limeworld.chu.jp/neo_newfeature/images015/details1501.png"
alt="サンプルイメージ" width="150" height="150" border="1"><br>
<br>
この画像のレイヤー状態は下図のような状態で描画されています。<br>

<br>
<img src="http://limeworld.chu.jp/neo_newfeature/images015/details1502.png"
alt="サンプルイメージ" width="244" height="164"><br>
<br>
背景レイヤーは白色で設定されています。<br>
<br>
<img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"><br>
<br>
人気記事ランキング
目安箱バナー