業務を効率化するためのポイントやデザインのルールなどをまとめます。
操作
移動は移動ツールで行う（0.000px端数を出さない）
マウスでやりがちですが、要素を移動させるときは移動ツールで移動させましょう。
マウスでやると、要素の位置が0.0?pxでずれてしまうことがあります。
その要素をスライスするとピクセルブレが起きてしまうので、移動ツールで行いましょう。
※数値で指定して行くことに慣れるようにします
左のツールパネルはショートカットキーで覚える
ほとんどがショートカットでできます。
全て覚えるのは難しいかもしれませんが、よく使う移動ツールや長方形ツールなどはショートカットキーで覚えておいたほうが効率的です。
画像
リサイズや切り取りについて
・スクショした画像は端に余白があった場合ちゃんと切り取ること
・画像名も整理してつける
・画像はちゃんと切り取る
・クリッピングマスクを使って画像のリサイズを行う
結構、当たり前のことなのですが、同じサイズで画像をリサイズしなくてはいけないのに
1pxとかずれちゃったりしがちなので、正確にリサイズできるよう心がけます
スライスの手順
たくさんの画像を効率的にスライスする方法です。
【操作方法】
1,スライスというレイヤーを作る
2,正方形・長方形で画像を囲う
3,スライスレイヤーの名前とオプションキーを押して全選択→オブジェクト→レイヤー→作成
4,正方形・長方形は非表示にして書き出していく
これで、一度に画像をスライスできます。
※このスライスの注意点
Q：Retina対応にすべくアードボードのサイズを1000pxに変更して保存する→できない
原因：アードボードの領域が外枠を超えてしまうため、超えない数値までしかサイズを変更できない
解決策：アードボードを一時的に縮める
Q：全部同じサイズでスライスしたのに数枚だけ1pxずれる
原因：様々。例えばバージョンが違うイラレからデータを持ってきたり、アードーボードが整数じゃなかったり
解決策：フォトショップで直す（急ぎの場合や仕事での制作物じゃないときは無視する）、イラレ・スライスを調整する
イラスト系
1,イラストはマスクをかけている可能性が高いのでまずダイレクト選択ツールで画像を広げてみる。
イラストが他にもある場合、サイズが異なっている可能性があるのでそれぞれのサイズでスライスしようと考えられる。
2,縦横の幅について
→widthはテキスト幅（コンテンツ幅）と同じサイズにする（サイトを作るときのことを考えたとき・余白をとるときのことを考える）
→heigthはバラバラだったとしても、上下の余白を統一してスライスする。
ワードプレスの場合imgにもpタグが入る。そのpには余白が付いているのでそれも計算に入れる。
3,できれば4の倍数に最終調整してスライスする
・本来はイラストに近い位置で切り出すがワードプレスなので設計のことをよく考えてスライスする