「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>