切图是个技术活,小伙伴们千万不能忽视切图的重要性噢,前文介绍了设计的七大元素,那么我们现在来看看在切图之前,我们需要做什么呢?。
1、 和客户端的技术沟通好
用不同的框架来实现的时候,图会有不一样的切法。例如Tabbar是连背景一起切还是单独把icon做成背景透明的,文字是放在图里还是后面加字。
2、 如何切icon式按钮
有一些小的icon式按钮,不能只切到icon边缘,要考虑到最终实现的时候,是把这个图片做成按钮,和用户交互。所以必须要多留一些透明的边,让能点击的图片在88×88以上,这样用户才保证比较好点到。
3、 图片存储格式
如果可以用PNG24就不用PNG32,如果可以用PNG8就不用PNG32。并且用Fireworks优化大小。
4、 对于不改变可见图形而又需要加大点击区域的图怎么切?
切图的时候建议在可见图形的四周都加上1像素的透明,这是为了放大拉伸而不产生可见区域的图像失真。
5、 切图的高度
对于一个通用的背景图,如文字圆角边框背景,那么切图的时候并不是效果图上有多高就切多高,为了通用而是只需切一行文字的高度就可以了。不过这也不是绝对的,准确的说应该切的高度H=paddingTop+textHeight+paddingBottom,及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。
6、 切图的宽度
如果是一个通用的背景图,那么他的宽度应该是他在效果图中的最小宽度,也就是说这个背景可能在多处使用到了,就取最小的那个宽度就可以了。比较麻烦的是铺满全屏的时候,这就需要看看你做的效果图的宽屏宽度,所以说做效果图的时候最好是做小屏幕的效果图。有人可能会问点9的图不是可以拉伸、压缩吗,为什么需要参考最小的宽度呢?根据个人经验发现,一个大图在屏幕小的情况下点9图中拉伸的部分会变得颜色更深。
本文来源:微信[设计着]