読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

ナビゲーションボタンを作る

Illustrator

新規ドキュメント

  • 横幅800pxピクセルのナビゲーションボタンを作成するので、幅960pxを設定


ピクセルプレビュー


長方形を描画





CS6・CCの場合

  • 線の位置を内側にする(書き出しが、800pxからずれない)


区切り線を追加
  • ダイレクト選択ツールで「セグメント(縦の枠線)」を選択して
  • ダイレクト選択ツールをダブルクリックして「移動」で、コピーを作る

  • ダイレクト選択ツールを「ダブルクリック」する
  • 「160px」で、水平コピーする

  • 変形を繰り返す(3回)
線の属性を調整する
  • 新規ドキュメントの設定で「ピクセルグリッドに整合」のチェックを外していると、直線は必ず「2px」に表示させれます
  • この「2px」に表示されている直線を選択し「変形」パレットの、オプション「ピクセルグリッドに整合」に整合にチェクをつけます

f:id:web-0220:20160806181212p:plain

f:id:web-0220:20160806181011p:plain

グラデーションを適用



文字を入力

  • プロポーショナルメトリクスにチェックをし、文字を詰める


  • 文字を160pxの長方形の中央に中央揃えで配置する
  • 160pxずつ移動コピーを作る


  • このコピーの文字の部分のみを、800px位置にそろえて配置する


  • 文字を打ち変える


  • 左端に重ねて1pxの線を描き、160pxずつ移動コピーする


a:hover用の画像を作る

  • 長方形を上に描き、それぞれ色を変更する


Web用に保存

アートサイズでクリップのチェックを外す
  • アートボードに必要なものだけある場合
  • グラデーションが含まれるので、JPEGで保存