- 一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。
- フォトショップでスライスをする。
- 「環境設定」でピクセル単位の作業ができる環境にする。
- スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定」→「切り出すサイズを入力」して、作業をすると便利。
- スナップは画面の拡大率によってうまくいかないこともある。必要に応じて拡大してから作業する。
- 1番大きな、なるべく境界線のはっきりした対象に長方形選択ツールを重ねて、それから選択ツールにスナップさせながらガイドを引いていく。
- ガイドが引けたら、ガイドをロックしてファイルを保存しておく。
- コーディングするときのことを念頭に、スライスした各々のパーツにわかりやすくナンバリングしながらスライスする。
- スライス選択ツールのままCtrlキーを押してドラッグすると、スライスデータを作成できます。わざわざスライスツールに持ち替える必要がありません。
- スライスできました。スライスをロックしてファイルを保存します。
- 「ファイル」「web用に保存」
- 切り出す部分をクリックしながら選択する。
- 選択が終わったら、出力ファイル形式を「PNG２４」にする。必ず選択後にする。選択前に選んだ形式はキャンセルされる。
- 「保存」ボタンを押す。
- 保存するフォルダを指定する。
- 「保存時に背景画像をコピー」をオフにする。
- そして、設定項目の中で一番大切なのは「すべてのユーザー定義スライス」を選択すること。
- これで、スライスは終わり。
