下面就用一張很簡單的圖片來當(dāng)例子。

標(biāo)尺和對(duì)齊：
1.    標(biāo)尺，這個(gè)就是標(biāo)尺了，作用不用說了吧。。。

調(diào)出菜單在視圖，把標(biāo)尺前面的對(duì)鉤打上就OK了。

2.   對(duì)齊，這也是一個(gè)非常好用的選項(xiàng)，比如用選框工具或者拉參考線的時(shí)候只要拖到附近就會(huì)自動(dòng)對(duì)齊，很方便。但是缺點(diǎn)也是有的，就是太“智能”，你選到附近幾個(gè)像素的時(shí)候它就會(huì)自動(dòng)對(duì)齊了。這個(gè)選項(xiàng)的優(yōu)點(diǎn)和缺點(diǎn)需要自己體會(huì)。。。反正以后你因?yàn)?px左右的選取而糾結(jié)的話，想一下這個(gè)選項(xiàng)是不是打上勾了。

關(guān)于圖片的拖拽和縮放問題：
這是兩個(gè)縮放常用的快捷鍵：

那說到這兩個(gè)選項(xiàng)就不得不說photoshop左下角這個(gè)地方了。

這就是當(dāng)前圖片顯示的大小，你可以通過點(diǎn)擊它來輸入任意數(shù)值，雙擊會(huì)自動(dòng)輸入100%，很好用。

其實(shí)對(duì)于拖拽和縮放，最好的方式是Alt+滾輪進(jìn)行縮放，space+鼠標(biāo)左鍵進(jìn)行拖拽，這兩個(gè)操作方式的優(yōu)點(diǎn)是靈活以及對(duì)細(xì)節(jié)把控的到位。（注意如果空格+鼠標(biāo)不能拖動(dòng)圖片的話，說明圖片顯示比屏幕小，直接放大一些就ok。）

關(guān)于參考線：
參考線是前端切圖必須要用到的功能了。

調(diào)用參考線也很方便，將鼠標(biāo)移動(dòng)到標(biāo)尺上按住拖動(dòng)就會(huì)出現(xiàn)一條參考線了。如果將鼠標(biāo)移到左上角標(biāo)尺重合的地方可以拖出兩條（橫豎各一條）參考線。

如果要清除所有參考線，在視圖菜單里就有清除參考線按鈕。

如果只是要清除某一條參考線，按住Ctrl鍵（調(diào)用移動(dòng)工具），把鼠標(biāo)移動(dòng)到參考線上，按住拖動(dòng)回標(biāo)尺就行了。

關(guān)于圖層：
一般打開非psd格式的圖片都只有一個(gè)背景層：

而且后面有一個(gè)小鎖，是不允許編輯的。解除小鎖的方式很簡單，通過雙擊背景層彈出

點(diǎn)確定就可以。

一般不建議直接在背景層上編輯，因?yàn)闀?huì)對(duì)原始素材造成毀壞。所以可以通過復(fù)制圖層來解決：

鼠標(biāo)將背景層按住不放拖動(dòng)到新建圖層按鈕

這樣會(huì)出現(xiàn)一個(gè)背景層副本，可以在副本上編輯。

圖層前面的小眼睛是設(shè)置圖層的可見性的，有關(guān)閉和打開兩種狀態(tài)。

圖層的上下順序是有講究的，上面的圖層會(huì)覆蓋在下面的圖層上，所以如果有兩個(gè)不透明的圖層疊加，會(huì)顯示上面一個(gè)圖層。

圖層有個(gè)不透明度選項(xiàng)，這個(gè)選項(xiàng)可以用來驗(yàn)證我們做出來的頁面和原稿的吻合度。

圖層的內(nèi)容比較復(fù)雜，不是一兩句話能說清楚的，如果小伙伴們遇到了問題，歡迎來和我一起探討。

關(guān)于選框工具（測量、摳圖）：
前端切圖中會(huì)不斷用到這個(gè)工具：

其實(shí)這也是一個(gè)非常簡單的工具，一般我們只用得到第一個(gè)矩形選框工具（測量，摳圖），后面三個(gè)切圖基本用不上。

比如我們要測量一個(gè)div的高度

選好之后按F8可以調(diào)出信息框

這樣就能知道高度了。

選框工具在前端切圖中還可以用來摳圖（因?yàn)榍岸藫笀D很簡單，很少有那種特別難摳的圖）：

比如我們要摳出這個(gè)郵箱icon

我們先Alt+滾輪將圖片放到足夠大（每個(gè)像素塊清晰可見）：

然后用矩形選框工具選取非白色的像素塊。對(duì)于這種不規(guī)則形狀需要用到shift+選：按住shift拖動(dòng)鼠標(biāo)會(huì)將選區(qū)相加。Alt是減選，操作相同。這個(gè)操作沒有技術(shù)含量。。。耐心就行了。。。

選好之后

按Ctrl+C復(fù)制選區(qū)，Ctrl+N新建文件

彈出的框中記住要將北京內(nèi)容設(shè)置為透明。寬高不用設(shè)置，默認(rèn)剪貼板預(yù)設(shè)。然后確定，按Ctrl+V粘貼，即可得到扣下來的圖。

關(guān)于圖片保存的問題：

一般前端中切圖保存都要用到這條命令，記住快捷鍵?？梢员４鏋間if，png等web圖片格式。

吸管工具、裁切等等就不一一細(xì)說了。

最后總結(jié)一下用的特別多的快捷操作：

      Alt+滾輪：縮放圖片

     空格+鼠標(biāo)：拖動(dòng)圖片

     Ctrl+N：新建文件

     Ctrl+Shift+I：選區(qū)反選

     Ctrl+鼠標(biāo)：調(diào)動(dòng)移動(dòng)工具

     Shift（Alt）+鼠標(biāo)：選區(qū)加（減）選

photoshop博大精深，上面列舉的功能知識(shí)滄海一粟，如果有感興趣的小伙伴可以自己學(xué)習(xí)一下，用處太多。。。。

以上就是這篇文章的全部內(nèi)容了。如果有什么問題可以聯(lián)系我，大家一起學(xué)習(xí)進(jìn)步！

最新評(píng)論