[Illustrator]ボタンの作成③ 横ナビゲーション用
完成図
イラストレーターで横ナビゲーション用のボタンを作る
上が通常時、下がマウスオン時
ボタン1個のサイズは幅140px 高さ50px = 全体幅980px
1pxでもズレないように、画像作成時は時々チェックすること
①枠線・・黒 1pxで長方形を作る (幅980px 高さ50px)
枠線が内側になるようにすること
②区切り線を作る
A 一旦 長方形を選択解除 →
B ダイレクト選択ツールに切り替えて、コピーしたい線だけ1クリックする →
C ダイレクト選択ツールをダブルクリックすると、「移動」の画面が出てくる →
水平方向140px、垂直方向0と入力し、「コピー」を押すと140px右に線のコピーが現れる!
さらに、 Ctrl+Dを押すと直前のCの操作が繰り返されるので、5回押す
これで枠線の出来上がり!
③背景をつくる
レイヤーをコピーして背景用レイヤーにする
(レイヤーを分けなくてもよいが、初心者の今は分けた方が後の操作がしやすかった)
背景用レイヤーにグラデーションをつける
④文字を入れる
1ボタンと同じようにエリア外で入力。フォントサイズや文字ツメをし、ボタンの中央に位置するように整える
⑤マウスオン時用をつくる
④までのオブジェクトを全て選択し、コピーしつつ 下60px分移動
⑥グラデーションを変更する
完成
1[HTMLの記述]
- ナビゲーションの<li>にそれぞれid名を付ける
通常用・・・li a のbackground
hover用・・・li a:hover のbackground
<body>
<div id="nav">
<ul>
<li id="top"><a href="#">トップページ</a></li>
<li id="solution"><a href="#">ソリューション</a></li>
<li id="achievement"><a href="#">実績紹介</a></li>
<li id="partner"><a href="#">パートナー</a></li>
<li id="customer"><a href="#">カスタマー</a></li>
<li id="company"><a href="#">会社概要</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</body>
2[CSS]
- メニューをfloat: left で横並びにする
li { float: left; } - ボタンの高さと幅を指定する
li a { display: block; ←忘れないこと!
width: 140px;
height: 50px; } - 文字を隠す li a {} に指定
li a { text-indent: -999em; } - 通常用の画像を表示する指定
#nav li.top a { background: url(img/btn2.png) no-repeat left top; } - マウスオン時の画像を表示する指定
#nav li.top a:hover { background: url(img/btn2.png) no-repeat left -60px; }
/* reset*/
html, body, div, ul, li {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* item */
#nav li {
float: left;
text-indent: -999em;
}
#nav li a {
display: block;
width: 140px;
height: 50px;
}
#nav li#top a {
background: url(btn2.png) no-repeat left top;
}
#nav li#top a:hover {
background: url(btn2.png) no-repeat left -60px;
}
#nav li#solution a {
background: url(btn2.png) no-repeat -140px top;
}
#nav li#solution a:hover {
background: url(btn2.png) no-repeat -140px -60px;
}
#nav li#achievement a {
background: url(btn2.png) no-repeat -280px top;
}
#nav li#achievement a:hover {
background: url(btn2.png) no-repeat -280px -60px;
}
#nav li#partner a {
background: url(btn2.png) no-repeat -420px top;
}
#nav li#partner a:hover {
background: url(btn2.png) no-repeat -420px -60px;
}
#nav li#customer a {
background: url(btn2.png) no-repeat -560px top;
}
#nav li#customer a:hover {
background: url(btn2.png) no-repeat -560px -60px;
}
#nav li#company a {
background: url(btn2.png) no-repeat -700px top;
}
#nav li#company a:hover {
background: url(btn2.png) no-repeat -700px -60px;
}
#nav li#contact a {
background: url(btn2.png) no-repeat right top;
}
#nav li#contact a:hover {
background: url(btn2.png) no-repeat right -60px;
}