使用 Photoshop工具直接导出 svg路径 |
您所在的位置:网站首页 › ps自制笔刷怎么导出图片 › 使用 Photoshop工具直接导出 svg路径 |
最近做某个小项目,项目中用到了很多 icon 图标,我一般都是习惯于直接引用各大图标库,例如 fontawesome、Ionicons、MaterialCommunityIcons等。 由于最近也在关注 SVG方面的东西,所以我突然想到有些很简单的图标,其实是可以通过 SVG绘制的,一般做这种的事情得工具应该是 Adobe Illustrator,但是因为电脑上只安装了 PS,也懒得再安装一个消耗那么大的软件,所以想着能不能使用 PS完成这件事。 网上关于 PS直接导出 svg路径的文章很少,而且基本上都是相互抄,并且语焉不详,没些踩坑的耐性很难看明白到底说的什么,不过好在最终都被我一一解决了,整理如下。 工具: Adobe PhotoShop CC 2015 64bit 脚本文件首先,需要下载一个脚本文件 save-ps-to-svg1.0.jsx,关于此文件的最新信息,可以到 官网查看,将此文件放到 PS 安装目录下的 /Presets/Scripts 文件夹中,如果放置脚本的时候 PS是打开状态,那么可能需要重启一下。 PS 绘制 搞定好脚本之后,打开 PS,新建图层: 图层新建好后,就可以绘制了不过这里需要注意的是, 无论使用什么工具,想要转换成 SVG路径,那么都必须要是使用形状工具绘制出来的图像才可以, PS中的形状工具很好找,下面的几个都是: 这里演示是使用 自定义形状工具,选择了一个气泡形状,在图层上拉一下,画出一个简单气泡: 保存文件保存整个文件,使用默认设置即可: 导出 svg路径文件保存好后,接下来才能对图层进行转化,鼠标在图层的名称上双击,重命名为以 .svg为后缀结尾的名字,例如 tosvg.svg: 重命名完毕后,依次点击 文件–>脚本–>Save as SVG,即可在保存psd文件的相同目录下输入一份以 .svg 结尾的文件: 目录中的 .svg 文件: 查看文件使用编辑器打开 以.svg结尾的文件,在文档的底部,可以看到形状的 path 路径(虽然有些不规范): 图层合并使用形状工具的时候,鼠标的每一次绘制就会产生一个图层,若是直接选中所有图层右键选择合并图层选项,那么输出的 svg 路径其实是将所有的图层一个个输出,而不是输出图层相交之后的结果。 想要输出图层相交之后的结果路径,首我们可以选中所有图层,在工具栏中选择 减去顶层形状(或者其他选项也可以),最后点击 合并形状组件,这样一来,所有的图层才能彻底合并,使用脚本输出的路径才是合并后图层的路径。 两个问题 输出的路径不规范有时候,输出的路径会是下面这种情况: 每一条路径的后面都有一个字母, 这些字母的大概含义如下: M = moveto(M X,Y) :将画笔移动到指定的坐标位置 L = lineto(L X,Y) :画直线到指定的坐标位置 H = horizontal lineto(H X):画水平线到指定的X坐标位置 V = vertical lineto(V Y):画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线 S = smooth curveto(S X2,Y2,ENDX,ENDY) Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线 T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射 A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线 Z = closepath():关闭路径根据上述,图中 .svg路径中的字母 m 和 L 我们都知道是什么意思了,但 Y是什么鬼? V 为什么给了四个数字参数? 很明显,这其中定然有什么我们不确定是不是 bug的 bug 如何解决 首先可以确定的是,那些字母是错的,但是字母前面的路径是对的。 我的方法是自己根据情况,将那些字母替换成合适的字母。 例如,我所绘制的形状是存在曲线的,二次贝赛曲线Q一共四个参数,所以我们可以路径中的字母 Y 和 V 换成 Q,我试了一下,确实是可行的。 形状翻转将 .svg 中给出的 path路径整理为合乎规范的 path路径,放到 html文档中在浏览器中查看,然后与原图对比,左图是我们希望看到的,结果如下,右图是根据 .svg文件中给出的路径得到的: 稍微对比一下就可以看出,右边的气泡沿着 X轴翻转 180° 才是左边我们真正想要的。 如何解决? 我的办法是,既然右边的气泡沿着 X轴翻转 180° 才是左边我们真正想要的,那么我们就手动把它翻转一下好了。 X坐标是不用动的, 需要我们手动变动的只有 Y坐标,随便写个翻转 Y坐标的 JS 函数,把 .svg文件给出的 path 路径输入即可,JS函数示例如下: let reversePath = (path, svgHeight)=> { let arr=path.split(' ') for(let i=0;i |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |