[Illustrator]ボタンの作成② ボタン1個
まずはボタン1個、通常時とマウスオン時の作成
上が通常時、下がマウスオン時。
① 枠線黒(1px)で長方形(160×50px)を作る(レイヤー1)
② レイヤー1をコピーしてオレンジの線のレイヤー2にする。自由変形で上の辺を下に移動し、枠線を消し、中を塗りつぶす
③ レイヤー1を再度コピー。それをレイヤー2の上に移動する →オレンジの線の上の枠線ができる
④ レイヤー1にグラデーションを入れる
⑤ エリアの外で文字を打つ。フォントサイズ、文字ツメまでする
⑥ 枠の中心に文字が位置するように移動する
⑦ ⑥までのオブジェクトを全て選択し、60px下方にコピー&移動
⑧ ⑦のグラデーションを反転
⑨ Web用に保存 このときもサイズに注意! 「アートボードサイズでクリップ」のチェック外す
[表示用のHTML]
<body>
<div id ="btn"><a href="#">btn</a></div>
</body>
[表示用のCSS]
#btn a{
background: url(btn.png) no-repeat left top;
}
#btn a:hover {
background: url(btn.png) no-repeat left -60px;
}
マウスオン時は、「画像の左上を基準にして60px下にずらす」と考える