ホーム ＞ HTMLに役立つヒント＞ AQUA風ボタンの作り方

　え〜と、すぐ忘れるので、自分用のメモです。

●Adobe Illustratorで作業する

１．まずはAdobe Illustratorで形を作ります。下の図を見てください。

　右の列は、上から基本、抜き、ハイライト（この図では形がわかるようにまわりに黒を入れています）と呼んでいます。この三つの部品を作ります。

基本：ボタンの基本形
抜き：あとで抜きの形で基本形を切り抜きます。
ハイライト：ハイライト部分です。

　左はこれらの部品を重ねたところ。左下が完成図です。左の2番目がちょっとしたポイント。抜き（グレーの部品）は中央よりやや下に偏らせます。逆にハイライトはちょっと上にします。

●以下、Photoshopで作業する。

２．基本をPhotoshopにペーストします。

３．抜きをペーストして位置を整えます。

４．ハイライトをペーストします。

５．ハイライトの部分を選択し、いったん削除します。この選択部分の内側に、白から透明になるようにグラデーションをかけます。下の図ではわかりやすいように基本形も表示させています。これで透明度を80%にしてハイライト部分はできあがりです。

６．基本形をコピーし、抜きの部分を削除します。下の図は削除したところ。

７．ここで一度基本形の形に選択します。

８．そのままの状態で「ぼかし（ガウス）」で立体的に見えるようにボカします。これを「エッジ」と名付けておきます。透明度は80%くらい。

７．基本形をコピーして、色を付けます。これをガウスでボカして「シャドウ」とします。後で色を載せたときに、ボディ部の色が濃すぎるようなら、「シャドウ」の「基本」と重なる部分を削除するとよいです。

８．各パーツの位置を整えます。最後に背景を付け、色を載せる（基本形をコピーして色を付け、「通常」ではなく「スクリーン」に指定する）とできあがり。各パーツの透明度を適当に調節してください。

９．ま、あとはテキストを載せるとか、細部を調整するとかしてください。

１０．Adobe Illustratorの基本形は一度作ると拡大縮小して何度も使えますので、いろんな形を作っておくと便利です。

１１．10番の形でボタン化したところ。

ホーム ＞HTMLに役立つヒント＞ AQUA風ボタンの作り方