日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > 聊聊原生APP切圖那些事兒

聊聊原生APP切圖那些事兒

時間:2024-03-07 12:01作者:下載吧人氣:20

如何切圖?

了解iphone界面的尺寸

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

聊聊原生APP切圖那些事兒

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

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

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

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

Android開源自由的代價就是設(shè)備規(guī)范的不可控,市面上充斥著各種品牌的android手機,有著各種各樣的尺寸和分辨率,為了適配各種不同分辨率的設(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,誰知道呢):

聊聊原生APP切圖那些事兒

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

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

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

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

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

關(guān)于px與dp的更多詳細信息,請參考文章 :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)界面尺寸(320×480),所需的切圖圖標(biāo)為iphone中對應(yīng)的1倍圖;XHDPI則對應(yīng)2倍圖,HDPI和XXHDPI可依此類推。

聊聊原生APP切圖那些事兒

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

把切圖交給工具

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

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

cut&slice me

聊聊原生APP切圖那些事兒

?cutterman

聊聊原生APP切圖那些事兒

devRocket

聊聊原生APP切圖那些事兒

注:damao推薦,看了官網(wǎng)好像很強悍的樣子,但是收費哦。

標(biāo)簽理論教程,切圖教程,LV主唱大人,ps理論,ps知識

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

公眾號

主站蜘蛛池模板: 亚洲国产精品久久久久久网站 | 秀人网私拍福利视频在线 | 欧美一区二区在线观看免费网站 | 久久国产精品二国产精品 | 日韩国产欧美视频 | 成人一区视频 | 亚洲视频免费在线 | 99re66热这里只有精品免费观看 | 免费国产一级特黄久久 | 亚洲国产成人久久一区www | 欧美一二区 | 麻豆国产一区 | 91精品成人免费国产 | 亚洲欧美在线免费观看 | 免费人成激情视频在线观看冫 | 黄a视频在线观看 | 特黄特色一级特色大片中文 | 99久久精品免费看国产一区二区三区 | 国产永久在线视频 | xxx国产hd | 国产成人综合一区精品 | 日本色哟哟 | 黄网在线观看免费 | 久久精品视频在线播放 | a级黄色毛片免费播放视频 a级精品九九九大片免费看 | 国产精品免费观看视频播放 | 韩国本免费一级毛片免费 | 99精品一区二区免费视频 | 韩国黄色一级毛片 | 全免费a级毛片免费看视频免 | 中文字幕福利片 | 日本久久久久久久久久 | 欧美久久精品 | 一级毛片区 | 99久久精品免费看国产四区 | 亚欧成人一区二区 | 欧美亚洲国产精品久久久 | 国产区香蕉精品系列在线观看不卡 | 手机看片国产 | 欧美激情综合亚洲五月蜜桃 | 国产成人在线网址 |