做網(wǎng)頁設(shè)計、UI設(shè)計都需要用PS切圖，然后提供給前端開發(fā)人員。最容易被前端人員罵或者苛責的是圓角對象切圖。圓角對象，如圓角tag在拉伸中，切圖沒有做好，就會拉伸變形，前端開發(fā)肯定要跟你急。那么怎么做好圓角對象切圖呢？來聽聽一位資深UI設(shè)計師是怎么說的吧……

點九圖是我們在安卓平臺中特有的切圖格式，這種格式可以使圓角矩形在拉伸放大時不會模糊失真。之前我對點九圖只有很淺層的了解，后來在實際案例中與安卓前端開發(fā)人員的磕磕碰碰，才讓我有了較為切實的理解體會。

鑒于很多小伙伴對于這一塊依舊是一知半解，因此我將這一部分單獨拎出來進行總結(jié)復盤，希望對小伙伴們有所幫助。

什么是點九圖

點九圖（Nine Patch Drawable Grahpic）是安卓獨有的切圖格式，解決界面中所有圓角矩形的拉伸，最常用的場景就是界面中那些會隨字段長度而變化的聊天對話框、標簽等等，以及Android各式各樣終端設(shè)備的自適應。

舉個通俗易懂的例子。微信中的對話氣泡會隨著用戶輸入文本的長短或者終端屏幕的尺寸大小，產(chǎn)生長度、高度的自由變化，但是氣泡本身并不會失真。這是因為在點九圖的約束下拉伸動作只存在于四個圓角外的部分，所以不論你輸入多少文本，橫屏豎屏，手機還是平板，都可以很好的自適應。而一旦沒有點九圖，圓角矩形就會變成右下圖：

IOS對于這類情況只需要一串UIImage代碼即可解決，然鵝Android就沒有那么友好了。為了避免失真變形，需要咱們設(shè)計師先制作Android專屬的點九圖，再交付給前端才能解決。

點九圖的原理

為了方便定義可拉伸區(qū)域，我們一般先將圓角矩形劃分為九個區(qū)域，除了1、2、3、4的圓角區(qū)域不可拉伸外，其他區(qū)域都可以自由拉伸。設(shè)計師需要在可拉伸區(qū)域外側(cè)繪上黑線。程序通過識別圓角矩形四周的1px、#000000的黑線，來達到定義拉伸區(qū)域和文本區(qū)域的目的。

那這四條黑線又各自代表什么呢？

·          左上角的兩條黑線：定義圓角矩形的可拉伸區(qū)域

·          右下角的兩條黑線：定義圓角矩形中的文本顯示區(qū)域

可拉伸區(qū)域的定義

當你在5、6區(qū)域的旁邊畫兩條1px的黑線時，Android程序便可以識別到這倆玩意兒是可以分別橫向和縱向拉伸的，為了方便各位理解，這里借鑒了菜心大佬的方法，畫了更淺顯易懂的示意圖。

當我們只畫出左側(cè)黑線時，相當于將圓角矩形劃分為三個形狀，兩個深藍色不可拉伸形狀+綠色可拉伸形狀。后者即黑線高度所對應的形狀，可以實現(xiàn)縱向的自由拉伸：

如果黑線高度只有2px，可拉伸形狀高度也同樣會縮至2px，但依舊可以得到想要的高度：

這時可能有人想問：那到底要多高的黑線呢？

一般在實際項目中要考慮圖片占用的內(nèi)存，因此我們需要盡可能地壓縮圖片尺寸，一到兩個像素高的黑線（可拉伸區(qū)域）足矣。

試想下，在一個有20個tag的篩選頁中，如果每個tag定義了10px的縱向拉伸區(qū)域，相當于最終切圖高度比2px高出8px，累計多出來的這160px毫無意義地降低了App性能，終端用戶的體驗也會受到連帶影響。

而上側(cè)的黑線同理，這里不再贅述。

文本區(qū)域的定義

有文本填充的情況下，則需要我們畫出右下角的兩條黑線來限制文本的區(qū)域。

當沒有黑線時，文本就會不受限制地撐滿整個背景圖。

而當我們畫出右側(cè)的黑線時，就定義了文本的高度區(qū)域。

我們再加上下方的黑線，去限制文本的寬度區(qū)域，一個像模像樣的氣泡就出來啦～

怎么畫點九圖

有工具和手動兩種方法，這里我結(jié)合實際案例僅講解手動的方法，也建議小伙伴們可以自己親手去試一下，知其然知其所以然嘛～

Sale Assistant是我目前負責的一個線上產(chǎn)品，Android端中篩選界面的tag同樣是隨字段長度進行拉伸的，因此我拿它來開刀～(為了讓大家能看清，我加深了tag顏色)

1. 首先，我們將其中一個tag切出透明png，并用PS打開（尺寸根據(jù)前端的要求來）；

2. 新建參考線定義可拉伸區(qū)域的可刪除部分。這里我需要將可拉伸區(qū)域縮減到2px，因此每個圓角兩邊只預留一個像素；

3. 使用選框工具（M）選中剛剛定義的可刪除的可拉伸區(qū)域，按Delete鍵刪掉它！

4. 將這四塊部分（4個圓角和壓縮后的可拉伸區(qū)域）拼合在一起，并用裁剪工具（C）裁剪畫布，裁剪時注意為繪制黑線預留2px的寬高；

5. 用1px粗的鉛筆工具（B）在可拉伸區(qū)域旁邊畫2px長的線段即可～（必須是#000000的純黑不透明線段）

6. 最后一步，切圖保存準備交付給前端，命名后綴必須是.9.png哦。

總結(jié)

最后來波小總結(jié)～

1. 點九圖是Android端獨有的切圖格式；

2. 我們需要以1px的純黑線段來定義圖片的可拉伸區(qū)域和文本區(qū)域；

3. 為了幫助前端小哥降低圖片的占用內(nèi)存，我們要盡可能得壓縮可拉伸區(qū)域的尺寸；

4. 最后的切圖命名后綴必須是.9.png。

本文配套的練習素材請加QQ群：465481414下載

做PS高手，快速提升工作效率，部落窩教育《 Photoshop全面精通班》視頻和《 AI平面與電商設(shè)計從零到精通》直播課全心為你！

掃下方二維碼關(guān)注公眾號，隨時隨地學習PS：

相關(guān)推薦：

版權(quán)信息：

原文：一篇文章幫你搞定九點圖

來源： 公眾號“轉(zhuǎn)行人的設(shè)計筆記”  

作者：Andrew臣