移动端UI设计项目实战教程 项目八-任务三-点九制图-任务实现.pptx

点九制图主讲人：林霞

目录1、点九图概念及制作2、任务实现

知识点导入01

1、点九图的概念点九图是Andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png。智能手机中有自动横屏的功能，当在界面改变方向后，界面上的图形会因为长宽的变化而产生拉伸，造成图形的失真变形。Android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边角会模糊失真。在Android平台下使用点九PNG技术，可以将图片横向和纵向同时进行拉伸，以实现在多分辨率下的完美显示效果。对比很明显，使用点九后，仍能保留图像的渐变质感，和圆角的精细度。点九图其实相当于把一张png图分成了9个部分（九宫格），分别为4个角，4条边，以及一个中间区域，4个角是不做拉升的，所以还能一直保持圆角的清晰状态，而2条水平边和垂直边分别只做水平和垂直拉伸，所以不会出现边会被拉粗的情况，只有中间用黑线指定的区域做拉伸。

如何制作点九图？相较于普通截图方式，点九图最为明显的区别就是图片不保留内容显示区域且自带一圈不成规律的黑边。正是这圈黑边提供了点九图的各个属性以适应各种情况。

（1）、电子商务。app是企业销售中最直接、最有效的一种，许多电商app加入了社交等元素，加上各种社交平台开发分享，因此用户可以在购买的同时快速分享，在增加自己的销售渠道。（2）、服务品牌。以大型企业为主，承担一些功能，如我们熟悉的快递查询、小区内客服、维修、活动、积分（1）、电子商务。app是企业销售中最直接、最有效的一种，许多电商app加入了社交等元素，加上各种社交平台开发分享，因此用户可以在购买的同时快速分享，在增加自己的销售渠道。（2）、服务品牌。以大型企业为主，承担一些功能，如我们熟悉的快递查询、小区内客服、维修、活动、积分商城等。让你和顾客更近一点。（3）、本地应用程序。企业可以把自己的业务领域分成若能，而本地app最主要的一点就是利用app来发展新客户，维持旧客餐饮企业积累自己的客户资源，有效地打造餐饮企业品牌。简单点来说，1、2部分规定了图像的可拉伸部分，而3、4部分规定了图像的内容区域。当实际程序中设定了对话框的宽高时，1、2部分就会被拉伸成所需要的高和宽，呈现出于设计稿一样的视觉效果。内容区域规定了可编辑区域。例如，对话框是圆角，文字需要被包裹在其内，如果4像3一样顶到两边，文字部分就会被隐藏看不见。

任务实现02

2、任务实现这是项目中一组聊天对话框，可以看出，不同两条消息字数不同，长度也不同，但它们采用了相同的背景样式，这个背景样式其实是同一张图片，用到的就是点九图的方式。

1、先输出普通的png资源，用选区工具选取尽可能多的拉伸部分加以删除。

2、然后将这些内容拼接成一个完整的整体。

3、然后扩大画布大小，上下左右各空出一个像素。如图所示

4、再用一个像素的铅笔工具，铅笔颜色选择纯黑色#000000，不透明度100%，并且图像四边不能出现半透明像素。上下左右分别画点。

4、再用一个像素的铅笔工具，铅笔颜色选择纯黑色#000000，不透明度100%，并且图像四边不能出现半透明像素。上下左右分别画点。

5、按快捷键【ctrl+alt+shift+S】或者点击【文件-存储为web所用格式】，导出格式选择png-24，保存命名注意把后缀修改为.9.png

这里需要特别注意以下两点：1、最外边的1px线段必须是纯黑色，一点点的半透明的像素都不可以有，比如说99%的黑色或者是1%的投影都不可以有。(这1PX像素在程序最终输出的效果中不会被显示)2、文件的后缀名必须是.9.png，不能是.png或者是.9.png.png，这样的命名都会导致编译失败。

谢谢大家观看