超全面的UI设计切图规范指南(附切图神器)

  • A+
所属分类:设计百科

降低切图大小的方法

1.点九切图法

点九切图是安卓平台独有的图片处理方式,因为文件扩展名问.png所以被称为点九切图法。点九切图的作用主要是为了适配安卓多种多样的手机机型适配,这种方法可以将图片进行横向和竖向的随意拉伸,并且不会损坏图片效果。另一个重要的作用就是可以减少不必要的图片文件大小,极大提升页面加载速度。是安卓平台重要的切图方法。

制作点九的软件是“draw9patch”可以很方便的制作点九图并且可以预览切图后的开发效果十分方便。设计师的话也可以在ps中用铅笔工具绘制点就图。

详细切图方法网址:

案例示意:

横向拉伸只需在可拉伸区域内做黑色标记即可,外围投影标记黑色线即可

超全面的UI设计切图规范指南(附切图神器)

横向竖向拉伸只需在可拉伸区域内做黑色标记即可,外围投影标记黑色线即可

超全面的UI设计切图规范指南(附切图神器)

2.在线压缩图片工具“tinypng”

利用“tinypng”智能png和jpg在线压缩工具,将较大的图片切图在不影响图片质量的情况下压缩。tinypng在线压缩工具可以在图片质量和文件大小上找到一个完美的平衡,基本不会降低图片视觉质量但却会极大的压缩图片切图大小。tinypng是非常值得推荐的图片压缩利器,也是现在被运用最广广泛的在线压缩工具。

tinypng网址:

超全面的UI设计切图规范指南(附切图神器)

压缩图片效果范例:

一张透明png图片原大小57kb在经过压缩后变为15kb,图片大小直接减少74%,但是图片效果用肉眼基本分辨不出区别。不得不说tinypng的智能压缩效果是如此神奇。

超全面的UI设计切图规范指南(附切图神器)

使用方法简述:

1.在红色框内点击去本地选择你想要压缩的图片文件,每次最多上传20张图片,每张图片总大小不超过5mb

超全面的UI设计切图规范指南(附切图神器)

2.点击红框内的下载按钮下载单个已经压缩过的图片,如果你有上传多张图片你可以选择点击全部下载按钮一次性下载所有压缩的图片。在下方现实的是本次压缩的大小占比,你就可以很明确的知道它的作用了。

超全面的UI设计切图规范指南(附切图神器)

3.恭喜你你已经完成压缩了

历史上的今天:

发表评论

您必须登录才能发表评论!