寫給前端小白的切圖技巧(實用)

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

切圖工具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
-前臺頁面
-其他單獨檔案