スライスの名前や保存形式などの設定をする | デザインってオモシロイ -MdN Design Interactive-


完成したモックアップをスライスする

スライスの名前や保存形式などの設定をする

名前や保存形式の設定をして書き出す


スライスの切り方の方向性が決まったら、スライスの名前や保存形式などの設定を行う。Photoshopのスライス選択ツールで、それぞれのスライスをダブルクリックすると、[スライスオプション]ダイアログが現れる【5】。スライスの種類や名前や大きさなどが設定できる。また、それぞれのスライスを選択したうえで、ファイルメニュー→“Web用に保存”を選択すると、「Web用に保存」が現れる【6】。JPEGやGIFなどの保存形式や画質などを設定できる。それぞれの特性に合わせて設定してから、「完了」を選択しよう。

具体的な設定としては、ヘッダーエリア、メニューエリア、コンテンツエリアでは、単色の文字・イラストであるので、保存形式をGIFにする。プロモーションエリアでは、フルカラーのイメージ写真であるので、保存形式をJPEGに設定する。ドロップシャドウ用の画像は、影の部分がグラデーションになっているので、保存形式を「JPEG」にする。スライスで書き出さないエリアは、スライスオプション→“スライスの種類”→“画像なし”に設定するとよい。それから、ファイル→“Web用に保存”を選択し、スライスを書き出そう。コンテンツエリアでは、イラストとボタンのスライスが重なっているが、書き出すときに順番を入れ替える。イラストを書き出すときには、テキストとボタンを非表示にしよう。背景にするドロップシャドウ用の画像についても、書き出し時には、中のコンテンツを非表示にする。



【5】それぞれのスライスをダブルクリックすると[スライスオプション]画面が現れ、スライスの種類や名前などが設定できる



【6】ファイルメニュー→“Web用に保存”を選択すると、JPEGやGIFなどの保存形式や画質などを設定できる。それぞれの特性に合わせた設定にしよう
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

2.11-2.17