第１弾■青い表紙のメイキング ++ 題して「Fireworksの正しく*ない*使い方」

まずは2001.10のリニューアルで作った表紙。使用したソフトはFireworks 4とDreamweaver 3。Fireworksの良さを十二分に発揮した使い方では*ない*ものの、こんなさりげない使い方もできるよ…ということで紹介します。

１．頭の中のデザインを形にしてみる

まず、Fireworksを立ち上げ650x500程度の新規キャンバスを作成。そこで、イメージを具体化してみる。この状態では、HTMLで表現できるかどうかはあまり考えない。今回は、「青」「ぶっとい線」「しましま」っていうのが頭の中にあったので、そんなのであれこれいじってみる。最終的に、これだ〜というデザインにたどり着くまで、いろ〜んなことをFireworksでやってみる。Fireworksは、線や矩形をベクター形式で持っているので、Photoshopで試行錯誤するよりずっと楽。

最終案の背景はこんな感じの設定。

塗りや線の色はカラーミキサーパレットで見ると便利。選択した青にテクスチャ「水平線4」を50%かけてある。これで「しましま」感覚があっという間にできるわけ。

お次は角が丸い矩形。これも描くのがすごく楽。矩形ツールのところで角丸ありの矩形を選択して、オブジェクトパレットで角丸の割合を調節する。あとからでも変えられるので便利。

次はしましまの写真。これにはマスク機能を使った。デジカメデータから読み込んだ画像を適度な大きさ、適度な色合いに調整してから配置（調整はFireworksのエクストラメニューあたりでもできるけれど、私はPhotoshopのほうが使いやすいのでPhotoshopでやることが多い）。その上に、塗りを黒で、テクスチャ指定した（上の背景と同じように塗りパレットで調節）矩形をかぶせる（下の図は少しずらしてわかりやすくしてあるけど、実際には完全に写 真を隠すように移動）。で、写真と白黒しましまの矩形の２つを選択した状態で、メニューの[修正]->[マスク]->[マスクとしてグループ化]。

２．HTMLにすることを考えつつスライス化

Fireworksはデザインした画面全体をTABLEタグで寸分違わず再現できるようにHTMLまで出力してくれる機能がある…が、それをやると全体を画像にしてしまうために重たくなる（重たくなる例はまた別 の機会に紹介するね）。なので今回は、じ〜くり考えて次のような部品だけを取り出すことにした。

上の画面で少し緑ぽくなっている部分だけ画像として取り出すことにしたわけ。赤い線はこの場合あまり気にしない気にしない。大きな画像から一部分だけ細切れにして取り出したいときにスライスツールを使う。スライスツールを選択して、部品にしたい部分を囲うと上のような緑っぽい矩形が出てくる。スライスにはそれぞれ名前を付けておくと便利。これが生成される画像ファイルの名前になるのだ。

[ファイル]->[書き出しのプレビュー]でどれぐらいのファイル容量 になるのかを確認したりしつつ、今回はGIFの64色にすることに決定。モモちゃん（写 真）の色劣化がひどいけれど、しましま効果と重なるとそれも味に見えるのでＯＫとする。軽い方がいいからね。

このまま[ファイル]->[書き出しのプレビュー]で「書き出し」をクリックし、ダイアログで「イメージのみ」を選択、「スライスにない領域も含める」のチェックをはずして書き出せば指定した11個のスライスを全部いっきに64色のGIFに変換して書き出してくれる。このときにファイル名として使われるのがスライス名。２つ上の図のモモちゃんのスライスは「photoframe.gif」というファイルになる。

３．Dreamweaverで実現してみる

それぞれの部品を使ってDreamweaverで再現してみる。TABLEを駆使して似たような配置になるように試行錯誤。TABLEのWIDTH, HEIGHTをガチガチに使っているけれど、メニューが増えても大丈夫なフレキシビリティーはあるはず。下の図を見れば、だいたいどんなTABLEで作られているのか判るのでは。メニューの区切り線に使っているのはFireworksで別 に作った点線。この点線は上の作業ができる人なら簡単に作れるので省略。

実は、ここで使った画像は、全部合わせても 16KB（WebRingのアイコンは除く）。画面 全体を使ったデザインに見えるので重たげに感じるけれど、実は画像データとしてはすごく軽い。また、TABLEタグや画像にはできる限りWIDTHを指定すると体感表示速度が速くなる。

さてさて、いかがでした？
Photoshopでも似たようなことはできるけれど、Fireworksの方が便利な点がいくつもある。

• エレメントをベクターで持っているので試行錯誤が楽
• エフェクトも結構充実
• 全体の画像から一部分だけ切り取るのが楽

Fireworksは、取っつきにくいソフトではあるけれど、Photoshopを置き換えることを考えている場合には、まず上のような使い方がいいのではないでしょ〜か。