2.背景を作る

2.1 手持ちの画像で作る
2.2 デジカメ写真で作る
2.3 背景の貼り付け方
 背景を指定しないと、見る人のブラウザの設定に従って表示されるので意図したようには表示されません。背景の色と文字の色は必ず指定します。このとき、画像を背景に指定すると一味ちがったホームページができます。

2.1 手持ちの画像で作る

 今ある画像を利用して、「万華鏡(Kaleidoscope)」というソフトで継ぎ目の無い背景画像に加工します。(「万華鏡(Kaleidoscope)」の入手とインストールについてはこちらをご覧下さい。)
図2−1

●手持ちの画像を選ぶ
 背景はコントラストが低く明るい方が、文字が読み易いですね。元になる画像も明るい色でコントラストの低いものを選びます。大きさは、モニター画面の半分以下にします。(大きいとプレビュー画面が隠れるので操作しにくい。)
 図2−1に画像の例を示します。大きさは300×200ピクセルです。

●「万華鏡(Kaleidoscope)」で加工する
  1. 「Kaleidoscope」で、上で選んだファイルを開きます([ファイル]−[画像を開く])。
  2. 三角形をドラッグすると、プレビュー画面に画像が表示されるので、気に入った画像で止めます。
  3. [ファイル]−[パターンを保存]でファイルの種類をJPEG画像にして保存します。
  4. 下に示す様に、色々な背景ができます。
下の画像をクリックしてみましょう。背景がかわります。
図2−2

2.2 デジカメ写真で作る

 2.1では幾何学模様でしたが、ここでは写真の内容を生かした背景を作成します。

●写真撮影のポイント
 身近にあるものをデジカメで撮影して背景画像を作成する場合のポイントは、
  1. 写真の背景は単純にする。
  2. ズームの場合は望遠側で近接撮影し、背景をぼかす。
  3. 直射日光を避けて強い影ができるのを防ぐ。
●写真を背景用に加工する
 背景用に適した画像は、コントラストが低くファイル容量もあまり大きくない画像です。そんな画像に加工するために、「1.写真の加工」で使った「JTrim」というフリーソフトを使います。(「JTrim」をインストールしていない方はこちらをご覧下さい。)
  1. [ファイル]−[開く]で気に入った写真を開きます。
  2. 写真の上でマウスをドッラグして切り取りたい範囲を決めます。
  3. [イメージ]−[切り抜き]で不要な部分を取り除きます。
  4. [カラー]−[γ補正]で、スライダーを調節し明るくします。
  5. [カラー]−[明るさ/コントラスト]で、コントラストと明るさを調整します。
  6. 画像が大きい場合は、適当な大きさに縮小します。[イメージ]−[リサイズ]をクリックし、「サイズで指定する」を選択して幅を指定し「縦横の比率を保持する」にチェックを入れて[OK]をクリックします。(一枚画像の背景の場合は幅400〜600ピクセル程度が良いようです。)
  7. [ファイル]−[名前をつけて保存]で、保存する場所をホームページのあるフォルダにし、ファイルの種類を「JPEGファイル」を選択し、ファイル名に名前を入れて[保存]をクリックして保存します。
  8. 保存したファイルの容量が大きい場合には[名前をつけて保存]のダイアログボックスで[設定]をクリックして保存の品質のスライダーを「低品質」方向に移動してから、保存し直します。
下に元の写真と加工した画像を示します(1/2に縮小しています)。参考にして下さい。
図2−3
元の写真加工後の画像

2.3 背景の貼り付け方

 せっかく作った背景画像も、上手に貼り付けないと生きてきません。次に背景画像の貼り付け方を、サンプルの中で説明します。
  1. 全面にタイル貼りする。サンプル1
  2. 左側(右側、中央)縦一列に貼り付ける。サンプル2
  3. 上側(下側、中央)横一列に貼り付ける。サンプル3
  4. 一枚だけ貼り付ける。サンプル4
  5. 背景をスクロールしない。サンプル5