关于设计过程中优化Svg

SVG(Scalable Vector Graphics),中文名可缩放矢量图形,能够很好地处理矢量图形和可编程性的矢量。这两年来SVG渐渐成为了web设计的趋势,越来越多的被用在了响应式网页设计中,我相信不久的未来也会广泛普及于移动端领域。

设计师要站在潮流之上,不懂得学习的设计师一个浪打过来的时候就不知所踪了

不同于UI设计中切出png图直接给开发就完事,SVG文件是一种图像文档格式,设计师在图像处理软件中所作的各种效果都会直接影响最后SVG文件的代码。所以如果设计师对代码没有基本的了解、或是与开发人员没有足够的沟通,有可能就会导致辛苦处理好的图形导出SVG后生成的代码过于复杂,最终不能使用于开发工作。

为了得到整洁的代码和省去不必要的麻烦,以下几点大家要用小本子记下来:

1.SVG输出时,画布大小要和内容大小相一致。

切过图的都知道,开发人员在嵌入图像时会给图像一个高度和宽度,这个高度和宽度就是图像在设备中的显示框,在图像处理软件中,这个显示框就是我们的画布了。如果画布过大,留白过多,那么在嵌入后会导致图像变小。

AI中让画布与内容一致的方法:

PS:鉴于隐藏图层也会影响生产SVG的大小,故我们需要先对所要图像单独进行切图得到PSD之后再导出SVG。

如何从PS快速导出SVG传送门

2.尽量使用基本图形创建图像,较少手动路径。

这一点AI和PS中一致,尽量都选择基本图形(自定义图形也不要用)进行简单的布尔运算就好。

之所以大家都推崇基本图形,在于基本图形的图形元素可读性和可维护性相比于路径图像高,而且基本图形的代码量比起路径图像要少很多,让开发少敲一点代码,就是延长他们的生命,救人一命胜造七级浮屠。例如圆形circle,几个简单的代码:x,y,cx,cy就可以完全控制,而路径形成的圆则需要一大长串代码去定义、控制。

3.尽可能的简化路径。

迫不得已实在要使用路径时,也一定要记住尽量简化路径,减少路径点。目的还是减少代码量和文件大小,(这些都是开发的生命和公司的钱啊)。

AI中简化路径办法有两种,一种是使用AI自带的简化工具:对象-路径-简化;另一种是使用AI中的平滑曲线工具(如图)。另外也可以通过一些插件,例如VectorScribe等来实现路径的优化。

优化前后的路径

平滑工具的位置

PS里没有这项功能,需要的话导入到AI中再行操作。

4.使用SVG滤镜,而不是PS滤镜。

AI中(需要使用效果得就不要去PS里画了):当我们在AI中为图像做一些效果时,通常会选择PS滤镜,这时候AI会将这些效果自动生成并形成栅格图片,导出SVG后这些栅格图像也会继续嵌入,而非程序员想要的一串简单的代码,为了安抚程序员幼小的心灵,这时候我们要使用SVG滤镜。

另外编程厉害的同学也可以使用新建滤镜工具自行编辑滤镜。

5.和你的程序员沟通

沟通带来和平,沟通带来效率。没事的时候带上俩袋瓜子和凉茶找你的程序员唠唠嗑,聊一聊你对图像文件的命名原则、聊一聊保存svg时的各种参数、聊一聊图像中哪些部分需要扩展轮廓(记得简化路径)以减少路径点等等,你觉得有必要聊的一切都要问程序,不要等他来问你。

要记得,你可是一个优秀的设计师!

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部