スライス01 スライスの作成

Photoshopでデザインした画像は、そのままでは使用することができません。
パーツごとに切り分けて、jpgやgif形式で保存する必要があります。
パーツごとに切り分けることをスライスといいます。

スライスする場所

スライスをする必要があるのは、画像で表現したい場所だけです。
HTMLとCSSで表現できる部分はスライスする必要はありません。
00スライスする場所

スライスのやり方

スライスツールを選択します。
01ツール選択

図のように斜めにドラッグして、ヘッダー部分をスライスします。
グリッドに合うように正確にスライスしましょう。
02ドラッグ

スライスをすると、スライスの枠と番号が表示されます。
今回はヘッダー部分をスライスしましたが、
それ以外の部分も自動的にスライスができます。
実際に使用するのは自分でスライスした部分だけです。
03スライス

スライスがずれてしまった場合、スライス枠をドラッグすればサイズの調節ができます。また、スライスの内部でドラッグをすれば移動ができます。

スライス直後はそのスライスが選択されているので、ツールを切り替えずに移動やコピー、リサイズができますが、他のスライスを操作をしたい場合は「スライス選択ツール」を使用してください。
07スライス選択ツール

ヘッダー部分を正確にスライスできたらスライスをダブルクリックして
スライスオプションを表示し「名前」「header」にします。
「名前」は各スライスを保存するときのファイル名に使用されるので
日本語や全角英数字は使用せずに、半角英数字で入力してください。

参考:画像のファイル名や、CSSのクラス名などをつけるときに注意すること

04スライスオプション

残りのパーツもすべてスライスしましょう。
図のようにスライスして名前を設定してください。
05スライス設定

ナビゲーションボタンは、1つだけスライスしたらAlt+ドラッグでコピーします。
06スライスコピー

ひと通りスライスが設定できたら、

ファイル→保存

で上書き保存をしてスライスの設定を保存しておきましょう。

スライス02 画像の書き出しに続きます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です