小课堂第三弹!使用ILLUSTRATOR做UI设计系列教程

2014/02/18 16489

@张泊宁研究所 :Adobe Illustrator 诞生在 1986 年,运行在 Macintosh 机上。在当时,Adobe Illustrator 是 Adobe 公司的早期产品之一,甚至早于 Photoshop。Adobe 的创始人 John Warnock 带头开发这款产品,最初是希望将自己作为平面设计师的妻子从繁琐的工作流程中解放出来(关于 AI 早期各种八卦可以参看这个 App:iTunes 的 App Store 中的“AI Early Years)。

所以可以说,Adobe Illustrator 最初的客户群体是平面设计师。虽然后来 Adobe 为 UI 设计、Web 设计等给 Illustrator 新增了一些特性和功能,不过大体上讲,Adobe Illustrator 仍然更侧重版式设计领域。自然而然的,AI 也拥有较 Photoshop 更强大的排版工具,比如更加强大的参考线和网格功能,这次就说说 AI 里的参考线。

小课堂系列:
《使用 Adobe Illustrator 做 UI 设计——多重填充与多重描边》
小课堂第二弹!使用ILLUSTRATOR做UI设计系列教程

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

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

使用ILLUSTRATOR做UI设计系列教程

使用ILLUSTRATOR做UI设计系列教程

这样,参考线就建立好可以使用了:

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

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

1. 在 iPhone 、iPod touch 上,由原先的 114×114 px (57×57 pt) 变为 120×120 px,不再支持非 Retina 屏幕(图片摘自 WWDC 2013 Session 208: What’s New in iOS User Interface Design 的 PDF) :

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

使用ILLUSTRATOR做UI设计系列教程

使用ILLUSTRATOR做UI设计系列教程

使用ILLUSTRATOR做UI设计系列教程

好,知道这些后,我们就做一个图标模板吧。

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

然后,到这里:File:Euler spiral.svg 下载羊角螺线的 SVG 矢量图像,用 AI 打开:

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

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

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

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

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

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

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

 

使用ILLUSTRATOR做UI设计系列教程

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

使用ILLUSTRATOR做UI设计系列教程

把参考图放进去对比看一下,match perfectly!

使用ILLUSTRATOR做UI设计系列教程

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

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

今天就到这里吧,下节课说说 Adobe Illustrator 里的网格功能。

 

原文地址:zhangboning.me
作者:@张泊宁研究所

【优设网 原创文章 投稿邮箱:2650232288@qq.com】
 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量63万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/illustrator-ui-design-3

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里