画像をスライスする
ここではPhotoshopで、ホームページ用の画像を作成する方法をご説明いたします。
まず、「css」フォルダを作成したときと同じ要領で、「homepage」フォルダ内に「img」フォルダを作成しておきます。
次にデザインをPhotoshopで開き、テキスト部分を非表示にしておきます。
WEBでよく使われる画像ファイルの種類は、GIF,JPEG,PNGの3種類です。
それぞれの画像ファイルには、以下のような特徴があります。
| 種類 | 特徴 |
|---|---|
| GIF | 最大256色で構成されている。単色のロゴなどの画像に向いている。アニメーション・透明（透過）gifなども作成可能。 |
| JPEG | 1,670万色数があり、グラデーションなどに向いている。GIFよりはファイルサイズが重くなる。 |
| PNG | 半透明が表現可能。IE6以前のブラウザでサポートされていない。 |
画像ファイルの特徴をふまえて、ファイルサイズを極力小さくしつつも画像を綺麗にするというのが「スライス」という作業になります。
背景のグラデーションをスライスする作業を例にとり、「スライス」の説明をします。「鈴木智子のホームページのアクセスアップ講座」の背景のグラデーションは、ちょっと凝っています。どこが凝っているかと言うと、縦方向のグラデーションの上に横方向のグラデーションが掛かっているところです。
このようにグラデーションが縦方向と横方向の両方に入っている場合は、htmlタグの再定義に縦方向のグラデーションを定義し、bodyタグの再定義に横方向のグラデーションを透過pngで定義します。
では、実際にスライスしてみましょう。
まずはPhotoshopで作成したデザインを開きましょう。
背景部分のグラデーションを[スライスツール]で選択するには、グリッドを表示させて、グリッド上をスナップさせないと丁度良い大きさでスライスできませんので、Ctrl+@でグリッドを表示させましょう。
[スライスツール]を選択し、横方向のグラデーションが入らない範囲で、斜め右下にドラックします。
画像ファイルは、なるべく小さい方が良いので、幅を1pxにする方法もありますが、後からスライスした画像を拡大しないと確認が難しいので、ここでは、幅を10pxとします。
高さは、ボケ足（グラデーションが切れる高さ）までをドラッグします。
場所を間違えたり、大きすぎたり小さすぎたりした場合は、[スライス選択ツール]に持ち変えると、場所を移動したり、拡大縮小できます。
スライスをする際は、必ず、その部分を拡大表示して作業を行うことです。
今回のようなグラデーションの場合は、青い色が全くなくなったところまでスライスしなければなりません。
また、ドロップシャドウがある場合などは、そのボケ足まですべてをスライスしないとブラウザで確認したときに、なんとも間抜けなサイトになってしまうので気をつけましょう！
さて、スライスができたら、[スライス選択ツール]でスライス内をダブルクリックしましょう。
以下のようなスライスオプションが出てきます。
[名前]の欄に、画像の名前を入力します。名前の入力で注意しなければいけないのは、「2バイト文字禁止、数字から始まってはいけない」ということです。
今回は全体の背景画像に入れるグラデーションなので、「bg_html」という名前にしました。
できたらOKボタンをクリックしてください。
名前をつけ終わったら、[ファイルメニュー]→[WEBおよびデバイス用に保存]をクリックします。
保存確認画面（下図）が表示されます。
左上が元画像。それ以外はプレビューです。
[スライス選択ツール]で選択してから、右上のプルダウンメニューでどの画像にすれば良いのかいろいろ試してみましょう。
今回はグラデーションなので、[JPEG]の[最高画質]にしました。
設定ができたら、右下にある[保存]ボタンをクリックしてください。
最初に作成した、「homepage」フォルダの「img」フォルダ内に保存するようにしてください。
このような手順ですべての画像をスライスしてゆきます。
今回注意していただきたいところは、コンテンツ背景にあるドロップシャドウ部分と人のイラスト部分です。
背景が透明な状態にして、PNG-24の形式で保存してください。
また角丸部分は、上蓋、下蓋を作ります。
参考までに、スライス後のPhotoshop画面です。
スライスした画像の正解をこちらにあげてありますので、解凍してご覧ください。
グローバルナビゲーション、ヘッダーナビゲーションともに2つつながっているものがありますが、これは後で使います。
さて、画像の準備ができたら、「コモンCSSを仕上げる」に行きましょう。
