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

项目开发中需要用到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文件上传,根据需求做微调就好了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值