《AI圆角工具(xtream path)》 《RoundAnyCorner》

教程中用到的所有工具:路径查找器面板,选择工具(V),直接选择工具(A),添加删除锚点(+,-),工具>路劲>偏移路劲,变换操作,外不雅观面板,

我是个快捷键控,能快捷键找到的,鼠标绝对不会移动两下。
但也不是现在立马就要记住全部,用到哪些记那些,多用几次就很自然了。
以是在写步骤的同时也会放快捷操作,以为有用的就试试吧。

初始设置,简化事情

UI图标教程手把手教你用AI绘制一组清新简约的图标

新建文档(Ctrl+N),大小随意,这里是700700px,RGB,分辨率72,新建工具与像素网格对齐不勾选。

下面设置网格线,网格线在AI中是个对付低级和老手都很有用的东西,对付须要把稳大小和比例等这些地方方便很多,还省去添加赞助线的麻烦。

编辑>首选项>参考线和网格,设置如下。
网格大小根据详细设计哀求设置。

视图>显示网格,对齐到网格。
这些都设置好会大大简化事情。

设计之前先定好一个大致规范,这方面是个初学者,不会,自己琢磨的,有履历的可以留言教教哈。

这是一个大概的预设图。
圆半径为80全体圆恰好占用五个32px网格。
图形总元素基本尺寸(单位:px),矩形椭圆宽:20,40,70. 长:60,80. 描边大小:2,4,6 圆角:2,4,6

所有图形尺寸都是基于以下图形的框架。

2. 该设置的设置好了,下面就开始第一个图标吧。

呐,第一个小图标一开始都是由矩形和线条组成的。
详细摆放还有比例问题自己调节。
大略说下做这个图标用到的关键步骤。

首先用到的工具快捷键的切换:选择工具(V),直接选择工具(A),矩形工具(M),椭圆工具(L),Xtream path圆角矩形工具,RoundAnyCorner(之前的微盘有下载)

A:矩形,圆形对齐

关于对齐的问题:在对齐面板的右上角可以选择显示选项,就会涌现如图所示的选项,对齐所选工具,对齐关键工具,对齐画板。
若要使几个工具的间隔指天命值,可利用分格间距功能。

tips:当要将两个物体对齐,希望以个中一个工具为基准对齐择两个工具一起选中,再次左击选择基准工具,对齐,就可以了。

B:制作圆角

Xtream path这个插件中最常用的也就直边转半圆角和圆角工具。
利用很大略,就不先容了。

而对付图中所示的锚点,一边直角一边曲线的就有点难搞。
用AI自身的圆角功能和Xtreampath都不是很好实现,最少我没有创造什么完美的方法。
这里有其余一个工具RoundAnyCorner(屌丝的外表,功能强大~),可以对任意角度曲线化~真棒~

选择其他脚本弹出窗,找到RoundAnyCorner的位置打开即可 (Ctrl+F12)

大略的输入数值就可以了。

对付直线转圆角,直接在外不雅观面板>描边,点击描边选项,弹出框点选择圆角端点就OK。

直线转曲线,直接选择工具(A),选中要转换的锚点点击上图中的曲线按钮。
如果只想调度锚点曲线手柄一边的曲率按住Alt,调度手柄。

问题:但是,当我们把做的icon缩小时,就会涌现以上左边icon的样子,描边设置的大小没有随着缩放而自动缩放。

办理:

方法1

扩展直线段工具或者

方法2

在编辑>首选项>常规,缩放描边和效果选项勾选。

3. 第二和第三个icon把稳事变个方法不再重复,都是上面先容过的用法。
下面讲第四个图标。

上图为weak图标初始组成比拟。
下面分解讲。
有用到相同方法的地方就不罗嗦了。

顶部直线变半圆,下部矩形框底部的两个锚点各向中央点移动八像素。

选中工具在路径查找器面板选择联合

选中底部须要变圆角的四个直角点,利用RoundAnyCorner工具制作2像素的圆角。

下面用瓶子的轮廓制作瓶子的液体。
选中工具,工具>路径>偏移路径(此功能是复制一份原工具再偏移路径,也便是说会有新的路劲出来)设置-4px的偏移

偏移路径之后原来的圆角会变成直角,须要重新选择变成圆角。

删除半圆顶部的锚点变成直线变。
下移10像素。

制作液体的波浪。
利用一个10像素的椭圆如图所示放置,并且路径查找器下合并路径。

再画一个10像素的椭圆,选择路径查找器面板减去前面。

微调路径。

下面说画水点的方法。

将椭圆顶点的锚点换成直角

选中顶部锚点,上移把像素如图所示。

调度顶部锚点手柄变调皮。
再考试测验挑中中部旁边锚点手柄的上部是过度自然。

别的部分都是之前用到的技巧不用再啰嗦了。

欢迎加入UI设计学习群587751709