今天的文章略技術(shù)向，之前搗鼓了點(diǎn)東西，要適配6和Plus，自己做切圖才發(fā)現(xiàn)確實(shí)有夠煩。基于矢量圖生成PNG圖形的方法也是事后才知道，學(xué)習(xí)下，有同樣需求的設(shè)計(jì)師，你的神器到咯！

靜電的Xcode教程合集：

1. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（1）》
2. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（2）》
3. 《零代碼搞定交互動(dòng)畫！為設(shè)計(jì)師量身打造的XCODE教程（3）》

iOS應(yīng)用的視覺形式通常是以圖形元素驅(qū)動(dòng)的。在設(shè)計(jì)開發(fā)一款應(yīng)用時(shí)，你需要不同規(guī)格的應(yīng)用圖標(biāo)，例如不同尺寸的Default.png圖片，同時(shí)還需要為UI的實(shí)現(xiàn)準(zhǔn)備@1x和@2x圖形資源。所有這些圖形元素都會(huì)讓你的產(chǎn)品看上去更吸引人，但弊端也是很明顯的——你需要為每種規(guī)格的圖形元素單獨(dú)切圖。而隨著iPhone 6及Plus的發(fā)布，我們又多了一套@3x需要處理，事情變得越來(lái)越復(fù)雜。

幸運(yùn)的是，蘋果在Xcode 6當(dāng)中給我們帶來(lái)了一些很棒的工具用以管理圖形資源。更棒的是，新的工具和實(shí)現(xiàn)方式可以幫我們從容的應(yīng)對(duì)未來(lái)的iOS設(shè)備，例如基于Storyboard為iOS 8設(shè)備生成啟動(dòng)圖片，這樣你就無(wú)需再為不同的設(shè)備類型單獨(dú)制作。此外還有一個(gè)非常重要的新功能，就是在應(yīng)用構(gòu)建階段基于PDF圖片文件自動(dòng)生成各種規(guī)格的圖形資源。本文中，我們就來(lái)一起探索一下這種能幫你節(jié)省大量時(shí)間成本的方法。

一、使用Illustrator生成PDF矢量圖形

首先，我們需要PDF格式的矢量圖形。你可以使用Adobe Illustrator或你所熟悉的其他矢量圖形工具來(lái)生成；@1x規(guī)格的即可。

如果你使用Illustrator：

1. 為即將導(dǎo)出的圖形元素創(chuàng)建新文檔，使用@1x規(guī)格來(lái)設(shè)置文檔的尺寸。
2. 將需要導(dǎo)出的圖形元素復(fù)制到新文檔當(dāng)中。
3. 在“File”菜單中選擇“Save”。
4. 在保存時(shí)記得取消勾選“Preserve Illustrator Editing Capabilities”。

由此導(dǎo)出的PDF是可拉伸的矢量圖形，可以在iOS中被完美的處理為@2x和@3x規(guī)格。下一步，我們看看怎樣在Xcode當(dāng)中進(jìn)行設(shè)置。

二、在Xcode項(xiàng)目文件中進(jìn)行設(shè)置

要使用矢量化的圖形資源，你需要在Xcode當(dāng)中通過(guò)Asset Catalog來(lái)管理圖片。不用擔(dān)心，你仍可以將標(biāo)準(zhǔn)的圖形導(dǎo)入方式與XCAssets混合起來(lái)使用，不會(huì)產(chǎn)生問(wèn)題。執(zhí)行以下步驟：

1. 如果還沒有XCAsset文件，那么創(chuàng)建一個(gè)。如果已經(jīng)創(chuàng)建過(guò)，就在項(xiàng)目中打開。
2. 在“Editor”菜單中選擇“New Image Set”。
3. 在新創(chuàng)建的圖片集中，選擇空的圖片集，然后打開Utilities面板。
4. 選擇屬性檢查器Attributes Inspector。
5. 在類型下拉列表中，選擇“Vectors”。
6. 圖片集會(huì)變?yōu)橹挥幸粋€(gè)拖放點(diǎn)的“All - Universal”。
7. 將你的PDF矢量圖形拖放到圖片集當(dāng)中。

接下來(lái)，你可以像以往一樣使用Image Catalog中的圖形資源，通過(guò)代碼或Interface Builder均可。例如在代碼中使用“imageNamed:”+圖片集名稱的字符串。

三、見證神奇時(shí)刻

Xcode在構(gòu)建項(xiàng)目時(shí)會(huì)基于Asset Catalog中的PDF矢量圖形自動(dòng)創(chuàng)建@1x、@2x和@3x三種規(guī)格的PNG文件。舉例說(shuō)，你為Xcode提供了一個(gè)@1x規(guī)格的，尺寸為150px*150px的PDF文件，那么Xcode會(huì)自動(dòng)創(chuàng)建下列PNG圖形：

• @1x規(guī)格，尺寸為150px*150px
• @2x規(guī)格，尺寸為300px*300px
• @3x規(guī)格，尺寸為450px*450px

應(yīng)用運(yùn)行時(shí)，iOS會(huì)根據(jù)不同的設(shè)備類型從上面三種圖形資源中挑選出恰當(dāng)?shù)囊?guī)格進(jìn)行輸出。另外記得為AutoLayout設(shè)置好約束，確保圖形不會(huì)在大尺寸設(shè)備上被拉伸。Xcode所做的是基于PDF矢量圖形創(chuàng)建PNG文件；應(yīng)用運(yùn)行時(shí)所輸出的仍然是柵格化的圖片，而非可以自動(dòng)伸縮的矢量圖形。

注意

• 矢量圖形的支持只是階段性的 - 在構(gòu)建階段，Xcode會(huì)基于PDF生成PNG圖片并輸出到界面當(dāng)中。
• 一旦完成矢量圖形的設(shè)置，你就無(wú)法為其指定新的輸出尺寸了。如果需要更大的規(guī)格，則需要?jiǎng)?chuàng)建新的PDF圖形，否則在使用AutoLayout時(shí)原來(lái)的圖片會(huì)失真。
• 正如前面所說(shuō)的，iOS 8只能支持基于PDF生成的PNG文件；但OS X卻可以真正完整的支持矢量圖形，你可以直接通過(guò)Auto Layout或代碼來(lái)縮放矢量圖形，不會(huì)產(chǎn)生任何失真。
• 這種方式無(wú)法兼容iOS 7之前的系統(tǒng)，因?yàn)橄嚓P(guān)的圖形資源都是通過(guò)Asset Catalog管理的。
• 如果你已經(jīng)使用了類似的腳本或工具來(lái)自動(dòng)生成多種規(guī)格的圖形資源，那么這種方式不會(huì)給你帶來(lái)太多用處。不過(guò)，如果你的應(yīng)用同時(shí)擁有OS X和iOS兩種版本，并且會(huì)用到一些相同的圖形，那么這種方法將會(huì)是事半功倍的。

專為畢業(yè)生量身打造的三篇好文！幫你迅速找到好工作！

大咖前輩現(xiàn)身說(shuō)法！親歷者經(jīng)驗(yàn)！
《畢業(yè)生必看！剛?cè)胄械脑O(shè)計(jì)師如何敲開大公司的門》

有了這個(gè)，就不怕遇到黑心老板啦！
《找工作必備！教你一眼識(shí)穿招聘公司有木有坑》

朋友擠破頭來(lái)讓你幫個(gè)忙？看看這篇！
《人情練達(dá)即文章：如何拒絕朋友免費(fèi)做設(shè)計(jì)的要求？》

原文地址：martiancraft
譯文地址：beforweb

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量88萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege