GIMP を使った Web ページの作成

画質の改善

この短い例のために、単純な画像を使用します。

• 色の自動補正の実行

• 写真の共通問題を修正 -- 赤目

• 不要な部分を削除

スキャナで読み込んだ画像を、[File][Shift]- [Open] を選択してGIMPにロードします。

オリジナルの犬のボニーの写真は、きれいに撮れていません。色は全体的にあせています。ボニーの目には明らかに問題があり、恐ろしい緑色でフラッシュを反射しています。また、ボニーの足の先にある暗いシミと、顔にある人の手を削除することができます。

最初に、GIMP を使って色の自動補正を行います。画像を右クリックして、[Image] - [Colors] - [Levels] の順に選択すると、[Levels] ダイアログが表示されます。色を改善するために、Figure 9-10のように、[Red] を [Modify Levels for Channel] プルダウンメニューから選択します。

ヒストグラムは、画像のすべてのピクセルの赤の値を示しています。画像の赤の値の範囲は、利用できる色調の範囲全体に適用されません (下のバーで黒から赤に変化します)。言い換えると、画像のどのピクセルも最も暗い値域で赤の値を持っており、ヒストグラムは値域の非常に暗い範囲で平坦になります。

[Blue]、[Green]、[Value] (明るさ) のレベルは、ヒストグラムが同じに見えます。結局のところ、色の値域を考えると、画像の最も暗い色は最大限の暗さではありません。画像は値域が狭いときれいに見えるので、画像の値域は利用できる値域全体に適用されます。

これは複雑なようですが、GIMP では簡単に処理できます。[Levels] ダイアログの[Auto] ボタンをクリックするだけです。[Auto] は、すべての色の範囲を自動的に調整します (赤、青、緑)。画像の [Value] (明るさ) も調整する場合は、[Value] を [Modify Levels for Channel] プルダウンメニューから選択し、もう一度[Auto] をクリックします。

[Levels] ダイアログの [Preview] チェックボックスが選択されていると、画像の補正のプレビューを見ることができます。これで良ければ、[Levels] ダイアログで [OK] をクリックして変更を確定します。

これで、ボニーの画像はFigure 9-11のように見えるようになりました。

次に、クローンツールを使用して、画像から好ましくない部分を取り除きます。クローンツールを使用して、取り込んだ画像の部分で画像をペイントできます。これにより、人為的な部分を画像の実際のパターンを使って本当らしいパターンに置き換えることができます。

最初に、[=] キーを使って、ボニーの足の暗い陰を拡大します。次に、適切なブラシを選択します。(ブラシを選択するには、ツールボックスで有効なブラシをクリックし、[Brush Selection] ダイアログから選びます。)ここでは、[Circle (07) (7 x 7)] が選択されました。

ツールボックスからクローンツールを選択します。[Ctrl] キーを押しながら暗い陰の左の部分をクリックすると、パターンとして適用する部分が選択されます。[Ctrl] キーを離します。十字のアイコンが鉛筆のアイコンに変わるので、選択した領域をパターンとして使用してペイントができます。

クローンツールを使ってペイントしているので、十字のアイコンはペイントブラシから離れていっしょに動きます。十字のアイコンは、ペイントブラシにパターンを提供している領域をマークします。

同じ方法で、ボニーの顔の人の手を取り除くことができます。同じブラシを使って、手のそばのジーンズからクローンのための領域を選択します。

GIMP では、ボニーの目の不気味な緑の部分を修正することができます。[Brush Selection] ダイアログから、[Circle Fuzzy (11 x 11)] ブラシを選択します。色のピッカーツールを使用して、目の緑でない部分から黒を選択します。ペイントブラシツールを使って、緑の部分でペイントを行います。一番難しい部分は、目をもっと自然に見せるように目の白い小さな部分を残すことです (黒で完全にベタ塗りしてはいけません)。

カラーレベルの自動調整を行い、シミ、手、緑の部分を取り除くと、画像はFigure 9-12のようになります。

最後に、装飾性を高めるために画像の縁をぼかします。

ボニーの写真より大きな新しい画像を、白い背景で作成します。大きな白い画像に、ボニーの画像をカットアンドペーストします。四角い選択ツールを使って、ボニーの画像よりわずかに小さな四角い領域を選択します。画像を右クリックし、[Select] - [Invert] と選択して選択部分を反転させると、画像の周りの四角い「枠」がFigure 9-13のように選択されます。

縁をぼかすには、右クリックしてから、[Filters] - [Blur] - [Gaussian Blur (IIR)] と選択します。[Blur Radius] 設定を両方とも 10 にし、[OK] ボタンを押してフィルタを適用します。

小さな白い縁を残すために画像が刈り込まれて、Figure 9-14のようになります。

最後に、画像を Web ページで使用するために .jpg ファイルとして保存します。

Web ページの背景画像の作成

Web ページに犬の写真を表示するので、デザイン化した足跡を背景に使用します。

最初に、白黒の足跡の画像を作ります。[File] - [New] と選択して、新しい画像を開きます。[New Image] ダイアログが表示されるので、[Width] と [Height] を両方とも 500 ピクセルに設定して作業する余地を確保します。画像が完了したらいつでも画像を刈り込むことができます。[Fill Type] を [White] に設定し、[OK] ボタンをクリックします。

画像を作成するために楕円の選択範囲を作り、バケツツールを使って選択範囲を黒に塗りつぶします。楕円の選択範囲をコピーします ([Ctrl]-[C]) そして、貼り付けます ([Ctrl]-[V]) 適切なパターンに 3 つの楕円を移動するので、2 度繰り返します。次に、小さなブラシでペイントブラシツールを使って、足跡を描きます。絵を描くときは大きな画像の方が簡単なので、描き終わってから調整します。オリジナルの白黒の画像は、大きさが 128 x 134 ピクセルで、Figure 9-15のようになります。

足跡の画像は、次の画像のための基盤です。Web ページを横切って「歩いた」跡はFigure 9-16のようになります。歩いた跡の画像を作るには、足跡の画像を以下のようにします。

• スケール -- 画像を右クリックして、[Image] - [Scale Image] を選択すると、[Scale Imange] ダイアログが表示されます。画像は少し大きくて希望する効果が出ないので、[Ratio] .85 に調整します。

• 回転 -- ツールボックスから変形ツールを選択し、水平からおよそ 50 度に画像をフリーハンドで回転させます。

• 新しい大きな画像に、以下のようにコピーして貼り付けます。 [Ctrl]-[C] 次に以下を使用します。 [Ctrl]-[V].

  最初の足跡が以下のように新しい画像に貼り付けられます。 [Ctrl]-[V]. 次に、足跡を希望する位置に移動させます。希望する位置に移動させたら、足跡の別のコピーを画像に貼り付けます。2 番目の足跡が最初の画像の上に直接貼り付けられ、有効な画像となります。2 番目の足跡を最初の足跡から適当な場所に移動させます。3 番目と 4 番目の足跡についても同じ手順を繰り返します。別のものを選択したあとで、間違った場所に移動させたことに気付いた場合は、いつでも以下が使用できます。 [Ctrl]-[Z] 作業をもう一度繰り返すことができます。

  次に、特殊効果を出すためにフィルタを使用します。フィルタは、画像に独特な雰囲気を与えます。画像を右クリックして[Filters] を選択すると、GIMP のフィルタのリストが表示されます。この画像のために、最初に [Gaussian Blur (IIR)] フィルタを、次に [Bump Map] フィルタを使用します。

  足跡を適切な場所に設定してから、画像をにじませるために [Filters] - [Blur] - [Gaussian Blur (IIR)] と選択し、水平と垂直の [Blur Radius] を初期値の 5 に設定します。フィルタ Bump Map が明るいピクセルと暗いピクセルで実行されるので画像がにじむ結果、元の画像の白黒の間にシミができてより自然に見えます。

  白黒の足跡の画像はわずかににじみ、再び 50% に調整された結果、Figure 9-16のようになります。

  Figure 9-16. 黒と白の足跡

  

次に、[Cork board] パターンを、画像の新しいレイヤに追加します。メニューパスから [Layers] - [Layers, Channels &; Paths] を選択すると、Figure 9-17に示したように[Layers, Channels &; Paths] ダイアログが表示されます。

レイヤは、作業している画像の部分を別々に維持するので、画像の一部を他の部分に影響を与えることなく処理できます。レイヤは、複雑な画像を処理するときに欠かせない機能です。

[Layer] ダイアログは、画像にあるすべてのレイヤを表示します。Figure 9-17 で示したように、この画像にあるレイヤは １ つだけで、Pawprints という名前に変更されています (レイヤを右クリックしてから [Edit layer attributes] を選択し、記述的な名前を入力します)。

次に、[New layer]をクリックして、パターンに新しいレイヤを追加します。[New Layer Options] ダイアログが表示されるので、[Layer Width] と [Height] を初期値のままにします (レイヤは画像と同じ大きさになります)。[Layer Fill Type] を [White] に設定し、 [OK] ボタンをクリックします。

新しいレイヤが古いレイヤの上に自動的に生成されるので、画像の元のレイヤが見えなくなります。

次に、レイヤを Cork board パターンで塗りつぶします。レイヤをパターンで塗りつぶすには、レイヤが「有効」になっていることを確認してください (レイヤのダイアログでカラーバーが強調表示され、無効なレイヤは白になります)。例として、Figure 9-18 を参照してください。Cork board レイヤが有効になっています。次に、バケツツールの [Tool Options] を表示させ (バケツツールをダブルクリックすると、[Tool Options] が表示されます)、[Pattern Fill] を選択します。ツールボックスで有効なパターンをクリックするとパターンパレットが表示されるので、[Cork board] を選択します。バケツツールを使って、Cork board レイヤを塗りつぶします。

[Layers]) で、コルク板のレイヤを非表示にします。(目のアイコンのスポットをもう一度クリックすると、再び表示されます。)

Figure 9-16のように足跡が見えるようになった画像で、魔法の杖ツールを使って白いピクセルを選択します。画像を右クリックし、[Select] - [Invert] と選択して選択範囲を反転させると、黒か灰色のピクセルだけが選択されます。

レイヤダイアログで目のアイコンをクリックすると、コルク板のレイヤが表示され、Figure 9-19のように足跡の選択が見えます。

次に、選択した足跡の部分を暗くします。足跡を暗くする必要があるので、Bump Map フィルタを使って、足跡とコルク板パターンの残りの部分を処理します。GIMP では、選択範囲を暗くするためのいろいろな方法が用意されています。簡単な方法は、画像 (選択範囲を有効にしておきます) を右クリックし、[Image] - [Colors] - [Brightness-Contrast] と選択することです。Figure 9-20で示したように、[Brightness-Contrast] ダイアログで [Brightness] スライダを -40 に移動させます。

[OK] ボタンを押して、選択範囲を暗くします。画像を右クリックし、[Select] - [None] (または、キーボードショートカット [Shift]-[Ctrl]-[A]) を使用して選択範囲を取り除くと、Figure 9-21のようになります。

フィルタを適用するには、画像を右クリックし、[Filters] - [Map] - [Bump map] と選択して [Bump Map] ダイアログを表示させます。

[Bump Map] ダイアログで、[Compensate for Darkening] チェックボックスをチェックし、[Depth] を 5 に上げます (足跡が深くなるように見えます)。フィルタを適用したあとのプレビューで、異なる [Bump Map] パラメータが画像の雰囲気にどのように影響するのかを調べることができます。[OK] ボタンを押すと、[Bump Map] フィルタが適用され、画像はFigure 9-23のようになります。

Web ページの背景の画像は、並べて表示することが必要で、画像のパターンをページ全体に調和させてページごとに繰り返すと、背景はつなぎ目なくなめらかに見えます。この場合、コルク板のパターンはすでに並べて表示されているので、もう一度並べる必要はありません。しかし、並べて表示されていない画像を処理するときは、[Filters] - [Map] - [Tile] フィルタを使って画像を並べて表示させます。

Web ページ用のタイトル画像の作成

GIMP を使用すると、Web ページ向けのロゴ (タイトルとリンクのテキスト)、ボタン、アイコンが簡単に作成できます。

この例では、GIMP のフィルタをいくつか使って、Web ページ用のテキストを独自の雰囲気にします。

最初に、大きさが 400 x 100 ピクセルの新しいファイルを、白い背景で作成します。[File] - [New] と選択してから、[Width] と [Height] に適切なパラメータを設定し、[Transparent] ラジオボタンを選びます。

ツールボックスのテキストツールをクリックして有効にします。画像をクリックすると、[Text Tool] ダイアログがFigure 9-24のように表示されます。

ダイアログの下部にある [Preview] フィールドに、希望するテキストを入力します。ダイアログのプルダウンメニューから、[Font]、 [Font Style]、[Size] を選択します。入力したテキストのプレビューは、Figure 9-25に示したように変化します。

このテキストは、「実際」のテキストのドロップシャドウになります。前景の色をドロップシャドウの色に変更します。この例では、153 153 153 の RBG 値で中間の灰色が選択されています。[Text Tool] ダイアログで[OK] ボタンを押すと、Figure 9-26のようにテキストが作業ウィンドウに表示されます。

四角い選択ツールをクリックし、画像にテキスト用の選択範囲を設定するために画像をクリックします。ドロップシャドウを作るには、画像を右クリックしてから、[Filters] - [Blur] - [Gaussian Blur (IIR)] を選択します。[Gaussian Blur] ダイアログで、[Blur Radius] を初期値の 5 ピクセルのままにし、Figure 9-27のようにぼかし効果を作ります。

「実際」のテキストを、画像に追加します。最初に、有効な前景色を変更します。この場合、あせた赤 (RGB 204 051 051) を選択します。テキストツールを有効にして、画像をクリックします。[Text Tool] ダイアログが表示されます。同じ設定が選択されていることを確認します (GIMP を終了しなければ、初期値のままです)。[OK] を押して、赤い「Hello World!」を画像に追加し、Figure 9-28のように正しい位置に移動させます。

これだけではまだ平凡で、Web ページでもっと目立つように手を加えます。それには、GIMP に用意されているグラデーションをテキストに適用します。

赤い「Hello World!」が有効な選択になっているので、グラデーションツールをダブルクリックして有効にすると、[Tool Options] が表示されます。ここでは、[Custom Gradient] を[Blend] として、[Shapeburst (angular)] を [Gradient] として、Figure 9-29で示したように選択します。

次に、使用するグラデーションを GIMP に用意されたグラデーションから選択します。ツールボックスで有効なグラデーションを選択すると、利用できるグラデーションのパレットが表示されます。1 つをクリックして有効にします。テキストにグラデーションを適用するには、テキストが有効な選択になっていることを確認してください。テキストの部分をクリックしてドラッグします ([Shapeburst (angular)] を選択したため、ドラッグの長さはグラデーションの表示に影響せず、選択範囲の端に従います)。たとえば、こうした設定を [Greens] グラデーションで行うと、画像はFigure 9-30のようになります。

平坦な赤い「Hello World!」と同じグラデーションパラメータで開始すると(戻るには [Ctrl]-[Z] を使用)、Tube_Red がこの効果を生成し、Figure 9-31で示したように、最終的な Web ページで使用します。

作成した画像を Web ページで組み合わせ

背景、タイトル、編集した写真は、Figure 9-33のようにすべて同じ Web ページで使用できます。