UI設計大咖分享Photoshop CC 生成器切片全攻略

很多同學使用的都是學院默認版本CS6進行練習，雖然老師們在課堂上都會強調PS的版本再高，但使用得最多最實用的功能仍然是那幾個，事實也確實如此。但對於切片功能，CC版本以後確實發生了重大變化，使得原來的切片輸入工具失去了意義。

以下僅針對需要經常使用Photoshop進行切片的同學，請安裝至少Photoshop CC2014以上版本才能使用生成器。

打開編輯菜單——首選項，在增效工具下勾選啟用生成器，然後關閉軟體重開。

一、單個形狀切片輸出

值得注意的是，生成器並不支持像素對象的輸出，所以首選的是形狀圖層，請同學們注意。

1，首先我創建一個「切圖示範」的文件，保存在指定位置，格式是psd。

2，接下來使用形狀層繪製兩個圖標，比較常見的填充色和描邊色圖標，分別按要求進行命名，然後在圖層名稱的後綴加上. png

3，保存。選擇文件菜單——生成——圖像資源。

4，在保存psd文件的位置會自動生成一個同名assets文件夾，然後在裡面就可以找到剛剛命名為.png的圖標文件，它們被自動切片輸出，怎麼樣？很方便吧？

5，但大家仔細看一下，發現由於圖標鎖定寬高比的關係，變成了39*40。按照設計規範，這顯然是不合格的，圖標尺寸出現奇數，並且不是我們規範中的44*44的尺寸。接下來我們在原來圖標圖層的下方，分別創建兩個44*44的正方形形狀層。

6，分別各自選中上方圖標，按住Ctrl載入選區的方式載入下方正方形選區並添加圖層蒙版。原有的兩個正方形最後可以刪除或隱藏。

7，再次保存刷新，在輸出位置可以看到輸出的png尺寸，變成了規範要求的44*44，同時周圍保持透明邊距。

二、多個形狀疊加切片輸出

第一條是我們在網頁和UI界面中最常用的切片輸出，可以方便切出透明圖標。如果碰到多個形狀層混疊在一起，那我們應該怎麼做呢？

1，多個形狀圖形，需要用編組來統一，如圖所示，將音符的形狀層和圓角形狀層一起放進一個組，對組進行規定的命名png，結果就會顯示為一個圖標。

2，試著加圖層樣式效果：漸變疊加（柔光模式）和投影，一樣可以正確輸出。

三、單個和多個智能對象切片輸出

肯定有學員會說，我們從AI複製過來的對象轉換成了矢量智能對象，可以通過生成器輸出切片嗎？可以，當然可以啦！

1，單個矢量智能對象，和單個形狀層操作方法一樣。

2，編組後的效果，同樣是按照組命名和層命名的方式輸出圖標。

四、按倍率切片輸出

重點！比如在ios設計規範中，需要有@2x和@3x兩套圖標，@2x針對iPhone8的屏幕及以下解析度所使用，@3x針對iPhone8 plus和iPhone X的屏幕解析度所使用。

根據規則演算法，從2x到3x需要放大1.5倍，所以在兩個相同圖標的形狀層上分別按以下規則進行命名：@3x按倍率放大1.5倍的命名150%後需要加空格，@2x不需要加，文件後綴上一定要寫清楚。

最後得到兩枚圖標，其中一枚正常一枚按1.5倍放大，符合規範設計的要求。

總結

無論網頁還是UI界面，輸出切片都是交付開發最終需要很嚴謹完成的工作，尤其是UI，根據不同倍率的手機需要不同倍率的圖標和按鈕，這樣就使得切圖成為細活兒。雖然在MAC平台上有了像Sketch和它的切圖插件，設計師們都會說它怎麼怎麼好，但實際上只要我們把功能運用得當，即使在Windows，不需要插件，我們一樣可以輕鬆輸出切片！

武老師也會在空閑時間多總結一些PS和AI的經驗給大家分享！小夥伴們記得點贊哦~！謝謝！

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