点九图是什么-【UI】关于点9切图

第一步:

首先在打开Photoshop,画一个按钮,边框1px,半径5px,填充渐变,一个按钮就画好了。

第二步:

用铅笔工具,一定要铅笔工具,在按钮边框外设置进行黑色标注,直接拉,如图效果:

给大家普及“点九”知识,为什么要这样标注?

简单来说,如图,1 、2规定了图像的拉升部分,而3、4部分规定了图像的内容区域。当实际程序中设定了对话框的宽高时,1、2部分就会拉伸到所需的宽高,呈现正确的视觉效果,如果按照上图的标注,就会出现如下效果:

所以标注“点九”图片的时候不要将无法显示的区域标注上去。

点9即 .9 ,是Andriod平台的应用软件开发里的一种特殊的图片形式,可自适应调节图片大小,常用于对话框

背景图片

中,背景随着聊天对话文字的多少进行横向,纵向,横纵向拉伸。

文件扩展名

为:.9.png,是一种特殊的

文件格式

。在UI切图过程中,

UI设计师

往往需要切.9.png格式的图片给开发人员,下面具体介绍如何制作点9切图。

相当于把一张png图分成了9个部分(

九宫格

),分别为4个角,4条边,以及一个中间区域。具体如下图:上方2区域表示横向拉伸的区域,左边4区域表示纵向拉伸的区域,下方8区域表示横向显示内容的区域,右方区域6表示纵向显示内容的区域。区域1,3,7,9代表不被拉伸的区域。

制作点9切图的方法有很多种,在这里具体介绍两个工具。一个是手机软件NinePng九图神器,另一个则是电脑软件draw9patch。个人觉得NinePng使用起来更加方便,具体使用方法将以一个例子进行说明。如下......

以聊天背景为例,如下图

作为聊天背景图,要保证四个圆角及右边

三角形

不变。横向拉伸时,保证四个圆角不变即可,所以只需标注圆角以外的区域。纵向拉伸时,要保证三角区域及圆角不变,所以需要在除三角区域及圆角区域以外进行标注。内容显示区域,横向显示需具体标注效果如上图;具体效果见下图

以上......

一、使用Photoshop绘制点九的方法。

确定切图后直接改变图片的画布大小,

手动将上下左右各增加1px

使用铅笔工具,手动绘制拉伸区域,色值必须为黑色(#000000)。

存储为web所用格式,选择png-24,储存时手动将后缀名改为.9.png

不过这种方法的缺点是不能实时预览,判断并测试拉伸区域的准确性。

使用此方法需要注意以下2点:

1. 手绘的黑线拉伸区必须是#000000,透明度100%,并且图像四边不能出现半透明像素;

2. 你的.9.png必须绘有拉伸区域的黑线。

二、什么是点九。

1、“点九”是andriod平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png。

其实相当于把一张png图分成了9个部分(九宫格),分别为4个角,4条边,以及一个中间区域。

2、示例

这张图只有中间用黑线指定的区域做拉伸。

1号黑色条位置向下覆盖的区域表示图片横向拉伸时,只拉伸该区域

2号黑色条位置向右覆盖的区域表示图片纵向拉伸时,只拉伸该区域

3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域

4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域没有黑色条的位置覆盖的区域是图片拉伸时保持不变(比如,如果图片的四角为弧形的时候,当图片 被任意拉伸时,四角的弧形都不会发生改变)

转自网页: