スライス機能を使ったレイアウト (08/1/24改、11/8/26改 安倍)


テキスト文を含むページ全体、あるいは主要部分を画像で扱い、その画像の1部分からリンク設定するとデザインの自由度が向上する。
ただしこの方法には一長一短がある。

 例: http://www.mikasax-ray.com/  

メリット:
  ・
デザインが自由にでき、デザイナーが作成したレイアウトをほぼ正確に再現できる。  

デメリット:   
  ・更新が面倒。画像を修正する必要がある。
  ・ファイル容量が大きくなるので表示が遅くなる。
  ・作成後の画像更新を繰り返すと画像が劣化する。(※1)
  ・全文検索の対象にならない。(※2) 

(※1)最初に作成した画像の各部品を、レイヤーで保存しておき、以後の更新 にそのまま利用することにより画像劣化を防止できる。
(※2)ソース冒頭にKEYWORDS、DESCRIPTION を入れることで対処する。コメント行に説明文を入れてもいいが、これは検索対象外になる可能性あり。

以下、この方法の応用として、スライス法について説明する。

ネット上の解説は → http://helpx.adobe.com/jp/photoshop/kb/224107.html

 スライス機能の原理

画像を分割して表で再結合して 表示する手法を「スライス処理」という。
この手法の本来の目的は、低速インターネット時代に大容量画像を少しづつ表示させて閲覧者が何も見えない時間を短縮させるためのものだったが、いまや目的が代わって表紙レイアウト作成のために使われています。


スライス分解


再結合


スライス処理の本来の機能
  1. 画像全体の表示時間は変わらないが、各分割ごとに順次表示するので、閲覧者にストレスを感じさせない。
  2. 分割画像ごとに、jpeg、gif などに画像形式を変えられる。
  3. 部分画像にリンク設定できる。 このリンク目的のためだけなら「イメージ(クリッカブル)マップ」の方が簡単だが、
    色変わりするロールオーバーボタンを作成する場合はスライス機能が役立つ。
 ロールオーバーボタンへの応用

使用注意と、イメージマップボタンの場合との比較 ⇒  こちら

上図の場合、レイヤー単位でボタンをスライスすると便利。
方法:レイヤーパレットからボタンのレイヤーを選択→ レイヤーメニューから[レイヤーに基づく新規スライス] を選択
画像数が増えるがレイアウトが崩れることない。
PhotoShopでボタンを切り抜く時の範囲指定は、範囲「固定」で横、縦を指定するとよい。
具体的には
・単一画像でまず挿入先Htmlファイル作成
・コード編集で、この単一画像をスライス合成Htmlファイルの <table> 〜 </table> 部分に置き換える。

リンク先はとりあえず # にしておき、後で変更すればよい。

ロールオーバーしたいボタンがすでにある場合の設定:
いったんボタン部分を削除して通常のロールオーバーを設定する。

 ホームページ表紙レイアウトへの応用

 

      1. 画像ソフトで、ページ全体を1つの大きな画像にして、各部品を上書き配置することにより自由にレイアウトする。
        テキスト入力予定の空白スペースも作る(この部分にはダミーの画像を入れてもいい)。 (下図左)
      2. リンクボタンや、テキスト入力予定スペースなど、各部品ごとに分割(スライス)する。(下図左の赤線)
      3. スライス処理機能には、分割画像をシームレスに再結合させる表生成機能がある。 (下図中)
      4. 生成した表は一般の表と同一だから、セル内の分割画像をテキスト入りの表に置換することによりテキスト表示にも対応できる。(下図右)

     ●下の例では、右側にリンクボタンが3つある。

赤線に沿ってスライス分解。
中央は空白の画像。ダミー画像を入れても可。
下の空白行はテキストが増えた場合のスペース。(実寸図
   再結合
 
空白画像をテキストと入れ替え。
ボタンにリンク設定、
隙間を微調整して完成 (実寸図

上の例の操作法: 
スライス機能がある画像ソフトで

  1. 幅 1024、縦 768pixcel 程度(15インチ液晶フルサイズ)の新規画像を設定する。
  2. このキャンバスに各部品を自由に配置する。 テキスト部分は空白にするか、あるいはテキストを画像変換したダミー画像を入れる。
  3. 後日のテキスト修正・追加ができるように、テキストの位置は下に拡大できる位置にしておく。
  4. ダミー画像の作成は、Windowsの場合、テキスト部分を Alt + PrtScr で画像変換し、画像ソフトで適当にサイズ変更する。
  5. 合成した大きな画像は背景を含め、多数のレイヤーで構成されるが、そのまま保存する。
  6. スライス処理で各部品画像やリンクボタンの他、テキスト予定部分の画像をスライスする。スライスはレイヤーを保持したままできる。(以上、上図・左)
  7. Html保存(ファイル→Webおよびデバイス用に保存→保存)すると自動的に再結合する。(上図・中央)
  8. テキスト予定部分の空白画像を削除して、同一サイズの空白表を挿入する。
  9. この空白表に入れ子でさらに表を入れテキストを記入する。入れる表の幅は空白表と同一にする(厳密に)。
  10. ボタンにリンク設定する。(border= 0 に指定)
  11. 下記注意事項によりセル間のズレを修正する。(以上、上図・右)

分割画像を厳密に再結合させるための注意事項:

・スライスは単純な多行多列にしたほうが再結合が確実である。画像数が少々多くなっても単純な多行多列にすべし。

・テキストは受信環境によって文字サイズが異なるから注意しないと 画像とのバランスが崩れてスライス画像に隙間ができる。 その対策として、

  1. 文字サイズはスタイルシートで小さめの絶対サイズ(pixcel)を指定する。※1)
    さもないと Internet Explorer で文字サイズ表示を“大“にして見られるとレイアウトは大きく崩れる。
  2. 自動改行せず、余裕をもって少ない文字数でスペース内で改行する。
    自動改行されると 表は右に数ピクセル広がり、その分 右セルにズレが生じる。
  3. テキスト挿入の縦スペースはスライス前に充分余裕を持って隣の画像よりも短くする。 そして
    画像下端に縦幅30ピクセル程度の空白のスライス行を作っておき、将来の文章量拡大に備える。
  4. 画面全体をスライス処理する場合は構成を上下に分ける。
  5. FireWorks と、Illustrator のスライス機能では、完成画像をブラウザ(Internet Explorer/Netscape)で見ると、画面上部と左部に10〜15pixcel幅の細い空白ができる。全体画像位置調整では解消せず原因不明。 PhotoShop では問題ない。

それでもセル間で数 ピクセルのズレや空白が生じた場合は

  1. セル境界をドラグして修正する。
  2. 左右のセルの配置を縦方向「上」に設定する。
  3. セル背景色を周辺に近い色にして空白を目立たなくする。 

基本的な解決法( background=****.gif を周囲に入れる) →  
   http://www.densai.com/artgallery/2012/12gallery/index.html

 スライス処理をしたホームページ例

 OPTREX社
スライス周辺部分を抜粋
この表のセル境界を赤線と黄線で示したもの

宝川温泉 汪泉閣 
この表のセル境界を赤線と黄線で示したもの

これらは題字(バナー)などの画像をスライス処理して表で再結合し、その一部の画像をテキストや他の画像に置換していることが分かります。
宝川温泉 は、画像の一部をFlashアニメと交換した凝ったものです。

 スライス処理できる画像ソフトと、その手順

このテストで使用した画像ソフト
Photo Shop (CS):
・ビュー → 定規 で定規を表示して作業するとやり易い・
ツールボックスのスライスツールでスライス → ファイル → webおよびデバイス用に保存 で分割画像ファイルと、それを合成するtableのhtmファイルが生成。

・スライス処理はレイヤーを保持したままできる。
PhotoShop には ImageReady というスライス用アドインソフトが付加されている。 このソフトを使うとレイヤーごとのスライスや、分割画像ごとにファイル形式を選択できるが少々扱いにくい。 この機能を使わないで本体のツールボックスで処理したほうがやり易い。
なお、 PhotoShop Element にはスライス機能はない。(07年末現在)

Photo Illustrator 10:

画像を選択 → オブジェクト → スライス → 作成
PhotoShop の ImageReadyに相当する機能はPhoto-Illustratorでは本体に内蔵されている。

FireWorks MX:

編集 → 画像選択 → 挿入 → スライス で、ツールボックスのスライスツールで分割位置を指定、 これを繰返して、さらに分割。 最後に「書出し」で、分割画像ファイルと、それを合成するhtmファイルを生成。
FireWorksでは、スライスエリアに直接テキストを入力する機能がある。


※1)スタイル設定: 文字を範囲指定 → 右クリック → スタイル設定 (ただし文字大きさが固定されるのは Internet Explorer のみ)

※その他): 表生成の際、スペーサーと称する幅 0 の列と行、微小gif画像が生成する。 表示を速くする工夫のようだが、Internet Explorer では意味がない。


  | 表を使ったレイアウト  | ホームページ作成体験メニューに戻る |

 

inserted by FC2 system