| 完成したモックアップをスライスする |
スライスの名前や保存形式などの設定をする
名前や保存形式の設定をして書き出す
スライスの切り方の方向性が決まったら、スライスの名前や保存形式などの設定を行う。Photoshopのスライス選択ツールで、それぞれのスライスをダブルクリックすると、［スライスオプション］ダイアログが現れる【5】。スライスの種類や名前や大きさなどが設定できる。また、それぞれのスライスを選択したうえで、ファイルメニュー→“Web用に保存”を選択すると、「Web用に保存」が現れる【6】。JPEGやGIFなどの保存形式や画質などを設定できる。それぞれの特性に合わせて設定してから、「完了」を選択しよう。
具体的な設定としては、ヘッダーエリア、メニューエリア、コンテンツエリアでは、単色の文字・イラストであるので、保存形式をGIFにする。プロモーションエリアでは、フルカラーのイメージ写真であるので、保存形式をJPEGに設定する。ドロップシャドウ用の画像は、影の部分がグラデーションになっているので、保存形式を「JPEG」にする。スライスで書き出さないエリアは、スライスオプション→“スライスの種類”→“画像なし”に設定するとよい。それから、ファイル→“Web用に保存”を選択し、スライスを書き出そう。コンテンツエリアでは、イラストとボタンのスライスが重なっているが、書き出すときに順番を入れ替える。イラストを書き出すときには、テキストとボタンを非表示にしよう。背景にするドロップシャドウ用の画像についても、書き出し時には、中のコンテンツを非表示にする。
【5】それぞれのスライスをダブルクリックすると［スライスオプション］画面が現れ、スライスの種類や名前などが設定できる
【6】ファイルメニュー→“Web用に保存”を選択すると、JPEGやGIFなどの保存形式や画質などを設定できる。それぞれの特性に合わせた設定にしよう
［INDEX］
>>> スライスをする前にWebサイトをイメージする
>>> スライスの切り方・設定を工夫してから書き出す
>>> スライスの名前や保存形式などの設定をする
>>> タイトルやボタン画像など細かい素材をスライスする
>>> ディレクトリ構成を考えて下準備をする
>>> 文書構造重視のマークアップを考える
>>> スタイルの付与・常套テクニックを使う
