前端必備ps技能----切圖
注意：我使用的是PhotoShop cc2017，因為版本的不同，在操作上會有所不同。
1.針對切圖最適合的PhotoShop介面設定
1.1 新建設定
檔案 ----> 新建
快捷鍵為： control / command + n
我們可以看到已經給我們準備好了需要的預設
我們也可以自己建立，並存儲於預設
1.2 移動工具設定
左側工具欄最上面的一個，快捷鍵為 v
當我們想通過點選psd，然後找到相對應的圖層的時候，需要將左上方的改為圖層，記住自動選擇按鈕不用勾選。
我們按住 control / command，然後點選psd，就會顯示相對應的圖層了。（不用勾選自動選擇按鈕的原因是按住 control / command
1.3 檢視介面設定
1.檢視 -----> 顯示 -----> 智慧參考線 (切圖的時候會有很大的幫助）
2.檢視 -----> 標尺
3.視窗 將相關的開啟和關閉，然後拖動，組成下面的形式
4.單擊 資訊 右邊的更多按鈕，選擇面板選項，改為如下的樣子
5. Photoshop cc / 檔案 —> 首選項 —> 單位與標尺
將單位更改為畫素
6.設定好介面後，通過 control / command + 點選圖層圖示找到對應的psd位置，相關資訊會在資訊欄中顯示
7.視窗 —> 工作區 ----->新建工作區 ---->然後命名，將介面進行儲存，方便下次使用
2. Photoshop的基本操作
我們主要是簡單講解左邊的工具欄，和上面第二行的屬性欄，每一個工具都會對應不同的屬性
2.1 移動工具
工具欄的第一個，有兩種選中方式
control / command+ 點選psd 選中對應的圖層，然後移動control / command+ 點選圖層的小圖示 選中對應的psd，然後移動
我們也可以選中多個圖層， control / command + 點選多個圖層，就可以移動多個圖層了，當我們選中多個圖層的時候，會發現我們可以通過屬性改變對其的方式。（具體的含義，當我們的滑鼠放上去的時候會有提示）。
2.2 選框工具
工具欄第二個
我們可以通過該工具，選擇我們想要的區域。並且有屬性供我們選擇
分別為： 正常選擇， 增加選擇， 減少選擇， 獲取選擇的公共部分。
我們在選擇的時候按住 shift，可以使得被選中的部分為正方形或者正圓形
2.2 套索工具
工具欄第三個
可以選擇不規則的選區
2.3 快速選擇工具
工具欄第4個
可以快速選擇一大片區域
2.4 裁剪和偏切片工具
工具欄第5個
可以裁剪和切片。
裁剪工具：
- 選中區域，然後選中右上方書屬性位置的對號就可以了。
- 先不選中裁剪，選中圖層，
control / command+ 點選圖層的小圖示 選中對應的psd，然後選中裁剪，再按enter鍵和對號鍵進行裁剪 - 在我們裁剪的頁面，通過
control / command+ 點選psd 找到對應的圖層，然後alt+眼鏡圖示，就可以變為只顯示該圖層，其他的圖層隱藏，也就是該圖層的顯影模式
2.5 參考線及其輔助
檢視 —> 新建參考線 ---->選擇橫向和縱向，單位為畫素
也可是使用快捷鍵 control / command + r
從原始位置拉動，就可以了，想取消的話，就重新拉回原來的位置，通過alt鍵可以改變方向
可以選中圖層後在放置參考線，那樣會更加的準
3 切片
3.1 傳統切片
使用參考線，限制大小，後使用切片工具，完成後
檔案 —> 匯出 ----> 儲存為web匯出格式 —>選擇為png24格式
3.2 精準切片
計算機自動計算，會切圖更加的準確
檔案----> 匯出 ----> 將圖層匯出到檔案 ---->格式為png24格式（並將選項都勾選上）
3.3 自動切圖
- Photoshop cc ----> 首選項 ----> 增效工具 ----> 將啟動生成器開啟
- 檔案 ----> 生成 ------> 影象資源
這是我們開啟psd的目錄，會發現有一個新的以assets結尾的資料夾，
- 我們選擇圖層，增加字尾
然後在資料夾中我們可以看到png圖片生成了。
- 我們可以選擇多種字尾
例如：- 200% ***@2x.png (200%後面有空格) ---->生成的圖片為 ***@2x.png ，寬高擴大一倍
- ***.png24 —> ***.png 但是質量是24 的
- ***.jpg —> ***.jpg
- 也可以匯出svg格式
同樣是將圖層的字尾改為 .svg
生成後可能並不是十分的準確，所以我們要去看一眼生成的svg的程式碼，主要看背景的顏色是否需要更能該 - 我麼可以直接選擇圖層，右擊選擇複製css，然後貼程式碼，省去很多的步驟
- 我們可以對psd的所有圖層進行篩選
