切圖

切圖

1、 設置默認選項（保存工做區）

1.編輯菜單-首選項-單位與標尺-標尺&文字的單位：像素(px)
2.窗口菜單-打開面板（其它關掉）：圖層、信息、歷史記錄、選項、工具
3.視圖菜單-打開功能：對齊（吸附效果）、標尺、顯示額外內容、顯示-參考線（從標尺拖出）

2、 工具（選項）面板

1.移動：勾選「自動選擇」，下拉列表選擇「圖層」
2.魔棒：容差-越小越精確

3、 設計稿信息

1.尺寸信息：文字大小、行高：

單獨文字圖層：選擇文字工具（工具面板）-選擇文字-查看選項面板（行高需點出右側小文件夾按鈕）
合併背景圖層：矩形框工具手測（不一樣字體有偏差，儘可能選擇稍大的字），行高-第一行字下~第二行字下

2.顏色信息：字體取色與字體尺寸獲取類似（單獨&合併），有疊加效果的不可看字體信息，應用取色器

4、 快捷鍵

1.撤銷多步：ctrl+alt+z
2.縮放：ctrl+1(100%) / alt+滾輪 / ctrl+」-「」+」
3.添加到選區：shift / 從選區減去：alt / 與選區交叉：shift+alt（兩邊各選一點選區相加，可測量兩點之間距離（含））
4.新建：ctrl+n
5.存儲爲WEB格式：alt+shift+ctrl+s（背景內容要選透明）

5、 切圖

1.帶文字的，隱藏文字只留背景（除非文字有特效）

單獨文字圖層：隱藏文字圖層
合併背景圖層：
-可拉伸：矩形選框選一部分背景，按crtl+t自由變換，往右拉隱藏文字，後雙擊。
-不可拉伸（有紋理）：矩形選框選一部分背景，按alt往右逐步蓋住文字。（按shift可保持水平穩定移動）

2.單個圖層：移動工具選擇 / 多個圖層：圖層面板中ctrl選擇，ctrl+e合併
3.切片：拉參考線-切片工具（裁剪下）-選項欄「基於參考線切片」

6、 圖片類型

1.JPG：色彩豐富，無透明效果（品質60~80便可）
2.PNG8：色彩不太豐富，不管有無透明效果？（256色，擴散改成無仿色，無雜邊，可存儲預設）
3.PNG24：半透明效果（陰影），IE6不支持PNG24半透明
4.PSD：爲保證圖片質量、圖層，保留一份PSD，要修圖的在PSD修改後導出

7、 修改與維護

1.修改PNG8圖片時，須設圖像菜單-模式-索引顏色改成RGB顏色（不然顏色值不正確）
2.更改畫布大小：圖像菜單-畫布大小-定位改成左上角（CSS定位屬性可不用更改）

8、 圖片合併

CSS-sprite