くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[Illustrator]ボタンの作成③ 横ナビゲーション用

完成図

f:id:pleasure10501:20150318180850p:plain

イラストレーターで横ナビゲーション用のボタンを作る

上が通常時、下がマウスオン時
ボタン1個のサイズは幅140px 高さ50px  =  全体幅980px

1pxでもズレないように、画像作成時は時々チェックすること

 

①枠線・・黒 1pxで長方形を作る (幅980px 高さ50px)
枠線が内側になるようにすること

②区切り線を作る
A 一旦 長方形を選択解除  →  
B ダイレクト選択ツールに切り替えて、コピーしたい線だけ1クリックする →

f:id:pleasure10501:20150318191446p:plain

C ダイレクト選択ツールをダブルクリックすると、「移動」の画面が出てくる →

f:id:pleasure10501:20150318191500p:plain
水平方向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;
}