第一次怎么画自己想要的icon图标

第一次怎么画自己想要的icon图标##

在做网站的时候避免不了用到矢量图标库,什么是矢量图标库?自己百度吧…
之前图标用得比较少的时候就用bootstrap自带的icon就是Glyphicons,这个我感觉就是那种很经典的,什么关闭,打开,搜索之类的(其实挺多的)

后来图标用得多了之后用阿里得iconfont ,其实我感觉就是开源的图标库,里面的图标超级多,主要是因为,它算是一个平台给每个人都可以创作并上传,所以很多,但是还是满足不了自己个性化,或者自定义的图标

有时候并不是需要那种很复杂的,就是很简单,很清爽的,然后在阿里的iconfont没找到自己想要的,所以我就开始自己画

用到的工具:ai和一个阿里的iconfont账号

我的ai都是当天装的,正式版的好像要钱,我就直接装绿色版的(大家懂的)。

步骤一:下载软件
下载一个ai,我下载的是绿色和谐版的,不要钱,功能好像比正式的少一点(网上说的),但是对于我们这种不是专业搞美工的够了我感觉。
我的ai打开长这样

步骤二:下载模板
打开阿里的iconfont,进入帮助里的图标绘制,往下翻,找到图标制作模板,下载下来。在这里插入图片描述

步骤三:打开模板
下载下的模板直接打开,在里面画就好了。注意如果第一次打开应该默认是100%打开的,你可能找不到面板,调整左下角的百分比,大概调为50%-30%差不多。

步骤四:画图
开始画。左边的工具栏里有一些工具右下角是有一个三角形的,那种就是 里面放了好几个工具,鼠标左键按下停留2秒左右,就会出现其余的收起来的工具。别问我为啥知道,我找圆形工具找了半天才搞懂。
在这里插入图片描述

其实那些工具基本都有快捷键的,第一次用可以记下常用的一些工具,比如 选择工具是v,矩形工具m,直线段工具 \ ,之类的,方便操作。
然后缩放是alt+鼠标滑动,左右滑动是ctrl+鼠标滑动。类似的快捷键很多,我第一次用感觉就这些很常用,特别是v,你在用完一个工具之后,直接点v可以避免继续该工具的继续操作。

还有这个,描边和填充的颜色?自己体会就好了。一般描边6pt就能在正常的网页看到挺细的线条,这个根据自己的需求。
在这里插入图片描述
超级重要的一步:轮廓化描边。
当然:阿里的iconfont里也说了这个是必须的,绘制规则里的都是必须的。
在这里插入图片描述

这个是我自己画的一个手表的图标(模仿华为官网的)
在这里插入图片描述

步骤五:上传+引用

画完之后就是把它另存为svg格式的文件,然后 打开 资源管理->我的图标->上传,直接拖上去,就可以看到了,然后直接下载svg放到网站上看下是不是自己想要的,线条大小什么的都可以继续调整。
在这里插入图片描述

总结:大概的步骤应该就是这样子,适用于初级选手,就像我这样的,因为也搞了一会,也没啥教程,就自己写了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VS Icon图标大全是一个非常实用的资源,它收集了各种用于视觉工作室或设计项目中的图标资源。图标在设计中起着非常重要的作用,它们可以用来增强用户界面的可读性和易用性,也可以用来传达特定的意义和概念。VS Icon图标大全为设计师和开发者提供了丰富的图标选择,能够满足不同项目的需求。 VS Icon图标大全中的图标种类繁多,涵盖了各种各样的主题和领域。无论你想要找到一个简单的箭头、一个具体的物体图标,还是一个复杂的动效果,你都可以在这里找到合适的选择。图标的样式和设计风格也非常多样,无论你喜欢扁平、线框风格还是立体感,你都可以找到适合自己需求的图标。 除了丰富多样的图标选择外,VS Icon图标大全还提供了方便的下载方式。你可以直接在网站上浏览和选择你喜欢的图标,然后通过简单的点击即可下载。对于设计师和开发者而言,这样的下载方式非常便捷,能够节省他们的时间和精力。 总的来说,VS Icon图标大全是一个非常实用的资源库,它为设计师和开发者提供了丰富多样的图标选择,满足不同项目的需求。无论你是正在设计一个网站、一个移动应用程序还是一个社交媒体页面,你都可以在这里找到适合的图标。毫无疑问,VS Icon图标大全将成为很多视觉工作室和设计项目中的必备资源。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值