手机
当前位置:查字典教程网 >网页设计 >交互设计教程 >轻松制作抽象矢量插图
轻松制作抽象矢量插图
摘要:用Photoshop可以制作各种各样漂亮的按钮,其实它的姊妹软件Illustrator拥有强大的渐变和透明功能,也可以制作漂亮的按钮。下面我...

用Photoshop可以制作各种各样漂亮的按钮,其实它的姊妹软件Illustrator拥有强大的渐变和透明功能,也可以制作漂亮的按钮。

下面我介绍用Illustrator10制作有苹果网站风格的按钮。

主要用到渐变、色彩、图层模式、阴影滤镜等工具。文章末尾提供.ai原文件下载。

轻松制作抽象矢量插图1

选择菜单文件>新建,新建一个文件。

轻松制作抽象矢量插图2

因为制作的是矢量图,如果不用于打印,文件大小无所谓。

在工具面板中选择矩形工具,按住不放,直到出现一个工具条,选择圆角矩形工具

轻松制作抽象矢量插图3

,在文档中点击鼠标左键,弹出一个对话框,做如下设置。

轻松制作抽象矢量插图4

点击确定后,会出现一个圆角矩形,在外观面板中选择笔画,在颜色面板中设置笔画的颜色为:R:115,G:115,B:115,在外观面板中选择填充,在工具条底部选择填充类型为渐变,在渐变面板中作如下设置:

轻松制作抽象矢量插图5

此时,得到的结果应该如下所示:

轻松制作抽象矢量插图6

选中该对象,执行菜单:滤镜〉风格化〉投影...,在弹出的对话框中作如下设置:

轻松制作抽象矢量插图7

执行滤镜效果后,结果如下:

轻松制作抽象矢量插图8

点击图层面板底部的新建图层按钮

轻松制作抽象矢量插图9

,新建一个图层。然后选择矩形工具,画一个和上面的圆角矩蜗嗤矶龋叨仍嘉步蔷匦我话耄╓:90mm,H:11mm)的矩形,笔画为无,填充颜色白色,位置和圆角矩形上半部重合。然后定位到透明面板,把混合方式改为亮度,不透明度69%。

轻松制作抽象矢量插图10

此时,透明按钮的效果已经出来了。

轻松制作抽象矢量插图11

下面只要加入文字就可以了,新建一层,用横排文字工具输入文字Quick Time,字体选择Arial,字号45pt。给文字也应该加上一点投影,执行菜单:滤镜〉风格化〉投影...,用刚才的设置就可以了,这个按钮就做好了。

轻松制作抽象矢量插图12

【轻松制作抽象矢量插图】相关文章:

2015网页设计七大杀手锏

圆形风格的移动应用设计实例赏析

电子商务网站设计分析系列之二:首屏设计

如何设计出更好用户体验的网站

20个豪华汽车、摩托车网页设计赏析

如何进行可用性启发式评估

如何搞定界面设计-构图篇

精彩的节日壁纸设计流程

30个风格出众的网页导航栏设计

无限滚动翻页的优点和缺点

精品推荐
分类导航