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