天天看點

html .9.png 自動拉伸,4招教你如何制作點九圖(.9.png)

對于很多人們來說都不知道點九圖是什麼?又應該如何制作?并傳遞對接給開發。今天我将工作中積累的知識和經驗分享給各位,希望對大家有幫助。

這次我将點九圖分為4個方面來講:1.概念  2. 展現方式  3.命名  4.制作

1. 概念

點九圖,是安卓(Android)開發中用到的特殊圖檔。是告訴開發哪個區域可以被拉伸,哪個區域不可以被拉伸,且不會影響清晰度,又可以自适應。

2.展現方式

那麼點九圖到底是什麼呢?點九圖多用于我們常用聊天工具中的對話框。

html .9.png 自動拉伸,4招教你如何制作點九圖(.9.png)

3.命名

命名對于UI和開發來說是非常重要的一部分,UI命名好提供給開發的圖,開發可以提高工作效率,也顯得自己夠專業。當然有些開發是自己命名,那這是取決于你對接的開發了。點九圖的命名規範是,前面一個點“.”加“9.png”,就是“.9.png”,這裡面任何一個元素都不可缺少,不然開發無法程式設計。

4.制作

點九圖分為2個區域:1. 拉伸區域(縱、橫向)2. 顯示内容區域(縱、橫向)

html .9.png 自動拉伸,4招教你如何制作點九圖(.9.png)

當确定對話框的寬、高時,橫向拉伸區域,縱向也會拉伸。

html .9.png 自動拉伸,4招教你如何制作點九圖(.9.png)

以上展示的是實際效果展示的圖,當然對話框下面和右邊的1像素黑線是不可拉升區域。那麼如何制作.9圖呢?接下來,4步告訴你怎麼制作。

1. 打開PS,将對話框縮至最短

html .9.png 自動拉伸,4招教你如何制作點九圖(.9.png)

2. 删除背景圖,四周各留出1像素的區域

3. 用1像素黑線畫出四周區域(注:黑線一定要 100% 的純黑)

html .9.png 自動拉伸,4招教你如何制作點九圖(.9.png)

4. 導出.9.png的圖給開發

這樣點九圖九做好了,是不是很簡單呐。今天的文章就分享到這裡,下次咱們一起在get其他的知識,也歡迎大家留下你寶貴的建議哦。檢視原文