ps版本:2020
借鉴文章:https://blog.csdn.net/k912120/article/details/118787809
事情起因是我不想多此一举下个AI,本来想ps直接导出svg格式,但是导出来上传到iconfont后却是一片空白,相信很多人第一次都遇到过这种情况。
我一愣,然后打开svg代码看到内容却是这样,怎么会有image标签
当然了,也不是说这种不能用,只是不能用于iconfont上传相对于我们正常的svg
下面正式开始
1. 准备修改的图片
因为我是想稍微修改一下iconfont本来的一个图标,所以我就直接点击那个图标的AI下载(主要是为了清晰度,png的话对于我来说虽然能用,但是清晰度不够)
2. 打开ps,载入图片
如果是AI的eps,导入时会有栅格化提醒
模式记得选择RGB颜色
3. 点击魔棒工具,或者快速选择工具,将整个图案选上
如果是png或者jpg格式的话,现在缺点就暴露出来了,就是区域模糊。这里我放个对比就知道了
- AI的eps
- png格式
4. 建立工作路径
图片上右键,然后点击建立工作路径
会有一个弹框,我直接写的1.0
- eps
- png(如果图形简单,你也可以再用钢笔工具稍微描好点)
5. 设置自定义形状
点击左侧工具栏钢笔工具,在图片区域右键点击定义自定形状
会有个弹框,随便命名
6. 矩形工具
点击左侧矩形工具,选择里面的自定形状工具
这时能看到上面有我们刚创建的自定形状,没有的话点击旁边的小三角也会看到,然后选中
7. 创建自定形状
点击一下画布区域,弹出创建自定形状
8. 得到路径图形
点击确定就得到一下和我们原本图形一样的图形
一般位置都不是对齐的 ,这时我们需要用工具栏的移动工具将两个图重叠
9. 导出
点击 文件 - 导出 - 导出为
弹框里面 格式选择SVG ,写好合适的尺寸,就可以点导出了
10. 结尾
这时我们看代码就有path绘制了
当然,这个image是你最开始载入的图形(严谨的话,你也可以在导出的时候删掉那个图层,或者删掉这里的image,其实我们需要的只是后面的那个形状图形)
此时,上传iconfont就完全没有问题