REDLINE MAGAZINE | Fireworks コレ、5分で作ります。その1REDLINE MAGAZINEトップページへ

すべてのエントリを見る

Fireworks コレ、5分で作ります。その1

※このエントリはFireworks CS4を元に書いています。

Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。

今回の完成形

見出しの背景画像によくありそうなこういう画像をパパっと作ります。

画面キャプチャ・完成形

今回は素材集等、Fireworks の機能以外のものは使いません。

土台を用意

まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。4色決めてスライダーを調節。外側には1pxの線も加えます。

画面キャプチャ・土台を用意

ここでのサンプルのサイズはW 470 * H 40 としました。

こういう見出し用の背景画像でよく左側にくっついてるラインを合体させます。上で作った矩形を適当なサイズに変更して、色をフィルタパネルの「色相・彩度」で変更しました。

画面キャプチャ・よくあるラインを合体

パスを用意

次に2本のパスを用意します。今回は土台の右半分にだけ模様を入れようと思うので、土台の右半分くらいの位置にパスを書きました。

画面キャプチャ・2本のパスを書く

画面キャプチャ・パスパネル「パスのブレンド」

その2本のパスを選択した状態で、パスパネルのパスの操作グループの中にある「パスのブレンド」をクリック。

次図のような画面が出てくるので補間の値を今回は50にして「OK」ボタンをクリック。(この補間っていうのはイラレで言うところのブレンドオプションのステップ数のようなもの。)

画面キャプチャ・補間数を入力

すると2本のパスがブレンドされてこういう状態になります。

画面キャプチャ・パスのブレンド後の状態

線が青緑色なのは元々私が分かりやすいようにその色でパスを書いてたからというだけの話です。ちょっと補間数50は多すぎた気がしないでもないですが、勢いが大切なのでこのままいきます。

ちなみに、今回は曲線で2本書きましたが、別に直線でもいいですし、パスの数も別に2本じゃなくても面白い模様ができます。パスの形や数、方向と補間数の組み合わせでユニークな形状が作れます。

カラー、不透明度の調整

次に今回の背景土台に合わせて、カラーの調整します。フィルタパネルの「色相・彩度」でこういう内容にしました。

画面キャプチャ・カラーの調整

画面キャプチャ・カラーの調整反映

ちなみにですね、元々パスの色も土台に合わせて選色しておけば、こんなカラーの調節はしなくて済みます。ちょっと上で「パスの色分かりやすいほうがキャプチャとった時いいかー」とか思ってしまったので時間と工程ロスってます。それでも5分以内に仕上がりますからご安心ください。

次に不透明度を50%にして、好みの位置へ移動します。

画面キャプチャ・不透明度と位置の調節

マスク!

土台からはみ出してる部分をマスクで隠します。矩形でこういうマスク用の長方形を用意します。

※「コマンド > クリエイティブ > ベクトルマスク(イメージのフェード)」でフェードの工程をする人はそっちの方法でやってからマスクしてください。どっちでも一緒です。

画面キャプチャ・マスク用のオブジェクト用意

土台とブレンドしたパスの上でマスクをかけたい位置に合わせてフェードさせる部分を調整。この時マスク用画像自体の不透明度を下げるとわかりやすいです。

画面キャプチャ・マスクをかけたい位置に合わせてフェードさせる部分を調整

んではマスクいきますね。せーのっ!

(n'∀')η<オルト エム エム ジー!

上の一文がなんのこっちゃ分からない方はスルーして、「変更 > マスク > マスクとしてグループ化」でマスクしてください。次図のようになります。

画面キャプチャ・マスク直後

仕上げの1px

最後の仕上げにもうひと手間だけかけますね。土台の1px内側に白いラインを入れたいので、矩形で塗りなし・線#FFF の長方形を作ってX1・Y1の位置に重ねます。

今回は土台サイズをW 470 * H 40 としたので、その白い線のみの長方形のサイズはW 468 * H 38。その長方形の左上が土台の左から1px、上から1pxの位置にくるように重ねます。

画面キャプチャ・塗りなし・線#FFF の長方形を作ってX1・Y1の位置に重ねます

右側の方の色が濃い辺りが分かりやすいかもです。ということで、これで完成ですよん。お疲れ様でした。

画面キャプチャ・完成しました

パスのブレンドはいろいろ応用できます。

パスのブレンドはかなり熱いです。今回はたまたま見出しの背景画像という題材で作ってみたんですが、いろんな箇所で使える子なので、なんかアクセント欲しいときにおすすめです。線だけでなく、星型とかハート型とかのパスでやってみるのもいいと思いますし、直線や曲線を描いた時に線に対してテクスチャを指定しておくのも面白いです。

画面キャプチャ・テクスチャ付きの線でブレンドした場合

「ブレンドするまでどうなるか分からない」というのはドキドキものですが、トップページのドーンと大きな画像なんかを作っている時に、こういうのを何種類か組み合わせたりしてると、なぜかものすごく手の込んだデザインのように見える偶然に出会う事もあります。

ただ、一度「これめっちゃいい!」という組み合わせに出会っても、パス保存するの忘れてたら二度と出会えない可能性が非常に高いので、「これはっ!」というパスと補間数の組み合わせに巡り合ったらとりあえずどっかに単体で保存してコレクションしておく方がいいですよー、と。

<< Fireworks ちょいネタ集 | Fireworks コレ、5分で作ります。その2 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/264

コメント (1)

(n'∀')η<オルト エム エム ジー!
いつも大変お世話になております。
このサイトのファンです。
コレ流行らせたいと考えています。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。