背景やボタンとしても使えそうで、今風（？）なWeb素材を作ってみましょう。
このような画像が作れるようになります。
文字を重ねると、ボタンらしくなりますね。
この解説で使用したバージョンは、2.2.4です。
実際に作ってみる
それでは、手順を追って作ってみましょう。
-
新規画像を作成します。
とりあえず、200×40というサイズで作ることにします。
細かなサイズ指定は、慣れれば各自が判断できるでしょう。
問題なく作成されれば、こういうウィンドウが出現します。 -
基本とする色を塗ります。
ここでは、お気に入りの色である緑色を使いましたが、どのような色でもかまわないでしょう。
ただし、濃い目のほうがいいかもしれません。 -
グラデーションを塗るための準備をします。
画像を全選択してください。
そして、選択領域の縮小で2px縮めます。
次に、角を丸めます。
ここでは、半径を「50%」という設定で丸めます。
好みで変更してもかまわないでしょう。
ここまで問題がなければ、このような状態になります。 -
シャドウとなるグラデーションを塗ります。
2枚目のレイヤーを作成します。
最上部になるように配置してください。
新規レイヤーへグラデーションで塗ります。
「前景から透明に」を選択します。
形状は「Linear」反復は「なし」です。
下から中間までを選択し、グラデーションで塗ります。
ここまで問題がなければ、このような状態になります。 -
ハイライトとなるグラデーションを塗ります。
減算選択で半分にします。
再び角を丸めます。
半径を「100%」という設定で丸めます。
もし、膨らむようなら設定値を「90%」などに減らします。
ここまで問題がなければ、このような状態になります。 -
グラデーションの調整を行います。
グラデーションを塗ったレイヤーの透明度を「50%」に変更します。
うまくいけば、こういう状態になります。
なんとなく、雰囲気が出てきたでしょうか。
しかし、もうちょっと手を加えていきましょう。 -
ボーダーを塗るための準備を行います。
画像全体を選択して、それから2px縮小します。
選択領域を反転しておきます。
今回、角は丸めません。 -
ボーダーを塗ります。
この手順は、一気に進めてしまいます。
3枚目のレイヤーを作成します。
最上部になるように配置してください。
白色で描画色塗りします。
画像の端2pxをすべて塗ってしまいます。
作業しやすいように、表示倍率を800%に変更してあります。
画像全体を選択して、それから1px縮小します。
選択領域を反転して、角もそのままです。
黒色で描画色塗りします。
画像の端1pxをすべて塗ってしまいます。
アクセントに、角の1pxを白色で塗っておきました。 -
ボーダーの調整を行います。
3枚目のレイヤーをオーバーレイモードに変更します。
白色はハイライトっぽく、黒色はシャドウっぽくみえるようになります。
等倍で表示すると、こういう状態になります。
Web素材の完成
画像として書き出して完成です。
透明度のある、それっぽい画像が出来上がりました。
背景とグラデーションの間にパターン塗りを加えてみました。
雰囲気が変わって、いい感じになります。
こういうWeb素材が使われているのを、よく見かけると思います。
自分で作るのが面倒な方へ
ここで使用したデータファイルをお使いください。
背景画像の色を変えるだけで、いろんなパターンの素材が作れることと思います。
ダウンロードで内容を表示してしまうブラウザの場合には、右クリックメニューから対象を保存してください。
Photoshopでは、こういった作業をマクロにしてしまえば、いろんなサイズでも自動的に作れます。
しかし、GIMPではマウス操作の記録という機能がなく、スクリプトをコーディングしなければなりません。
自動化できるようになるのは、いつになることでしょう…。
更新履歴
- 2008/04/14
- サイト移動に伴うHTMLの修正(旧URI：[廃止])
- 2007/11/16
- 公開