ボタンの作成

Fireworks
  • Fireworksは操作の大部分プロパティパネル。詳細な設定はできないことも。
  • ライブラリは、flashのシンボルにとても似ている。
  • レイヤーと、スライスレイヤーがある　web画像作成に特化

コピペ
角丸
角丸長方形使わない→数値が出ないから
端が丸まっているものは角丸の半径100%指定
px指定は角丸が少しの場合

フィルター
フィルター→Photoshopライブ効果
プレビューしながら調整できる

シンボル化
シンボルに変換するとドキュメントライブラリに入る
flashでも使える
自動的にスライスされる
共有ライブラリに保存にチェックすると他のドキュメントでも使える

hover用
作ったボタンシンボルの中に入ってステート:オーバー
アップのグラフィックをコピー
色相・彩度を調整して変更する
プロパティのテキストで、打った文字を変更できる（中央揃えにしておく）

ほか
手作業でスライスした場合、webレイヤーに入る
abs = absolute
クリッカブルマップorホットスポット: 背景画像にチップや一部リンクを作ること

ここまで

新規作成
幅200px 高50px 角丸　プロパティパネルでサイズと位置を合わせる

線は内側　同じくプロパティパネル

作成

ドキュメントライブラリに登録

  • 変更→シンボル→シンボルに変更
  • ドキュメントライブラリパネル→新規シンボルで作成

薄緑はウェブレイヤー(スライス) これをダブルクリックでシンボル編集

シンボル編集画面

ボタンシンボルのプロパティパネル　ステート・オーバーを選択(hover)
色等変更する。

ページ１を選択して、オリジナルからプレビュー画面へ
ボタン設定していれば、マウスオーバーした状態もプレビューされる

書き出しは、ボタン設定されているとき、アップ、オーバーで書き出される
尚CS6には、スプライト画像で書き出してくれるらしい。

作例

※仮
http://littlestar.under.jp/fw_button/fw_navi.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Fireworksによるスプライト画像ナビゲーション</title>
<style>
body,
ul{
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul{
	margin: 50px auto 0 auto;
	width: 200px;
	height: auto;
	}
li{
	width: 200px;
	height: 50px;
	text-indent: -9999px;
	}
/*リスト毎の画像*/
#sp a{
	background-image: url(button_sp.jpg);
	}
#sp_b a{
	background-image: url(button_sp_b.jpg);
	}
#sp_c a{
	background-image: url(button_sp_c.jpg);
	}
#sp_d a{
	background-image: url(button_sp_d.jpg);
	}
/*スプライト設定*/
li a{
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0;
	}
li a:hover{
	background-position: 0 50px;
	}
</style>
</head>
<body>
<nav>
<ul id="sp">
	<li><a href="#">リスト</a></li>
</ul>
<ul id="sp_b">
	<li><a href="#">リスト</a></li>
</ul>
<ul id="sp_c">
	<li><a href="#">リスト</a></li>
</ul>
<ul id="sp_d">
	<li><a href="#">リスト</a></li>
</ul>
</body>
</html>