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

版权声明:本文为博主原创文章,未经博主允许不得转载以及商业运用。 https://blog.csdn.net/ONLYMETAGAIN/article/details/80520365

前言:

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

这里写图片描述
————————————————————————————————————————————————————————————————————————————————————

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

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

1)查看背景

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

这里写图片描述
这里写图片描述

注意:

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

2)我的订单背景

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

这里写图片描述

上图的红色区域是可以不要的,然后剩下的拼合起来
所以就有了下面:

这里写图片描述

切片效果

这里写图片描述

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

所占内存 = 图片长度 * 图片宽度 * 每个像素所占的内存

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

这里写图片描述

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

这里写图片描述

所以才有了如上图的要求

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

2.普通切图区域

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

这里写图片描述

如上图红色区域所示:

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

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

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

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

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

3.需要添加标注宽高

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

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

后记:

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

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

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

展开阅读全文

没有更多推荐了,返回首页