点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吧!
推荐素材
新能源APP应用UIKit
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】游戏/娱乐icon
3D渐变流体抽象矢量UI背景图
【新年UI图标】钱包icon
【新年UI图标】汽车icon
我的钱包-UI界面设计-app
UI通用设计素材1
Security Camera UI kit
3D卡通UI界面图标可爱插画免扣素
高级感金属拟物 UI设计组件库
钱包ui模板
科技医疗透明柜UI界面设计
UI_3D图标炮仗<新春促销>
【新年UI图标】珠宝icon
森系3D渐变流体抽象矢量UI背景图
【新年UI图标】秒杀icon
【新年UI图标】影音icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新拟态风格 UI设计组件库
高级表盘系列UI源文件
户外旅行飞机情侣假日出行
智能家居中心 简约 UI设计组件库
你可能喜欢
相关收藏夹
大家都在看
登录注册