2008/09/30 17:36:27
かっちょいいヘッダー画像を作ろう(その4)
ヘッダー画像製作シリーズ4回目です。
今回は画像処理の観点からお手本になりそうなヘッダー画像を最初に見て、
真似っこするテクニックを紹介したいと思います。
今回お手本にするのは赤ブタさんのブログのヘッダー画像です。
画像全体に黒く細い横線が無数に走っています。
なかなかクールな印象を受けますよね。
前回作成した画像にこの横線を施していきましょう。
Gimpを立ち上げ、前回作成したHeader02.xcfを開きます。
さて、横線の引き方ですが・・・
今回はちょっと新しいテクニックを使っていきましょう。
それはレイヤーというのを使って画像の重ね合わせをするというテクニックです。
レイヤーというのは、アニメのセルみたいなものだとご理解ください。
背景があってその上に透明なセルをおきます。
そのセルに描画していくわけです。そうすれば背景にはなんの影響もなく
各種合成ができるというわけです。
レイヤーってなんとなく便利そう・・・、って思っていただいたところで
早速はじめましょう。
さっそくレイヤーを追加します。
画像が表示されているウィンドウのメニューの中から[レイヤー]、[新規レイヤー]とクリックします。

すると↑このようなダイアログが表示されます。
レイヤーの名前はお好きな名前で構いません。
私は面倒なのでほとんどの場合、新規レイヤーのままにしています。
幅、高さは背景と同じになっているはずなのでそのままにして、
レイヤー塗りつぶし方法を透明部分を指定してOKをクリックしてください。
・・・画像には何の変化もありません。
それはそうですよね。背景画像に透明な板を載せただけですから。
ではどうやってその透明な板を確認するかというと、
画面右側のウィンドウで確認します。

背景の上に新規レイヤーが表示されていればOKです。
これからあとはこのレイヤーに画像処理していきます。
まずは処理を施すレイヤーを指定してやらなければなりません。
新規のレイヤーを作成した直後でしたら右側のウィンドウのレイヤーのリストで、
新規レイヤーが選択されているはずです。もし違ったら新規レイヤーをクリックしてください。
いよいよこのレイヤーにストライプを引いていくわけですが、
一本一本引いていったのではいつまでかかるか分かりません。
というわけで手抜き法をお教えしましょう。
まず、画面左側のウィンドウのアイコンからバケツのアイコンをクリックします。
このアイコンは塗りつぶしのアイコンです。

オプションの指定は↑これと同じにして置いてください。
画像の上にマウスポインタを持っていくとバケツの形に変わります。
画像の上でクリックすると・・・・・・真っ黒になったはずです。
でもご安心ください。背景に色は塗っていません。
透明なレイヤーに塗っただけです。
それを確認するには画面右側のウィンドウのレイヤーのリストの左端にある
お目目のマークをクリックしてください。このマークが表示されているレイヤーだけが
表示されます。
納得していただいたら今度は真っ黒のレイヤーをストライプにします。
今一度処理を施すレイヤーを確認してください。
もし違ったら新規レイヤーをクリックしてください。
画像を表示(といっても真っ黒ですが)しているウィンドウに戻って、
メニューの中から[フィルター][歪み][一行おきに消す]とクリックしてください。
オプションはそのままで大丈夫です。
OKを押すとあ~ら不思議。下の画像が見えてきました。
しかもストライプが入っています。
これで赤ブタさん風ヘッダー画像ができました。
画像の表示されているウィンドウのメニューの中から[ファイル][別名で保存]とクリックします。
更に画像処理する場合は名前をHeader03.xcfにして保存してください。
このままヘッダー画像にされる場合はHeader03.jpgとして保存してください。
今回出来上がったヘッダー画像はこちら↓クリックすると原寸大で表示されます。

次回はFママさん風ヘッダー画像を作成したいと思います。
*****************************************************************************
追記
実はレイヤーを作成するときのオプションで描画色を選択して、
一行おきに消すフィルターを摘要しても結果は同じになります。
レイヤーって透明なセルなんだよってことを強調したかったので
手順がひとつ増えちゃいました。
今回は画像処理の観点からお手本になりそうなヘッダー画像を最初に見て、
真似っこするテクニックを紹介したいと思います。
今回お手本にするのは赤ブタさんのブログのヘッダー画像です。
画像全体に黒く細い横線が無数に走っています。
なかなかクールな印象を受けますよね。
前回作成した画像にこの横線を施していきましょう。
Gimpを立ち上げ、前回作成したHeader02.xcfを開きます。
さて、横線の引き方ですが・・・
今回はちょっと新しいテクニックを使っていきましょう。
それはレイヤーというのを使って画像の重ね合わせをするというテクニックです。
レイヤーというのは、アニメのセルみたいなものだとご理解ください。
背景があってその上に透明なセルをおきます。
そのセルに描画していくわけです。そうすれば背景にはなんの影響もなく
各種合成ができるというわけです。
レイヤーってなんとなく便利そう・・・、って思っていただいたところで
早速はじめましょう。
さっそくレイヤーを追加します。
画像が表示されているウィンドウのメニューの中から[レイヤー]、[新規レイヤー]とクリックします。

すると↑このようなダイアログが表示されます。
レイヤーの名前はお好きな名前で構いません。
私は面倒なのでほとんどの場合、新規レイヤーのままにしています。
幅、高さは背景と同じになっているはずなのでそのままにして、
レイヤー塗りつぶし方法を透明部分を指定してOKをクリックしてください。
・・・画像には何の変化もありません。
それはそうですよね。背景画像に透明な板を載せただけですから。
ではどうやってその透明な板を確認するかというと、
画面右側のウィンドウで確認します。

背景の上に新規レイヤーが表示されていればOKです。
これからあとはこのレイヤーに画像処理していきます。
まずは処理を施すレイヤーを指定してやらなければなりません。
新規のレイヤーを作成した直後でしたら右側のウィンドウのレイヤーのリストで、
新規レイヤーが選択されているはずです。もし違ったら新規レイヤーをクリックしてください。
いよいよこのレイヤーにストライプを引いていくわけですが、
一本一本引いていったのではいつまでかかるか分かりません。
というわけで手抜き法をお教えしましょう。
まず、画面左側のウィンドウのアイコンからバケツのアイコンをクリックします。
このアイコンは塗りつぶしのアイコンです。

オプションの指定は↑これと同じにして置いてください。
画像の上にマウスポインタを持っていくとバケツの形に変わります。
画像の上でクリックすると・・・・・・真っ黒になったはずです。
でもご安心ください。背景に色は塗っていません。
透明なレイヤーに塗っただけです。
それを確認するには画面右側のウィンドウのレイヤーのリストの左端にある
お目目のマークをクリックしてください。このマークが表示されているレイヤーだけが
表示されます。
納得していただいたら今度は真っ黒のレイヤーをストライプにします。
今一度処理を施すレイヤーを確認してください。
もし違ったら新規レイヤーをクリックしてください。
画像を表示(といっても真っ黒ですが)しているウィンドウに戻って、
メニューの中から[フィルター][歪み][一行おきに消す]とクリックしてください。
オプションはそのままで大丈夫です。
OKを押すとあ~ら不思議。下の画像が見えてきました。
しかもストライプが入っています。
これで赤ブタさん風ヘッダー画像ができました。
画像の表示されているウィンドウのメニューの中から[ファイル][別名で保存]とクリックします。
更に画像処理する場合は名前をHeader03.xcfにして保存してください。
このままヘッダー画像にされる場合はHeader03.jpgとして保存してください。
今回出来上がったヘッダー画像はこちら↓クリックすると原寸大で表示されます。

次回はFママさん風ヘッダー画像を作成したいと思います。
*****************************************************************************
追記
実はレイヤーを作成するときのオプションで描画色を選択して、
一行おきに消すフィルターを摘要しても結果は同じになります。
レイヤーって透明なセルなんだよってことを強調したかったので
手順がひとつ増えちゃいました。
Posted by kumaneko at 17:36 │Comments(0) │TrackBack(0)
この記事へのコメント
この記事へのトラックバック
この記事へのトラックバックURL
http://app.linkul.net/trackback/kumaneko/1222767088995

