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

すべてのエントリを見る

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本曲線を書きます。

画面キャプチャ・長方形の上にパスを1本書く

その曲線と長方形のパスを選択します。

画面キャプチャ・その曲線と長方形のパスを選択した状態

画面キャプチャ・パスパネル パスを分割

その曲線と長方形のパスを選択した状態で、パスパネルの「パスを分割」をクリック。
これで長方形が分割されます。

画面キャプチャ・分割された長方形

で、先ほどペンツールで書いた曲線より左側は必要ないので削除します。普通に選択ツールで左半分選択して削除してください。

画面キャプチャ・長方形の左半分を削除

残った右半分を一番下の土台の右側へ重ねます。

画面キャプチャ・残った右半分を一番下の土台の右側へ重ねる

画面キャプチャ・色の調節

重ねたら土台の色に合わせてこのパーツもグラデーションをつけて色を調節します。濃い方を#2880BD、薄い方を#A6D0F0にしました。

画面キャプチャ・土台の色に合わせて色の調節

そして不透明度を50%にします。

画面キャプチャ・不透明度を50%にします

土台とこの右半分の長方形はもういじらないです。以後の工程で上にどんどんオブジェクトを重ねるので、グループ化なりレイヤーフォルダ分けるなりロックしておくなりしておくと、後で「うわっ。こっち選択しなくていいのにひっついてきやがった!」とか、イライラせずに済むかも、です。

2つ目の長方形を用意

もう1つ長方形ツールで長方形を作ります。今度は幅は土台と同じくらいでいいですが、高さは少し短めのものを作ります。

画面キャプチャ・もう1つ長方形を作る

その長方形にテクスチャの設定をします。今回はFireworks に最初から入ってる「グリッド3」というテクスチャにしました。テクスチャの適応量は100%。

画面キャプチャ・「グリッド3」適応量100%

こちらもグラデーションをつけます。(が、今回は最終的に白っぽくて薄い感じになりますので、グラデつけてもほとんど分からない状態になります。面倒だったらベタで白に近い水色にしても大丈夫です)そして斜めに傾けます。拡大縮小ツールで回してもいいですし、数値を入力して角度を変えても構いません。まぁ、なんせこのくらい傾けるってことで。

画面キャプチャ・グラデーションをつけて傾ける

上の工程で作った土台達の上へこの傾けた長方形オブジェクトを重ねます。適当に動かしてベスポジを探してください。傾きの変更とかあればこの時に一緒に。

画面キャプチャ・土台達の上へこの傾けた長方形オブジェクト重ねる

不透明度を45%にします。

画面キャプチャ・不透明度を45%に

もう1つこういう長方形が欲しいので、コピーペーストしてグルーンと反対方向へ向きを変えます。

画面キャプチャ・もう1つ長方形を用意して向きを変える

上記キャプチャでは拡大縮小ツールで適当にグイーンと回しましたが、「変形 > 水平方向に反転」とかなんでもいいです。要するにひっくり返したいだけ。

画面キャプチャ・色の調節

コピーした方の長方形のテクスチャは「グリッド3」だったんですが、こっちは「グリッド4」にします。ほんの少ししか変わらないですが、変えます。

こちらの長方形は少し右側に向かって広げたいので、少しだけパスをいじります。右下の角をちょっとだけ広げる感じです。パスいじるの嫌いな人はダイレクト選択ツールで右下の角をクリックしてキーボードの矢印キーの下矢印ポンポンポンと8回くらいキー叩くだけでもいいです。

画面キャプチャ・パスの変形

位置を再度調節して(下記キャプチャでは少し位置を右にズラしました)不透明度を45%、描画モードを「スクリーン」にします。

画面キャプチャ・不透明度を45%にして、ブレンドモードを「スクリーン」に

マスク!

はみ出してる部分をマスクで隠します。マスク用の白色長方形を用意して、はみ出してる2つの長方形と一緒に選択。

画面キャプチャ・はみ出してる部分をマスクします

(n'∀')η<オルト エム エム ジー! (ちょっと流行らせたい感じ)

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

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

仕上げの1px

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

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

画面キャプチャ・完成

これで完成。お疲れ様でした(n'∀')η

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

トラックバック

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

コメント (6)

こんにちは。
今更ですが、読ませていただきました!
このFireworksシリーズ、大好きです。

見出し画像、私もよく作るんですが、いつも似た感じになっちゃうんですよね(グラデーションしか使ってないからかな・・)。
このパスを使えるようになると、作成の幅が広がりそうですね~。今度見出し画像を作るときはRedさんのチュートリアルを参考にさせてもらいますね!ペンツール覚えるきっかけにします。

それと、オルト エム エム ジー、ぜひ流行らせましょう!(笑)横浜支部、作りますよww
レッドさんの記事のおかげで、マスクするときはいつもつぶやいています。

>うるめさん、こんにちはー。
コメントありがとうございました。
Fw普及活動に必死な私ですww
Fwは便利なんだぜ!というのをもっと知ってもらいたいと願う今日この頃。

>それと、オルト エム エム ジー、ぜひ流行らせましょう!(笑)横浜支部、作りますよww
是非お願いしますwww


こんばんわ、Redさん。
私もFireworksでデザインを作っているのですが、
ワンパターンになってしまう見出しの背景画像に
物足りなさを感じていました。

そういう意味で、このエントリーは大変参考になりました。
どうもありがとうございます!

>Tsunekichiさん、コメントありがとうございました。
Fireworks、いいですよね!
ユーザーの方に見ていただけて嬉しいです(∩´∀`)∩


全然関係ない話ですが、もうすぐお子様が誕生される・・・のですよね?
おめでとうございますー!! いいお父さんになってくださいね(n'∀')η

大変参考になりました。

10年近く前にFireworksを使っていましたが、
最近はPSばかりでした。

Fireworksは、
解説書やサイトが少ないので、
使い方が勉強しずらいと思います。

Fireworks、使えるなあ!
制作してみようと思いました。

新しい記事も期待しております!


>tigpigさん

コメントありがとうございました。
>10年近く前にFireworksを使っていましたが、
最近のFireworksはとてもよくできるいい子ですよ(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=混ぜるな危険(追記有)

メッセージを送る

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