0702 Illustrator:ナビゲーションボタンを作ろう
初めに：ピクセルプレビューを有効に使う
プロファイルをWebにして新規作成し、[表示]→[ピクセルプレビュー]にチェック。
→印刷物の作成時には出てしまう1pxのにじみが表示されなくなる。
80pxで作りたいのに左右の線（0.5px×２）で1pxオーバーする事があるので、
[線]→[線の位置]→[線を内側に]を設定。
長方形でボタンの基礎を作る
- ナビゲーションボタンの幅高さの指定をして三角形を描く
- グラデーションツールで好みの色みに調整
- ダイレクト選択ツールで長方形の左辺のみを選択
- ダイレクト選択ツールをダブルクリックして移動のコマンドを開く
- コマンドの水平方向にボタン一つの幅のpxを入力し、コピー
- Ctrl+Dでボタンの縦線を必要な分だけ繰り返しコピー
- 完成！
見出し文字の作成
- 見出しの中で一番長い単語をテキストツールで入力し、中央揃えにする
- ボタンひとつの幅と同じ四角形を描画し、テキストと同時選択
- 四角形を選択し（キーオブジェクトにする）、整列ツールで幅の中央揃え
- 四角形を消去し、ナビゲーションボタンをキーオブジェクトにテキストを高さの中央揃え
- テキストを移動ツールでボタン一つのpx値分コピー
- Ctrl+Dで繰り返し
- テキストをそれぞれ編集する
- 完成
hover時のボタン作成（link時と真逆のグラデーションの場合）
保存方法
[オブジェクト]→[アートボード]→[オブジェクト全体に合わせる]or[選択オブジェクトに合わせる]
→[WEB用に保存]と[別名で保存]
できあがり～
ナビゲーションボタンとしてCSSに記述する
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ナビゲーション</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul>
<li id="toppage"><a href="#">トップページ</li>
<li id="solution"><a href="#">ソリューション</li>
<li id="achievement"><a href="#">実績紹介</li>
<li id="partners"><a href="#">パートナー</li>
<li id="customers"><a href="#">カスタマー</li>
<li id="company"><a href="#">会社概要</li>
<li id="contact"><a href="#">お問い合わせ</li>
</ul></a>
</body>
</html>
CSS
（リセットは省略）
#nav{
margin: 20px;
width: 960px;
height: 44px;
}
ul{
width: 960px;
height: 44px;
overflow: hidden;
text-indent: -999em;
}
li{
float: left;
}
li a{
width: 137px;
height: 44px;
display: block;
background: url(btn.png) no-repeat left top;
}
li#contact a{
width: 138px;
}
#toppage a:link{
background-position: left top;
}
#toppage a:hover{
background-position: left bottom;
}
#solution a:link{
background-position: -137px top;
}
#solution a:hover{
background-position: -137px bottom;
}
#achievement a:link{
background-position: -274px top;
}
#achievement a:hover{
background-position: -274px bottom;
}
#partners a:link{
background-position: -411px top;
}
#partners a:hover{
background-position: -411px bottom;
}
#customers a:link{
background-position: -548px top;
}
#customers a:hover{
background-position: -548px bottom;
}
#company a:link{
background-position: -685px top;
}
#company a:hover{
background-position: -685px bottom;
}
#contact a:link{
background-position: -822px top;
}
#contact a:hover{
background-position: -822px bottom;
}
！画像の上に乗ったHTMLの<li a>の文字を消す（OFF-LEFT）
{ text-indent: -999em; }
！li aで{ background: url(btn.png) no-repeat left top; }と画像指定をしているので、それ以降はbackground-positionの指定のみでOK
hoverもちゃんとききました。完成！
