GIMPでWeb素材を作ろう GIMPでWeb素材を作ろう 2008/04/14

背景やボタンとしても使えそうで、今風（？）なWeb素材を作ってみましょう。
このような画像が作れるようになります。 文字を重ねると、ボタンらしくなりますね。 この解説で使用したバージョンは、2.2.4です。

実際に作ってみる

それでは、手順を追って作ってみましょう。

1. 新規画像を作成します。
   
   とりあえず、200x40というサイズで作ることにします。 細かなサイズ指定は、慣れれば各自が判断できるでしょう。
   
   問題なく作成されれば、こういうウィンドウが出現します。
2. 基本とする色を塗ります。
   
   ここでは、お気に入りの色である緑色を使いましたが、どのような色でもかまわないでしょう。 ただし、濃い目のほうがいいかもしれません。
3. グラデーションを塗るための準備をします。 画像を全選択してください。
   
   そして、選択領域の縮小で2px縮めます。
   
   次に、角を丸めます。 ここでは、半径を「50%」という設定で丸めます。 好みで変更してもかまわないでしょう。
   
   ここまで問題がなければ、このような状態になります。
4. シャドウとなるグラデーションを塗ります。 2枚目のレイヤーを作成します。
   
   最上部になるように配置してください。
   
   新規レイヤーへグラデーションで塗ります。 「前景から透明に」を選択します。 形状は「Linear」反復は「なし」です。
   
   下から中間までを選択し、グラデーションで塗ります。 ここまで問題がなければ、このような状態になります。
5. ハイライトとなるグラデーションを塗ります。
   
   減算選択で半分にします。
   
   再び角を丸めます。 半径を「100%」という設定で丸めます。 もし、膨らむようなら設定値を「90%」などに減らします。
   
   ここまで問題がなければ、このような状態になります。
6. グラデーションの調整を行います。
   
   グラデーションを塗ったレイヤーの透明度を「50%」に変更します。
   
   うまくいけば、こういう状態になります。 なんとなく、雰囲気が出てきたでしょうか。 しかし、もうちょっと手を加えていきましょう。
7. ボーダーを塗るための準備を行います。
   
   画像全体を選択して、それから2px縮小します。 選択領域を反転しておきます。 今回、角は丸めません。
8. ボーダーを塗ります。 この手順は、一気に進めてしまいます。 3枚目のレイヤーを作成します。
   
   最上部になるように配置してください。
   
   白色で描画色塗りします。 画像の端2pxをすべて塗ってしまいます。 作業しやすいように、表示倍率を800%に変更してあります。
   
   画像全体を選択して、それから1px縮小します。 選択領域を反転して、角もそのままです。 黒色で描画色塗りします。 画像の端1pxをすべて塗ってしまいます。
   
   アクセントに、角の1pxを白色で塗っておきました。
9. ボーダーの調整を行います。
   
   3枚目のレイヤーをオーバーレイモードに変更します。
   
   白色はハイライトっぽく、黒色はシャドウっぽくみえるようになります。
   
   等倍で表示すると、こういう状態になります。

Web素材の完成

画像として書き出して完成です。

透明度のある、それっぽい画像が出来上がりました。

背景とグラデーションの間にパターン塗りを加えてみました。 雰囲気が変わって、いい感じになります。 こういうWeb素材が使われているのを、よく見かけると思います。

自分で作るのが面倒な方へ

ここで使用したデータファイルをお使いください。 背景画像の色を変えるだけで、いろんなパターンの素材が作れることと思います。 ダウンロードで内容を表示してしまうブラウザの場合には、右クリックメニューから対象を保存してください。 Photoshopでは、こういった作業をマクロにしてしまえば、いろんなサイズでも自動的に作れます。 しかし、GIMPではマウス操作の記録という機能がなく、スクリプトをコーディングしなければなりません。 自動化できるようになるのは、いつになることでしょう…。

更新履歴

2008/04/14

サイト移動に伴うHTMLの修正(旧URI：http://penlabo.web.fc2.com/gimp-web_material.html)

2007/11/16

公開