Illustrator教程:详细解析AI网格工具的使用(2)

UI / UI设计教程 / UI图标教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词


另外,还有一种办法来创建网格,就是利用AI的矢量效果中的变换效果,比较适合用来创建事先已经确定了单元格长、宽的网格,不过不能做出上面那样的「版式网格」。再举个例子来看一下:给一个960×640的文档打上单元格大小为80×24的网格。

首先,当然依旧是新建一个960×640大小的文档,关掉像素对齐。然后,用直线工具,在画板的顶端画一条直线,如图:


(为方便查看,我把直线的宽度设定成了2px,FF0000红色。实际使用中,不必设置线条颜色和宽度,并且,没有特殊原因的话,应避免使用FF0000红色)

然后,选中这条直线,加上一个「变换」效果,弹出的对话框中做如下设置:


Illustrator教程:详细解析AI网格工具的使用,PS教程,思缘教程网

在这个对话框里,「垂直」一项即为我们希望的网格单元格高度,「副本」一项是网格单元格的数量。如果要是懒得手工算的话,可以勾选「预览」选项,用鼠标滚轮或触控板调整「副本」一栏的大小。

点击「确定」后,画板应该是类似这样:


Illustrator教程:详细解析AI网格工具的使用,PS教程,思缘教程网

然后,选中直线,执行命令「扩展外观」两次,将「变换」效果应用:


Illustrator教程:详细解析AI网格工具的使用,PS教程,思缘教程网

接着,取消这个对象的编组,全选取消编组后的所有直线,最后再执行命令「建立参考线」就可以了(具体方法可查看上篇教程:使用AdobeIllustrator做UI设计——灵活使用参考线):


Illustrator教程:详细解析AI网格工具的使用,PS教程,思缘教程网

竖线同理,画直线,使用「变换」效果复制,使用「扩展外观」命令应用效果,取消编组两次,建立参考线:


Illustrator教程:详细解析AI网格工具的使用,PS教程,思缘教程网

Done.

为什么没有说AI内置的网格效果(即使用快捷键[Cmd]+[']开启的那个)?因为那个网格是AI的全局设置,并不是基于文档的。如果不同的文档使用了不同规格的网格,那么每次切换文档时都在首选项里改变设置。因此,这个功能基本上是鸡肋。

 收藏