点9切图的方法
北京/UI设计师/6年前/3589浏览
版权
点9切图的方法
点9切图的方法
最近很多人在微信里问我点9切图怎么切的问题,今天就把我平时切点9的经验方法分享给大家,希望可以帮到对点9切图迷茫的设计宝宝们。
点9,是Android开发中的用到的一种切图,图片以“.9.png”命名。点9的图主要是标记出图片的哪个部分可以被拉伸,哪个部分不能被拉伸。运用点9切图可以保证图片在不模糊变形的前提下自适应各个屏幕尺寸。
点9切图常用于聊天气泡等样式中。
如下图,这个是微信截图,点9切图一般也是为了切这样的图,根据字段的高度、宽度不同而自适应的切图。

下面就来看一下这个图应该怎么用点9来切:
1、首先要想一下我们想要这个气泡达到一个什么样的效果,一般情况是下面几个效果:有短、有长、有高的

2、将做好的气泡图 贴边 导出png,放到ps里(因为在ps里看像素比较准确)上下左右 各留出1像素如下图:

3、从第一个图效果图可以看出,我们想要这个气泡拉伸的地方是:左右拉伸、上下拉伸,不动的地方是:右侧的三角箭头、四个圆角。现在可以开始我们的点9切图啦,如下图:
在这个图里面可以看出我们想要它拉伸的地方就画一条黑线(必须是1px、#000000、透明度100%)黑线的长度就是内容区域,不动的地方是右侧的三角箭头和四个圆角,所以就没有画黑线进行标记。
总结:需要拉伸的地方用1px黑线标记、不需要拉伸的地方就空着就好了(但是得留出1px空隙)。

当然为了节省安卓的开发资源我们可以将切图变的更小(也可以是更小)能表达清楚这个意思就好,如下图:

这样我们就完成了点9的切图,将这个图保存为“ .9.png ” 发给安卓开发,一般安卓开发系统里面会有自带的插件,可以实时预览气泡样式是否正确(如下图),安卓开发也可以自己进行调整,所以你也可以跟开发沟通你想要什么效果让开发在插件里面调整一下,所以充分的跟开发沟通也是很重要滴。
希望这个教程可以真正的帮助到需要的设计宝宝们。加油吧!

17
举报
声明
26
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
你可能喜欢
相关收藏夹
登录注册
17登录即可同步推荐记录哦
26登录即可加入我的收藏
评论登录即可评论想法
分享分享



















































































