切圖教程，pdf格式切圖教程實(shí)例(4)

在ios某個(gè)版本之后（原諒我只是一個(gè)設(shè)計(jì)師并不是很清楚到底是哪個(gè)版本正式開(kāi)始啟用pdf格式載入的），xcode6具有了基于矢量圖像(PDF文件)的編譯能力。

UI設(shè)計(jì)師都會(huì)涉及到的一個(gè)問(wèn)題，切圖。在完成頁(yè)面設(shè)計(jì)之后，需要導(dǎo)出@1x @2x @3x三個(gè)尺寸的png圖像資源。哦呵呵呵呵呵呵，我每天都是帶著計(jì)算器在按。

然而，現(xiàn)在xcode6有了pdf辨識(shí)的功能！直接帶來(lái)的2個(gè)非常直觀的影響。

1，ios切圖從此只要切@1x，然后不論是哪個(gè)尺寸都能完美適配，達(dá)到最佳效果

2，縮減app大小，優(yōu)化用戶下載體驗(yàn)。（因?yàn)榍袌D成pdf并且是@1x的時(shí)候占用空間非常小，并且省去了一整套@2x和@3x的切圖所占用的空間，喔呵呵呵呵呵想到app一下子減少了那么多大小，真是睡覺(jué)都笑出聲呢。）

現(xiàn)在，一步步教大家如何切圖。

一，photoshop，如果是在ps里繪制的矢量圖，請(qǐng)?jiān)趐s里切pdf。

以上圖為例，這是一個(gè)求攻略出品的翻譯軟件，目前處于開(kāi)發(fā)狀態(tài)。這是一個(gè)在ps里用矢量畫(huà)的volume圖標(biāo)。切記，icon務(wù)必要用矢量畫(huà)，切圖pdf格式也僅支持矢量圖形。

選中volume icon選區(qū)，快捷鍵 command+鼠標(biāo)左鍵，然后按照選區(qū)大小新建大小相同的新文件。

這時(shí)候，你會(huì)看到圖中所示。因?yàn)樵谠O(shè)計(jì)ui的時(shí)候是以iphone6為尺寸，也就是750。是@2x的時(shí)候的圖，所以此時(shí)，我們切出來(lái)的圖是@2x的。

還需要注意的一點(diǎn)，當(dāng)從畫(huà)布1將icon 復(fù)制到畫(huà)布2的時(shí)候，要保持icon一直處在矢量狀態(tài)。切勿刪格化！否則大業(yè)未成，前功盡棄！

如上圖所示，這時(shí)候點(diǎn)開(kāi)調(diào)整畫(huà)布，control＋command＋i快捷鍵，將寬高百分比調(diào)整到50%，也就是說(shuō)這時(shí)候你的icon切圖是@1x的狀態(tài)了。

為什么要調(diào)整到@1x的狀態(tài)呢，因?yàn)锧1x的時(shí)候擴(kuò)展成@2x和@3x只要往上乘，而不是往下減。

避免了切圖像素不整除的情況，但是我還是建議大小要取一個(gè)吉利的像素尺寸。

此處晤面。記住，要把背景去掉，因?yàn)槟阈枰氖且粋�(gè)透明的背景。

現(xiàn)在開(kāi)始儲(chǔ)存動(dòng)作，點(diǎn)開(kāi)另存為，找到photoshop pdf格式，勾選“作為副本”

顏色什么的那么基礎(chǔ)的就淡淡的略過(guò)吧。

點(diǎn)擊保存，之后會(huì)彈出來(lái)這么一個(gè)框。

將“保留photoshop”編輯功能勾掉，

只剩下“嵌入頁(yè)面縮覽圖”以及“優(yōu)化快速web預(yù)覽”然后點(diǎn)擊保存

儲(chǔ)存出來(lái)直接是pdf格式，這時(shí)候你打開(kāi)預(yù)覽不論是放多大縮多小都是十分清晰，并且占用空間很小。

這個(gè)volume切出來(lái)只有10kb�。�！是不是為你app太大無(wú)法優(yōu)化的困擾頓時(shí)就在夢(mèng)里笑醒。

二，illustrator，如果是在ai里繪制的矢量圖，請(qǐng)?jiān)赼i里切pdf。

也是按照@1x的大小建立畫(huà)板調(diào)整好大小，并且另存為pdf格式。

勾選“嵌入頁(yè)面縮覽圖”以及“從頂層圖層穿件Acrobat圖層”然后點(diǎn)擊保存。

切記切記，ps和ai的矢量圖要在各自的軟件環(huán)境下切圖。所以比較推薦制作頁(yè)面的時(shí)候繪制icon在一個(gè)環(huán)境下繪畫(huà)。

到這里，設(shè)計(jì)師部分的就結(jié)束了，看著一大堆，其實(shí)我是很詳細(xì)的把每一步都拆分的很仔細(xì)，自己操作一遍其實(shí)很迅速。如果有心者可以試著做一個(gè)動(dòng)作會(huì)更方便，如果自己將來(lái)做動(dòng)作了會(huì)及時(shí)上傳上來(lái)。

然后就是放入xcode6中，因?yàn)槲也⒉欢畑conde6是什么，特意從我們公司程序員大大討來(lái)教程貼在下面，所以下面的教程來(lái)自引用。因?yàn)槲乙粋�(gè)字都看不懂。

如果你是設(shè)計(jì)師，這一段請(qǐng)拉的快一點(diǎn)，因?yàn)槲冶ＷC你連讀都無(wú)法讀通順，就別想看懂了。

1，如果你不已經(jīng)有一個(gè)XCAsset文件，然后創(chuàng)建一個(gè); 否則，打開(kāi)一個(gè)你已經(jīng)在你的項(xiàng)目中。

2，從編輯菜單中的“新建映像集”。

3，在出現(xiàn)新的圖像集，選擇空白圖像集，然后顯示在工具面板。

4，選擇屬性檢查器。

5，根據(jù)類型下拉菜單中選擇“矢量”。

6，圖像設(shè)置將變成只有一個(gè)放置點(diǎn)，標(biāo)有“全部 - 通用”

7，拖放上面創(chuàng)建到落點(diǎn)的矢量PDF文件。

接下來(lái)，您將只需使用設(shè)置，你會(huì)與任何其他的圖像（無(wú)論是在代碼或通過(guò)接口生成器）Xcode的圖像目錄的圖像。例如，要求-imageNamed：在代碼中，并通過(guò)在圖像集的NSString的文字名稱。

當(dāng)你建立你的項(xiàng)目時(shí)，Xcode會(huì)去工作，創(chuàng)造@ 1倍，2倍@和@從您在Xcode的資產(chǎn)類別已經(jīng)使用的PDF 3倍PNG文件。舉例來(lái)說(shuō)，如果你有一個(gè)@ 1X PDF，這是150像素x 150像素，然后Xcode中會(huì)生成以下PNG大小在應(yīng)用程序中使用：

·@ 1X PNG在150像素x 150像素

·@ 2倍PNG在為300px x 300px的

·@ 3倍PNG在450px x 450px

當(dāng)你運(yùn)行應(yīng)用程序，iOS的會(huì)自動(dòng)選擇合適的@ 1倍，2倍@或@ 3倍的形象，Xcode的基礎(chǔ)上產(chǎn)生的設(shè)備需求。請(qǐng)務(wù)必注明您的自動(dòng)版式的限制，使得圖像不調(diào)整對(duì)大型設(shè)備，否則你會(huì)最終與模糊的圖像。xcode中產(chǎn)生基于所述@ 1倍的PDF圖像代替縮放矢量在運(yùn)行時(shí)對(duì)光柵圖像。

有關(guān)將圖像添加到您的項(xiàng)目中此方法的一些注意事項(xiàng)：

這不是充滿載體的支持 - 在編譯時(shí)生成PNG圖像，而你保持在這個(gè)沒(méi)有控制權(quán)。

你不能選擇一個(gè)新大小的圖像，一旦你指定使用矢量縮放后的圖像在你的應(yīng)用程序。堅(jiān)持使用您指定的大小，或者創(chuàng)造更大的尺寸新的PDF。否則，如果縮放與自動(dòng)版式，例如圖像將被扭曲。

雖然iOS的8不包括全矢量支持（而不是Xcode的只是建立你的PNG在生成時(shí)） - OS X那樣- 如果你使用同樣的方法。在OS X中，你可以擴(kuò)展你的代碼，或者使用自動(dòng)版式圖像而沒(méi)有任何失真。

沒(méi)有與以前的IOS版本不能向后兼容。所有的資產(chǎn)都被編譯成一個(gè)Assets.car文件只能夠通過(guò)的iOS 7和iOS 8讀取這是用于與資產(chǎn)目錄與iOS 7開(kāi)頭的同一個(gè)文件。

如果你已經(jīng)有一個(gè)腳本或其他工具，可自動(dòng)實(shí)現(xiàn)這個(gè)要求，那么你可能看不到一個(gè)好處使用自動(dòng)生成的PNG這種方法; 但是，如果你使用的OS X和iOS應(yīng)用程序之間共享資源，它可能是一個(gè)方便的工具。