GIMPを使ったWebページの作成
何かを学ぶ最も簡単な方法は、自分で試してみることです。ここでは、GIMPを使って簡単なWebページ画像を作成する方法を学びます。GIMPを使うと非常に複雑な画像処理を行うことができます。詳しくは、the section called より詳しい情報の入手先を参照してください。
画質の改善
以下の項目を解説するのに、単純な画像を使用します。
色の自動補正の実行
写真の赤目問題の修正
不要な部分の削除
スキャナで読み込んだ画像を、ファイル=>開くメニューを使ってGIMPに読み込みます。
犬のボニーの元の写真は、きれいに撮れていません。色は全体的にあせています。目が赤目です。また、ボニーの足の付け根にある暗いシミと、顔を触っているのが少しだけ見える人の手も削除しておきたいところです。
最初に、GIMPを使って色の自動補正を行います。画像を右クリックして、画像=>色=>レベルを選択すると、レベルダイアログボックスが表示されます。色を改善するために、Figure 9-10のように、[レベル変更対象チャンネル]プルダウンメニューから[赤]を選択します。
これで、ヒストグラムが、画像のすべてのピクセルの赤の値を示します。これを見ると、画像の中で、赤の値の範囲は、利用できる色調の範囲全体に渡っているわけではないことがわかります（黒から赤に変化している下のバーが範囲を表します）。言い換えると、画像では、最も暗い赤の値は使っていません。ヒストグラムでは暗い方の色域がないことでこれがわかります。
切り替えてみると、[青]、[緑]、[明度]のレベルは、ヒストグラムが全体に渡って使われています。つまり、色の値域を考えると、画像の最も暗い色は本来あるべき暗さではないのです（赤色の暗さが足りないため）。画像の値域を圧縮すれば、値域が利用できる値域全体に適用され、きれいに見えるでしょう。
こう説明すると複雑に聞こえますが、GIMPでは簡単に処理できます。[レベル]ダイアログボックスの[自動]ボタンをクリックするだけです。[自動]は、すべての色の範囲を自動的に調整します（赤、青、緑）。 画像の[明度]も調整する場合は、[レベル変更対象チャンネル]プルダウンメニューから[明度]を選択し、もう一度[自動]ボタンをクリックします。
[レベル]ダイアログボックスの[プレビュー]チェックボックスが選択されていると、画像の補正のプレビューを見ることができます。問題がなければ、[レベル]ダイアログボックスで[了解]ボタンをクリックして変更を確定します。
これで、ボニーの画像はFigure 9-11のように少し見栄えがよくなりました。
次に、クローンツールを使用して、画像から好ましくない部分を取り除きます。クローンツールを使用して、取り込んだ画像の部分で画像をペイントできます。これにより、人為的な部分を画像の実際のパターンを使って本当らしいパターンに置き換えることができます。
最初に、=キーを使うか、画像を右クリックしてメニューから表示=>拡大表示を選ぶことにより、ボニーの足の暗い陰を拡大します。次に、適切なブラシを選択します（ブラシを選択するには、ツールボックスで有効なブラシをクリックし、[ブラシ選択]ダイアログボックスから選びます）。ここでは、[Circle (07) (7 X 7)]を選択しました。
ツールボックスからクローンツールを選択します。Ctrlキーを押しながら暗い陰の左側の、ボニーのきれいな毛の部分をクリックして、パターンとして適用するように選択します。Ctrlキーを放します。ドラッグして、画像の不要な部分をパターンを使ってペイントします。
クローンツールを使ってペイントしているので、[+]の印はペイントブラシから離れていっしょに動きます。[+]の印は、ペイントブラシにパターンを提供している領域を指しています。
同様にして、ボニーの顔から人の手を取り除くことができます。同じブラシを使って、手の近くの、背景となるジーンズからクローンのための領域を選択します。
GIMPでは、ボニーの目の不気味な緑の部分を修正することもできます。[ブラシ選択]ダイアログボックスから、[Circle Fuzzy (11 X 11)]ブラシを選択します。 色のピッカーツールを使用して、緑でない部分から黒を選択します。ペイントブラシツールを使って、緑の部分でペイントを行います。一番難しい部分は、目をもっと自然に見せるように目の白い小さな部分を残すことです（黒で完全にベタ塗りしてはいけません）。
カラーレベルの自動調整を行い、シミ、手、緑の部分を取り除くと、画像はFigure 9-12のようになります。
最後に、装飾性を高めるために画像の縁をぼかします。
ボニーの写真より大きな新しい画像を、白い背景で作成します。大きな白い画像に、ボニーの画像をカット&ペーストします。四角い選択ツールを使って、ボニーの画像よりわずかに小さな四角い領域を選択します。画像を右クリックし、選択=>反転と選択して選択部分を反転させます。これで、画像の周りの四角い「枠」がFigure 9-13のように選択されます。
縁をぼかすには、画像を右クリックしてフィルタ=>ぼかし=>ガウシアンぼかし（IIR）と選択します。[ぼかし半径]設定を両方とも10にし、[了解]ボタンをクリックしてフィルタを適用します。
小さな白い縁を残すように画像を切り抜けば、Figure 9-14のようになります。
この画像をWebページで使用するために.jpgファイルとして保存します。
Webページの背景画像の作成
Webページに犬の写真を表示したいので、デザインした足跡を背景にしてみましょう。
最初に、白黒の足跡の画像を作ります。GIMPのメニューでファイル=>新規と選択して、新しい画像を開きます。[新規画像]ダイアログボックスが表示されるので、[幅]と[高さ]を両方とも500ピクセルと、大きめに設定しておきます。画像が完成してから必要なサイズにすればよいのです。[塗りつぶしの種類]を[白]に設定し、[了解]ボタンをクリックします。
まず大きな画像を作り、それから必要なサイズにすると作業が楽になります。画像を作成するために[Select elliptical regions]ボタンを使って楕円の選択範囲を作り、バケツツールを使って選択範囲を黒に塗りつぶします。1つ黒い楕円ができたら、それをコピー（Ctrl-Cキー）して、貼り付けます（Ctrl-Vキー）。これをもう一度繰り返し、うまい具合に3つの楕円を配置します。次に、小さなブラシでペイントブラシツールを使って、足跡を描きます。 オリジナルの白黒の画像は、大きさが108×114ピクセルで、Figure 9-15のようになります。
足跡の画像は、次の画像のための基盤です。目的は、Webページを横切って「歩いた」足跡としてFigure 9-16のようなものを作ることです。大きな足跡から最終の画像を得るには以下のようにします。
まず足跡を必要なサイズにします。画像を右クリックして、画像=>拡大縮小を選択すると、[画像拡大縮小]ダイアログボックスが表示されます。画像は少し大きくて希望する効果が出ないので、[比率]を0.85に調整します。
次に、ツールボックスから変形ツールを選択し、水平から50度ほど回転させます。
4個の足跡のコピーを作り、新しい大きな画像に貼り付けます。Ctrl-Cキーを使って、画像をコピーします。
Ctrl-Vキーを使って、最初の足跡を新しい画像に貼り付けます。次に、足跡を希望する位置に移動させます。希望する位置に移動させたら、もう1つ足跡を画像に貼り付けます。2番目の足跡が最初の画像の上に直接貼り付けられ、有効な画像となります。2番目の足跡を最初の足跡から少し離れた場所に移動させます。3番目と4番目の足跡についても同じように繰り返します。別のものを選択したあとで、間違った場所に移動させたことに気づいた場合は、いつでもCtrl-Zキーを押して作業をやり直すことができます。
次に、特殊効果を出すためにフィルタを使用します。フィルタは、画像に独特な雰囲気を与えます。画像を右クリックして[フィルタ]を選択すると、GIMPのフィルタのリストが表示されます。この画像では、まず[ガウシアンぼかし（IIR）]フィルタを、次に[バンプマップ]フィルタを使用します。
足跡を適切な場所に設定してから、画像をにじませるためにフィルタ=>ぼかし=>ガウシアンぼかし（IIR）を選択し、水平と垂直の[ぼかし半径]を初期値の5に設定します。後で使う[バンプマップ]フィルタが明るいピクセルと暗いピクセルに適用されるので、画像をにじませておけば、元の画像の白と黒の間に影ができてより自然に見えます。
フィルタを適用すると、白黒の足跡の画像はわずかににじみます。ここで画像を50%に縮小してサイズは250×250ほどにします。画像はFigure 9-16のようになります。
次に、コルクボードのパターンを、画像の新しいレイヤーに追加します。メニューからレイヤー=>レイヤー, チャンネル&パスを選択すると、[レイヤー, チャンネル&パス]ダイアログボックスが表示されます（Figure 9-17を参照）。
レイヤーは、作業している画像を重ね合わせたフィルムのように別々に保持するので、画像の一部を他の部分に影響を与えることなく処理できます。レイヤーは、複雑な画像を処理するときに欠かせない機能です。
[Layers]ダイアログボックスには、画像にあるすべてのレイヤーが表示されます。Figure 9-17で示したように、現在この画像にあるレイヤーは1つだけです。このレイヤーにはPawprintsという名前を付けておきます（レイヤーを右クリックして[レイヤーの属性を変更]を選択すれば名前を入力できます）。
次に、ダイアログボックスの下に並んでいるボタンの一番左にある[新規レイヤー]ボタンをクリックして、パターンに新しいレイヤーを追加します。
[新規レイヤーオプション]ダイアログボックスが表示されるので、[Corkboard]という名前を付け、[レイヤー幅]と[高さ]を初期値のままにします（現在の画像と同じ大きさになります）。[レイヤー塗りつぶし種]を[白]に設定し、[了解]ボタンをクリックします。
新しいレイヤーが古いレイヤーの上に自動的に生成され、画像の元のレイヤーが見えなくなりますが、心配はいりません。
次に、レイヤーをコルクボードのパターンで塗りつぶします。レイヤーをパターンで塗りつぶすには、まずレイヤーが「有効」になっていることを確認してください（[レイヤー,チャンネル&パス]ダイアログボックスでカラーバーが強調表示されていれば有効です。無効なレイヤーは白になります）。Figure 9-18では、Corkboardレイヤーが有効になっています。次に、バケツツールをダブルクリックして[ツールオプション]を表示し、[パターン塗り]を選択してオプションのダイアログボックスを閉じます。[ツールオプション]ツールボックスの下部右側にあるパターンをクリックすると[パターン選択]パレットが表示されるので、[Cork board (78 X 43)]を選択します。バケツツールを使って、Corkboardレイヤーを塗りつぶします。
ここで、[Layers]ダイアログボックスで目のアイコンをクリックして、コルクボードのレイヤーをいったん非表示にします（
アイコンをもう一度クリックすると、再び表示されます）。
Figure 9-16のように足跡が見えるようになった画像で、魔法の杖ツールを使って白いピクセルを選択します。画像を右クリックし、選択=>反転と選択して選択範囲を反転させると、黒か灰色のピクセルだけが選択されます。
レイヤーのダイアログボックスで目のアイコンをクリックしてコルク板のレイヤーを表示しても、Figure 9-19のように足跡の選択は表示されたままになります。
次に、選択した足跡の部分を暗くします。足跡を浮き上がらせる必要があるので、足跡とコルク板パターンの残りの部分を処理します。Bump Map GIMPでは、選択範囲を暗くするためのいろいろな方法が用意されています。簡単な方法は、画像（選択範囲を有効にしておきます）を右クリックし、画像=>色=>明るさ-コントラストを選択することです。Figure 9-20で示したように、[明るさ-コントラスト]ダイアログボックスで[明るさ]スライダを-40に移動させます。
[了解]ボタンをクリックすると、選択範囲が暗くなります。画像を右クリックして選択=>なしを選択して（または、Shift-Ctrl-Aキーを押す）、選択範囲を解除すると、Figure 9-21のようになります。
ここで最後のフィルタを適用します。画像を右クリックし、フィルタ=>マップ=>バンプマップと選択して[バンプマップ]ダイアログボックスを表示させます（f22を参照）。
[バンプマップ]ダイアログボックスで、[暗くならない様に補償する]チェックボックスをチェックし、[深度]を5に上げます（足跡が深くなるように見えます）。[バンプマップ]をPawprintsレイヤーに設定します。この値はいろいろと変えながら、プレビューで画像の雰囲気がどう変わるか調べることができます。[了解]ボタンをクリックすると、[バンプマップ]フィルタが適用され、画像はFigure 9-23のようになります。これで完成です。
Webページの背景の画像は、並べて表示することが必要で、画像のパターンをページ全体に調和させてページごとに繰り返すと、背景はつなぎ目なくなめらかに見えます。この画像では、コルク板のパターンはすでに並べて表示されているので、もう一度並べる必要はありません。並べて表示されていない画像を処理するときは、フィルタ=>マップ=>並べるフィルタを使って画像を並べて表示することができます。
Webページ用のタイトル画像の作成
GIMPを使用すると、Webページ向けのロゴ（タイトルとリンクのテキスト）、ボタン、アイコンなどが簡単に作成できます。
この例では、GIMPのフィルタをいくつか使って、Webページ用のテキストを独自の雰囲気にします。
最初に、大きさが400×100ピクセルの新しいファイルを、白い背景で作成します。GIMPのメニューでファイル=>新規と選択してから、[幅]に400、[高さ]に100と入力し、Fill Type=>白ラジオボタンを選んでおきましょう。
ツールボックスのテキストツールをクリックして有効にします。画像をクリックすると、[文字ツール]ダイアログボックスが表示されます（Figure 9-24を参照）。
ダイアログボックスの下部にある[プレビュー]フィールドに、Webページのタイトルを入力します。ダイアログボックスのプルダウンメニューから、[フォント]、[フォントスタイル]、[サイズ]を好みに応じて選択します。入力したテキストのプレビューは、Figure 9-25に示したように変化します。
このテキストは、実際のタイトル文字の「ドロップシャドウ」になります。 ツールボックス下部左側にある色ボックスを使って、前景の色をドロップシャドウの色に変更します。この例では、RBGを[153, 153, 153]にして、中間の灰色が選択されています。[文字ツール]ダイアログボックスで[OK]ボタンをクリックすると、Figure 9-26のようにテキストが作業ウィンドウに表示されます。
四角い選択ツールを選択して画像をクリックすると、テキストが確定されます。このテキストはドロップシャドウにするので、画像を右クリックしてフィルタ=>ぼかし=>ガウシアンぼかし（IIR）を選択します。[ガウシアンぼかし]ダイアログボックスで、[ぼかし半径]を初期値の5ピクセルのままにし、ぼかし効果を適用します（Figure 9-27を参照）。
次に、「実際」のテキストを画像に追加します。まず、有効な前景色を変更します。ここでは、あせた赤（RGB [204, 51, 51]）を選択しました。テキストツールを有効にして、画像をクリックして[テキストツール]ダイアログボックスを表示します。同じ設定が選択されていることを確認します（GIMPを終了しなければ、初期値のままです）。[了解]ボタンをクリックして、赤いテキストを画像に追加し、Figure 9-28のように、先ほどの影にしたテキストから少しずらして配置します（まだテキストの選択は解除しないでください）。
これだけではまだ平凡なので、Webページでもっと目立つように手を加えましょう。GIMPに用意されているグラデーションをテキストに適用するのです。
赤いテキストが選択されたままで、グラデーションツールをダブルクリックして[ツールオプション]を表示します。ここでは、[ブレンド]を[カスタムグラデーション]に、[グラデーション]を[形状広がり（角張った）]とします（Figure 9-29を参照）。
次に、使用するグラデーションをGIMPに用意されたグラデーションから選択します。ツールボックスの下部右側にあるグラデーションをクリックすると、利用できるグラデーションのパレットが表示されます。1つをクリックして有効にします（ここでは[Greens]グラデーションを選んでみましょう）。まだ選択されたままになっているテキストの部分をドラッグすると、画像はFigure 9-30f31のようになります。グラデーションのオプションで[形状広がり（角張った）]を選択したため、ドラッグの長さはグラデーションの表示に影響せず、選択範囲の端に従い、このような効果が生まれるのです。これをWebページで使うことにしましょう。
Ctrl-Zキーを押して元に戻り、同じグラデーションオプションで[Tube Red]パターンを使ってグラデーションを適用すると、Figure 9-31のようになります。これをWebページで使うことにしましょう。
Script-Fu
このようにして、GIMPでツールとフィルタを使って、なかなかのロゴが作成できます。また、さほど凝った画像でなければ、GIMPのScript-Fuを使えば、簡単に短時間でプロ顔負けの画像が作成できます。
Script-Fuを使うと、プログラマでなくてもGIMPのスクリプト機能を利用することができます。基本的には、ロゴ、パターン、ブラシ、その他の特殊効果を作るための異なるGUIが提供されています。独自のScript-Fuを作ることもできます。 Script-Fuを自分で作成してみたい場合は、本章の最後の方に示すthe section called より詳しい情報の入手先を参照してください。
Script-Fuを理解する一番簡単な方法は、実際に使ってみることです。ツールボックスのメニューから拡張=>Script-Fuと選択すると、利用できるScript-Fuのメニューが表示されます。たとえば、拡張=>Script-Fu=>ロゴ=>Bovinationと選択すると、[Script-Fu: Logos/Bovination]ダイアログボックスが表示されます。この場合は[Script Arguments]を変えることもできます。ここではフォントを選択し、[Text]を変更します。[了解]ボタンをクリックすると、GIMPによってフィルタが適用され、Script-Fuで作られた新しい画像のウィンドウがFigure 9-32のように表示されます。
牛模様のこのロゴはWebページに適切でないかもしれませんが、特殊効果を作り出すScript-Fuの機能を理解するには最適な例です。
