其实很简单,首先电脑有 AI,其次你会做 png 图片就可以了。

非底色图

1、首先电脑上装好 Ai 软件。

2、其次制作一张 png 格式的透明底的图片,尽量把像素调大一点(例如 2000*500),这样描慕图片时才会清楚。

3、打开 Ai,直接把 png 图片拖拽进 Ai,选中,点击图像描慕功能。预设选择低保真度照片,外观中的描边去掉。

(注:这里有个问题,如果你图片中有纯白色,那么描慕时会把白色完全融入到背景中,因为背景默认是白色,也就是说图片中白色的内容被软件吃掉了,可以利用下文的「底色图」方法解决)

4、利用左边的矩形工具,随便画一个矩形填充为白色,然后把尺寸调整为 200*50 ,也就是缩小尺寸比例让内存变小。

5、把描慕后的 png 图片缩小为 200*50,对齐边角放在白色的矩形上面。(放的时候矩形会在上面,右键置底就行了)

6、选中图片,点击拓展;左边选择直接选择工具双击白色部分,把原来的底往上托走删掉。这样做出来的svg图片是纯图片也就是没有尺寸,用起来比较麻烦,它更适合一个小图标的制作方法。

如果需要尺寸的话,底色不要删除,导出后打开svg文件,在前面<style>.a{fill:#fff;}</style>里,我们把fff改成ff00这样表示透明底的意思。这样既有了尺寸又有了透明底。

7、文件-导出-导出为,格式选择 svg 即可。Ai 2018 测试得出,按照以下 SVG 选项导出的文件最小:

  1. 样式:演示文稿属性 (次要影响)
  2. 字体:SVG (主要影响)
  3. 图像:随便选一个 (完全不影响)
  4. 对象ID:最小 (主要影响)
  5. 小数:默认是 2,如果改成 1 文件会更小,但会不精准,但也不是很不精准,按需选择吧。缩小、响应都勾上别管它。

写这个教程是因为我的电脑浏览器主页今天换了一个 logo 图片,之前做 svg 图片是加群请教别人的,现在间隔时间太久有些步骤记不清了,好在研究之下最终做好了 logo ,为了防止以后又换 logo 不会做 svg 图片,所以记录下方法。

底色图

假设你做了一个 200*50 的绿色背景的图片,此时你直接拖到 Ai 里进行图像描慕,会把绿色的背景也描进去,所以图片会产生尺寸。

所以就不用上文这么麻烦,直接把图片拖进来后点图像描慕,然后把尺寸缩小一点,就可以导出了。

导出以后打开 svg 图片,把背景色改成ff00就是透明色了。

不过这个方法只针对非文字,比如一个图案上有白色部分,而这白色是你需要的,改成透明后它会保留。

对于文字来说,难免会有闭合状态比如「口」字,描慕后口字内部会改变性质为图层颜色也就是绿色,把底改成透明这个步骤已经影响不到它了,所以会有些问题。

目前还没有好的解决方法,其实有不过需要 Ai 知识去抠图,我不会。

没有白色文字的图用「非底色图」方法做,有白色文字用「底色图」方法做。