安卓 .9.png 切图方式

用户头像
北京/UI设计师/8年前/1944浏览
安卓 .9.png 切图方式
用户头像
花未未

安卓 .9.png 切图教程

基础概念

.9.png 是 Android 系统独有的图片格式,能够在保证图片清晰度的情况按照项目所需来拉伸图片,是做 Android 系统的项目必须要会用的。

.9.png 图和普通切图的最大差别在于上下左右各有一条黑线。左边和上边的线(1号和2号)用于限制可以拉伸的区域,右边和下边的线(3号和4号)用于限制内容可以显示的区域。



中间的重复区域可以按比例来缩小一些,.9.png 图 可以在此基础上放大或是缩小由开发来用代码控制


有以下三种方式可以制作 .9.png 图:

一、Android 资产工作室,操作方便,使用效率较高,内容显示不能进行修改需要特殊处理的切图不能使用;

二、draw9patch,老牌切 .9.png 图的工具,可预览效果可指明错误,操作不是很便利;

三、手动绘制,效率较高,不能预览,不能预知问题;


一、Android 资产工作室

链接地址:

https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example

此网站为英文网站,先给大家翻译各个操作:

常用操作的操作有以下几项:选择图片 -> 调试效果 -> 下载图片,其它功能基本上都是辅助我们完成这些操作的。

1. 选择图片有两种方式:一种是点击选择图片(Select image)按钮来上传,另外一种是直接将图片拖动到图片展示区域;

2. 调试效果是整个过程中最重要的环节。此处只选用第一种拉伸区域来做处理就可以,后两种基本没有任何变化。拉伸区域有三种处理方式:自动伸缩、修剪边缘透明度、修剪拉伸区域。


自动伸缩是在原图上做拉伸标注,下载的图片也是和原图的大小一致,如果实际使用场景只会比标注的图大不会比标注的图片小的情况下建议选择以下模式,反之则不能使用。

修剪边缘透明度,会把图片边缘多余的透明部分给去掉,如果图片本身就没有多余的透明边缘可以不用处理。

修剪拉伸区域,此模式会把中间可拉伸区域的重复部分给删除掉,使图片可以在任何大小下都能使用,并且下载的图片也会比较小,目前比较推荐的是这个模式。

3.下载图片,点击下载按钮后会得到5个文件格式的文件,对应了设计输出的不同分辨率,这里如果要求各种尺寸的机型都能适配到的话可以全部都提供给开发,如果只要求适配主流机型,对于分辨率较低机型较老的手机不做处理的话可以只提供给开发1920x1080px的文件

二、draw9patch

draw9patch的使用没有平台限制,但是不管是windows还是mac电脑都需要先安装java才能启动,附件为大家提供了安装包,大家自行下载和安装。


操作步骤如下:上传图片 -> 绘制描线 -> 保存图片


1. 上传图片,直接将图片拖动到界面中即可

2. 绘制描线,左键相当于画笔用来绘制,右键相当于橡皮擦用来删除。在绘制的过程中要实时对比右侧的预览图来查看是否存在问题并进行修正。

3. 保存图片,将图片保存到对应的文件夹即可。


三、手动绘制

对于 .9.png 的切图方式和原理非常熟练的童鞋可以直接用 PS 制作。制作方式和draw9patch差不多,只是 PS 是没办法完成预览错误的,需要在和开发的协作过程中及时沟通,检验效果。


操作步骤如下:上传图片 -> 绘制描线 -> 保存图片


大家可以按照项目的实际情况来选择合适的方案,文字表述的传达力有限如果有不清楚的地方可以在评论里留言~



16
举报
|
30
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
我的钱包-UI界面设计-app
【新年UI图标】秒杀icon
盲盒APP UI设计
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
APP/小程序商业项目UI模板|99个高保真UI+79个原型
拟物风质感写实UI卡片合集源文件
3D渐变流体抽象矢量UI背景图
【新年UI图标】钱包icon
户外旅行飞机情侣假日出行
高级感金属拟物 UI设计组件库
钱包ui模板
【新年UI图标】礼物/活动icon
【新年UI图标】汽车icon
智能家居中心 简约 UI设计组件库
【新年UI图标】30个图标
新能源APP应用UIKit
【新年UI图标】体育icon
3D卡通UI界面图标可爱插画免扣素
Security Camera UI kit
新拟态风格 UI设计组件库
高级表盘系列UI源文件
【新年UI图标】会员icon
你可能喜欢
大家都在看
登录注册