寫給前端小白的切圖技巧（實用）
我一開始是不會切圖的，面試的時候心裡也沒有底氣，但是之前也知道一點切圖的知識，只是沒有那種瘋狂的天天做切圖，所以一直也不敢說自己會熟練的切圖，經過近一個月的切圖經歷之後，今天來分享一下純純的小白切圖基礎。
切圖工具Photoshop
安裝好PS之後，先要調整工作區域的佈局。
1.選擇“視窗”——把“資訊”，“屬性”,”字元”，“段落”，“圖層”，“歷史記錄”面板開啟，其他的可以先關閉了，在切圖的工作中其他的基本用不到。如下圖所示：
2.調整好面板之後，選擇“視窗”——“工作區”——“新建工作區”，將當前的工作佈局儲存起來，並命個名，之後下次開啟的時候就會直接出現你調整好的工作佈局，而不會重置。就算有別人弄亂了你的面板也可以直接通過“視窗”——“工作區”——選擇你之前儲存的工作佈局。
文字
1.各方面字型顏色一定要通過PSD檔案選中圖層來確定，不能直接在圖片上選取顏色。可以通過文字工具選中然後看資訊板上的資訊。或者直接雙擊文字圖層前面的圖示“T”，便能將文字全部選中，可以檢視文字基本資訊及複製貼上文字內容。
2.字型的加粗，要看三方面，看字元加粗，字型大小，字間距。渾厚要加粗，銳利不需要，字型大小一定要看清楚。
圖片
1.切圖一定要拉參考線，計算精確的畫素大小（現在發現一個快速測量的辦法，因為設計師一般也是以整數為主，所以用矩形選框工具一拉，就能看到大小，誤差幾個畫素一本都能猜到）
2.小圖示，如果有蒙版可以新建圖層合併來處理，建立sprit圖，可以拉好參考線，自己清楚畫素大小，不要有白邊。
3.儲存圖片時，PNG用24，JPG用品質非常高（80）。
4.檔案中只有一個圖層，（需要先複製圖層新建檔案）單獨圖層選擇裁切就可以按圖層實際大小來儲存，主要在有陰影效果的圖層實用。
5.上面的情況也可以先將圖層轉化為智慧物件然後選擇整個圖層，用選框工具選中圖層，再新建檔案（ctrl+n），這時可以看到新建的檔案的大小是按該圖層的實際大小的新建的，最後ctrl+v就可以將圖層複製到新檔案中，儲存即可。
6.如何知道矩形圓角半徑（選中圖層–選擇圓角矩形工具–在工作區上方會有顯示半徑及具體的矩形大小，不用去猜了，不過經過實踐，發現上面顯示的半徑會太大，不如猜的一般5px更符合實際大小）
快捷鍵
1.選中圖層用ctrl+滑鼠左鍵，快捷鍵（文字T，移動V,吸管I，矩形選框M，），按住h，同時移動滑鼠可以快速選擇相應區域並區域性放大。
2.ctrl+ +放大 -縮小
3.ctrl+r出現標尺
4.ctrl+h隱藏所有的參考線
5.v滑鼠移動工具，h,滑鼠移動檔案，t文字工具，i吸管工具
其他
1.自動化切圖，檔案–指令碼–圖層儲存為檔案（這個時候要注意之前的儲存為web格式檔案時是儲存了所有切片，而不是僅使用者切片，不然會導致一直搜尋過濾圖層，半天沒反應，而且一直譚警告窗，要一直點）
一般網站檔案目錄
PSD切圖（專案檔案目錄）
project：
-admin(後臺)
-static（所有資源）
-css（所有子檔案都可以分子資料夾，方便管理，層級不建議太多）common.css/reset.css/yemian.css
-images（可以按頁面主題來）
-js(預定義的，引入的，common.js)
-font
-pulgs
-前臺頁面
-其他單獨檔案