第七步:添加阴影

再一次拷贝粘贴内部的矩形,将其拖拽出按钮编组并放置于编组之前。移除已有的外观,将其填充为黑色(1)。现在,将黑色矩形拷贝粘贴到前面,更改填色,和黑色矩形区分开来。按下两次向上的方向建将红色矩形向上移动(2)。键盘的增加值应该设置为1像素(编辑菜单》首选项》常规)。

选择两个形状然后从路径查找器面板选择减去顶层》扩展,剩下的薄的形状应该填充的是黑色。(3)将混合模式更改为正片叠底,降低不透明度至20%。

Illustrator使用3D效果制作质感的网页按钮



第八步:光泽

接下来,使用钢笔工具(P)如下图所示在按钮中间画一条路径。将内部矩形再次拷贝粘贴到前面,移除已有的外观,添加黑色描边。选择此矩形和蓝色和路径,在路径查找器面板选择分割。在对象菜单中选择取消编组,然后删除底部部分。

Illustrator使用3D效果制作质感的网页按钮



给此形状填充一个黑色到白色的线性渐变,角度设置为负90度。将混合模式更改为滤色(黑色将变成透明),不透明度降低到30%。

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效果制作质感的网页按钮

标签:网页按钮

随机推荐