PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【Photoshop】 スライスツールで画像をパーツ分割

Photoshopのスライスツールで1枚の画像から、複数の画像パーツに分けます。
例えばWEBページをトレースする際、フレームワークを抽出しつつ、画像パーツも収集する事が可能です。

使い方(例としてLOFTのページを使わせてもらいました。)

  1. 定規ツールを利用して、各パーツをガイドで正確に囲む。
    f:id:game-web-design:20141014174532p:plain
  2. 「表示」メニューから、「スナップ」と「スナップ先」「ガイド」にチェックが入っていることを確認する。
  3. スライスツールでガイドをなぞりながら、選択をする。
  4. スライスを作った後、左上に出てきた数字をダブルクリックでスライスの名前を変更します。後から変更する場合は、スライス選択ツールを使います。
    f:id:game-web-design:20141014174608p:plain
  5. 「ファイル」から、「Webおよびデバイス用に書き出す」を押す。
  6. 上のタブが「最適化」、左のメニューが「スライスツール」と「スライスの表示の切り替え」がONになっていることを確認する。
    f:id:game-web-design:20141014174622p:plain
  7. もし、パーツごとに拡張子やプロパティを変えたい場合は、Shift + クリックでスライスを選択し、拡張子とプロパティを変更する事が出来ます。
  8. 保存を押した後保存する場所を選べますが、このとき上の拡張子やプロパティをスライスごとに変更している場合、保存のプロパティにある「スライス」を「全てのユーザー定義スライス」に変更する。
    f:id:game-web-design:20141014174638p:plain
  9. 「設定」から「その他」を選択すれば、より詳しくファイル名を変更することができます。
    f:id:game-web-design:20141014174705p:plain