第17話 Fireworks編2:3分でできるバナー作成
 
前回は 「ビットマップ画像」と「ベクトル画像」の説明をしました。

画像を作るときは、通常のソフトを使う場合、
ベクトル画像を作成して、Webで掲載できるように
「ビットマップ画像」に変換・修正を行う、
しかし、Fireworksはこれらの機能が統合されており、
ベクター画像をすぐにWebで掲載できる形にできるということでしたね。


さて、今度はFireworksを実際に使ってみましょう。
マクロメディアのホームページに行きますと
Dreamweaverと同じ、トライアル版(お試し版)として30日だけですが、
無料で使用することができますので
以下のページにいってFireworksのトライアル版をダウンロードしてみましょう。

http://www-asia.macromedia.com/jp/software/fireworks/trial/


そこでダウンロードしたファイルをインストールしてみます。
それでお試し版が使えるようになったはずです。

インストールが終わりましたでしょうか?


では、今回は一番簡単な例として、バナーを作成してみましょう。
バナーとはホームページのシンボルマークみたいなものですね。

私は製品版の方を使って説明をしていますので
もし、トライアル版で機能制限があって作成ができなかったら申し訳ありません。

完成バナーは、こんなのです。

作成時間は、3分もあればできてしまいます。
ではさっそくやってみましょう(^^)


(1)ファイル→新規作成→キャンバスサイズ:幅200、高さ40、解像度72、背景色白

これは、実際のイメージを作るときの大きさや背景色の決定ですね。


そうすると、200×40の場所ができました。

(2)「矩形ツール」→200×40の長方形を描く(色は黒)

長方形の左上から右下に向かって
200×40で黒い長方形を描いてあげます。

もしこのときにきれいに200×40の図が書けなかった場合は、
ウィンドウ→情報
をクリックしてみましょう。
するとその中に画像の大きさと座標が掲載されていますので
幅(W)200、高さ(H)40としてあげ、座標(X)(Y)をそれぞれ0、0とします。
そうするときれいに黒い長方形が描けたかと思います。

(3)塗り→放射

ここの塗りの部分ではグラデーションを扱うことができます。
自分の好みのグラデーションを作りたいときは、塗りの中にある「編集」というボタンを押すと
グラデーションの色を変えたり、グラデーションの具合を変えたりすることができ、
オリジナルのグラデーションが簡単にできます。

(4)エフェクト→「なし」を「ベベルとエンボス」→ベベル(内側)→「フラット」を「波紋」へ変更


エフェクトとは、画像に加工を加えることで、あらゆる加工のパターンがFireworksに
盛り込まれています。
これにより、お手軽に波紋や画像に凹凸をつけたものなどを作成ができるわけです。

(5)テキストツールで文字入れをします

ここでは、「Pastel」、「★」、「midilin」と3つの文字を入れ、
「Pastel」、「midilin」は白
「★」は黄色
にしました。



(6)エフェクト→「シャドウとグロー」→「グロー」
グローを★と同じ黄色にして、値を5に設定



同じくエフェクトを使って★だけに効果を与えました。
これで★が輝いている感じがでますね。

最後に仕上げとして
背景の黒い画像を選んで

(7)ウィンドウ→オブジェクト→角丸の割合を50に変更



たったの7行程で3分くらいで画像ができてしまいます。
Fireworksの魅力の1つは、このようにエフェクトの機能が多彩で、
画像にいろいろな効果を与えることができます。


第18話 「Fireworks編3:マスク処理でお手軽にロマンチック画像を!」
第16話 「Fireworks編1:ビットマップ画像とベクトル画像の違い」へ戻ります
目次に戻ります
ホームページ作成講座等あるパステル・ミディリンのTopに戻ります