我一開始是不會(huì)切圖的，面試的時(shí)候心里也沒有底氣，但是之前也知道一點(diǎn)切圖的知識(shí)，只是沒有那種瘋狂的天天做切圖，所以一直也不敢說自己會(huì)熟練的切圖，經(jīng)過近一個(gè)月的切圖經(jīng)歷之后，今天來分享一下純純的小白切圖基礎(chǔ)。

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

?

2.調(diào)整好面板之后，選擇“窗口”——“工作區(qū)”——“新建工作區(qū)”，將當(dāng)前的工作布局保存起來，并命個(gè)名，之后下次打開的時(shí)候就會(huì)直接出現(xiàn)你調(diào)整好的工作布局，而不會(huì)重置。就算有別人弄亂了你的面板也可以直接通過“窗口”——“工作區(qū)”——選擇你之前保存的工作布局。

文字?
1.各方面字體顏色一定要通過PSD文件選中圖層來確定，不能直接在圖片上選取顏色。可以通過文字工具選中然后看信息板上的信息。或者直接雙擊文字圖層前面的圖標(biāo)“T”，便能將文字全部選中，可以查看文字基本信息及復(fù)制粘貼文本內(nèi)容。?
?

?

2.字體的加粗，要看三方面，看字符加粗，字體大小，字間距。渾厚要加粗，銳利不需要，字體大小一定要看清楚。

圖片?
1.切圖一定要拉參考線，計(jì)算精確的像素大小（現(xiàn)在發(fā)現(xiàn)一個(gè)快速測量的辦法，因?yàn)樵O(shè)計(jì)師一般也是以整數(shù)為主，所以用矩形選框工具一拉，就能看到大小，誤差幾個(gè)像素一本都能猜到）?
2.小圖標(biāo)，如果有蒙版可以新建圖層合并來處理，創(chuàng)建sprit圖，可以拉好參考線，自己清楚像素大小，不要有白邊。?
3.保存圖片時(shí)，PNG用24，JPG用品質(zhì)非常高（80）。?
4.文件中只有一個(gè)圖層，（需要先復(fù)制圖層新建文件）單獨(dú)圖層選擇裁切就可以按圖層實(shí)際大小來保存，主要在有陰影效果的圖層實(shí)用。?
5.上面的情況也可以先將圖層轉(zhuǎn)化為智能對(duì)象然后選擇整個(gè)圖層，用選框工具選中圖層，再新建文件（ctrl+n），這時(shí)可以看到新建的文件的大小是按該圖層的實(shí)際大小的新建的，最后ctrl+v就可以將圖層復(fù)制到新文件中，保存即可。?
6.如何知道矩形圓角半徑（選中圖層–選擇圓角矩形工具–在工作區(qū)上方會(huì)有顯示半徑及具體的矩形大小，不用去猜了，不過經(jīng)過實(shí)踐，發(fā)現(xiàn)上面顯示的半徑會(huì)太大，不如猜的一般5px更符合實(shí)際大小）

快捷鍵?
1.選中圖層用ctrl+鼠標(biāo)左鍵，快捷鍵（文字T，移動(dòng)V,吸管I，矩形選框M，），按住h，同時(shí)移動(dòng)鼠標(biāo)可以快速選擇相應(yīng)區(qū)域并局部放大。?
2.ctrl+ +放大 -縮小?
3.ctrl+r出現(xiàn)標(biāo)尺?
4.ctrl+h隱藏所有的參考線?
5.v鼠標(biāo)移動(dòng)工具，h,鼠標(biāo)移動(dòng)文件，t文字工具，i吸管工具

其他?
1.自動(dòng)化切圖，文件–腳本–圖層保存為文件（這個(gè)時(shí)候要注意之前的保存為web格式文件時(shí)是保存了所有切片，而不是僅用戶切片，不然會(huì)導(dǎo)致一直搜索過濾圖層，半天沒反應(yīng)，而且一直譚警告窗，要一直點(diǎn)）

一般網(wǎng)站文件目錄?
PSD切圖（項(xiàng)目文件目錄）?
project：?
-admin(后臺(tái))?
-static（所有資源）?
-css（所有子文件都可以分子文件夾，方便管理，層級(jí)不建議太多）common.css/reset.css/yemian.css?
-images（可以按頁面主題來）?
-js(預(yù)定義的，引入的，common.js)?
-font?
-pulgs?
-前臺(tái)頁面?
-其他單獨(dú)文件

學(xué)習(xí)web前端（系統(tǒng)課程，項(xiàng)目實(shí)戰(zhàn)，就業(yè)指導(dǎo)，快速就業(yè)）到知海匠庫http://www.zhihaijiangku.com

轉(zhuǎn)載于:https://www.cnblogs.com/zhilelele/p/8493528.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。