【Fireworks】9スライスをこんな風に使ってみました。

Fireworks

minami

2011.03.01

こんにちは。今年は夏フェスにはいかない!と決めたのに、ラインナップが発表されるとソワソワしているminamiです。

Fireworksネタです。Fireworksには9スライスという便利な機能がありますが、ちょっと応用してこんな風に使ってみました。
※作成例はFireworks CS5を使用しています。

9スライスとは、おさらい

9スライスはFireworks CS3から導入された機能で、ベクターシンボルやビットマップシンボルの端の形状を保ったまま、中間だけを伸ばすことができます。

9スライスはシンボルを作成する際に、オプションにチェックを入れることで有効にすることができます。よく使われると思われるのが、角丸のオブジェクトの拡大縮小です。

上のようなサイトのデザインを作った時、テキストの長さが変わると、角丸の背景部分も伸ばさないといけなくなります。普通に拡大してしまうと角丸の形状が崩れてしまうのですが、9スライスを下のように設定すると、角丸の比率を保ったまま拡大できます。

サイトの共通部分を9スライスで管理する

9スライスを応用してこんな使い方をしてみました。
このデザインでたくさんのページデザインを量産する際、コンテンツの量が増えるとカンバスサイズを伸ばしてフッタを下げて背景部分も伸ばして・・・と、地味にいろいろと手間がかかります。
そこでヘッダ、フッタ部分を下のように9スライスを設定したシンボルとして管理してみました。

※クリックで拡大します

このように設定しておくと、コンテンツが増えてページ全体を伸ばさなければならなくなった時、カンバスサイズを伸ばして、このシンボルを縦に伸ばすだけで対応できます！ヘッダとフッタの比率が変わらずに、コンテンツの入る中間部分だけが伸びるのがミソです。
さらに、背景部分にテクスチャを設定している場合も、テクスチャの比率は変わらないので楽に背景を伸ばすことができて一石二鳥です！