Fireworks コレ、5分で作ります。その1
※このエントリはFireworks CS4を元に書いています。
Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。
今回の完成形
見出しの背景画像によくありそうなこういう画像をパパっと作ります。
今回は素材集等、Fireworks の機能以外のものは使いません。
土台を用意
まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。4色決めてスライダーを調節。外側には1pxの線も加えます。
ここでのサンプルのサイズはW 470 * H 40 としました。
こういう見出し用の背景画像でよく左側にくっついてるラインを合体させます。上で作った矩形を適当なサイズに変更して、色をフィルタパネルの「色相・彩度」で変更しました。
パスを用意
次に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の位置にくるように重ねます。
右側の方の色が濃い辺りが分かりやすいかもです。ということで、これで完成ですよん。お疲れ様でした。
パスのブレンドはいろいろ応用できます。
パスのブレンドはかなり熱いです。今回はたまたま見出しの背景画像という題材で作ってみたんですが、いろんな箇所で使える子なので、なんかアクセント欲しいときにおすすめです。線だけでなく、星型とかハート型とかのパスでやってみるのもいいと思いますし、直線や曲線を描いた時に線に対してテクスチャを指定しておくのも面白いです。
「ブレンドするまでどうなるか分からない」というのはドキドキものですが、トップページのドーンと大きな画像なんかを作っている時に、こういうのを何種類か組み合わせたりしてると、なぜかものすごく手の込んだデザインのように見える偶然に出会う事もあります。
ただ、一度「これめっちゃいい!」という組み合わせに出会っても、パス保存するの忘れてたら二度と出会えない可能性が非常に高いので、「これはっ!」というパスと補間数の組み合わせに巡り合ったらとりあえずどっかに単体で保存してコレクションしておく方がいいですよー、と。
<< Fireworks ちょいネタ集 | Fireworks コレ、5分で作ります。その2 >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/264
コメント (1)
(n'∀')η<オルト エム エム ジー!
いつも大変お世話になております。
このサイトのファンです。
コレ流行らせたいと考えています。
投稿者: dn-masa | 2011年04月01日 16:20