看完这篇基础科普,别再说你不会用点九图了!

2017/12/06

很多朋友说看了网上很多关于点九的文章,越看越糊涂,之前也有答应大家,科普一下点九图,所以今天文章来啦!

欢迎关注作者的微信公众号:「菜心设计铺」

先来看看大纲:

  • 什么是点九图
  • 点九图的作用是什么
  • 点九图的原理
  • 总结

一. 什么是点九图

点九图其实就是安卓系统中特有的一种图片格式,为了让大家更好的记住,我们只要知道,后缀名是「.9.png」的图片,就是点九图。

二. 点九图的作用是什么

每个事物都有其存在的价值,所以先弄清楚点九图能为我们解决什么问题,这样后面理解起来就会容易很多。

其实点九图的用处就是帮助我们拉伸切图的,比如这个切图:

如果它需要纵向拉伸,直接拉会变成下面这个样子:

而用了点九图就可以让切图局部拉伸,而不是整体拉伸,这样就可以把容易变形的地方保护起来:

是不是拉伸的很完美!有黑线不用怕,那只是告诉安卓系统:嘿,大兄弟,这是张点九图,特殊对待一下!

这有能让你快速制作点九图的小教程 → 《你知道Android里的“点九”吗?》

三. 点九图的原理

点九图最大的原则就是四个边必须各有一条纯黑的线(或一像素的点),如下图:

如果四条线少任何一条,或者线不是纯黑的(#000000),安卓系统就不认你!

其中这四条线,左上两条线掌管可拉伸区域,右下两条线掌管内容显示区:

先说左上两条线,因为两条线原理是一样的,所以我们单独拿左边这条线来举例吧,当我们没有左边那条黑线时,纵向拉伸是这样的:

圆角是不是变形了,如果左边加一条黑线,就相当于把原来的图形分为三个部分:

当再次纵向拉伸的时候,只有标记了黑线的部分可以被拉伸,而上下两部分是完好无损的,想象一下,无论你拉伸到多高,是不是都不会变形了:

当然,你左边画一个点也可以起到相同的效果:

左边这条线是控制纵向拉伸的,所以上面那条黑线就是控制横向拉伸的,原理是一样的!

接下来我们来说右下两条线,是控制内容区域的,单独拿右边那条线来举例,如果没有右边那条黑线,在这个切图上输入内容,比如文字,是没有限制的,内容会撑满整个背景图:

当有了右边那条黑线后,切图相当于在纵向上又被分开了:

而这次是右边有黑线哦,别忘了右边的黑线是控制显示区域的,所以只有带黑线的部分才可以显示内容。

当然,文字不会这样被切断一半显示的,这里只是方便大家观看哪里可以显示内容!

同样的原理,当我下面也画一条线后,横向上也是只有带黑线的部分可以显示内容(红线是辅助示意的哈):

这就是点九的基本原理了!

四. 总结

最后总结几个要点:

  • 点九切图四周必须要有四条一像素纯黑的线或点。
  • 左上两条线控制拉伸区,右下两条线控制内容区。
  • 输出的图片后缀必须是「.9.png」。

至于用插件还是自己手动切点九图,看自己习惯吧,我一般都是自己画,比较放心一点。

好了,今天就讲这些了,我猜你应该大概明白了,如果没明白,再看一遍吧。

欢迎关注作者的微信公众号:「菜心设计铺」

「还有哪些必读的基础知识」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/draw-9-patch-android

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里