超自己流、ボタン画像の色の付け方です。
マウスオーバーの時、クリックされた時の色の付け方が分からず、
windowsのボタンとにらめっこして考案しましたww
1.適当な大きさの新規ドキュメントを作成
![f:id:mkt23:20100203164717j:image f:id:mkt23:20100203164717j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164717.jpg)
2.適当な大きさの角丸長方形を作成
![f:id:mkt23:20100203164716j:image f:id:mkt23:20100203164716j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164716.jpg)
今回はトリムエリア-10pxのサイズで作りました。
3.グラデーションで色を付け、線の色を設定し、文字を入れる。
![f:id:mkt23:20100203164715j:image f:id:mkt23:20100203164715j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164715.jpg)
これで通常のボタン完成。
4.レイヤーをコピーする。
![f:id:mkt23:20100203164714j:image f:id:mkt23:20100203164714j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164714.jpg)
分り易くするため、レイヤーの名前を「hover」に変更。
5.[効果]>[スタイライズ]>[光彩(内側)]を選択。
![f:id:mkt23:20100203164713j:image f:id:mkt23:20100203164713j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164713.jpg)
プレビューで様子を見ながら設定。
描画モードを通常にして、
グラデーションの色より濃い色を選択すると良さげ。
これでマウスオーバー時のボタン完成。
6.「hover」レイヤーをコピー。
![f:id:mkt23:20100203164706j:image f:id:mkt23:20100203164706j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164706.jpg)
分り易くするため、レイヤーの名前を「focus」に変更。
7.角丸長方形を選択してコピペする。
![f:id:mkt23:20100203164705j:image f:id:mkt23:20100203164705j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164705.jpg)
8.ペーストした角丸長方形でフィルタを作る。
![f:id:mkt23:20100203164704j:image f:id:mkt23:20100203164704j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164704.jpg)
具体的には、
- 色を黒にする。
- 線の色をなしにする。
- アピアランスから「光彩(内側)」を削除する。
- 不透明度を15くらいにする。
9.重ねる。
![f:id:mkt23:20100203164703j:image f:id:mkt23:20100203164703j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/m/mkt23/20100203/20100203164703.jpg)
これでクリック時のボタン完成。