[SE New Feature No.15]の変更点 - Powerful PictBear

「SE New Feature No.15」の編集履歴（バックアップ）一覧はこちら

「SE New Feature No.15」(2005/10/20 (木) 08:59:09) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

透過画像が簡単に作れます！ <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> Webで公開する透過画像の作り方</td> </tr> </table> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 1. まず PictBear SecondEdition で作ることが出来る透過画像の種類を確認しておきましょう。 一般的に透過画像といえばGIF形式を思い浮かべると思われますが、現在のフリーソフトでGIF形式の対応をしているものはほとんど存在しません。（一部アプリケーションを除く） PictBear 2.0 RC4からGIF形式をサポートしましたので、この記事で紹介している方法でGIF形式にて保存するとGIF形式でも透過画像が作れます。 Web上のホームページなどで使用できる一般的な透過画像で、GIF形式に変わるものとして出てきたのがPNG形式になります。 PictBear SecondEdition ではこのPNG形式の透過画像を作成できるようになりました。 ライムのホームページで使用されている画像は基本的にPNG形式で作成された物がほとんどです。 （一部GIF動画とJPEG形式を使用） PictBear SecondEdition でPNG形式以外で透過画像をサポートしているのは、PBX形式だけですが、このフォーマットはPictBear 独自のフォーマットですので、PictBear以外では表示することが出来ませんので、実質Web上で使用できる透過画像の製作は、PNG形式だけになります。 また、このPNG形式の透過画像にも２種類あることを確認しておきます。 PictBear Ver1.xの時からサポートされていたフルカラー画像のアルファチャンネルを使用した透過画像と、PictBear SecondEditionからサポートされた２５６色以下のインデックスカラーで使用できる透過画像になります。 フルカラー画像のアルファチャンネルを使用した透過画像は、一部のブラウザで標準対応していないことからWeb上であまり見かけないのが現状です。 PNG形式で透過画像としてWeb上で使用されているほとんどが２５６色以下のインデックスカラーで作られた物です。 ではさっそくその２５６色以下のインデックスカラーで使用できる透過画像の作り方を説明してみます。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 2. まず、透過させる画像を用意します。 ここでは下図のイメージを使用して説明してみます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1501.png" alt="サンプルイメージ" border="1"> この画像のレイヤー状態は下図のような状態で描画されています。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1502.png" alt="サンプルイメージ"> 背景レイヤーは白色で設定されています。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 3. この画像をフルカラーイメージからインデックスカラーイメージへ変換します。 メニューの「イメージ｜イメージタイプ｜インデックスカラー」を選択します。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1503.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 4. この画像イメージは複数のレイヤーを使用して描画していますので、下図のような警告メッセージが表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1504.png" alt="サンプルイメージ" border="0"> 単一のレイヤーにて描画している画像ですと、この警告表示は彪辞されません。 処理するので、「はい」をクリックします。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 5. すると下図のインデックスカラーダイアログが表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1505.png" alt="サンプルイメージ" border="0"> ここで処理したい設定をした後、「OK」をクリックして処理を実行します。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 6. 処理が実行されるとインデックスカラーに変換されます。 変換されると下図のようにレイヤーが一つになり、背景レイヤーになっている事が確認出来ると思われます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1506.png" alt="サンプルイメージ" border="0"> また、パレットダイアログのサンプルを開くと処理した色数のパレットに変わっていることが確認できます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1507.png" alt="サンプルイメージ" border="0"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 7. この状態で透過できる画像の準備が出来ましたので、透過設定を行ないます。 メニューの「イメージ｜パレット｜透過色の設定」をクリックします。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1508.png" alt="サンプルイメージ"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 8. すると下図のように透過色の設定ダイアログが表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1509.png" alt="サンプルイメージ" border="0"> このダイアログで色を指定すると、その色が透過色の設定となり透過することが出来ます。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 9. 表示されているパレットから色を選択するのですが、この状態のパレットから色を選択して透過するのが大変な場合は、真中あたりにある、ソートを使用してパレットを整列しなおしてから選択すると、選択しやすくなったりします。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1510.png" alt="サンプルイメージ" border="1"> それでも選択するのが大変な場合には次の方法を使用します。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 10. ダイアログの一番右側にある「色の選択」ボタンをクリックします。 すると右図のように選択できる色情報が表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1511.png" alt="サンプルイメージ" border="1"> この機能を使うことによって、選択が容易になります。 描画色もしくは背景色にあらかじめ色の取得ツールなどでイメージ画像から透過したい色を抽出しておき、このメニューの描画色か背景色を指定するとその色が反映できます。 また、イメージの４つ角の1ドット色を指定することも出来ます。 また、イメージの中で透過した部分が全体で使用されている頻度が高い場合は、一番下の「最も使われている色」をしてすると設定することが出来ます。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 11. ここでは「左上の色」を指定して色を決めます。 色の指定が出来ると、ダイアログ真中に表示される「透過色」の設定が「透過職を有効にする」にチェックが入り、「色情報」部分に指定した色の情報が表示され、確認することが出来ます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1512.png" alt="サンプルイメージ" border="1"> 色の指定が出来たら、そのまま「OK」をクリックします。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 12. 処理が実行されると、下図のように透過表示されているのが確認できます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1513.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 13. ここで一つ覚えておいて欲しい事があります。 この透過処理はあくまでもある特定の1色だけを透過するように画像情報の中に埋め込んでいるだけですので、画像そのものの透過した色はけされていないという事です。 それを裏付けるのがレイヤーダイアログの表示とビューダイアログのナビゲーション表示を確認すると分かります。 下図で分かるように、表示されるイメージの背景は白色のままで、透過された状態での表示になっていません。 透過指定した色が削除されて透過表示されていれば、ここでの表示も透過状態で表示されるはずですが、そうではありません。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1514.png" alt="サンプルイメージ" border="0"> <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1515.png" alt="サンプルイメージ" border="0"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 14. 同じサンプル画像で背景指定の無い透過画像を作成すると、下図のようにレイヤーダイアログの表示とビューダイアログのナビゲーション表示でも透過した状態が表示されます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1516.png" alt="サンプルイメージ" border="1"> <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1517.png" alt="サンプルイメージ" border="0"> <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1518.png" alt="サンプルイメージ" border="0"> なぜこの部分を覚えてもらいかというと、見た目は透過された画像ですが、透過し設定した色も画像情報に含まれているため、そのデータをコピーなどして他の画像データに貼り付けた時、透過されない状態で貼り付けられてしまいますが、これは異常ではなく当然の結果ということです。 つまり、クリップボードなどにコピーした際には透過情報は含まれませんので、注意してくださいという事です。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 15. では透過指定している画像の貼り付け状態を確認してみましょう。 今処理した画像をクリップボードにコピーします。 コピー方法はメニューで「選択範囲｜すべて選択」をした後に、「編集｜コピー」を実行します。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1513.png" alt="サンプルイメージ" border="1"> 　　　「コピーする画像」 貼り付けを行ないたいイメージを選択してメニューの「編集｜貼り付け」を実行します。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1519.png" alt="サンプルイメージ" border="1"> 　　　「貼り付けをする画像」 すると右図の一番下のように、透過指定した色までもが貼り付いている事が確認出来ると思われます。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1520.png" alt="サンプルイメージ" border="1"> 　　「貼り付けを行なった結果」 このようになりますので、気をつけてください。 透過した物を貼り付けしたい場合は、フルカラーイメージにて背景レイヤー以外のレイヤーで背景透過したものをコピーして使用するようにしてください。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 16. 今作成した透過画像は、メニューの「ファイル｜名前を付けて保存」で適当な名前を付けてファイルの種類を「PNG ファイル(.png)」を指定して保存してください。 <img src="http://limeworld.chu.jp/neo_newfeature/images015/details1521.png" border="0"> <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png"> 17. PNG形式で保存した状態で、HTMLで透過されているかどうか画像を指定して表示させると、Webで透過できている事が確認できます。 例として下に今作成した画像が透過されているかどうかテーブル内に表示してみます。 <table width="200" height="200" border="1"> <tr> <td align="center" valign="middle" background= "http://limeworld.chu.jp/neo_newfeature/images015/back5.jpg"><img src= "http://limeworld.chu.jp/neo_newfeature/images015/ring_g.png"></td> </tr> </table> テーブルの背景に指定した画像が見えることが確認出来ると思われます。 簡単ですので、どんどん作って楽しんでください。 <img src="http://limeworld.chu.jp/neo_tips/03_images/border01.png">

透過画像が簡単に作れます！ <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15"><img src= "http://picture.sub.jp/powerful/neo_newfeature/images_pbse/point01.png" width= "15" height="15" align="left"></td> <td> Webで公開する透過画像の作り方</td> </tr> </table> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 1. まず PictBear SecondEdition で作ることが出来る透過画像の種類を確認しておきましょう。 一般的に透過画像といえばGIF形式を思い浮かべると思われますが、現在のフリーソフトでGIF形式の対応をしているものはほとんど存在しません。（一部アプリケーションを除く） PictBear 2.0 RC4からGIF形式をサポートしましたので、この記事で紹介している方法でGIF形式にて保存するとGIF形式でも透過画像が作れます。 Web上のホームページなどで使用できる一般的な透過画像で、GIF形式に変わるものとして出てきたのがPNG形式になります。 PictBear SecondEdition ではこのPNG形式の透過画像を作成できるようになりました。 ライムのホームページで使用されている画像は基本的にPNG形式で作成された物がほとんどです。 （一部GIF動画とJPEG形式を使用） PictBear SecondEdition でPNG形式以外で透過画像をサポートしているのは、PBX形式だけですが、このフォーマットはPictBear 独自のフォーマットですので、PictBear以外では表示することが出来ませんので、実質Web上で使用できる透過画像の製作は、PNG形式だけになります。 また、このPNG形式の透過画像にも２種類あることを確認しておきます。 PictBear Ver1.xの時からサポートされていたフルカラー画像のアルファチャンネルを使用した透過画像と、PictBear SecondEditionからサポートされた２５６色以下のインデックスカラーで使用できる透過画像になります。 フルカラー画像のアルファチャンネルを使用した透過画像は、一部のブラウザで標準対応していないことからWeb上であまり見かけないのが現状です。 PNG形式で透過画像としてWeb上で使用されているほとんどが２５６色以下のインデックスカラーで作られた物です。 ではさっそくその２５６色以下のインデックスカラーで使用できる透過画像の作り方を説明してみます。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 2. まず、透過させる画像を用意します。 ここでは下図のイメージを使用して説明してみます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1501.png" alt= "サンプルイメージ" border="1"> この画像のレイヤー状態は下図のような状態で描画されています。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1502.png" alt= "サンプルイメージ"> 背景レイヤーは白色で設定されています。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 3. この画像をフルカラーイメージからインデックスカラーイメージへ変換します。 メニューの「イメージ｜イメージタイプ｜インデックスカラー」を選択します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1503.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 4. この画像イメージは複数のレイヤーを使用して描画していますので、下図のような警告メッセージが表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1504.png" alt= "サンプルイメージ" border="0"> 単一のレイヤーにて描画している画像ですと、この警告表示は彪辞されません。 処理するので、「はい」をクリックします。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 5. すると下図のインデックスカラーダイアログが表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1505.png" alt= "サンプルイメージ" border="0"> ここで処理したい設定をした後、「OK」をクリックして処理を実行します。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 6. 処理が実行されるとインデックスカラーに変換されます。 変換されると下図のようにレイヤーが一つになり、背景レイヤーになっている事が確認出来ると思われます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1506.png" alt= "サンプルイメージ" border="0"> また、パレットダイアログのサンプルを開くと処理した色数のパレットに変わっていることが確認できます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1507.png" alt= "サンプルイメージ" border="0"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 7. この状態で透過できる画像の準備が出来ましたので、透過設定を行ないます。 メニューの「イメージ｜パレット｜透過色の設定」をクリックします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1508.png" alt= "サンプルイメージ"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 8. すると下図のように透過色の設定ダイアログが表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1509.png" alt= "サンプルイメージ" border="0"> このダイアログで色を指定すると、その色が透過色の設定となり透過することが出来ます。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 9. 表示されているパレットから色を選択するのですが、この状態のパレットから色を選択して透過するのが大変な場合は、真中あたりにある、ソートを使用してパレットを整列しなおしてから選択すると、選択しやすくなったりします。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1510.png" alt= "サンプルイメージ" border="1"> それでも選択するのが大変な場合には次の方法を使用します。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 10. ダイアログの一番右側にある「色の選択」ボタンをクリックします。 すると右図のように選択できる色情報が表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1511.png" alt= "サンプルイメージ" border="1"> この機能を使うことによって、選択が容易になります。 描画色もしくは背景色にあらかじめ色の取得ツールなどでイメージ画像から透過したい色を抽出しておき、このメニューの描画色か背景色を指定するとその色が反映できます。 また、イメージの４つ角の1ドット色を指定することも出来ます。 また、イメージの中で透過した部分が全体で使用されている頻度が高い場合は、一番下の「最も使われている色」をしてすると設定することが出来ます。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 11. ここでは「左上の色」を指定して色を決めます。 色の指定が出来ると、ダイアログ真中に表示される「透過色」の設定が「透過職を有効にする」にチェックが入り、「色情報」部分に指定した色の情報が表示され、確認することが出来ます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1512.png" alt= "サンプルイメージ" border="1"> 色の指定が出来たら、そのまま「OK」をクリックします。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 12. 処理が実行されると、下図のように透過表示されているのが確認できます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1513.png" alt= "サンプルイメージ" border="1"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 13. ここで一つ覚えておいて欲しい事があります。 この透過処理はあくまでもある特定の1色だけを透過するように画像情報の中に埋め込んでいるだけですので、画像そのものの透過した色はけされていないという事です。 それを裏付けるのがレイヤーダイアログの表示とビューダイアログのナビゲーション表示を確認すると分かります。 下図で分かるように、表示されるイメージの背景は白色のままで、透過された状態での表示になっていません。 透過指定した色が削除されて透過表示されていれば、ここでの表示も透過状態で表示されるはずですが、そうではありません。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1514.png" alt= "サンプルイメージ" border="0"> <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1515.png" alt= "サンプルイメージ" border="0"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 14. 同じサンプル画像で背景指定の無い透過画像を作成すると、下図のようにレイヤーダイアログの表示とビューダイアログのナビゲーション表示でも透過した状態が表示されます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1516.png" alt= "サンプルイメージ" border="1"> <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1517.png" alt= "サンプルイメージ" border="0"> <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1518.png" alt= "サンプルイメージ" border="0"> なぜこの部分を覚えてもらいかというと、見た目は透過された画像ですが、透過し設定した色も画像情報に含まれているため、そのデータをコピーなどして他の画像データに貼り付けた時、透過されない状態で貼り付けられてしまいますが、これは異常ではなく当然の結果ということです。 つまり、クリップボードなどにコピーした際には透過情報は含まれませんので、注意してくださいという事です。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 15. では透過指定している画像の貼り付け状態を確認してみましょう。 今処理した画像をクリップボードにコピーします。 コピー方法はメニューで「選択範囲｜すべて選択」をした後に、「編集｜コピー」を実行します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1513.png" alt= "サンプルイメージ" border="1"> 　　　「コピーする画像」 貼り付けを行ないたいイメージを選択してメニューの「編集｜貼り付け」を実行します。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1519.png" alt= "サンプルイメージ" border="1"> 　　　「貼り付けをする画像」 すると右図の一番下のように、透過指定した色までもが貼り付いている事が確認出来ると思われます。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1520.png" alt= "サンプルイメージ" border="1"> 　　「貼り付けを行なった結果」 このようになりますので、気をつけてください。 透過した物を貼り付けしたい場合は、フルカラーイメージにて背景レイヤー以外のレイヤーで背景透過したものをコピーして使用するようにしてください。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 16. 今作成した透過画像は、メニューの「ファイル｜名前を付けて保存」で適当な名前を付けてファイルの種類を「PNG ファイル(.png)」を指定して保存してください。 <img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/details1521.png" border="0"> <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png"> 17. PNG形式で保存した状態で、HTMLで透過されているかどうか画像を指定して表示させると、Webで透過できている事が確認できます。 例として下に今作成した画像が透過されているかどうかテーブル内に表示してみます。 <table width="200" height="200" border="1"> <tr> <td align="center" valign="middle" background= "http://picture.sub.jp/powerful/neo_newfeature/images015/back5.jpg"><img src= "http://picture.sub.jp/powerful/neo_newfeature/images015/ring_g.png"></td> </tr> </table> テーブルの背景に指定した画像が見えることが確認出来ると思われます。 簡単ですので、どんどん作って楽しんでください。 <img src="http://picture.sub.jp/powerful/neo_tips/03_images/border01.png">

表示オプション

横に並べて表示：

変化行の前後のみ表示：