我一開始是不會切圖的，面試的時候心里也沒有底氣，但是之前也知道一點切圖的知識，只是沒有那種瘋狂的天天做切圖，所以一直也不敢說自己會熟練的切圖，經過近一個月的切圖經歷之后，今天來分享一下純純的小白切圖基礎。

切圖工具Photoshop?
安裝好PS之后，先要調整工作區域的布局。?
1.選擇“窗口”——把“信息”，“屬性”,”字符”，“段落”，“圖層”，“歷史記錄”面板打開，其他的可以先關閉了，在切圖的工作中其他的基本用不到。如下圖所示：?
?

?

2.調整好面板之后，選擇“窗口”——“工作區”——“新建工作區”，將當前的工作布局保存起來，并命個名，之后下次打開的時候就會直接出現你調整好的工作布局，而不會重置。就算有別人弄亂了你的面板也可以直接通過“窗口”——“工作區”——選擇你之前保存的工作布局。

文字?
1.各方面字體顏色一定要通過PSD文件選中圖層來確定，不能直接在圖片上選取顏色?？梢酝ㄟ^文字工具選中然后看信息板上的信息?；蛘咧苯与p擊文字圖層前面的圖標“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?
-前臺頁面?
-其他單獨文件

學習web前端（系統課程，項目實戰，就業指導，快速就業）到知海匠庫http://www.zhihaijiangku.com

轉載于:https://www.cnblogs.com/zhilelele/p/8493528.html

總結

以上是生活随笔為你收集整理的实用：前端小白的切图技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。