html 显示ai 矢量图,PS图层文件转变为AI矢量图

有朋友问我，我博客的logo“威”怎么做的。当然是PhotoShop做的，不过不同的地方使用时用的大小不一样，如果都用PhotoShop去做的话效率有点低，不然就是做一个特别大的版本，其他地方缩小来使用，但是那样边缘容易失真，不是很好。

这个时候矢量图就很有必要了。不过我PhotoShop熟悉一些，Adobe Illustrator就几乎完全不懂了，让我单纯在AI里面做就做不出来了。只能通过PS图层转AI来实现我要的矢量图了，方法还是很简单的。

1、首先得有一个图片，比如我之前设计的logo“威”。

2、选择魔术橡皮擦工具等工具，擦除不需要的部分，留下logo主体。

3、选中logo主体，切换至路径，然后点击“从选区生成工作路径”(下图右下角圈出来的)。

4、生成工作路径

5、导出工作路径，文件-导出-路径到Illustrator…，选择工作路径并保存起来。

6、这个时候就可以使用AI打开刚刚保存的文件了。打开看到的全部是白色的，用选择工具全选画面会出现图标轮廓。

7、然后你也可以填充颜色。

8、还可以导出为svg格式的文件，如果你会CSS，配合CSS3能够做一些动效，做一些不同样的效果。