当前位置:首页 > 教程 > 平面设计 > Illustrator教程 > 正文

Illustrator运用3D效果制作网页按钮
栏目分类:Illustrator教程   发布日期:2014-09-03   来源:互联网   浏览次数:

最终效果图:在这篇文章中我们将通过使用Adobe Illustrator中的3D效果来创建一组网页按钮。为什么要用这种方法?原因是这种方法替代了使用不同的笔刷和其他工具来创建高光和阴影,只需一步就能实现,充分利用了
Illustrator运用3D效果制作网页按钮

第九步:文字

我们来添加文字。使用文字工具键入文字”TRY NOW”,使用Anja Eliane字体,35pt大小。你可以在这里下载此字体。在对象菜单中选择扩展,然后给文字填充如下所示的线性渐变,角度设置为负45度。接下来,选择效果菜单》风格化,应用如下所示的投影。

Illustrator运用3D效果制作网页按钮

现在,键入”30 DAY TRIAL”,使用Arial字体,加粗,15pt大小,然后从对象菜单中选择扩展,然后给文字填充白色,再次添加如下图所示的投影效果。

Illustrator运用3D效果制作网页按钮



第十步:箭头

从符号面板中打开符号库菜单并且在箭头类别中找到箭头24。将其拖拽到你的工作区中,然后按下面板底部的”断开符号链接”图标。对其取消编组两次,然后选 择效果菜单》风格化》圆角,应用3像素的半径(1)。给箭头填充如下所示的线性渐变,然后用如下所示的颜色给其添加0.5pt的描边(2)。

Illustrator运用3D效果制作网页按钮

将箭头移动到按钮上,选择效果菜单》风格化,应用投影效果。

Illustrator运用3D效果制作网页按钮

选中此箭头,在对象菜单中选择扩展外观,目的是将应用的两种效果扩展,然后选择对象菜单》变换》缩放,选择80%,点击复制。这样你会得到小一点的箭头。 像下图所示那样放置它们,确保它们水平对其。将它们两个都选择上,然后选择对象菜单》变换》反向。选择垂直然后点击拷贝,将两个新建头放置在右侧,这样按 钮就初步成型了。

Illustrator运用3D效果制作网页按钮

第十一步:阴影

现在唯一缺少的就是按钮底部的阴影了。选择椭圆工具(L),在底部画出一个扁平的椭圆,填充颜色设置为黑色(1)。将此椭圆放置在按钮之后,然后选择对象 菜单》路径》偏移路径,应用最少7个像素的偏移。你会在中间得到一个小一点的椭圆(2)。将大椭圆的不透明度设置为0%,然后将两个都选取上,选择对象菜 单》混合》混合选项,选择25指定的步数,然后选择对象菜单》混合》建立(3)。将得到的混合编组的不透明度降低为75%,如果你将按钮放置于特别的背景 上,也要将混合模式更改为正片叠底。

Illustrator运用3D效果制作网页按钮

这里就是最终的效果。

Illustrator运用3D效果制作网页按钮

第十二步:其他颜色

通过这个按钮的创建方法你可以得到其它不同的颜色。你需要做的就是将按钮拷贝一遍,做一点更改而已。在下面的图中你可以看到3个例子:蓝色、绿色和紫色。在下方所示的图中,所有可见的形状都没有更改,保持了它们的原貌。而那些隐藏的意味着将会被修改,我们一个一个来。

我们从圆角矩形开始。使用直接选择工具(A)选择它,并且查看一下外观面板。将第一个渐变填充更改为如下所示的新的渐变,其它属性不做修改。绿色和蓝色按钮也用同样的方法。

Illustrator运用3D效果制作网页按钮

对于文字,简单的将渐变中间的颜色从浅橙色分别更改为浅蓝色,浅绿色和浅紫色。文字”30 DAY TRIAL”保持原貌。

Illustrator运用3D效果制作网页按钮

现在,选择箭头,像如下所示改变渐变填充和描边。效果仍保持不变。

Illustrator运用3D效果制作网页按钮

最终,就像你在第十步所做的那样,选择扩展外观,然后通过缩放得到小一点的箭头,将两个箭头反向就完成了。

Illustrator运用3D效果制作网页按钮

Copyright © 2014 聚合分享 版权所有   京ICP备14037269号-1  关于聚合分享 | 广告合作 | 版权声明 | 意见反馈 | 联系方式 | 原创投稿 | 网站地图 | 友情链接
平面设计网页设计编程教程数据库cms教程电脑教程办公软件服务器seo优化