Fireworks コレ、5分で作ります。その2
※このエントリはFireworks CS4を元に書いています。
前回はペンツールでパスを書いてなんやかんやしたんですが、今回はFireworksを始めたら一番最初にコレを覚えであろう長方形ツールをメインで使ってコレを5分くらいで仕上げる方法です。
デザイナさんも、デザイナさんじゃない方も、Fireworks をほとんど使った事ないわーという方にも、一度5分だけでも時間を使ってもらえたらなーという主旨も含めて書いてます。実際にやってみてもらって、「うはww Fireworks ってこんなに簡単な手順でよく見かけるこういうモノ作れたんだ」とか思ってもらえると嬉しいです。
今回の完成形
今回も前回同様、見出し画像の背景に使えそうな画像を作ります。
今回も素材集等、Fireworks の機能以外のものは使いません。
土台を用意
今回は2色のグラデーションにします。上辺のカラーは#80B7DF、下辺のカラーは#CBE2F3、線は1pxで#8BB5D3にしました。
ここでのサンプルのサイズはW 470 * H 40 としました。
今回もこういう見出し用の背景画像でよく左側にくっついてるラインを合体させます。(前回のパーツの使いまわしですけど)
長方形を用意
土台と同じサイズ(W 470 * H 40)の線なしベタ塗りの長方形を1つ作ります。色は後で変更するので何色でもいいですが、とりあえずブルー系にしておきました。
こういう普通の長方形を作ったら、次にその長方形の上にペンツールで次図のように長方形の真ん中辺りに1本曲線を書きます。
その曲線と長方形のパスを選択します。
その曲線と長方形のパスを選択した状態で、パスパネルの「パスを分割」をクリック。
これで長方形が分割されます。
で、先ほどペンツールで書いた曲線より左側は必要ないので削除します。普通に選択ツールで左半分選択して削除してください。
残った右半分を一番下の土台の右側へ重ねます。
重ねたら土台の色に合わせてこのパーツもグラデーションをつけて色を調節します。濃い方を#2880BD、薄い方を#A6D0F0にしました。
そして不透明度を50%にします。
土台とこの右半分の長方形はもういじらないです。以後の工程で上にどんどんオブジェクトを重ねるので、グループ化なりレイヤーフォルダ分けるなりロックしておくなりしておくと、後で「うわっ。こっち選択しなくていいのにひっついてきやがった!」とか、イライラせずに済むかも、です。
2つ目の長方形を用意
もう1つ長方形ツールで長方形を作ります。今度は幅は土台と同じくらいでいいですが、高さは少し短めのものを作ります。
その長方形にテクスチャの設定をします。今回はFireworks に最初から入ってる「グリッド3」というテクスチャにしました。テクスチャの適応量は100%。
こちらもグラデーションをつけます。(が、今回は最終的に白っぽくて薄い感じになりますので、グラデつけてもほとんど分からない状態になります。面倒だったらベタで白に近い水色にしても大丈夫です)そして斜めに傾けます。拡大縮小ツールで回してもいいですし、数値を入力して角度を変えても構いません。まぁ、なんせこのくらい傾けるってことで。
上の工程で作った土台達の上へこの傾けた長方形オブジェクトを重ねます。適当に動かしてベスポジを探してください。傾きの変更とかあればこの時に一緒に。
不透明度を45%にします。
もう1つこういう長方形が欲しいので、コピーペーストしてグルーンと反対方向へ向きを変えます。
上記キャプチャでは拡大縮小ツールで適当にグイーンと回しましたが、「変形 > 水平方向に反転」とかなんでもいいです。要するにひっくり返したいだけ。
コピーした方の長方形のテクスチャは「グリッド3」だったんですが、こっちは「グリッド4」にします。ほんの少ししか変わらないですが、変えます。
こちらの長方形は少し右側に向かって広げたいので、少しだけパスをいじります。右下の角をちょっとだけ広げる感じです。パスいじるの嫌いな人はダイレクト選択ツールで右下の角をクリックしてキーボードの矢印キーの下矢印ポンポンポンと8回くらいキー叩くだけでもいいです。
位置を再度調節して(下記キャプチャでは少し位置を右にズラしました)不透明度を45%、描画モードを「スクリーン」にします。
マスク!
はみ出してる部分をマスクで隠します。マスク用の白色長方形を用意して、はみ出してる2つの長方形と一緒に選択。
(n'∀')η<オルト エム エム ジー! (ちょっと流行らせたい感じ)
上の一文がなんのこっちゃ分からない方はスルーして、「変更 > マスク > マスクとしてグループ化」でマスクしてください。次図のようになります。
仕上げの1px
今回も最後の仕上げにもうひと手間だけかけます。土台の1px内側にラインを入れたいので、長方形(塗りなし・線#EBF3FA)の長方形を作ってX1・Y1の位置に重ねます。
土台サイズをW 470 * H 40 としたので、その線のみの長方形のサイズはW 468 * H 38。その長方形の左上が土台の左から1px、上から1pxの位置にくるように重ねます。
これで完成。お疲れ様でした(n'∀')η
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/265
コメント (6)
こんにちは。
今更ですが、読ませていただきました!
このFireworksシリーズ、大好きです。
見出し画像、私もよく作るんですが、いつも似た感じになっちゃうんですよね(グラデーションしか使ってないからかな・・)。
このパスを使えるようになると、作成の幅が広がりそうですね~。今度見出し画像を作るときはRedさんのチュートリアルを参考にさせてもらいますね!ペンツール覚えるきっかけにします。
それと、オルト エム エム ジー、ぜひ流行らせましょう!(笑)横浜支部、作りますよww
レッドさんの記事のおかげで、マスクするときはいつもつぶやいています。
投稿者: うるめ | 2010年07月06日 01:23
>うるめさん、こんにちはー。
コメントありがとうございました。
Fw普及活動に必死な私ですww
Fwは便利なんだぜ!というのをもっと知ってもらいたいと願う今日この頃。
>それと、オルト エム エム ジー、ぜひ流行らせましょう!(笑)横浜支部、作りますよww
是非お願いしますwww
投稿者: Red | 2010年07月06日 09:41
こんばんわ、Redさん。
私もFireworksでデザインを作っているのですが、
ワンパターンになってしまう見出しの背景画像に
物足りなさを感じていました。
そういう意味で、このエントリーは大変参考になりました。
どうもありがとうございます!
投稿者: Tsunekichi | 2010年07月22日 22:40
>Tsunekichiさん、コメントありがとうございました。
Fireworks、いいですよね!
ユーザーの方に見ていただけて嬉しいです(∩´∀`)∩
全然関係ない話ですが、もうすぐお子様が誕生される・・・のですよね?
おめでとうございますー!! いいお父さんになってくださいね(n'∀')η
投稿者: Red | 2010年07月23日 17:29
大変参考になりました。
10年近く前にFireworksを使っていましたが、
最近はPSばかりでした。
Fireworksは、
解説書やサイトが少ないので、
使い方が勉強しずらいと思います。
Fireworks、使えるなあ!
制作してみようと思いました。
新しい記事も期待しております!
投稿者: tigpig | 2010年08月01日 09:55
>tigpigさん
コメントありがとうございました。
>10年近く前にFireworksを使っていましたが、
最近のFireworksはとてもよくできるいい子ですよ(n'∀')η
是非是非使ってみてください!
また何かこんな使い方あるよーというのが有ればエントリ書いてみますねー。
投稿者: Red | 2010年08月01日 14:26