ボタンを作る

新規ドキュメント

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


ピクセルプレビュー


長方形を描画




CS6・CCの場合

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


グラデーションを適用



文字を入力

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


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


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


  • 文字を打ち変える


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


a:hover用の画像を作る

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


  • ボタンスペースのみを書き出すための「アートボード」を作成


Web用に保存

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


  • CS6以降




ボタン画像を利用してマークアップする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーションの練習</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#">ホーム</a></li>
<li id="food"><a href="#">カフェフード</a></li>
<li id="drink"><a href="#">カフェドリンク</a></li>
<li id="info"><a href="#">インフォメーション</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* body */
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#nav {
  width: 800px;
  height: 60px;
  margin: 50px;
}
ul {
  overflow: hidden;
  width: 800px;
  height: 60px;
}
li {
  float: left;
}
li a {
  display: block;
  width: 160px;
  height: 60px;
  background: url(../img/btn.png) no-repeat left top;
  text-indent: -999em;
}
li#home a:link {
  background-position: left top;
}
li#home a:hover {
  background-position: left bottom;
}
li#food a:link {
  background-position: -160px top;
}
li#food a:hover {
  background-position: -160px bottom;
}
li#drink a:link {
  background-position: -320px top;
}
li#drink a:hover {
  background-position: -320px bottom;
}
li#info a:link {
  background-position: -480px top;
}
li#info a:hover {
  background-position: -480px bottom;
}
li#contact a:link {
  background-position: right top;
}
li#contact a:hover {
  background-position: right bottom;
}