2008年2月24日日曜日

Fireworksでのスライス使用方法




Fireworksの使い方 動画マニュアルを更新しました。
今回は、ファイヤーワークスでのスライスの使用方法です。


一昔前のスライスの使い方というと、デザインを全面、画像作成ソフトで作って、それをスライスで1画面全部書き出ししてから、HTMLにテーブルごと取り込み・・・
という方法が主流でしたね。
とくにDTPなどのデザイン畑からweb制作に入ったデザイナーさんにとっては、HTMLソースを覚えなくても自由自在にデザインができるという素晴らしい機能でした。
同時に、5年も前にはまだネットの回線の速度が遅く、どうやって軽い画面を制作するかに、とても神経を使わなければいけない時代だったので、大きな画像は、スライスで切り刻んで部分的に高画質で出力したり、広い余白はスペーサーを入れて無駄な画像が入らないようにするなど、
画面を軽くするテクニックも重要でした。

しかし時は流れ、今やWEB標準に合わせた制作方法が主流に・・・・
大きな画像は1枚で背景用に書き出して、そのうえにテキストやパーツを配置していく・・。
こちらが主流になってから、スライス機能の使用方法も使い方が変わってきました。

全画面テーブルで書き出ししてしまうと、修正があったときに大変ですが
後のメンテナンスを考えると、こういった背景画像にHTMLでテキストをのせるといった方法をとったほうがだんぜん効率が良いですね。

というわけで、作例では、1画面で作ったweb用背景を、ヘッダー用、フッター用、メイン部分用の3つに切り分けて、さらにロゴは別で書き出しする方法です。
(1)から(3)までで完結してます。

Fireworksのスライスの使い方 >> (1)背景画像用に切り抜きする方法

0 件のコメント:

webの森のFBページへも来て下さい