iPhone6plus適配切圖方法分享

　　網(wǎng)絡(luò)上已經(jīng)有很多適配教程，可是看了半天總是半懂不懂。。最后還是要綜合多個教程再動動腦子動動手，最好有程序大哥幫你試一下，就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!

　　如果有跟我一樣情況的：

　　1. 有人說用sketch自動導(dǎo)出多套尺寸切圖和SVG矢量格式，表示沒錢買MAC

　　2. 有人說用切圖神器cutman，表示用CC以上版本PS不支持

　　3. 另…不喜歡/用不慣/不會用ps自帶切圖工具的

　　目前iPhone有10種型號，5種屏幕尺寸，再加上6plus的“降采樣”(Downsampling)(1080-1920)，還有iPhone6和6+上的放大模式(1125-2001)和默認(rèn)模式(1242-2208)，是不是感覺好恐怖?但是不用怕，我分享一套超簡單的適配方法，看完你都不信有這么簡單~

　　美術(shù)交付給開發(fā)的資料有

　　1、 標(biāo)注圖(以640為寬度尺寸為基準(zhǔn)標(biāo)注)

　　2、 2x切圖(以640為寬度尺寸為基準(zhǔn)切圖)

　　3、 3x切圖(以1280為寬度尺寸為基準(zhǔn)切圖)

　　開發(fā)看到這份標(biāo)注圖，可以自己用上面的數(shù)字，乘以1.5得出3X的數(shù)字。字號也是如此

　　以淘寶為栗子

　　好的，標(biāo)注的事兒解決了，再來看怎么切圖

　　我使用的切圖方法很傻瓜，就是使用PS自帶的“將圖層導(dǎo)出到文件”腳本

　　具體的步驟來了

　　1、 以640為寬度的尺寸來設(shè)計界面，保證里面用到的尺寸都是個整數(shù)并且是偶數(shù)哦(已經(jīng)有設(shè)計好的界面的請看下一段)

　　2、 另新建一個640為寬度的空白PSD，命名為“切圖-2X”

　　3、 把設(shè)計稿里需要切圖的圖層、組，拖到“切圖-2x”里面，每個切片保存為一個組(比如說一個按鈕包含3層，2個狀態(tài)，分別合成2個組)，再檢查下命名

　　舉栗

　　4、 保存好后，然后CTRL+ALT+I(圖像大小)，把寬度640像素改成1280像素，因為直接放大的2倍，是不會出現(xiàn)虛邊的。

　　5、 1280寬的版本保存為“切圖-3x”PSD。

　　6、 接下來把PSD中的“組”合并成智能文件。直接CTRL+E合并成圖層也是可以的，智能文件還可以修改強迫癥患者心里舒服些。合并智能文件快捷鍵設(shè)置方法：編輯>鍵盤快捷鍵>圖層>智能對象>轉(zhuǎn)換為智能對象>設(shè)一個自己順手的快捷鍵

　　7、 然后激動人心的時刻到了，直接 文件>腳本>將圖層導(dǎo)出到文件，設(shè)置為PNG格式，設(shè)好導(dǎo)出的文件夾，點確定~然后喝杯咖啡去~PS大大就自動幫你保存好了

　　8、 “切圖-2x”的PSD也如此操作一遍即可。記得分別放在不同的文件夾里，否則PS會自動覆蓋掉命名一樣的圖層的。

　　超級啰嗦：

　　1.為什么3x切圖要以1280來為寬度?

　　其實iPhone6+的尺寸1242*2208作為3X，怎么算都又難記又不能整除，我們直接640*2得到1280跟1242相差也沒幾十個像素，最重要的是不虛邊啊，放在真機上看(處女座除外)看不出差別的。

　　2.為什么只設(shè)寬度?

　　為了保持長寬比例。iPhone的這幾個尺寸不是正好的，寬度放大后高度總差那么幾個像素，這不要緊，千萬別去改高度，手機屏幕是可以上下滑動的嘛。不可以滑動必須保證一屏顯示的除外，手動去調(diào)整好了。

　　3.為什么開發(fā)不是乘以2而是乘以1.5來算尺寸和字號?因為大屏手機就是要顯示更多內(nèi)容而存在的。純等比放大界面看起來傻大傻大的，實驗證明1.5倍是正好的。

　　4.使用智能對象要注意的

　　如果你有使用智能對象的習(xí)慣請一定記得直接放大智能對象是會糊的，要把智能對象內(nèi)部的圖層拿出來放大再切圖哦~!

　　5.需要怎樣跟開發(fā)去溝通適配原則

　　再討論下以大屏為基礎(chǔ)設(shè)計縮小切圖的方法，如果按1242來設(shè)計那各種縮小都不成整數(shù)比例會虛邊，按我說的1280的話那么你設(shè)計時必須每個內(nèi)容尺寸是4的倍數(shù)，因為2X時除以2,1X時又要除以2，不能整除又要虛邊了。數(shù)學(xué)不好的還是蒜了吧~目前主流還是2X尺寸，啥時候3X大屏成主流了我們再說~

【iPhone6plus適配切圖方法分享】相關(guān)文章：

AutoCAD 圖導(dǎo)入Photoshop 的方法分享08-14

Dreamweaver切圖到生成網(wǎng)頁的方法09-09

photoshop怎么切圖01-22

photoshop怎么切圖08-21

筆記本電源適配器選擇方法08-03

PS摳圖方法10-27

關(guān)于PhotoShop教程:切圖那點事兒10-12

Photoshop的摳圖方法介紹06-19

PS摳圖方法介紹05-30

Photoshop摳圖方法大全08-06