製作右下角箭頭的.9圖片

標籤：

.9圖片介紹

1. 簡單瞭解
   .9圖片在APP中用的非常多，主要是為了防止圖片縮放後造成變形，確保圖片不失真。
   典型的就是的聊天介面，如對方資訊長短不一，但背景使用的都是同一張圖片。
   

   如果不.9圖片，前面的箭頭肯定會隨著資訊長度變化而變化，那肯定是毀三觀的。
   

2. 認識.9圖片
   .9圖片保證不失真，在最外層加了一圈地區設定功能，通過用純黑色顏色來設定（必須是純黑，#000000）。共四個邊，每個邊的功能如下：

左邊：縱向展開地區（上下）
上邊：橫向展開地區（左右）

右邊：前景內容地區的高
下邊：前景內容地區的寬

左邊和上邊是展開的地區，圖片被展開後，設定的地區會被展開，其他地方會保持原大小。
右邊和下邊是顯示前景的地區，前景的內容只能顯示在此地區。如果未設定，前景將被擠出來，相當於兩個控制項一樣，一個背景的控制項，一個是內容的控制項，是並排關係，不是疊加關係了。

所以.9圖片沒有特殊情況下，都要設定四個邊的。
下面結合以前學的PS技術來完成右下角箭頭的製作

用PS製作右下角箭頭

1. 建立一張圖片，大小為20px*20px，背景內容選透明。因為箭頭小，所以圖片的尺寸可以盡量小。
   

2. 縮放圖片至適合大小（Alt+滑鼠上滾），尺規的單位是像素，知道我放到多大了吧
   

3. 畫三角形。畫法很多，這裡介紹三種
   1). 用鋼筆
   使用鋼筆（P）的時候不要拖動，直接點擊三角形的三個頂點就可以。這裡畫了兩個邊都是8px，
   
   轉成選區（Ctrl+Enter）。
   
   2). 用多邊形
   使用多邊形（U），把頂部屬性欄中“邊:”數改為3
   從上面（或左邊）座標上拉一根輔助線到12像素的位置（功能表列 - 視圖，可清除）。點擊右下角，按住Shift（45°的倍數），往右下角拖動，直到三角形在畫布中的地區與輔助線相交為止
   

   3). 矩形轉三角形
   先用選框工具選擇8*8的地區
   
   填充顏色（Alt+Backspace/Delete）。
   右鍵——自由變換
   右鍵——斜切
   
   把滑鼠移動到左上方，變成“白色三角形”後，向下拖動到底部（剛好是斜切了45°。Canvas中經常用到矩陣Matrix，它的skew斜切就是這樣做的）。
   

4. 填充顏色
   填充前景色彩（Alt+Backspace/Delete）。前景色彩設定在左邊工具列
   

5. 周圍添加.9圖片地區設定空間
   四周放大一個像素，修改畫布大小（Ctrl+Alt+C）。因為四周都要加，所以寬高加2px。當然在畫圖時把畫布縮小一個像素來畫也可以，就不需要此步驟了。
   
   
6. 儲存，選PNG格式，並把尾碼名改為.9.png。儲存時彈出PNG選項，預設設定。
   

操作說明：
取消選區選擇：Ctrl+D
刪除顏色：選擇地區（M） -> 刪除（Delete）
刪除不了，是因為沒有柵格化圖層，右鍵圖層

製作.9圖片

1. 方法一：用PS
   修改前景色彩為純黑色，在最外圍添加純黑色。用矩形選框或矩形工具都可以。四個頂角的像素不要設定
   

2. 方法二：開發工具內建的draw9patch.bat
   如果沒有開啟AS，直接開啟軟體編輯（Eclipse和AS都在SDK目錄下的\tools\draw9patch.bat）
   如果圖片放入了drawable裡，雙擊就會自動開啟此軟體。直接拖拉邊界線就行，非常方便
   
   說明，如果給的.9圖片最外層的一圈像素沒有設定地區，draw9patch.bat會自動把最外層的像素清空，用於設定地區

這裡的圖片僅適用我的解析度，為了更好的效果，需要製作不同解析度的圖，以達到螢幕適配

最終效果如下：

最後附上兩種聊天對話方塊背景圖片的製作圖片：

發現我挺適合寫操作說明書的，如此地詳細（囉嗦）。。。⊙﹏⊙b汗

製作右下角箭頭的.9圖片