Apr11

Adobe Illustrator 制作 SVG 格式网站 Logo

svg

制作SVG版logo之初,是看到CSS-TRICKS的logo感觉很酷,然后做完发现一个显著的优点:在自适应的网页中,无论怎么缩放网页,logo都是那么鲜艳欲滴,没有可恶的虚化或者马赛克感。至于大小,这个不一定,简单的图案、简单的颜色可能小,但是我制作的logo居然比原来大了三倍,由4k变成了13k,压缩后还有11k,因为是几个汉字,笔画太多,太复杂了。后来做了个返回顶部的svg,图形规则简单,颜色单一,减少到一半。

要点摘录:

1.把png转为矢量图:用illustrator(我的是cs5)打开png文件,Object(对象) – Live Trace(实时描摹) – Tracing Options(描摹选项),需要的话把mode修改为彩色,把其他数值调到最小。

illustratorssss

(但是效果还是不够理想,接受程度就看你的要求了,我重新用AI做了一次logo,好在不复杂)

2.Ai另存为svg格式文件:要用Shift+O(字母),将图形外部不需要的裁剪掉,另外要把不需要的图层,比如导入的png删掉,否则svg文件会链接外部png文件。

3.压缩SVG文件:可以用写字板把ai自动生成的版权删掉,然后用梯子到SVG优化压缩。

4.网页logo用法:我用的css多背景图技术,浏览器如果支持多背景图,也会支持SVG,所以代码如下:

#logo {
  background: url(logo.png);
  background: url(logo.svg), none;
}

参考教程:Using SVG

Comments are closed.