10個你可能不知道的前端PS技巧

PS是各位前端開發者的基礎技能，高效利用PS不僅能提高工作效率，更能帶來身心上的愉悅——Jack Ma

在前端切圖工作裡，本質來說就是“選擇圖層-獲取資訊、編輯圖層-匯出圖層”的過程，本文主要介紹在這個過程裡的一些技巧。

1、皮膚

這裡的皮膚指的是在頂部主選單“視窗”下可開啟的視窗。最常用的幾個視窗必屬“屬性”、“資訊”、“圖層”，螢幕夠大的同學建議把它們都展開在介面右邊。那為什麼說這幾個皮膚很常用呢？下面會慢慢介紹到。

2、選擇圖層

在移動工具(V)下這個操作非常常用：option+右鍵/command+左鍵(windows:alt+右鍵)，在psd裡快速選定圖層，點哪選哪。不需要勾選“自動選擇”圖層選項也能快速選擇圖層。

而筆者比較喜歡用“option+右鍵”而不是“command+左鍵”，因為這個操作經常需要結合檢視縮放(option+滾輪，windows:alt+滾輪)，這樣來回切換會更方便。

3、屬性皮膚

結合快速選擇圖層，屬性皮膚可以展示不少圖層資訊，而這些資訊在開發中非常有用：

• 可檢視文字的字型大小和顏色等
• 可檢視形狀工具(U)畫出的形狀的填充色和圓角等資訊
• 可檢視智慧物件的寬高

可以看出屬性皮膚主要展示的是PS比較“原生”的物件的資訊。

4、資訊皮膚

“資訊皮膚”和“屬性皮膚”類似，只不過前者展現的資訊和後者不太一樣。

比如，快速選中圖層後，如果在“屬性皮膚”不能看到圖層的寬高資訊，可以command+T(windows:ctrl+T)開啟變形操作，在“資訊”皮膚一定可以看到圖層的寬高資訊，看完後記得按esc順手退出變形工具以免不小心誤操作。

媽媽再也不用擔心我矩形選框工具(M)取大概估算元素的寬高值啦……

5、吸管工具(I)

這個工具最基本的功能是吸取圖層顏色，這裡有幾個技巧可以說一下：

• 左鍵點選吸取，顏色會實時展示在“資訊皮膚上”；
• 設計稿經常會看到一些不太明顯的漸變色背景色的模組，怎麼才能快速知道這是屬於漸變色還是純色的塊？按住左鍵拖動吸管，顏色資訊展示在“資訊皮膚”上，通過觀察即可知道到底要用background-color還是linear-gradient；
• 右鍵需要獲取的顏色點，然後會出現選單，最後一項是“拷貝顏色的十六進位制程式碼”，這裡可以快速拷貝色值供css程式碼用；
• 如果圖層有不透明度，請記得先把不透明度恢復到100%才可以吸取，否則色值會不正確，右鍵拷貝的色值也會不對；
• 按住shift鍵然後吸取，這樣會吸取多個色值，並且依次記錄在“資訊皮膚”上，這個用於對比色值很有用，在圖上相應位置也會標識出順序，如下圖：

6、獲取margin的另一種方式

在移動工具下(V)，選中圖層後，長按command(windows:長按ctrl)鍵，然後移動滑鼠，此時滑鼠停留處的圖層會出現與選中圖層之間的一些紫色標註的一些距離資訊，這個用於獲取margin比較有用。

7、複製css

在圖層皮膚，右鍵圖層，有個“複製css”選項。這個功能在PS裡很早就加進來了，可能很多同學都覺得挺雞肋的，覺得這是給設計師學習css用的。但是其實裡面的有一些資訊還是挺有用的，可減少一些工作量，比如下面一段css：

我們可以用到裡面的圓角、背景色、透明度、陰影、寬高、漸變資訊，不過說實話程式碼寫法真的挺醜的，比如漸變那個，要進行一些人工的干預處理。不過總歸可以少輸入一點程式碼減少工作量，有些資訊也不用麻煩各種手段去取、去猜……

一般來說只是形狀工具(U)畫出來的形狀才會有比較有用的資訊，如果是圖片類的圖層拷貝出來的資訊一般只有寬高資訊可以用。

8、複製圖層到新檔案編輯

經常會遇到一些設計稿特別大、而我們又不得不進行一些編輯的情況，很容易會出現下面的情況：

所以，從現在起你就應該這樣做：

1. 選中圖層(組)
2. 圖層皮膚右鍵圖層，選擇“複製圖層”
3. 在彈出的皮膚的文件單選框裡選擇“新建”，如下圖

接下來就可以看到在新檔案裡放置了該圖層，然後就可以放心的進行“裁剪、變形、合併圖層”等操作了……真的一點都不卡。

9、資源生成器

這個功能在最新的幾個版本PS裡都得到支援，用於切圖非常方便。具體操作方法：

1. 首先開啟設定，在“增效工具”下，勾選“啟用生成器”；然後在主選單的“檔案”-“生成”，勾選“影像資源”
2. 在圖層皮膚選擇要匯出的圖層，把檔名改為如“icon.png”帶圖片副檔名的圖層名，然後就完成了資源生成的全部步驟，就這麼簡單。生成的資源在檔案同目錄下、以“-assets”結尾的資料夾裡。

圖層名可以怎麼設定呢？下面列出了一些例子。

圖層名	匯出圖片
logo.png	生成png-32，含透明通道
logo.png8	生成png-8
logo.png24	生成png-24，不含透明通道
img/logo.png24	資源儲存在img下
logo.jpg	質量90%
logo.jpg8	質量80%
logo.jpg5、logo.jpg50%	質量50%
50% logo@1x.png	寬高為原圖的50%
50% logo@1x.png + 100% logo@2x.png	用“+”或“,”分割可生成多份資源

圖片格式還可以是gif、svg甚至webp等。可以看出資源生成器非常強大，甚至圖層編輯後也會同步更新到匯出的資源裡。要注意圖層名要唯一，否則資源會被覆蓋。

以上只是一部分配置，有興趣的同學可以參考文後資料看詳細的語法。

10、微調匯出的icon

網頁用rem單位的同學都應該知道，如果png的icon的寬高四周沒有空出1畫素的透明空白，網頁上的icon效果四周很可能會被“吃掉”一點點。所以在icon四周留出1畫素的空白很必要。“資源生成器”不能提供這種設定，但是有以下方法可以做到：

1. 圖層皮膚，選中圖層(可按shift選多個圖層，批量處理相似圖層)，右鍵，選擇“匯出為”
2. 在彈出皮膚可設定畫布大小，寬高可設定比原來的尺寸大2畫素即可，2畫素會分配到上下左右各1畫素。如下圖：

參考資料

資源生成器語法 https://helpx.adobe.com/photoshop/using/generate-assets-layers.html#specify-quality-and-size-parameters