prevcontentnext


その他フィルタ

キャンディーの詰め合わせ...ここには他の場所にぴったりしない全てのフィルタがあります。立体画像をつくるようなフィルタがここで見つかります。しかし、ウェブサイトをつくる人のためのイメージマップフィルタが最も重要でしょう。

差分

オリジナル画像と現在作業中のバージョンとの差分を見たいときには、これが使うべきフィルタです。差分(Diff)はとても簡単に使えます。まず、画像の(before)と(after)を指定します。つぎに、どのように差分を表示すべきか指定します。

出力タイプ(Output Type)を指定することもできます。新規画像、現在の画像の新規レイヤー、またはフィルタを呼び出した画像です(しかし、これは画像を破壊します)。

差分の方法

· 減算(Subtract)は、ちょうど差分モードがするように(減算モードではなく)、変更されたピクセルの差分の値を表示します。

· 不変更部分を塗る(Paint unchanged)は、変更された部分だけが見えるようにするために、変えていないピクセルの上にマスクを塗ります。

· 変更部分を塗る(Paint changed)は、不変更部分を表示するために変更したピクセルの上にマスクを塗ります。

· 二色(Two tone)は、変更したピクセルを道具箱の背景色で塗り、変えていないピクセルを前景色で塗ります。

下の図で四つの差分の方法を示します。上左はオリジナル画像、上中は加工した画像、上右は変更部分を塗る、下左は不変更部分を塗る、下中は減算、下左は二色です。喫煙は老化させる、ようにも見えますね.....。

イメージマップ

右クリック|フィルタ|Web|イメージマップは、イメージマップをつくるときのGimpの究極のツールです。イメージマップはウェブページでよく使われています。あなたがブラウザで次の場所に移動するために画像の中の異なる場所をクリックするとき、そのナビゲーションバーにはイメージマップがあります。

ナビゲーションバーのクリックできる領域は定義される必要があります。手書きでやっているのでなければ、これは通常MapEditのような別のプログラムを使ってやります。イメージマップは、別のプログラムをまったく起動しなくてもいいように、イメージマップエディタをGimpに統合しています。

イメージマップの使い方

実例を見ていきましょう。これはFashion Clothingカンパニーのタイトルバーです。Gimpのフィルタ|下塗りメニューのGfigダイナミック文字の助けを借りて、何枚かの在庫写真からレトロ風のナビゲーションバーをつくったのです。

この画像をウェブページのクリックできるイメージマップとして使いましょう。

イメージマップのインターフェイス

適当な画像形式(JPEGやPNGやGIF)に、画像を統合(右クリック|レイヤー|画像の統合)して保存します。GIF形式で画像を保存するときには、フィルタを適用する前に画像をRGBモードに変換する必要があります。それでは、イメージマップフィルタを呼び出して始めることにしましょう

左側の三つの青いボタンが主な作成ツールです。それらは四角形円形多角形の領域を定義します。矢印はマーカーのツールです。移動または変更したい領域をマークするために使います。領域をつくるには、つくりたいオブジェクト領域の形に適したボタンを押し、クリック可能領域として定義したいオブジェクトの周囲を囲めるようにクリックしてドラッグします。満足のいく形の領域にできなかったら、矢印ツールで作り直すことができます。私達はFigure37.3のように、ロゴとレトロな人達を囲む領域をつくりました。

あるマップ領域を取り除くには、取り除くマップ領域を選んで削除ボタン(赤いX)を押します。そうするとそのマップ領域はなくなります。領域設定ダイアログを開くには、領域を選んで鉛筆ボタンを押します。


領域設定ダイアログ

リンク

クリック可能領域を作り、マウスを放してまた同じ場所でクリックすると領域設定ダイアログが現われます。それは定義された領域がナビゲイトしていくURLを指定すべきリンクウィンドウを表示しています。この領域がクリックされた場合に使用するURLの入力フィールドでリンクのURLを指定しますが、リンクすべきファイル名/URLを指定するHTMLファイル選択ダイアログを開くこともできます。

ウェブページにフレームがあるときには、ターゲット入力フィールドでターゲットIDを指定することができます(HTML/ウェブの専門用語を全部解説するとこの本の範囲をこえてしまうので、ウェブの制作には幾分なじんでいるという前提で書いています)。

その領域についてコメントを書くこともできます。それはネットスケープのステータスウィンドウのようなところに表示されるでしょう。リンクがどこにユーザーを連れて行くかという情報にコメントを使うことをお勧めします。

矩形、円形、多角形

定義した領域を編集したいときには、矢印/選択ツールか領域設定ダイアログを使うことができます。通常は、領域を定義するためのマウスのクリックで十分でしょう。しかし、ときにはもっと正確にする必要があります。多角形は幾つかのノードでつくられるので、ノードの追加や削除をしたいかも知れません。それはマウスではできません。そこで、矩形/円/ポリゴンのタブの出番となります。選んだ領域の領域設定ウィンドウにアクセスするためには、鉛筆ツールをクリックします。

ジャバスクリプト

マウスを領域の上に乗せたり領域の外に出したときのジャバスクリプトを有効にしたければ、JavaScriptタブですることができます。ジャバスクリプトの関数を呼び出すときにonMouseover= "" を含める必要はありません。それらの文字はイメージマップが加えるからです。


メインウィンドウ

画像ウィンドウ

メインウィンドウは二つのセクションに分けられています。Figure37.7に示すような画像ウィンドウが左側にあり、Figure37.8に示すような領域ウィンドウが右側にあります。
Figure37.7

画像ウィンドウはGimp画像を表示します。そして、ここでイメージマップをつくります

画像ウィンドウの上にあるアイコンバーで画像ファイルの保存開く環境設定拡大表示縮小表示をすることができます。定義した二つの領域が部分的に重なっているときにはスタックコントロールアイコンを使って領域を前か後ろに送る選択をすることができます。

領域ウィンドウ

領域ウィンドウは、作成した領域の全ての情報のリストを表示します。マップ領域を選択するには、リストの中のマップ領域の一つをクリックします。重複した領域の指定した順序を変えたいときには、列を選び緑の矢印をクリックしてスタックの中を上または下に動かします。

領域ウィンドウの下の左のフィールドは画像ウィンドウにあるマウスカーソルの(絶対的な)現在の位置を示します。右のフィールドは、ドラッグされた矩形マップの高さ、円マップの半径、ポリゴン(多角形)マップの相対的なカーソル位置を示します。


Figure37.8


格子

格子は定義領域をつくるときに非常に役立ちます。画像ウィンドウに格子システムを追加するには格子アイコンをクリックします。デフォルトの格子サイズや形に満足しなかったら、格子とガイド|格子設定をクリックして格子設定ダイアログを呼び出して下さい。ここで、格子間隔と位置、表示方法を指定できます。新しい設定を有効にするには了解を押します。

マップ情報

マッピングが完成したら、どんなタイプのイメージマップを使うのか考えるときです。イメージマップは三つのマップファイル形式をサポートしています。

· NSCAは、NSCAウェブサーバーとNSCA系列のサーバーによって使われています。

· CERNは、CERNウェブサーバーによって使われています。

· CSIMは、クライアント側のイメージマップとして使われるものです。つまり、ウェブサーバーではなくてウェブブラウザによって処理されるイメージマップです。

とても扱いやすいのでCSIMマップを使うことをお勧めします。マップ形式を指定するにはマップ情報アイコン(青いiの紙アイコン)を押します。そうするとこのマップファイルに対する設定ダイアログが現われます。これを書いている時点では(ImageMap 0.4)、マップファイル形式だけが有効です。マップ情報(形式)を設定するには、適切なボタンをチェックして了解を押します。

マップファイルの作成

HTML文書にマップ情報をペーストできるように、マップファイルを保存する必要があります。ファイルをメインウィンドウのファイル|別名で保存で保存して下さい。

これで全てのマップ情報を含んだマップファイルができました。あとはテキストエディタでマップファイルを開き、もう一つ、テキストエディタでイメージマップを含めるべきウェブページを開くだけです。あなたのHTMLコードの適切な場所にマップ情報をペーストして下さい。(もちろん色々なエディタがあって操作方法も違いますが共通部分だけを記述しています。)

再び編集するためにマップファイルを開くことができるので、保存したマップファイルを削除しないで下さい。イメージマップを変更したいときにマップファイルはとても便利に役立ちます。そして、マップ情報は常にHTMLファイルにコピー/ペーストすることを忘れないで下さい。

マップ情報はこんな感じです

HTMLコードは例えばこのようになります

魔法の目

右クリック|フィルタ|下塗り|魔法の目は、Gimpで3-D立体画像を作ることができます。みんな雑誌で3-D画像を見たことがあると思います。一定のやり方で見る必要のある奇妙な外見の画像で、花とか何かがポップアップしてきます。すぐにGimpで同じことができます。

実例とパラメータ

1. まず、Figure37.11のようなグレースケールのマップ画像をつくります(これがポップアップする3-Dを含む画像になります)。マップ画像のオブジェクトが明るいほど、立体画像でそれが高くポップアップすることを憶えておいて下さい。

2. Figure37.12のようにマスク画像をつくります(これがマップ画像を隠すことになる画像です)。これが正しく働くためには(反復するテクスチャーが重要)、画像は何がしかの色を持つ必要があります。

3. マップ画像から魔法の目を呼び出します。

4. 背景メニューでマスク画像を選びます。

5. 幅縮小スライドバーで、背景パターンのクローンの帯に使いたいマスク画像の列の数を設定します(50と100の間が適当でしょう)。列は左から数えられます。

6. マップ画像の最初と最後の部分を黒にしておく必要がある(背景の帯びの約半分のサイズ)ことを忘れないで下さい。

7. 深度は、欲しい3-Dの量です(つまり、どれだけポップアップさせたいか)。

8. 左からは、画像中央から形成するかわりに画像の左から画像を形成します。(何らかの理由で、3-D画像は左から作られたほうが見やすいことがよくあります。)

9. 下には、画像を持ち上げるかわりに彫り込むものです。

10. うまくいけば、これで深度マスク幅縮小(帯)の選択ができています。

11. 了解または作成を押せば、新しい3-D画像が現われるでしょう(Figure37.13参照)。

ステレオグラム

ステレオグラム(Stereogram)フィルタは、グレースケール画像の3-D立体画像をつくります(魔法の目と同種)。

SIS(Single Image Stereogram)をチェックすれば、背景がパターンとして使われます。SIRDS(Single Image Random Dot Stereogram)では、背景のステレオ(立体)ノイズだけを得るでしょう。

ステレオグラムの使い方

1. グレースケール画像を一つつくります(ポップアップのマップ)。

2. プラグインを呼び出します。

3. 背景(background)を選びます(等しいサイズのRGB画像)。

4. SISまたはSIRDSからステレオグラムのタイプを選びます。

5. 了解を押します。

これでステレオグラムのできあがりです。立体画像であなたの画像の3-D表現が現われるまで、画像の少し後ろに焦点を合わせて画像をよく見てみましょう。

ビデオ

右クリック|フィルタ|歪み|ビデオプラグインは、画像が平凡な低解像度ドットピッチビデオモニタであるような幻想をつくります。色々なパターンを使ってこれを達成することができます。つまり、「だめなモニタ」をたくさん作れるということです。

デフォルトのパターンは縞ですが、縦縞にするため回転をチェックすることができます。よりリアリスティックな外観を得るためには付加的を使います。付加的(加算)の説明は、モードを参照して下さい。付加的を使わないときには、パターンは単に画像の上に置かれて画像をかなり暗くします。

prevcontentnext


Frozenriver Digital Design
http://www.frozenriver.nu
Voice: +46 (0)31 474356
Fax: +46 (0)31 493833
support@frozenriver.com
Publisher Coriolis
http://www.coriolis.com