Fireworksにはバッチ処理の機能がありますが、処理を実行すると次の場所にログファイルが作成されます。

• Documents and Settings\ユーザー名\Application Data\Macromedia\Fireworks8\FireworksBatchLog.txt (Windows)
• /Users/ユーザー名/Library/Application Support/Macromedia Fireworks 8/FireworksBatchLog.txt (Macintosh)

処理結果の確認や、処理に失敗した時のデバッグなどに使いましょう。（アプリから開けないのはイマイチだなぁ・・・）

» A Gradient Tutorial » 9rules Network Official Blog

こちらのサイトでは、グラデーションを作る際のポイントが説明されています。

さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。

ちなみに僕は、次のようにしてグラデーションを作成しています。使っているのは Fireworks です。

1. まずは、両側とも同じ色で塗ります。少し明るめの色がよいです。

   

2. 一方の色を変えます。ポイントは、「明るさ」のみを落とすこと。Windows版だと、「色の選択」ダイアログの右端の矢印を下げるだけでOK。落としすぎると暗くなってしまうので注意が必要です。

   

3. できあがり。この方法だと最初の色選びを間違えない限り、そんなに悪い結果にはなりません。

   

毎回色を考えるはめんどくさい！というあなた（というか自分）ために、いくつかカラーチャートを用意してみたので、よかったら参考にしてみてください。

1. まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。

2. ラインツールで 1px の「硬い線」を斜めに引きます。

   

3. 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。

   

4. 書き出しをすれば画像は完成です。

   

あとは、css で背景画像と背景色を同時に指定します。

斜線の線を変えたい場合は、css の背景色を変えるだけでOK（サンプルページ）。この透過GIF を作っておくだけでいろいろ使いまわせます。とっても便利！

Lucky bag::blog: 背景画像に使える透過 GIF では斜線以外に市松模様やストライプの透過GIF画像が入手できます。いろいろなパターンに応用できそうですね。

1. まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。

   

2. 描画した矩形をコピー＆ペーストで複製します。（下の図ではわかりやすいように複製したほうの塗りの色を変えています。）元の矩形を「base」、複製したほうを「gradation」とします。

   次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。

   

   

3. 矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。

   

4. ここで、Part.2 で使ったテクニックの登場です。「gradation」と 3. で描いた長方形の両方を選択し、メニューから[修正]-[パスの結合]-[交差]を選びます。すると、下図のように「gradation」が上半分になります。

   

5. 「gradation」と「base」を図のように重ねます。上と左右が1pxずつずれるようにしておきましょう。

   

6. 「gradation」の塗りの色を変更します。「塗りの種類」で[グラデーション]-[線形]を選び、グラデーションの方向を縦にします。グラデーションの色は上を#525252、下を#333333としておきます。

   

   

7. 次は「base」の編集です。ストロークの色を#000000、ストロークの種類を1pxの「柔らかい線」にします。

   

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

   

9. 完成！どうでしょうか？

   

   さらに、応用編。

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

   
   

なお、今回はオリジナルでやり方を考えてみました。「もっといい方法があるよ」という方は是非教えてください。

1. 星型で適当な大きさの星を描きます。

   

2. 画像を選択すると黄色のポインタが5つ現れると思います。これらのうち、「頂点」というのを動かして頂点の数を24ぐらいにします。さらに、「半径2」も動かして、下の図のようにします。

   

3. 次は塗りを調整します。「塗りの種類」で[グラデーション]-[線形]を選び、左右の色を調整します。
   

   さらに、グラデーションの方向を縦にします。shiftキーを押しながらだときれいに90度回転させることができます。

   

4. ドロップシャドウをかけます。各設定値はキャプチャのとおりです。

   
   

5. 完成！これは簡単に出来ました。

   

ちなみに、PingMag – 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブデザインのトレンド：死の宣告にもあるように、バッジは使いすぎるとゴテゴテした印象になってしまうので、ご利用は計画的に。

[参考サイト]

» Creating Badges | Bartelme Design
» Creating Badges: Part 2 | Bartelme Design
» Web 2.0 Design Kit | Photoshop Lab