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

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

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

    aqua-1-1

    次に描画した矩形を2回コピー&ペーストして複製を作ります。(つまり全部で3つが重なっている状態。)便宜上、上から順番に「base」「100% round」「temp」という名前をつけます。下の2つはしばらく使わないのでロックをかけておくとよいでしょう。

    aqua-1-2

  2. 一番上の「base」を編集していきます。まず、ストローク(線)の色をつけます。「塗り」よりも濃い目の色にすると見栄えが良いです。(例では塗りの色を#DDFF88、ストロークの色を#99CC00、ストロークの種類は1pxの柔らかい線にしてみました。)

    aqua-2-1

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

    aqua-2-2
    aqua-2-4

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

    aqua-2-5
    aqua-2-7

    これでずいぶんと「らしく」なりました。「シャドウ(内側)」と「ドロップシャドウ」の二つのフィルタをかけて、さらにドロップシャドウの角度を「270」にするあたりが、なんだか玄人っぽいですね。(そんなことない?)さて、さらにかっこよくするために、もう一工夫かけます。

  3. 次は「100% round」と名前をつけたイメージの編集です。「base」を一番下のレイヤーに移動させ、「100% round」→「temp」→「base」の順番にします。「100% round」のロックははずしておきましょう。

    aqua-3-1

    見やすいように「100% round」の塗りの色を変えます。色はなんでもよいです。次に「100% round」の角丸矩形の角丸を100%にします。左上か右下の黄色のポインタを動かせば変更できます。

    aqua-3-2

  4. 「100% round」の底辺が「base」の中間に来るように、「100% round」を上に移動します。

    aqua-4-1

  5. さて、ここが今回のポイントです。まず、レイヤーが「100% round」→「temp」→「base」の順番になっていることを確認し、「base」にロックをかけ、それ以外はロックをはずします。

    aqua-5-1

    「100% round」「temp」の両方を選択し、[修正]-[パスの結合]-[交差]を選びます。すると下の図のようになります。

    aqua-5-2

  6. パスを結合したイメージを1pxか2px下に移動します。さらに、塗りの色を#FFFFFFにし、透明度を65%にします。

    aqua-6-1

  7. これで完成!それっぽいでしょ?

    aqua-7-1

[参考サイト] aquaButton2 . Fireworks . Learn . solarDreamStudios

FireworksでWeb2.0デザインしてみる – Part.2」への1件のフィードバック

  1. ピンバック: お気に入り » Blog Archive » jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.2

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>