点九图的基本原理和制作流程是什么
点九图，听名字就挺神秘的，但其实它就是一种特别厉害的切图技术，能让图片在拉伸时不变形，保持边角和细节完美。它的核心就是在图片边缘画出“黑线”，标明哪里可以拉伸，哪里不能乱动，像画路标一样。黑线用纯黑色#000000绘制，这样系统才能识别。
制作点九图通常有两种方法：
1. 用专门的draw9patch工具，拖拽PNG图片进去，然后用鼠标在图片边缘画黑线。万一画多了，按住Shift键擦除就行。最后保存，会生成一个后缀为“.9.png”的文件。
2. 直接用Photoshop这类平面设计工具，先调整画布大小，每边增加1像素，然后用铅笔工具手动绘制黑线，也就是拉伸区域。保存时记得改后缀名，变成“.9.png”。
这个“小技巧”非常重要，因为普通的图片拉伸会导致边角变形，但点九图让中间可拉伸，圆角和光泽都能保持原状态，像魔法一样酷炫！
如何用Photoshop一步步制作和切割点九图 和如何使用九宫格切图工具
说到实操，咱们一步步来，别急哈：
- 首先，打开你想制作的图片，用Photoshop把画布尺寸增加上下左右各1像素。这样给黑线腾地方。
- 用铅笔工具，选黑色，手动画出1*1像素的黑线，标明横向和纵向可以拉伸的区域。确保拉伸点只出现在想要变大的部分，别画多了哦！画线时如果手滑，按Shift擦除超级方便。
- 如果你做的是对话框类元素，记得保留四个圆角不动，还有对话框的小三角指向，也别碰它，保证它位置原原本本。
- 画完了，File菜单选“存储为Web所用格式”，格式选PNG-24，最后将文件名改成“xxx.9.png”，这里的“.9”代表点九图标识。
至于九宫格切图，这个更简单啦：
- 打开你想切的图片，点击“共享”按钮，选择“制作九宫格切图”，系统会自动帮你分成九块，想保存还是分享都方便得很。
- 另外PS的切片工具也挺好用，想分割图片只需用切片工具手动划分，然后保存为Web格式，一键搞定！
整体来说，点九图和九宫格切图虽然名字听起来复杂，但其实操作起来真没你想象的那么难，只要耐心跟着步骤做，一点点技能马上上线，哇塞，真心好用！
相关问题解答
-
什么是点九图，为什么要用点九图制作图片？
哎呀，点九图其实就是给图片设定“安全拉伸区”，让图像在拉伸时不会变形，尤其是那些带圆角或高光的控件，普通拉伸会糟糕透顶，点九图就像贴了隐形保护膜一样，保证细节完美无损，做UI设计时候，它简直救星，不用愁图片变“变形怪”。 -
用Photoshop制作点九图要注意哪些坑？
说真的，用Photoshop做点九图，最要紧的是画线一定要用纯黑色#000000，不然系统识别不了，而且黑线画错了得按Shift擦掉，千万别画多了拉伸区域。还有，保存文件的时候，一定要改成.9.png后缀，这一步忘了就白干。别着急，多试几遍，慢慢上手后，就能驾轻就熟，so easy！ -
点九图和九宫格切图有什么区别和联系？
两者其实目的有点相似，都是把图切成九块，但点九图更讲究“拉伸区域”的动态，保证拉伸时各部分表现不同；九宫格切图则是直接把图片平均分割成9块，方便分别处理或分享。点九图用得多在UI界面，九宫格切图则多用在社交分享里，场景不同，效果自然也不同。 -
有没有官方工具能辅助制作点九图呢？
当然有啦，比如安卓官方就有draw9patch工具，超级方便，直接拖图画线，自动生成点九图文件。相比Photoshop手绘线条，这工具轻松不少，尤其适合不想折腾太多细节的小伙伴们。用这个工具，效率蹭蹭蹭就上去了，省时省力，强推你试试！
发表评论