| 完成したモックアップをスライスする |
タイトルやボタン画像など細かい素材をスライスする
まとめてスライスして効率を高める
そのほかの素材をスライスしよう。まずはメニューエリアでの、マウスカーソルを合わせるときのメニュー画像を作成する。あらかじめ各メニュー要素を別々のレイヤーに配置しておくと、作業がしやすい。各メニュー要素の共通の部分だけをコピーして、変化する個所だけを作成すると、表示ずれ等の不具合が生じにくい。レイヤーの表示・非表示を使い分けて、スライスを書き出そう。次に下位ページの素材に移る。下位ページのモックアップ【7】では、イメージするだけにとどめて、タイトル画像やボタン画像の素材は、別のファイル【8】にまとめておこう。そうすることで、編集する際にもスライスする際にも効率的である。
ここで、応用として背景にテクスチャ画像を配置する場合を考えてみる。テクスチャ画像を作成し、必要最小限の大きさの正方形にスライスする。この場合、ドロップシャドウ用の画像もテクスチャ画像に合わせてスライスする。テクスチャ画像の繰り返しは、CSSで設定しよう。なお、Photoshopでは、「Web用に保存」を使うと、画像とともにHTMLを書き出すこともできるが、画像だけを書き出してHTMLは手動で記述したほうが、Webサイト組み立ての幅が広がる。また、Fireworksに関しては、スライスの作成・編集の点では、Photoshopよりも扱いやすいといえる。PhotoshopやIllustratorで精密なレイアウトをしてから、Fireworksでスライスする、という流れもひとつの方法だろう【9】【10】。
【7】下位ページのモックアップ。ボタン画像やタイトル画像はこのままスライスするより、別のファイルにひとつにまとめておくと効率的である
【8】タイトルやボタン画像などの素材をまとめたファイル。これで一気にスライスが可能だ。なお、背景に使用するテクスチャ画像は必要最小限の大きさにスライスするとよいだろう
【9】Fireworksの作業画面。Fireworksは、Webグラフィックスに特化しているので、Web画像をスピーディに作成・最適化が可能である
【10】Fireworksのスライスのプロパティ。Fireworksでは、レイアウト作業と平行して、それぞれのスライス設定が可能なのでスピーディだ
［INDEX］
>>> スライスをする前にWebサイトをイメージする
>>> スライスの切り方・設定を工夫してから書き出す
>>> スライスの名前や保存形式などの設定をする
>>> タイトルやボタン画像など細かい素材をスライスする
>>> ディレクトリ構成を考えて下準備をする
>>> 文書構造重視のマークアップを考える
>>> スタイルの付与・常套テクニックを使う
