編者按：周末也有干貨！今天騰訊的同學(xué)分享了一篇切圖的基礎(chǔ)好文，你能以最簡單快速的方式了解到那些非學(xué)不可的切圖知識，專門給新手設(shè)計師準(zhǔn)備的，圖示用心，通俗易懂，文末還有神器推薦，千萬別放過咯。

想了解最新的切圖技術(shù)？右戳學(xué)習(xí)！《IPHONE 6來了！如何改進(jìn)工作流讓設(shè)計稿支持多個尺寸？》

以及網(wǎng)頁切圖小技巧：《高效實用！切圖絕技之扣圖大法》

如何切圖？

了解iphone界面的尺寸

最小的分辨率是320x480，我們把這個尺寸定為基準(zhǔn)界面尺寸（baseline），基準(zhǔn)尺寸所用的圖標(biāo)定為1倍圖（1x）。

在實際設(shè)計過程中，為了降低設(shè)計成本，一般拿設(shè)備最高的分辨率作為設(shè)計稿的原始尺寸，拿iphone來說就是iphone5或5s的640x1136啦，當(dāng)然也可以用iphone4或4s的640x960，因為寬度都是640px，他們切圖的標(biāo)準(zhǔn)是一樣的。顯然，以1倍圖的基準(zhǔn)尺寸（寬320px）為相對的參考依據(jù)，寬640px的設(shè)計稿，以原始尺寸切出來的圖標(biāo)稱為2倍圖（2x）。

有人可能會問：為什么不拿320px作為設(shè)計稿的原始尺寸呢？因為1倍圖放大成為2倍圖遠(yuǎn)比2倍圖縮小成1倍圖來得模糊！

于是，在不考慮iphone 6和iphone 6 plus的情況下，為了適配iphone，每個圖標(biāo)需要切兩份。

Android —— 更為繁多的界面尺寸

Android開源自由的代價就是設(shè)備規(guī)范的不可控，市面上充斥著各種品牌的android手機(jī)，有著各種各樣的尺寸和分辨率，為了適配各種不同分辨率的設(shè)備，同一個圖標(biāo)需要切成N份，每一份對應(yīng)一個尺寸。

另外需要注意的是，Android里面開發(fā)用的尺寸單位是dp或sp（dp為元素表現(xiàn)尺寸，sp為字體尺寸）而不是iphone中的px。。。

對于分辨率繁多的android設(shè)備，為了方便原生應(yīng)用的界面適配，Google按照dpi大小將它們分成了4中模式（MDPI、HDPI、XHDPI和XXHDPI，也許有一天會增加第五種XXXHDPI，誰知道呢）：

看到這里，傳統(tǒng)的web前端同學(xué)可能已經(jīng)凌亂了，iphone用px，android用dp，而視覺設(shè)計稿則統(tǒng)一用的px，怎么將使用px作為單位的psd給使用dp作為單位的android?app切圖啊???

顯然，我們得花點(diǎn)腦細(xì)胞去弄清楚px與dp的換算關(guān)系。

px與dp的換算關(guān)系

一般情況下，手機(jī)分辨率與所運(yùn)行的dpi模式是匹配的，例如hvga(320x480像素)的手機(jī)屏幕一般在3.5英寸左右，運(yùn)行在mdpi模式下。當(dāng)運(yùn)行在mdpi下時，1dp=1px：也就是說設(shè)計師以320x480作為設(shè)計稿的尺寸時，在PS里定義一個item高48px，開發(fā)就會定義該item高48dp；Photoshop中14px大的字體，開發(fā)會定義為14sp。

對于一部wvga（480x800像素）的手機(jī)（G7、N1、NS），一般是運(yùn)行在hdpi模式下。當(dāng)運(yùn)行在hdpi模式下時，1dp=1.5px：也就是說設(shè)計師以480x800作為設(shè)計稿的尺寸時，在PS里定義一個item高72px，開發(fā)就會定義該item高48dp；Photoshop中21px大的字體，開發(fā)會定義為14sp。

關(guān)于px與dp的更多詳細(xì)信息，請參考文章 ：www.zhihu.com

iPhone應(yīng)用切圖尺寸與Android應(yīng)用切圖尺寸的對應(yīng)關(guān)系

在Android應(yīng)用中，以MDPI為基準(zhǔn)界面尺寸，恰好對應(yīng)上面提及的iphone應(yīng)用的基準(zhǔn)界面尺寸（320x480），所需的切圖圖標(biāo)為iphone中對應(yīng)的1倍圖；XHDPI則對應(yīng)2倍圖，HDPI和XXHDPI可依此類推。

換一種說法再看看：如果要以最低的設(shè)計成本做一個app，iphone版和android版用的同一套設(shè)計稿，那么設(shè)計稿的尺寸最好是640x960像素。因為這個尺寸切出來的圖標(biāo)尺寸涵蓋了iphone 3 ~ 5的分辨率，以及android的MDPI、HDPI、XHDPI模式。XXHDPI模式會自動利用低一級的XHDPI的圖標(biāo)進(jìn)行放大展示。

把切圖交給工具

看了上面提及的各種界面尺寸，如果全手工切，一次切完你能忍。如果切完了還有各種圖標(biāo)的增加、修改，沒幾次你多半會崩潰血噴屏幕～

幸好我們有一些很好的切圖工具可以用，具體使用方法可參考它們的官網(wǎng)教程。

直接來優(yōu)設(shè)，有具體的神器與教程喲！

神器推薦：《“沒有它我就不會切圖！”省時省力的切圖神器SLICY下載》

神器教程：《MAC下的切圖神器！SLICY使用說明》

cut&slice me

?cutterman

devRocket

注：damao推薦，看了官網(wǎng)好像很強(qiáng)悍的樣子，但是收費(fèi)哦。

小結(jié)

借助工具，原生App中的切圖變得簡易，但是“一個圖標(biāo)要切多套尺寸”的問題依舊沒有改變，有沒有更好的圖標(biāo)解決方案呢？譬如應(yīng)用網(wǎng)頁應(yīng)用中的圖標(biāo)字體？?敬請期待《Iconfont在原生App中的應(yīng)用》。

新手必備的指南類好文強(qiáng)烈推薦！

每個網(wǎng)站都有的404頁面創(chuàng)建指南！
《超實用！不容錯過的優(yōu)秀404頁面設(shè)計指南》

配色弱、非科班的設(shè)計師童鞋必備！
《設(shè)計師配色寶典！教你從零開始學(xué)配色（一）》

專為設(shè)計師寫的Github學(xué)習(xí)方法！
《超方便！專為設(shè)計師而寫的GITHUB快速入門教程》

原文地址：tgideas.qq
作者：LV主唱大人

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量86萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：