[Photoshop]カンプからパーツをつくる
Photoshopでつくったカンプから、パーツをつくります。
スライスツールを使用します
見本のようなグリッドデザインでは1pxたりともズレてはいけません。レイアウトが崩れるもとです。
サイズを厳密にするために、Photoshopでパーツをスライスする作業は慎重に行います
① Photoshopを起動しカンプのデータを開く
② レイヤーをロックしてスライスのガイドラインをひきます。
定規(ルーラー)を表示し、パーツのアウトラインに沿ってガイドラインを当てていきます。このときはおおまかで大丈夫。次のステップで微調整します
○ガイドの色は目立つ色がよい 環境設定 > ガイド で変更可能
③ガイドの微調整をします。 画像を800%くらいまで拡大して、パーツのアウトラインにピッタリ沿うようにします。
④全てのガイドの微調整が終わったら、ガイドをロックします
表示 > ガイドをロック
⑤スライスツールスライスしていきます。
実行前に注意点
- 設定 > 表示で確認すること
・「スナップ」にチェックがあること
・「スナップ先」の項目すべてにチェックがついていること
☆ガイドにぴったり沿ってスライスできます - 「ガイドに沿ってスライス」というボタンを押さないこと
余計なところまでスライスしてしまうため
スライスは、パーツの左上から右下の方向にプレスドラッグします
切り取られたパーツには青い線の囲みができます
⑥パーツの名前とサイズの設定
サイズが決まっている場合はここでも調整ができます。またパーツごとに名前も付けられます
グリッドデザインはサイズが命!1pxでもずれないように!
⑥Web用に保存
パーツごとに拡張子を変えて保存できます。
GIFで保存したいパーツをShiftを押しながら選択 → 保存形式をGIFにする → PNGで保存したいパーツをShiftを押しながら選択 → 保存形式をPNG-8にする → 保存ボタンを押す
ここで設定すること2つ
- 「設定」 :ファイルの互換性 ここではWinとMac
最適化ファイル フォルダーに保存(自動的にフォルダーを作ってくれてその中にパーツを保存してくれる)
背景画像にコピーのチェックは外す - 「スライス」:「全てのユーザー定義スライス」を選択
「全てのスライス」にすると、背景画像も入ってしまうので選ばない。
「保存」を押して、フォルダーに全てのパーツが入っているか数えます