FireworksでWeb2.0デザインしてみる – Part.2

FireworksでWeb2.0っぽいデザインを試みるこのコーナー。第二弾はMacのAqua風ボタンを作ってみましょう。

下の図のような感じの角丸矩形（「くけい」って読むのね。）を描きます。角の丸みは20-30%程度。塗りの色は淡い色に、ストローク（線）の色はなしにしておきます。

次に描画した矩形を2回コピー＆ペーストして複製を作ります。（つまり全部で3つが重なっている状態。）便宜上、上から順番に「base」「100% round」「temp」という名前をつけます。下の2つはしばらく使わないのでロックをかけておくとよいでしょう。
一番上の「base」を編集していきます。まず、ストローク（線）の色をつけます。「塗り」よりも濃い目の色にすると見栄えが良いです。（例では塗りの色を#DDFF88、ストロークの色を#99CC00、ストロークの種類は1pxの柔らかい線にしてみました。）

次に「シャドウ（内側）」をかけます。各設定値はキャプチャのとおりです。

さらに「ドロップシャドウ」をかけます。各設定値はキャプチャのとおりです。

これでずいぶんと「らしく」なりました。「シャドウ（内側）」と「ドロップシャドウ」の二つのフィルタをかけて、さらにドロップシャドウの角度を「270」にするあたりが、なんだか玄人っぽいですね。（そんなことない？）さて、さらにかっこよくするために、もう一工夫かけます。
次は「100% round」と名前をつけたイメージの編集です。「base」を一番下のレイヤーに移動させ、「100% round」→「temp」→「base」の順番にします。「100% round」のロックははずしておきましょう。

見やすいように「100% round」の塗りの色を変えます。色はなんでもよいです。次に「100% round」の角丸矩形の角丸を100%にします。左上か右下の黄色のポインタを動かせば変更できます。
「100% round」の底辺が「base」の中間に来るように、「100% round」を上に移動します。
さて、ここが今回のポイントです。まず、レイヤーが「100% round」→「temp」→「base」の順番になっていることを確認し、「base」にロックをかけ、それ以外はロックをはずします。

「100% round」と「temp」の両方を選択し、[修正]-[パスの結合]-[交差]を選びます。すると下の図のようになります。
パスを結合したイメージを1pxか2px下に移動します。さらに、塗りの色を#FFFFFFにし、透明度を65%にします。
これで完成！それっぽいでしょ？