くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[Illustrator]ボタンの作成② ボタン1個

まずはボタン1個、通常時とマウスオン時の作成

f:id:pleasure10501:20150317184357p:plain

上が通常時、下がマウスオン時。

① 枠線黒(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下にずらす」と考える