超詳細解說點9切圖的制作方法(內附神器)
超詳細解說點9切圖的制作方法(內附神器)-移動閱讀二維碼

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

之前,點9圖的出現是安卓機為了適配不同的手機分辨率的解決方案。

 

點9圖(.9.png)是用于Android開發的一種特殊的圖片格式,它的好處在于可以用簡單的方式把一張圖片中哪些區域可以拉伸,哪些區域不可以拉伸設定好,同時可以把顯示內容區域的位置標示清楚?,F在點9圖不僅可以應用在安卓上,同樣可以應用到ios切圖上。

 

唯一的區別:安卓的.9.png必須用draw9patch.bat(蘋果電腦下載:draw9patch.jar)這個工具來制作。我們平常用photoshop直接輸出的.9.png只是普通的png資源。但是ios是可以使用的。安卓工程師是不能用的。 或者說如果你的9.png中沒有黑線,安卓開發軟件是不識別的。

 

嚴謹的來說:APP設計師或安卓工程師必須用自帶的draw9patch.bat工具轉換下。

 

Image title

 

draw9patch.bat工具的下載地址:立即下載

 

Image title

win

Image title

mac

 

下載后解壓,打開里面的draw9patch.bat

 

Image title

 

最好是添加一個快捷鍵在桌面

 

Image title

 

蘋果直接打開就可以用了

 

下面我以絲帶為例,講講具體的制作方法:

 

1.打開draw9patch.jar,把導出的PNG文件拉進去(圖片四周要預留1px)

 

Image title

 

 

ps:在處理圖片的時候,你可以先縮短想要拉伸的部分,

 

Image title

 

2.我們在圖片邊緣點擊左鍵,繪制出黑線,即圖片需要被拉伸的部分。

 

下圖,先給大家上一張圖讓大家了解4條黑線是什么意思

 

Image title

 

點九圖格式規定由左側和上側來控制圖片的拉伸,右側和下冊控制文字的顯示區域。是什么意思呢?

 

拉伸區域:當實際程序中設定了對話框的寬高時,橫向拉伸區域和縱向拉伸區域就會被拉伸成所需要的高和寬,呈現出于設計稿一樣的視覺效果。

內容區域:為了讓文字被輸入框完整包裹,以達到顯示效果的正常,所畫黑線的區域就是你文字顯示的區域,這樣你的文字就不會超出對話框。(如果你害怕出錯也可以把整一邊都畫上,讓研發去調試,或者事先找研發問一下)

 

Image title

 

這是文字就會被控制在這一塊(棕色)以內

 

Image title

 

如果失誤多繪的部分,可按住shift鍵的同時點擊鼠標左鍵擦除。

 

【draw9patch.bat其他功能說明】

Zoom: 用來縮放左邊編輯區域的大小

Patch scale: 用來縮放右邊預覽區域的大小

Show lock:當鼠標在圖片區域的時候顯示不可編輯區域
Show patches:在編輯區域顯示圖片拉伸的區域 (使用粉紅色來標示)
Show content:在預覽區域顯示圖片的內容區域(使用淺紫色來標示)

3.畫好以后右邊先看看效果,如果都沒問題,導出,可以發給程序猿了,搞定。

專題推薦:《設計師需要掌握的圖片原理與優化技巧

作者:設計廠
原文地址:ui.cn

本文鏈接:http://www.casaleticia.com/cut-point-9-figure-method.html
本文標簽: , , ,