網頁設計

當前位置 /首頁/設計製作/網頁設計/列表

iPhone6plus適配切圖方法分享

網路上已經有很多適配教程,可是看了半天總是半懂不懂。。最後還是要綜合多個教程再動動腦子動動手,最好有程式大哥幫你試一下,就跟隨本站小編一起去了解下吧,想了解更多相關資訊請持續關注我們應屆畢業生考試網!

iPhone6plus適配切圖方法分享

  如果有跟我一樣情況的:

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

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

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

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

  美術交付給開發的資料有

1、 標註圖(以640為寬度尺寸為基準標註)

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

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

開發看到這份標註圖,可以自己用上面的數字,乘以1.5得出3X的數字。字號也是如此

  以淘寶為栗子

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

我使用的切圖方法很傻瓜,就是使用PS自帶的“將圖層匯出到檔案”指令碼

  具體的步驟來了

1、 以640為寬度的尺寸來設計介面,保證裡面用到的尺寸都是個整數並且是偶數哦(已經有設計好的介面的請看下一段)

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

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

舉慄

4、 儲存好後,然後CTRL+ALT+I(影象大小),把寬度640畫素改成1280畫素,因為直接放大的2倍,是不會出現虛邊的。

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

6、 接下來把PSD中的“組”合併成智慧檔案。直接CTRL+E合併成圖層也是可以的,智慧檔案還可以修改強迫症患者心裡舒服些。合併智慧檔案快捷鍵設定方法:編輯>鍵盤快捷鍵>圖層>智慧物件>轉換為智慧物件>設一個自己順手的快捷鍵

7、 然後激動人心的時刻到了,直接 檔案>指令碼>將圖層匯出到檔案,設定為PNG格式,設好匯出的資料夾,點確定~然後喝杯咖啡去~PS大大就自動幫你儲存好了

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

  超級囉嗦:

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

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

2.為什麼只設寬度?

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

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

4.使用智慧物件要注意的

如果你有使用智慧物件的習慣請一定記得直接放大智慧物件是會糊的,要把智慧物件內部的圖層拿出來放大再切圖哦~!

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

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

TAG標籤:iPhone6plus 適配 切圖 #