我的页面切图[美工专用]

前言：

作者很忙，省略，该文章写的过于佛系，专用于美工小姐姐们专用，美工的切图在很大的程度上决定了app布局的质量

————————————————————————————————————————————————————————————————————————————————————

1.美工提供.9图之前图片【上图蓝色框画出来区域】

所谓的点九图就是android专用，可以左右上下拉伸，注意是只有android才有

1)查看背景

经过分析我们知道查看背景图片是可以拉伸的，也就是中间部分，所以切图就是除去中间像素，具体操作如下：

注意：

美工在做图的时候，肯定是透明图层，中间字也是去掉的，去除左右透明区域，按照中间轴对称做图[防止因为文字陷阱而出现的对接问题，很麻烦的]，如果改图上面线条为非可拉伸区域，就不可作为点九图，而是切整体图，去除中间文字图。

2)我的订单背景

经过分析我们知道我的订单背景，上下左右都可以拉伸，也就是下面的分析：

上图的红色区域是可以不要的，然后剩下的拼合起来

所以就有了下面：

切片效果

很多美工都不知道为什么要这么做，对于android内存来说，android图片的算法是：

所占内存 ＝ 图片长度 ＊ 图片宽度 ＊ 每个像素所占的内存

任何一张很小的图片，都会产生很大的内存，顾开发不仅要自己在tinypng网站上面压缩图片，适配算法，还要用代码压缩图片，下面提供一张这样做，可以实现什么效果的效果图，哎

如果一张图片不是点九图片，被拉伸之后，如下：

因为本图片本身不适合做点九图，这里就做成箭头在任何大小下都不变形的效果，做成点九图之后：

所以才有了如上图的要求

————————————————————————————————————————————————————————————————————————————————————

2.普通切图区域

上图紫色区域为普通切图区域

如上图红色区域所示：

1)我的订单3张切图大小一样，然后横向居中，竖向居下即可

2)积分充值等这几张切图，就是大小一样，然后横向居中，竖向居中

3)我的订单上面，个人信息背景也是需要切图的，即文章开头红色宽框圈出来的位置大小

注意：这里的切图大小指的是图片尺寸，宽高，

————————————————————————————————————————————————————————————————————————————————————

3.需要添加标注宽高

红色区域，需要美工小姐姐标注红色区域宽高，一切手机适配都是算法，需要宽度和高度的支持

————————————————————————————————————————————————————

后记：

1,1像素的成败，1像素偏差很小，然而布局出来偏差就更大，手机越高级，看出来的偏差就越大

2.点九图，不要不想切，否则你为难的不只是开发，性能要求高了，那大家都从新做被

3.平时的一个小设计不出设计图，当你有很多端的时候，你会发现，最后没有标准，大家都做的对，这就最后，大家一起重新写