2/20 ナビボタン(CSS Sprite用)
ナビゲーションボタンの作成(CSS Sprite用) [Illustrator]
Illustratorでの作業
【準備】
環境設定 [Ctrl] + [K]
- [X]ポイントにスナップ
- [X]日本語オプション
- 単位は全ピクセルで設定
- レイヤーごとにガイド
- すべてのブラックをリッチブラックとして表示
- その他、作業にあたり、PC HDD 20%は空けておく
【作業開始】
- 新規作成（w800px ×h130px）
- [表示-ピクセルプレビュー]
- [Ctrl] + [space]で画面を拡大
- [Ctrl] + [R] で定規を表示
- 「長方形ツール」を選択
- マウスでカンバスの角をクリックして長方形を作成 （固定幅 800px × h60pxで作成）
- 「線」パネルを表示し、「線の位置」-「線を内側に揃える」を選択（この設定をしないと1pxズレが生じるので）
- 長方形にグラデーションカラーを好みで設定
- レイヤー1をロック
- レイヤー2を作成
- レイヤー2で「長方形ツール」を選択 （固定幅 1px × h59pxで作成）
- 長方形の色を設定（線なし、塗り「黒」を設定）
- 「移動ツール」を選択し、[shift] + [→] 10pxずつ移動しながら16回移動を繰り返す
- マウスでカンバスの長方形角をクリックして長方形を作成 （固定幅 800px × h60pxで作成）
- 「移動ツール」をダブルクリックで選択し、「移動」パレット「水平方向」1px コピーを実行
- 長方形の色を設定（線なし、塗り「白」を設定） ←この黒と白の長方形がボタンの区切り線になる
- 黒と白の長方形を選択状態にし、「移動ツール」をダブルクリックで選択
- 「移動」パレット「水平方向」160px コピーを実行（同じ作業をあと3回繰り返す）
- [Ctrl] + [-]で表示画面を縮小
- 一番左のボタンに「テキスト」ツールでナビゲーションテキストを作成
- 「移動ツール」をダブルクリック
- 「移動」パレット「水平方向」160px コピーを実行（同じ作業をあと4回繰り返す）
- ナビゲーションの文字を目的の文言に修正
- レイヤー3を作成
- 一番左のボタンと端を合わせ、「長方形ツール」でw160pxサイズの長方形を作成（下図1参照） ←文字のセンタリングに使用
- 先程の長方形を利用してオブジェクトの整列ツールでナビゲーションの文字のセンタリングを実行（1つ実行するごとに160px幅長方形を移動ツールで移動させる）
- すべてのセンタリング作業完了後、160px幅長方形は削除
- レイヤー1のロックを解除
- 先程作成した区切り線を含め、長方形をすべて選択し、「移動ツール」をダブルクリックで選択
- 「移動」パレット 垂直方向（下） 70px [コピー]を実行
- レイヤー2（区切り線のレイヤー）をロック
- 下段の800px幅長方形を選択し、塗り色を変更
- 画像作成後、Web用に保存（アートボードサイズでクリップ（チェック外す））
作成した画像は後程スタイルシートで呼び出して使用
【図1】
【メモ】
- ナビゲーションは横800pxが見やすい
