将设计稿图标制作成iconfont(ps cs6 + ai cs6)

来源:互联网 发布:一元抽奖的软件是什么 编辑:程序博客网 时间:2024/06/05 16:55

项目开发中需要用到icon,iconfont网站上找的icon风格各式各样,就想着把设计稿的图标直接转成icon就好了。

1、先在ps装一个脚本( save-ps-to-svg1.0.jsx)。放在ps安装目录下的/Presets/Scripts中
参考此篇
脚本放进去后,ps就可以将文件保存为svg格式文件。
这里写图片描述

2、将设计稿的图标切出,单独保存xxx.psd。

3、把icon图层改名为xxx.svg
这里写图片描述

4、将图层save as svg。和psd同个目录下会保存有一个svg文件。(后来再试了一次发现合并的图层不能保存为svg)

5、用ai打开iconfont模板和svg文件。将svg拉到模板上,调整大小使其占满模板(模板大小为16px*16px)

6、此时的svg文件只有图标的路径,要填充颜色后转出的svg才会显示。
这里写图片描述

7、颜色和大小调整好后,再次存储为svg格式,替换之前的svg即可。

8、到iconfont网站上将svg文件上传,根据需求做微调就好了。