WEB2.0と言われて久しいインターネッツですが
なんかボタンとかバナーに透明感があって光沢のある画像が使われてますね。
簡単にページが華やいでいいです。
んでそゆう画像の作り方を描いたHPも少なくないんですけど、どこもむずいよ！ｗ
というわけでゾウリ虫でもできるくらい簡単な手順でやってみた

今回はとりあえず100x30pxの画像をつくるので、100x30pxで新規作成します。

まず基本となるグレースケールのグラデーションを作成します、
グラデーションエディタを表示して下図を参考に位置と色をそれぞれ
0%：③、10%：①、40%：②、45%：④、100%：③　に設定します。
※カラーピッカーの「Webセーフカラーのみに制限」にチェックを入れて下さい。

作成したグラデーションをまっすぐ上から下にぴったりぐらいの幅で適用します。

次に、上に新規レイヤーを作成して作りたい画像の色で塗りつぶします。
今回はとりあえず緑にしました。

塗りつぶしたレイヤーの描画モードを変更します、
描画モードを変更すると自分より下のレイヤーの陰影とかを自分に反映します。
とりあえず「スクリーン」にしてみます。

下のグレースケールのグラデーションが緑一色で塗りつぶしたレイヤーにも反映されたと思います。
描画モードを「オーバーレイ」にしてみると・・

こうなります、こんな感じで描画モードを変更するだけでバリエーションが出ます。
マウスオーバーした際の差し替え画像とかに使えます。

このままでも使いようはあると思いますが、画像の周りに線を追加したいと思います。
塗りつぶしたレイヤーを右クリックして「レイヤー効果」を表示します。

「境界線」にチェックを入れて次のように設定します。

サイズ：1px（こんぐらいの小さい画像だと2pxじゃ太い）
位置：内側（めいいっぱい画像に使ってるので外側じゃ表示されません）
描画モード：通常（とりあえず通常で、おかしくなきゃなんでもいいけど）
不透明度：100%（半透明にしてもWEBで使うのに不都合）
塗りつぶしタイプ：カラー（1pxじゃこれ以外意味なし）
カラー：てきとうなグレー（おかしくなきゃなんでもいい）

完成した画像がこれ、

それっぽくはできたと思います。
次はちょっとだけ手を加えて下図みたいな画像の作り方を気が向いたら書く予定。

今回のに2,3個手順が増えるだけです、たぶん。
最終的にこんなんができたらいいなと思います。

最近画像の光沢部分との境界が斜めになってる

こんなのを見かけますが、これはこれ以上手を入れる余地がないのと
手順がかなり増えてしまうのでちょっとゾウリ虫解説は難しいかなと思ってます。