[超級懶人最簡單法]iPhone 6 plus 適配切圖方法分享(轉載文章)

網絡上已經有不少適配教程，但是看了半天老是半懂不懂。。最後仍是要綜合多個教程再動動腦子動動手，最好有程序大哥幫你試一下（這得有多大的福氣）

 

若是有跟我同樣狀況的：

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

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

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

目前iPhone有10種型號，5種屏幕尺寸，再加上6plus的「降採樣」（Downsampling）（1080-1920），還有iPhone6和6+上的放大模式（1125-2001）和默認模式（1242-2208），是否是感受好恐怖？可是不用怕，我分享一套超簡單的適配方法，看完你都不信有這麼簡單~

 

美術交付給開發的資料有

一、  標註圖（以640爲寬度尺寸爲基準標註）

二、  2x切圖（以640爲寬度尺寸爲基準切圖）

三、  3x切圖（以1280爲寬度尺寸爲基準切圖）

 

開發看到這份標註圖，能夠本身用上面的數字，乘以1.5得出3X的數字。字號也是如此

以淘寶爲栗子

好的，標註的事兒解決了，再來看怎麼切圖

我使用的切圖方法很傻瓜，就是使用PS自帶的「將圖層導出到文件」腳本

 

具體的步驟來了

一、  以640爲寬度的尺寸來設計界面，保證裏面用到的尺寸都是個整數而且是偶數哦（已經有設計好的界面的請看下一段）

二、  另新建一個640爲寬度的空白PSD，命名爲「切圖-2X」

三、  把設計稿裏須要切圖的圖層、組，拖到「切圖-2x」裏面，每一個切片保存爲一個組（好比說一個按鈕包含3層，2個狀態，分別合成2個組），再檢查下命名

舉慄

四、  保存好後，而後CTRL+ALT+I（圖像大小），把寬度640像素改爲1280像素，由於直接放大的2倍，是不會出現虛邊的。

五、  1280寬的版本保存爲「切圖-3x」PSD。

六、  接下來把PSD中的「組」合併成智能文件。直接CTRL+E合併成圖層也是能夠的，智能文件還能夠修改強迫症患者內心舒服些。合併智能文件快捷鍵設置方法：編輯>鍵盤快捷鍵>圖層>智能對象>轉換爲智能對象>設一個本身順手的快捷鍵

七、  而後激動人心的時刻到了，直接 文件>腳本>將圖層導出到文件，設置爲PNG格式，設好導出的文件夾，點肯定~而後喝杯咖啡去~PS大大就自動幫你保存好了

八、  「切圖-2x」的PSD也如此操做一遍便可。記得分別放在不一樣的文件夾裏，不然PS會自動覆蓋掉命名同樣的圖層的。

超級囉嗦：

1.爲何3x切圖要以1280來爲寬度？

其實iPhone6+的尺寸1242*2208做爲3X，怎麼算都又難記又不能整除，咱們直接640*2獲得1280跟1242相差也沒幾十個像素，最重要的是不虛邊啊，放在真機上看（處女座除外）看不出差異的。

2.爲何只設寬度？

爲了保持長寬比例。iPhone的這幾個尺寸不是正好的，寬度放大後高度總差那麼幾個像素，這沒關係，千萬別去改高度，手機屏幕是能夠上下滑動的嘛。不能夠滑動必須保證一屏顯示的除外，手動去調整好了。

3.爲何開發不是乘以2而是乘以1.5來算尺寸和字號？由於大屏手機就是要顯示更多內容而存在的。純等比放大界面看起來傻大傻大的，實驗證實1.5倍是正好的。

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

若是你有使用智能對象的習慣請必定記得直接放大智能對象是會糊的，要把智能對象內部的圖層拿出來放大再切圖哦~！

5.須要怎樣跟開發去溝通適配原則

這張圖表示的很是清楚，在這裏借用一下，原連接再ui中國已經失效了，還有這個連接能夠看原文

http://www.xueui.cn/experience/app-experience/ios-app%E8%AE%BE%E8%AE%A1%E4%B8%80%E7%A8%BF%E6%94%AF%E6%8C%81iphone5iphone6plus%E8%AE%BE%E8%AE%A1%E6%B5%81%E7%A8%8B.html

 

再討論下以大屏爲基礎設計縮小切圖的方法，若是按1242來設計那各類縮小都不成整數比例會虛邊，按我說的1280的話那麼你設計時必須每一個內容尺寸是4的倍數，由於2X時除以2,1X時又要除以2，不能整除又要虛邊了。數學很差的仍是蒜了吧~目前主流仍是2X尺寸，啥時候3X大屏成主流了咱們再說~

這就是天下無敵最最偷懶的方法了吧，不用裝插件也不用改稿，我但是走了無數彎路總結出這麼傻瓜的方法。各位不要吝惜求點個贊吧！

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割線~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

更新啦！最近發現CC2014版本一個更好用的切圖方法，懶人就要懶到底，今天來分享一下！

原連接先奉上

http://www.xueui.cn/tutorials/photoshop-tutorials/photoshopcc-qietu.html

而後實例操做，建議跟以前的方法對比着看，簡便了多少！

具體步驟

一、  以640爲寬度的尺寸來設計界面，保證裏面用到的尺寸都是個整數而且是偶數哦

二、  直接把須要切圖的圖層以切片爲單位合成一個一個的組，命名加個.png

舉慄

 

三、 點 生成>圖像資源

四、 連咖啡你都沒有時間喝。。你就會在這個psd存儲的路徑下找到切圖文件夾，已經搞定了。。內牛滿面

五、 切3x圖的時候，把psd文檔改個名字，好比說加個後綴-3x這樣。把寬度640像素改爲1280像素，而後再點一次 生成>圖像資源。

六、 沒有了。。。

 

怎麼樣！一共其實就命名和生成兩個步驟啊！！生生省了2杯咖啡！更多擴展用法請看原連接~另有一個小竅門，改文件夾命名的時候，把「.png"複製一下，雙擊組名，使之變成這樣

而後點Tab鍵、→、ctrl+v、Tab鍵、→、ctrl+v.....一直點就改好了

親測不管圖層組是顯示仍是隱藏狀態都同樣能夠導出，只要後綴名改了就行，沒加後綴名的圖層是不會被導出的！因此更名的時候，，若是有遇到圖層你不要切的，多點下Tab就跳過去了，試一下很快捷~

而後直接導出不一樣尺寸的切片的用法（詳細請看原連接）親測若是原圖層是矢量的則保持清晰，原圖層是位圖或智能對象的會變模糊。

聽說是cc2014以後的版本纔有的功能，各位裝一個！

不要太感動哈。。。點個贊啊各位親！