デザインデータがPhotoshopで来たとき用のメモ。


たまにPhotoshopデータがきて、その度にあれどうやるんだったけ状態なのでメモ。

WEB用の初期設定

単位をpxに変更

「編集」 → 「環境設定」→「単位」
単位のところを 定規、文字それぞれpxに設定

グリッドもpx単位に変更

「編集」 → 「環境設定」→「ガイド・グリッド・スライス」
グリッド線をpxに変更

選択

選択ツールを選び、
・自由選択にチェック...レイヤー選択しなくても、カンバス上の図形が動かせる
・レイヤーに設定、...レイヤーごとに選択できる
・バウンティングボックスを表示...何が選択されているかわかる

長方形で端っこをぼけないようにする

長方形ツールを選択、上部メニューの▼からピクセルにスナップを選択
(CS6だとエッジを整列)

スライス関連

レイヤーに基づく新規スライス

レイヤーを選択 → Alt + L → B
(メニューだと、「レイヤー」→「レイヤーに基づく新規スライス」を選択)
※CCの場合はショートカットが割り当てられてないので適宜追加

画像名をつける

スライス選択ツールで、書き出したいスライスに対してダブルクリック
連番とかでリネームしたい場合はBridgeとか使うのが妥当かも。

書き出し

Alt + Shift + Ctrl + S
(メニューだと、「ファイル → 「Webおよびデバイス用に保存」)から
書き出したいスライスをShiftを押しながら複数選択し(選択すると線が茶色になる)、
画像形式や画質を決めて保存。

設 定 :初期設定だと勝手にimagesフォルダを作ってそこに保存するので、
設定をその他にして、「画像をフォルダーに保存」のチェックをはずす。

スライス:選択したスライス になっているか確認。