前言：當設計師通過photoshop工具設計完設計稿導出psd文件時，我們前端工程師該如何進行切圖轉換成網頁的所需的圖片呢，接下來講講如何利用photoshop工具快速簡潔的切圖，因為ps工具用到的行業很多，涉及到的各個行業，所以有一些快捷的面板可以隱藏掉。前端工程師只顯示適合面板和元素就可以了。
目標：自己能夠使用photoshop從設計師提供的psd中獲取網頁前端開發過程中所需要的資源
一：首先：先了解大致了解一下，當前流行的設計稿尺寸以及工具，如下對應表
渠道UI 設計工具 基礎尺寸
app（安卓） sketch 720px
微信，IOS sketch,ps 640px
pc ps 1920px,1600px.，1024px..
基於Photoshop設計，會輸出psd文件，用ps進行切圖 。
二：ps切圖原則
前端網頁切圖應用尺寸單位一般px像素，RGB的顏色模式,屏幕顯示一般是RGB
三：ps合適的預設
- 文件-新建--：初始化預設設置1920x2000，72分辨率，8位色圖，背景透明色 然后保存起來。后續可以選擇新建模版
- 視圖/顯示/智能參考線以及視圖/字符，這兩個都要選上；
- 編輯/首選項/單位與標尺【標尺：像素；文字：像素，其他默認不用改動】
-
ps界面中有菜單欄、屬性欄、工具欄、面板、工作區：
-
面板選擇：圖層、歷史記錄、信息、字符. 這四個，點擊信息面板那一個小三角，打開面板選項/標尺單位：像素；兩個像素模式：RGB顏色；文檔尺寸選上，然后確定信息面板：坐標改為像素，顏色改為RGB。比如面板顯示信息，當我們點擊該圖片時，對應的信息高寬等都可以直接顯示。很方便
-
加上輔助智能參考線標尺等；首選項設置為像素
四：前端切圖快捷工具
1:ctrl +； 隱藏參考線 顯示參考線
2:導出切片：alt+shift+ctrl+s（文件-存儲為web所用格式）
3:移動工具，任何時候按v，就可以回到移動工具
4:移動工具快捷鍵（v）
5:選框工具快捷鍵（m）
五：推薦的壓縮圖片網站 png 圖片推薦用tinypng壓縮，超級無損。
😄，結束。thx.若有不懂可以聯系本文作者我啦。