火星網校
點九圖是什麼？如何製作點九圖？
一、什麼是點九圖
Andriod 平台的應用軟件開發裏的一種特殊的圖片形式，文件擴展名為：.9.png。智能手機中有自動橫屏的功能，當在界麵改變方向後，界麵上的圖形會因為長寬的變化而產生拉伸，造成圖形的失真變形。Android平台有多種不同的分辨率，很多控件的切圖文件在被放大拉伸後，邊角會模糊失真。
在Android 平台下使用點九PNG 技術，可以將圖片橫向和縱向同時進行拉伸，以實現在多分辨率下的完美顯示效果。
普通拉伸和點九拉伸效果對比
對比很明顯，使用點九後，仍能保留圖像的漸變質感，和圓角的精細度。點九圖其實相當於把一張png 圖分成了9 個部分（九宮格），分別為4 個角，4 條邊，以及一個中間區域，4 個角是不做拉升的，所以還能一直保持圓角的清晰狀態，而2 條水 平邊和垂直邊分別隻做水平和垂直拉伸，所以不會出現邊會被拉粗的情況，隻有中間用黑線指定的區域做拉伸。結果是圖片不會走樣。
二、 如何製作點九圖
用PS 等平麵工具製作，流程如下：
第一步：首先用ps 沿著圖片的邊緣切好圖；
按鈕沿邊切圖效果
第二步：手動將上下左右各增加1px 的透明像素；
按鈕的四邊分別增加1px 的透明像素
查看圖中的可拉抻區域，即不包括圓角，光澤等特殊區域的區域，下圖已圈出；如果不能確定某一區域是不是可拉抻區域，可以在繪製之前將圖片該部分拉抻一下試試，如果圖片出現了失真的變化，該區域就是不可拉抻區域。
紅圈中包含漸變區域，隻可以做橫向拉伸
在此圖中，可拉抻區域包括：純色區域，漸變區域等，漸變區域隻能橫向拉伸；純色區域，在橫向和縱向屬於可拉抻區域。
紅圈中是純色區域，可以做橫向和縱向拉伸
第三步：使用鉛筆工具，色值必須為黑色：#000000，對圖片四周的1px 區域標準進行填充，上部為橫向可拉抻區域，左側為縱向可拉抻區域（光澤區域不可拉伸，所以標注放在光澤範圍下方），這兩個部分按照可拉抻區域的特點確定黑色條紋的長短，下方為橫向內容區域，右側為縱向內容區域，內容區域的意思就是，如果這個按鈕是個窗口的話，右下兩區域延伸成為的長方形就是可以顯示內容的區域。
上：標示橫向可拉伸區域，下：標示橫向內容區域
左：標示可縱向拉伸區域，右：標示縱向內容區域
第四步：存儲為web 所用格式，選擇png-24，儲存時手動將後綴名為.9.png；
製作點九圖時，需要注意以下兩點：①手繪的黑線拉伸區必須是#000000，透明度100%，並且圖像四邊不能出現半透明像素；② .9.png 必須繪有拉伸區域的黑線。
上一篇 ps畫筆描邊風格製作教程
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
為給新片造勢，迪士尼這次豁出去了，拿出壓箱底的一眾經典IP，開啟了夢幻聯動朱迪和尼克奉命潛入偏遠地帶臥底調查 截至11月24日......
-
此前Q2問答環節，鄒濤曾將《解限機》首發失利歸結於“商業化保守”和“灰產猖獗”，導致預想設計與實際遊玩效果偏差大，且表示該遊戲......
-
2025 Google Play年度遊戲頒獎：洞察移動遊戲新趨勢
玩家無需四處收集實體卡，輕點屏幕就能開啟驚喜開包之旅，享受收集與對戰樂趣庫洛遊戲的《鳴潮》斬獲“最佳持續運營遊戲”大獎，這不僅......
-
說明：文中所有的配圖均來源於網絡 在人們的常規認知裏，遊戲引擎領域的兩大巨頭似乎更傾向於在各自賽道上激烈競爭，然而，隻要時間足......
-
在行政服務優化層麵，辦法提出壓縮國產網絡遊戲審核周期，在朝陽、海澱等重點區將審批納入綜合窗口；完善版權服務機製，將遊戲素材著作......
-
未畢業先就業、組團入職、紮堆拿offer...這種好事，再多來一打！
眾所周知，火星有完善的就業推薦服務圖為火星校園招聘會現場對火星同學們來說，金三銀四、金九銀十並不是找工作的唯一良機火星時代教育......
