下面就用一張很簡單的圖片來當例子。

標尺和對齊：
1.    標尺，這個就是標尺了，作用不用說了吧。。。

調出菜單在視圖，把標尺前面的對鉤打上就OK了。

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

關于圖片的拖拽和縮放問題：
這是兩個縮放常用的快捷鍵：

那說到這兩個選項就不得不說photoshop左下角這個地方了。

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

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

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

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

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

如果只是要清除某一條參考線，按住Ctrl鍵（調用移動工具），把鼠標移動到參考線上，按住拖動回標尺就行了。

關于圖層：
一般打開非psd格式的圖片都只有一個背景層：

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

點確定就可以。

一般不建議直接在背景層上編輯，因為會對原始素材造成毀壞。所以可以通過復制圖層來解決：

鼠標將背景層按住不放拖動到新建圖層按鈕

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

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

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

圖層有個不透明度選項，這個選項可以用來驗證我們做出來的頁面和原稿的吻合度。

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

關于選框工具（測量、摳圖）：
前端切圖中會不斷用到這個工具：

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

比如我們要測量一個div的高度

選好之后按F8可以調出信息框

這樣就能知道高度了。

選框工具在前端切圖中還可以用來摳圖（因為前端摳圖很簡單，很少有那種特別難摳的圖）：

比如我們要摳出這個郵箱icon

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

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

選好之后

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

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

關于圖片保存的問題：

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

吸管工具、裁切等等就不一一細說了。

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

      Alt+滾輪：縮放圖片

     空格+鼠標：拖動圖片

     Ctrl+N：新建文件

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

     Ctrl+鼠標：調動移動工具

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

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

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

最新評論