設計師想節省時間作圖？PS智能對象功能了解一下……

達內UI設計，中國UID課程標準制定者

關於教程

對應著 Mac OS 上 Sketch 的 Symbol（符號）功能， Photoshop 雖然有智能對象這一功能，不過我見過不少設計師更願意吐槽它為「智障對象」。因為在 UI 設計工作流中，Sketch 的Override 簡直是拯救時間的利器。一個按鈕樣式，轉換為 Symbol 後，更改文案只是修改一下輸入框內容的事情。

本文旨在通過變通的方法，讓 Photoshop 也可以有著接近 Sketch 的 Symbol 的設計實現能力。

先來展示一個應用效果：

GIF

是不是覺得有點意思？請你接著往下看。

關於智能對象

假設此時你需要繪製的網頁中有幾個複選框。那麼實現圖中效果的 PSD 設計稿中，需要幾個智能對象？

你可能會成竹在胸地說，兩個。一個選中的，一個未選中的。其實只需要 1 個部有著 2 個圖層複合狀態的智能對象。這篇教程，就是為了解決這個問題來的。

製作智能對象

1.繪製複選框，並通過右鍵對應圖層或自定義快捷鍵轉換為智能對象。

2.接下來雙擊圖層列表中智能對象的縮略圖，或者通過屬性面板編輯智能對象，進入智能對象的編輯畫布。

3.繪製複選框的中間勾選符號、複選框未勾選狀態與已勾選 3 個狀態。

建立不同的圖層複合狀態

1.通過 窗口 – 圖層複合 的菜單，讓圖層複合這一選項卡可見：

2.這一步是重中之重。這個時候把 3 個圖層的可見性，按照需求處理。然後，點擊圖層複合面板中的新建圖標（和新建圖層外形一樣的圖標）。

圖中的「應用於圖層」分別有 可見性、位置與外觀（圖層樣式） 選項，選擇自己需要的，便可以實現不同狀態切換。編輯名稱，如「未選中」（讓設計稿更規範）。然後點擊確定。同理，再使未選中狀態的圖層不可見，選中狀態的圖層可見，新建圖層複合「選中」。

3.快捷鍵 Ctrl + S 或者通過 文件 – 存儲 保存智能對象，回到網頁界面中。

4.此時選中這個複選框智能對象，你會發現在屬性面板中這裡已經可以選擇不同的狀態。

GIF

大功告成

最後一步，就是 Ctrl + J 複製並排列這個智能對象，然後按需選擇圖層複合狀態：

推此及彼，舉一反三，相信這是許多設計師已經具備的能力。所以大家定然已經可以看出，教程中提到例子可以應用於不少場景。歡迎大家集思廣益，把自己的見解發表在文章下方。

結語

本期教程到這裡就結束了，希望大家在練習過程中多思考、理解製作思路和操作方法，活學活用。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！