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

今回は、Mac OS X のDashboard っぽいバーを作ってみます。（ちなみに、私は根っからのWindowsユーザーで、Dashboard を触ったことはありません・・・）

まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。
描画した矩形をコピー＆ペーストで複製します。（下の図ではわかりやすいように複製したほうの塗りの色を変えています。）元の矩形を「base」、複製したほうを「gradation」とします。

次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。
矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。
ここで、Part.2 で使ったテクニックの登場です。「gradation」と 3. で描いた長方形の両方を選択し、メニューから[修正]-[パスの結合]-[交差]を選びます。すると、下図のように「gradation」が上半分になります。
「gradation」と「base」を図のように重ねます。上と左右が1pxずつずれるようにしておきましょう。
「gradation」の塗りの色を変更します。「塗りの種類」で[グラデーション]-[線形]を選び、グラデーションの方向を縦にします。グラデーションの色は上を#525252、下を#333333としておきます。
次は「base」の編集です。ストロークの色を#000000、ストロークの種類を1pxの「柔らかい線」にします。
最後に「base」にドロップシャドウをかけます。各設定値はキャプチャのとおりです。
完成！どうでしょうか？

さらに、応用編。

「Ctrl+g」でグループ化したあとに、[カラー調整]-[色相・彩度...]というフィルタを追加します。「色を付ける」にチェックをつけて、それぞれの設定値を変更すると、いろんな色に！黒いのを1つ作っておくといろいろ応用がききそうです。