My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

2/20 ナビボタン(CSS Sprite用)

f:id:sntkk3:20140228223724g:plain

ナビゲーションボタンの作成(CSS Sprite用) [Illustrator]

Illustratorでの作業


【準備】
環境設定  [Ctrl] + [K]

  • [X]ポイントにスナップ
  • [X]日本語オプション
  • 単位は全ピクセルで設定
  • レイヤーごとにガイド
  • すべてのブラックをリッチブラックとして表示
  • その他、作業にあたり、PC HDD 20%は空けておく

【作業開始】

  1. 新規作成(w800px ×h130px)
  2. [表示-ピクセルプレビュー]
  3. [Ctrl] + [space]で画面を拡大
  4. [Ctrl] + [R] で定規を表示
  5. 「長方形ツール」を選択 
  6. マウスでカンバスの角をクリックして長方形を作成 (固定幅 800px × h60pxで作成)
  7. 「線」パネルを表示し、「線の位置」-「線を内側に揃える」を選択(この設定をしないと1pxズレが生じるので)
  8. 長方形にグラデーションカラーを好みで設定
  9. レイヤー1をロック
  10. レイヤー2を作成
  11. レイヤー2で「長方形ツール」を選択 (固定幅 1px × h59pxで作成)
  12. 長方形の色を設定(線なし、塗り「黒」を設定)
  13. 「移動ツール」を選択し、[shift] + [→] 10pxずつ移動しながら16回移動を繰り返す
  14. マウスでカンバスの長方形角をクリックして長方形を作成 (固定幅 800px × h60pxで作成)
  15. 「移動ツール」をダブルクリックで選択し、「移動」パレット「水平方向」1px コピーを実行
  16. 長方形の色を設定(線なし、塗り「白」を設定) ←この黒と白の長方形がボタンの区切り線になる
  17. 黒と白の長方形を選択状態にし、「移動ツール」をダブルクリックで選択
  18. 「移動」パレット「水平方向」160px コピーを実行(同じ作業をあと3回繰り返す)
  19. [Ctrl] + [-]で表示画面を縮小
  20. 一番左のボタンに「テキスト」ツールでナビゲーションテキストを作成
  21. 「移動ツール」をダブルクリック
  22. 「移動」パレット「水平方向」160px コピーを実行(同じ作業をあと4回繰り返す)
  23. ナビゲーションの文字を目的の文言に修正
  24. レイヤー3を作成
  25. 一番左のボタンと端を合わせ、「長方形ツール」でw160pxサイズの長方形を作成(下図1参照) ←文字のセンタリングに使用
  26. 先程の長方形を利用してオブジェクトの整列ツールでナビゲーションの文字のセンタリングを実行(1つ実行するごとに160px幅長方形を移動ツールで移動させる)
  27. すべてのセンタリング作業完了後、160px幅長方形は削除
  28. レイヤー1のロックを解除
  29. 先程作成した区切り線を含め、長方形をすべて選択し、「移動ツール」をダブルクリックで選択
  30. 「移動」パレット 垂直方向(下) 70px [コピー]を実行
  31. レイヤー2(区切り線のレイヤー)をロック
  32. 下段の800px幅長方形を選択し、塗り色を変更
  33. 画像作成後、Web用に保存(アートボードサイズでクリップ(チェック外す))

作成した画像は後程スタイルシートで呼び出して使用

【図1】


【メモ】

  • ナビゲーションは横800pxが見やすい

スタイルシート画像をスタイルシートに適用

リンク文字を消す方法

そのままだと、liの文字が表示されてしまうので、html上の文字を非表示にする必要がある。
その方法としては、以下の2種類がある。

①text-indent -999em OFF LEFT
マイナスインデント 昔はNG(スパム判定の恐れありとの理由で)

②visibility hidden
display: none; 隠し文字では使わない レイアウト壊れる