點(diǎn)九圖簡(jiǎn)單介紹及制作教程

2015-5-4    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源:莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

點(diǎn)九圖,是Android開發(fā)中用到的一種特殊格式的圖片,文件名以”.9.png“結(jié)尾。這種圖片能告訴程序,圖像哪一部分可以被拉升,哪一部分不能被拉升需要保持原有比列。運(yùn)用點(diǎn)九圖可以保證圖片在不模糊變形的前提下做到自適應(yīng)。點(diǎn)九圖常用于對(duì)話框背景圖片中。

這是我截屏自手機(jī)QQ一組聊天對(duì)話框,可以看出,不同兩條消息字?jǐn)?shù)不同,長(zhǎng)度也不同,但它們采用了相同的背景樣式,這個(gè)背景樣式其實(shí)是同一張圖片,用到的就是點(diǎn)九圖的方式。

 

相較于普通截圖方式,點(diǎn)九圖最為明顯的區(qū)別就是圖片不保留內(nèi)容顯示區(qū)域且自帶一圈不成規(guī)律的黑邊。正是這圈黑邊提供了點(diǎn)九圖的各個(gè)屬性以適應(yīng)各種情況。

 

簡(jiǎn)單點(diǎn)來說,1、2部分規(guī)定了圖像的可拉伸部分,而3、4部分規(guī)定了圖像的內(nèi)容區(qū)域。當(dāng)實(shí)際程序中設(shè)定了對(duì)話框的寬高時(shí),1、2部分就會(huì)被拉伸成所需要的高和寬,呈現(xiàn)出于設(shè)計(jì)稿一樣的視覺效果。

 

那么內(nèi)容區(qū)域是干嘛的呢?

內(nèi)容區(qū)域規(guī)定了可編輯區(qū)域。例如,對(duì)話框是圓角,文字需要被包裹在其內(nèi),如果4像3一樣頂?shù)絻杀?,顯示的效果會(huì)是如下圖。

這里文字是垂直居中顯示,水平靠左顯示。為了讓文字被輸入框完整包裹,縮短4的黑線到圓角以內(nèi),以達(dá)到顯示效果的正常。

 

那么,點(diǎn)九圖如何制作呢?

首先用PS打開一張切好的普通截圖。用選區(qū)工具選取盡可能多的拉升部分加以刪除(但要注意必須要留出至少1PX拉伸區(qū)域,以便能加以拉伸。)

然后將這些內(nèi)容拼接成一個(gè)完整的整體。

打開 圖像>畫布大小,寬度和高度分別添加2px,定位選定中心定位。

 

用鉛筆(黑色,1px),在圖像最外邊框描點(diǎn)。

 

最后保存時(shí)注意”.9.png“

 

講的有點(diǎn)亂,總結(jié)下:

點(diǎn)九圖就是Android上的一種可被拉升的圖片。(IOS不需要)格式以.9.png結(jié)尾。

圖像用邊上純黑色1PX像素(透明底上的純黑,其他都不行。)的邊來規(guī)定拉伸區(qū)域和內(nèi)容區(qū)域。上邊和左邊為拉升區(qū)域,右邊和下邊為內(nèi)容區(qū)域。(這1PX像素在程序最終輸出的效果中不會(huì)被顯示。)

你也可以用其他一些插件來實(shí)現(xiàn)點(diǎn)九圖的做法,但原理同我上面的PS做法是一樣的。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔