用户看到的产品界面并非设计师呕心沥血创作的效果图，而是将一个个单独的切图经开发和组合技术实现的。切图作为设计师与开发者之间的“桥梁”，它的作用很关键，合适的切图、精准的位置可以最大限度地还原效果图的设计，精妙的切图更会有事半功倍的效果。

1.设计中需要切出来的元素

APP界面由状态栏、导航栏、标签栏及内容区域组成，如图6‑26所示。其高度尺寸如表6‑1所示。

表6‑1 APP界面不同区域的高度尺寸单位：PX（像素）

一个APP需要切出的元素有图标、按钮、标签、Logo等，如图6‑27所示。

图6‑26 组成部分

图6‑27 需要切出的元素

2.点九切图</ID=11>

我们经常会做一个俗称“点九”的切图，什么是“点九”呢？“点九”是Android平台处理图片的一种特殊形式，由于文件的扩展名为“.9.png”，所以被称为“点九”。“点九”也是在Android平台多种分辨率需适配的需求下发展出来的一种独特的技术。它可以将图片横向和纵向随意进行拉伸，而保留像素精细度、渐变质感和圆角的原大小，实现多分辨率下的完美显示效果，同时减少不必要的图片资源占用，可谓切图利器。

它相当于把一张PNG图分成了9个部分（九宫格），分别为4个角、4条边，以及一个中间区域，如图6‑28所示。4个角是不做拉伸的，所以能一直保持圆角的清晰状态，而两条水平边和垂直边分别只做水平和垂直拉伸，所以不会出现边会被拉粗的情况，只有中间用黑线指定的区域做拉伸，结果是图片不会走样。

智能手机中有自动横屏的功能，同一幅界面会随着手机(或平板电脑)中方向传感器的参数不同而改变显示的方向，在界面改变方向后，界面上的图形会因为长宽的变化而产生拉伸，造成图形的失真变形。

大家都知道Android平台有多种不同的分辨率，很多控件的切图文件在被

图6‑28 分成了9个部分

放大拉伸后边角会模糊失真。在Android平台下使用点九PNG技术可以将图片横向和纵向同时进行拉伸，以实现多分辨率下的完美显示效果。

如图6‑29所示，普通拉伸和点九拉伸的效果对比很明显，使用点九PNG技术后仍能保留图像的渐变质感和圆角的精细度。

图6‑29 拉伸对比

3.在Photoshop中绘制点九切图

了解了点九切图的原理，下面来学习点九切图的绘制方法。

01 打开绘制好的图，使用“裁剪工具”沿着图片边缘裁剪，如图6‑30所示。

图6‑30 裁剪后(www.daowen.com)

02 执行“图像”|“画布大小”命令，如图6‑31所示。

图6‑31 执行“图像”|“画布大小”命令

03 弹出对话框，将宽度和高度均增加2px，如图6‑32所示。

图6‑32 修改画布大小

04 确定后效果如图6‑33所示。

图6‑33 确定后的效果

05 查看图中的可拉抻区域，即不包括圆角、光泽等特殊区域，如图6‑34所示。

图6‑34 可拉伸区域

提示：如果不能确定某一区域是不是可拉伸区域，可以在绘制之前将图片的该部分拉伸一下试试，如果图片出现了失真，该区域就是不可拉伸区域。

06 设置填充颜色为黑色，使用“画笔工具”对图片四周的透明区域进行绘制填充，如图6‑35所示。

图6‑35 绘制效果

07 执行“文件”|“存储为Web所用格式”命令，在打开的对话框中设置优化格式为“PNG‑24”，如图6‑36所示。

图6‑36 设置优化格式

08 单击“确定”按钮，在打开的对话框中设置文件名称，其扩展名为.9.png，如图6‑37所示，即完成了点九切图的绘制。

图6‑37 修改文件名称

提示：上部为横向可拉伸区域，左侧为纵向可拉伸区域，这两个部分按照可拉伸区域的特点确定黑色条纹的长短，下方为横向内容区域，右侧为纵向内容区域，内容区域的意思就是如果这个按钮是一个窗口，右下两区域延伸成为的长方形就是可以显示内容的区域。

提示：手绘的黑线拉伸区颜色必须是#000000，透明度为100%，并且图像四边不能出现半透明像素，否则图片不会通过Android系统编译，导致程序报错。