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

點(diǎn)九圖是我們?cè)诎沧科脚_(tái)中特有的切圖格式，這種格式可以使圓角矩形在拉伸放大時(shí)不會(huì)模糊失真。之前我對(duì)點(diǎn)九圖只有很淺層的了解，后來(lái)在實(shí)際案例中與安卓前端開發(fā)人員的磕磕碰碰，才讓我有了較為切實(shí)的理解體會(huì)。

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

什么是點(diǎn)九圖

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

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

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

點(diǎn)九圖的原理

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

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

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

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

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

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

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

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

這時(shí)可能有人想問(wèn)：那到底要多高的黑線呢？

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

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

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

文本區(qū)域的定義

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

當(dāng)沒有黑線時(shí)，文本就會(huì)不受限制地?fù)螡M整個(gè)背景圖。

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

我們?cè)偌由舷路降暮诰€，去限制文本的寬度區(qū)域，一個(gè)像模像樣的氣泡就出來(lái)啦～

怎么畫點(diǎn)九圖

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

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

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

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

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

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

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

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

總結(jié)

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

1. 點(diǎn)九圖是Android端獨(dú)有的切圖格式；

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

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

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

本文配套的練習(xí)素材請(qǐng)加QQ群：465481414下載

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

掃下方二維碼關(guān)注公眾號(hào)，隨時(shí)隨地學(xué)習(xí)PS：

相關(guān)推薦：

版權(quán)信息：

原文：一篇文章幫你搞定九點(diǎn)圖

來(lái)源： 公眾號(hào)“轉(zhuǎn)行人的設(shè)計(jì)筆記”  

作者：Andrew臣