LoginSignup
4
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-04-23

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

WEB用の初期設定

単位をpxに変更

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

グリッドもpx単位に変更

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

選択

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

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

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

スライス関連

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

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

画像名をつける

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

書き出し

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

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

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

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5