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

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

軟件下載吧

當(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)過審核才能顯示

公眾號

主站蜘蛛池模板: 成人三级做爰在线观看男女 | 日本精品1在线区 | www亚洲精品 | 国产菲菲视频在线观看 | 国产精品欧美亚洲日本综合 | 国产精品一区二区三区四区五区 | 亚洲精品一区二区三区五区 | 国产精品爱久久久久久久9999 | 成人看片黄a在线观看 | 大片毛片女女女女女女女 | 中文字幕亚洲一区二区三区 | 国产图片亚洲精品一区 | 国产在线精品观看 | 欧美色视频日本片免费高清 | a级男女性高爱潮高清试 | 午夜国产精品不卡在线观看 | 亚洲精品中文一区不卡 | 私人毛片免费高清影视院丶 | 久久久久久久久久久久福利 | 亚洲精品永久一区 | 精品91| 亚洲欧美精品一区天堂久久 | 特级一级全黄毛片免费 | 亚洲在线国产 | 免费观看情趣v视频网站 | 亚洲一区 中文字幕 久久 | 日韩激情无码免费毛片 | 99久久精品费精品国产一区二 | 嫩草一区二区三区四区乱码 | 日韩在线1 | 韩国a级毛片 | 热99re久久国超精品首页 | 欧美日韩一区二区三 | 久久久久久久久久免免费精品 | 日本午夜小视频 | 国产高清一级视频在线观看 | 欧美人成在线视频 | 国产美女精品在线 | 美女作爱网站 | 午夜影院黄色片 | 亚洲精品综合一二三区在线 |