UI設(shè)計(jì)大咖分享Photoshop CC 生成器切片全攻略

時(shí)間：2023-09-26 17:12:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-26 17:12:01 來源：網(wǎng)站運(yùn)營

UI設(shè)計(jì)大咖分享Photoshop CC 生成器切片全攻略：很多同學(xué)使用的都是學(xué)院默認(rèn)版本CS6進(jìn)行練習(xí)，雖然老師們?cè)谡n堂上都會(huì)強(qiáng)調(diào)PS的版本再高，但使用得最多最實(shí)用的功能仍然是那幾個(gè)，事實(shí)也確實(shí)如此。但對(duì)于切片功能，CC版本以后確實(shí)發(fā)生了重大變化，使得原來的切片輸入工具失去了意義。

以下僅針對(duì)需要經(jīng)常使用Photoshop進(jìn)行切片的同學(xué)，請(qǐng)安裝至少Photoshop CC2014以上版本才能使用生成器。

打開編輯菜單——首選項(xiàng)，在增效工具下勾選啟用生成器，然后關(guān)閉軟件重開。

一、單個(gè)形狀切片輸出

值得注意的是，生成器并不支持像素對(duì)象的輸出，所以首選的是形狀圖層，請(qǐng)同學(xué)們注意。

1、首先我創(chuàng)建一個(gè)“切圖示范”的文件，保存在指定位置，格式是psd。

2、接下來使用形狀層繪制兩個(gè)圖標(biāo)，比較常見的填充色和描邊色圖標(biāo)，分別按要求進(jìn)行命名，然后在圖層名稱的后綴加上.png。




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




4、在保存psd文件的位置會(huì)自動(dòng)生成一個(gè)同名assets文件夾，然后在里面就可以找到剛剛命名為 .png的圖標(biāo)文件，它們被自動(dòng)切片輸出，怎么樣？很方便吧？




5、但大家仔細(xì)看一下，發(fā)現(xiàn)由于圖標(biāo)鎖定寬高比的關(guān)系，變成了39*40。按照設(shè)計(jì)規(guī)范，這顯然是不合格的，圖標(biāo)尺寸出現(xiàn)奇數(shù)，并且不是我們規(guī)范中的44*44的尺寸。

接下來我們?cè)谠瓉韴D標(biāo)圖層的下方，分別創(chuàng)建兩個(gè)44*44的正方形形狀層。

6、分別各自選中上方圖標(biāo)，按住Ctrl載入選區(qū)的方式載入下方正方形選區(qū)并添加圖層蒙版。原有的兩個(gè)正方形最后可以刪除或隱藏。

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

二、多個(gè)形狀疊加切片輸出

第一條是我們?cè)?b>網(wǎng)頁和UI界面中最常用的切片輸出，可以方便切出透明圖標(biāo)。如果碰到多個(gè)形狀層混疊在一起，那我們應(yīng)該怎么做呢？

1、多個(gè)形狀圖形，需要用編組來統(tǒng)一，如圖所示，將音符的形狀層和圓角形狀層一起放進(jìn)一個(gè)組，對(duì)組進(jìn)行規(guī)定的命名png，結(jié)果就會(huì)顯示為一個(gè)圖標(biāo)。




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




三、單個(gè)和多個(gè)智能對(duì)象切片輸出

肯定有學(xué)員會(huì)說，我們從AI復(fù)制過來的對(duì)象轉(zhuǎn)換成了矢量智能對(duì)象，可以通過生成器輸出切片嗎？可以，當(dāng)然可以啦！

1、單個(gè)矢量智能對(duì)象，和單個(gè)形狀層操作方法一樣。




2、編組后的效果，同樣是按照組命名和層命名的方式輸出圖標(biāo)。




四、按倍率切片輸出

重點(diǎn)！比如在ios設(shè)計(jì)規(guī)范中，需要有@2x和@3x兩套圖標(biāo)，@2x針對(duì)iPhone8的屏幕及以下分辨率所使用，@3x針對(duì)iPhone8 plus和iPhone X的屏幕分辨率所使用。

根據(jù)規(guī)則算法，從2x到3x需要放大1.5倍，所以在兩個(gè)相同圖標(biāo)的形狀層上分別按以下規(guī)則進(jìn)行命名：@3x按倍率放大1.5倍的命名150%后需要加空格，@2x不需要加，文件后綴上一定要寫清楚。

最后得到兩枚圖標(biāo)，其中一枚正常一枚按1.5倍放大，符合規(guī)范設(shè)計(jì)的要求。




無論網(wǎng)頁還是UI界面，輸出切片都是交付開發(fā)最終需要很嚴(yán)謹(jǐn)完成的工作，尤其是UI，根據(jù)不同倍率的手機(jī)需要不同倍率的圖標(biāo)和按鈕，這樣就使得切圖成為細(xì)活兒。雖然在MAC平臺(tái)上有了像Sketch和它的切圖插件，設(shè)計(jì)師們都會(huì)說它怎么怎么好，但實(shí)際上只要我們把功能運(yùn)用得當(dāng)，即使在Windows，不需要插件，我們一樣可以輕松輸出切片！