当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >使用illustrator做UI设计

使用illustrator做UI设计

发布时间：2018-11-17 19:57:24

参考线是做版式设计、Web设计和UI设计的重要工具，用来保持版面元素之间的一致性与协调。在AI里，创建参考线有数种办法。

第一种办法与PS类似，按Cmd+R，显示标尺，然后点击标尺，将参考线从标尺上拖拽出来，对齐到想要对齐到的对象上，如图：

这样，参考线就建立好可以使用了：

另一种办法更加灵活，AI可以将任何线条转化为参考线。横着竖着斜着的直线都可以转为参考线，甚至画个圆也可以转成参考线。这次，用实战来举例：创建一个iOS 7图标模板：

可能很多人都知道了，相对于以前版本的iOS 7的图标形状有两点改变：

1. 在iPhone 、iPod touch上，由原先的114×114px (57×57pt) 变为120×120px，不再支持非Retina屏幕：

2. 使用纯粹的圆角看上去会觉得圆角与直边连接处很「硌硬」，iOS 7使用羊角螺线作为缓和曲线解决了这个问题，因为羊角螺线的曲率变化更加平滑。其中缓和曲线「圆角」大小约为38px。如图：

知道这些后，我们需要做一个图标模板。

首先，新建一个文档，尺寸为120×120，颜色模式RGB，不要勾选「使新建对象与像素网格对齐」。

然后，下载羊角螺线的SVG矢量图像，用AI打开：

打开以后，用选择工具和直接选择工具大开删戒，一直删成这个样子，即只保留曲线右半部分，从原点到原点右边第五个锚点：

之所以截到原点右边第五个点，是因为在这个点曲线切线斜率刚好为 1，即在这一点上曲线切线的夹角刚好是45度，方便使用。

然后，把这段曲线复制进刚才新建的文档里：然后再复制出一个，做一下上下对称、旋转-90度，让曲线能够接上。确保两条曲线的端点对上后，使用「连接」命令连接两条曲线。接着把连接好的曲线大小设置为38×38像素。最后放在画板右下角。步骤可能说起来有些繁琐，总之嘛，做好后应该是这样的：

用直线工具和「连接」命令，把这四分之一图标形状其他部分给补上：

把这段曲线复制、镜像几次，图标的大体形状就出来了，最好再用「连接」命令，将四段曲线连接为完整的一圈：

好，图标的形状出来了。接下来要做的是，使用参考线，把图形内部网格线做出来。

用直线和方框工具，给这个图形里面画一个米字和一个方框，这样：

然后重点来了，选中刚才画的米字和方框，右键点击，选择「建立参考线」命令：

就可以根据选择的米字和方框，把参考线建立好了：

如法炮制，在方框里画一个内接圆，并转为参考线：

利用 AI 的吸附功能，从每个曲线刚刚由直线被掰弯的那个点上画线（不太好描述，总之见图吧），转为参考线：

最后，给最里面的方框画一个内切圆和外接圆，并转化为参考线，就基本完成了：

把参考图放进去对比看一下，match perfectly！

最后，用「存储为模板」命令，将其存成一个模板。每次做iOS 7图标时，使用「从模板中新建」命令，选择这个模板，就可以方便快速地新建一个带参考线的iOS 7图标了。

使用参考线相对于直接用普通的线条、线框相比有什么优点呢？首先，参考线显示起来，始终是1px宽度，无论放大还是缩小图稿都能显示清楚，普通的线条就不可以。再有，参考线可以使用快捷键Cmd+; 快速隐藏或显示。另外，参考线通常处于锁定状态，不太会被误编辑。还有，参考线在所在图层永远处于最上方显示，等等。

上一篇 2011年网页设计趋势全面分析

下一篇在Sketch中制作一款质感铅笔

返回列表

学员作品赏析

2101期学员李思庭作品
2104期学员林雪茹作品
2107期学员赵凌作品
2107期学员赵燃作品
2106期学员徐正浩作品
2106期学员弓莉作品
2105期学员白羽新作品
2107期学员王佳蕊作品

热门课程

专业讲师指导快速摆脱技能困惑

相关文章

多种教程总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

知道了这17种剪辑技巧，做短视频博主上热门洒洒水啦！

电影剪辑通常被称为“隐形的艺术”，尽管剪辑师的名号不如导演的名号响，但是如果缺少了剪辑师对拍摄素材的二次加工，电影作品将缺少其......
迪士尼如何使用Maya制作《海洋奇缘2》

今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！

增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
短视频怎么剪能上推荐？这10个概念请记牢！

在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
探秘皮克斯！《头脑特工队》的幕后制作

今天，我们聊聊皮克斯的《头脑特工队》系列
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？

中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......

关于火星

关于我们人才合作建议和意见

内容分类

频道专区热门标签

火星优势

师资团队教学模式课程研发学员成果图书出版资质认证

帮助中心

专业选择考察学校学习方式如何就业如何退费

联系我们

课程咨询：400-810-1418 人力资源：010-59833585 总机电话：010-59833333 监督电话：400-810-1418转接2 就业部：010-59833202 企业及高校合作：010-59833514 市场合作：010-59833359

×

确定