如何用AI制作线性图标

前天在手机里看了张碧晨的极光演唱会,感觉小姐姐唱歌好听,长的又好看,会说好几种国家的语言,还会弹钢琴。这样优秀又努力的女孩子真是好迷人。所以啊,哪个行业不是如此呢,一定要狠狠的努力,才会成为自己想要变成的样子啊。

第一次正儿八经也教程,写给自己看,总结给自己看,大神轻拍(先立个flag吧,一周最少写一篇)


虽然说AI是矢量绘图软件,PS是位图软件,但是PS同样也可以做矢量图形。当我们切图给前端小姐姐的时候,我们输出的是png。png是一种位图格式,所以放大缩小的时候还是会有一定程度上的失真。所以怎样解决这个问题呢,目前,很多公司都已经不切png了,而是输出一种叫svg格式的矢量图,我就很好奇前端是怎样用css来改变svg的样式的,所以我决定这周来好好研究下。 (我好像说跑题了哈,马上回来,嘿嘿~)

AI做图标的好处还是挺大的,就拿我这个长年都是cpu占用率高达90%的电脑来说,用AI做图标算是个福音了。打个比方,如果我要做40来个图标,用PS做的话,在电脑卡死的同时文件大小也得有70多M,如果用AI做的话,就会很流畅,文件大小可能就20M左右。操作起来也是比较方便的(个人觉得)。

以下是正式内容

上图为今天要介绍的几种小图标


图标一:

上传

在AI中,对应的布尔运算叫做“路径查找器”,

路径查找器


1.用四个圆和一个矩形拼成云彩的形状


2.选中路径查找器中的联集后,用钢笔工具去掉多余的锚点。


3.用矩形工具画一个矩形,拖动白色圆圈做出如下图所示的圆角矩形


4.使用小白工具把多余的锚点都删掉,如下图


5.使用剪刀工具将云彩底部不要的部分都剪掉。


6.将以上图形拼成如下图所示,即完成。

图标二


消息


1.画一个矩形和直角三角形。


2.同时选中以上两个图形,使用路径查找器的联集,做出如下图。


3.拖动白色小圆圈,做出如下所示的圆角。


4.用圆形工具画出三个小圆点,即完成。

图标三:


刷新


1.用圆形工具画一个圆形,再用矩形工具按照图标1的方法画出两个箭头的角角


2.用剪刀工具把不要的部分删除掉,即完成。

图标四:


购物


1.用矩形工具和圆形工具做出如下图所示的形状


2.使用小白工具将不要的地方删除掉。


2.用圆形工具,做出如下图。


3.使用剪刀工具将不要的部分删除,即完成。

图标五:


喜欢


1.用两个圆和一个等腰三角形拼成如下图所示的形状。


2.使用路径查找器中的联集,做出如下图所示的形状。


3.使用钢笔工具删除不要的锚点,调节两侧杠杆,并调节圆角大小,即完成。

图标六:


设置


1.先画出两个圆。


2.现在圆环顶部画一个圆角矩形。


3.选中顶部圆角矩形后,按R键,出现绿色的中心点,将其拖至圆环中心。


4.按住alt键在圆环绿色中心点的位置单击一下,出现以下弹框。


5.在“旋转”弹框勾选预览,同时将角度改为45°,并点击“复制”按钮。


6.按下ctrl+d,复制6次。


7.将外环和周围8个圆角矩形同时选中,按下路径选择器的联集,出现下图。


8.调节外层拐角处的白色小圆圈,即完成。

其中,“设置”图标的难度系数最大,一定要让绿色的点点在圆环的中心位置上,不然就要跑偏了。

值得注意的是,当我们在设计一整套图标的时候,一定要保证他们的统一性,诸如线条粗细,整体大小,颜色等。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,978评论 25 709
  • discardableResult discardableResult:忽略函数的返回值 inout 说到inou...
    初光夫阅读 4,055评论 0 50
  • 午加餐:面包晚水果:西瓜 参考目标: 1份豆2份肉3份“新鲜”水果4份谷物/薯5份蔬菜,深绿色叶菜最好6杯水 今日...
    静趣_儿童心理师阅读 1,310评论 0 0
  • 浏览器内编译 1. 直观体验 自定义标签需要编译成 JavaScript 后才能在浏览器中运行。你可以在scrip...
    果汁凉茶丶阅读 4,761评论 0 1
  • 你们听这不义之官所说的话。神的选民昼夜呼吁他,他纵然为他们忍了多时,岂不终久给他们伸冤吗?我告诉你们,要快快的给他...
    我就是大怪兽阅读 6,752评论 0 0

友情链接更多精彩内容