當前位置:編程學習大全網 - 人物素材 - 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大屏成主流了我們再說~

  • 上一篇:呂雯現場海報的素材。
  • 下一篇:學校藝術節海報手繪-如何手繪海報
  • copyright 2024編程學習大全網