svg图标

  大家好!我们现在使用svg已经成为了最近两年的web设计的新趋势,越来越多的前端开发人员要求设计师使用并提供svg图标,svg图标相较于iconfonts有很多很多的优点。对于svg图标的输出,作为一个菜鸟的我以往很菜很麻烦的做法就是遇到图标就用ai去画,然后再导成svg图标,但是,我有一个很不舒服的习惯,那就是在做页面的时候用ps把缺失的icon也画出来,然后就这样的一个切换软件应用,这样是很麻烦的。今天,这个教程就是快速用ps导出svg图标的操作方法,我们大家可以看一看,希望对大家有所帮助。

  大家好!我们现在使用svg已经成为了最近两年的web设计的新趋势,越来越多的前端开发人员要求设计师使用并提供svg图标,svg图标相较于iconfonts有很多很多的优点。对于svg图标的输出,作为一个菜鸟的我以往很菜很麻烦的做法就是遇到图标就用ai去画,然后再导成svg图标,但是,我有一个很不舒服的习惯,那就是在做页面的时候用ps把缺失的icon也画出来,然后就这样的一个切换软件应用,这样是很麻烦的。今天,这个教程就是快速用ps导出svg图标的操作方法,我们大家可以看一看,希望对大家有所帮助。


  操作步骤如下:


  1、下载脚本


  首先,我们需要先下载一个附件里面的脚本文件。

  2、复制脚本


  接下来,我们需要将这个脚本复制到我们电脑上的ps安装文件中,在我们的安装文件中有一个scripts文件夹,把脚本复制进去。

  3、添加svg后缀


  打开你需要转化svg的icon PS文件,首先要保证你的图标绘制规范:为形状工具绘制,命名要规范,然后将添加【.svg】后缀。

  4、快速导出为svg


  你把鼠标放到任意个icon图层上,点击右键,都会看到一个“快速导出为svg”的选项(如果没有,说明脚本没有安装成功,或者ps版本太低)。就是全部选中图标图层,点击右键依然会有“快速导出为svg”的选项(此刻无法截图),毫不犹豫地选择他,然后保存到指定的文件夹。接下来打开那个保存的文件夹。

  以上的内容就是快速用ps导出svg图标的操作方法了,不知道各位小伙伴看了以后有没有什么感觉呢?是不是感觉一点儿也不难!有兴趣的小伙伴可以动手试一试!好了,我们今天的分享就到这了,大家下次再见!


  本篇文章使用以下硬件型号:联想小新Air15;系统版本:win10;软件版本:Adobe Photoshop CS6。

特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了43,659
并提交了226份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证