9-Patch Graphics 小實驗

9-Patch Graphics 也是大家常稱呼的 9圖 : 作用就是放大時不失真，減少圖片佔用的資源。

因為總是在泡不同的群，跟程序猿聊 9圖，大家都說那是美工的事「用PS畫一筆就好了!」 ; 好的! 我又去問美工妹" 9圖....." 還沒說完就是一句「美工不搞9圖的」。。。

不就是1px的事嗎?推來推去的.....多煩人~其實工作上小一個敵人比多交一個朋友強!!! 

所以美工應該學一下畫 9圖的規則，畢竟自己畫的UI怎麼放大，控制在美工手是最漂亮的；程序員也要搞 9圖，因為總有畫得不準確的時候，為了1px的事把圖打回頭，也太娘們了，自己改一改不就行麻。大家互相體諒一下，氣氛搞好一點，感情不就出來了~小吉是推薦程序員跟美工妹在一起!!!那就可以接私活了!!!!

網上的教程很多，我推薦這個: http://isux.tencent.com/android-ui-9-png.html

簡單總結一下: 左上和左邊加黑線，它們交叉的地方就是自定可以拉扯的地方;

                          右下和右邊的黑線，就是定義文字內容的範圍。

9.png是可以用Photoshop 或者是安卓自帶的draw9patch，用draw9patch的好處是可以預覽效果，用法也很簡單。

用PS推薦用拉線條的方法，不要用Brush來畫，否則壓感 / 透明度也會令9圖解讀不了。

還有注意自定的黑線必需貼在圖片最外邊緣，不可以有虛位，否則會當成圖片內容，成不了9圖。

另外，記下美工妹妹的教導: 常用框線用2px; ICON圖標一類用4px的線條繪畫

千萬不要用1px，特別是處理ios

以下是記錄一下，用不同圖形做出來的 9圖實驗: 

相同的圖案定義不同的拉扯範圍出來的效果是很大分別，如果美工妹看頭三張也還能猜出最底的原圖~那就可以正式在PS做9圖了~