Illustrator绘制矢量XP图标风格放大镜

Illustrator绘制矢量XP图标风格放大镜图标是UI(用户界面)设计领域的一个重要组成部分，
[url=http://windows.chinaitlab.com/][color=#2f5fa1]Windows[/color][/url]
XP的用户界面设计堪称UI的经典，各种我们再熟悉小图标、按钮非常精致。本文以绘制XP风格放大镜搜索图标为例，介绍如何使用Illustrator CS2中文版打造出精致的按钮图标。其它版本的Illustrator在操作步骤上可能会略有差异。文章末尾提供.ai源文件供读者
[url=http://download.chinaitlab.com/][color=#2f5fa1]下载[/color][/url]
参考。
　　具体操作步骤如下。  
　　[b]一、绘制外框[/b]  
　　1.选择工具箱中的“椭圆工具”，在工具箱中将填色设置为无，描边设置为黑色，然后在画板上绘制1个椭圆。使用“选择工具”在按住Shift Alt键的同时向下拖动椭圆，在正下方复制出一个同样的椭圆，如图1所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170300878.JPG[/img]

图1  
　　2.选中两个椭圆中上方的一个，按快捷键Ctrl C，再按Ctrl F(对应的菜单命令为“编辑>贴在前面”)，将其粘贴在原位置的上方，现在粘贴得到的副本处于选中状态，按Ctrl 3(对应的菜单命令为“编辑>隐藏>所选对象”)将其暂时隐藏。  
　　3.使用“直接选择工具”选中上方椭圆最上方的锚点，然后将其删除，如图2所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170301773.JPG[/img]

图2  
　　用同样的方法将下方椭圆最上方锚点也删除，如图3所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170301611.JPG[/img]

图3  
　　4.使用“直接选择工具”选中这两条路径左端两个锚点，然后按快捷键Ctrl J(对应的菜单命令为“对象>路径>连接”)将其连接在一起。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170302434.JPG[/img]

图4  
　　用同样的方法将右端两个锚点也连接起来，如图5所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170302777.JPG[/img]

图5  
　　5.选择菜单命令“对象>显示全部”(快捷键为Alt Ctrl 3)，将原来隐藏的那个椭圆重新显示出来，如图6所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170302665.JPG[/img]

图6  
　　6.选中椭圆，在“渐变调板”中设置如图7所示的渐变色。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170302908.JPG[/img]

图7  
　　7.选中椭圆下方的图形，也填充灰-白-灰的渐变，如图8所示。注意渐变的设置稍有不同。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170303478.JPG[/img]

图8  
　　先不要太介意渐变的颜色，如果不满意，可以在最后做仔细调整。  
　　8.选中这两个图形，然后将其描边色设置为无，如图9所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170304187.JPG[/img]

[b]二、绘制镜片[/b]  
  
　　9.选中上方的椭圆，按Ctrl C复制，再按Ctrl F贴在前面，然后按住Alt键和Shift键的同时改变椭圆的大小，结果如图10所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170304579.JPG[/img]

图10  
　　10.为小椭圆填充蓝色到浅蓝色的渐变，并将描边设置为浅灰色，描边粗细设置为1，如图11所示。需要使用“渐变工具”适当改变渐变填充的方向。渐变色如果不满意，同样可以在最后进行调整。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170305371.JPG[/img]

图11  
　　[b]三、绘制手柄[/b]  
　　11.选择工具箱中的“圆角矩形工具”，在画板的空白处单击，按如图12所示比例设置圆角矩形的大小。单击“确定”在画板上创建一个圆角矩形，如图13所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170305578.JPG[/img]

图12  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170306221.JPG[/img]

图13  
　　12.该矩形沿用了镜片的填充和描边。这里将其描边设置为无，并填充灰-白-灰的渐变，如图14所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170306667.JPG[/img]

图14  
　　13.对比外框适当调整一下圆角矩形的大小，结果如图15所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170306427.JPG[/img]

图15  
　　14.选择圆角矩形，按Ctrl C复制，再按Ctrl F贴在前面，然后按住Shift键的同时向下拖动，再按住Alt键的同时放大其宽度，得到如图16所示的另一个圆角矩形。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170306622.JPG[/img]

图16  
　　15.将新圆角矩形的渐变色修改为如图17所示的深红-红-深红渐变。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170307314.JPG[/img]

图17  
　　16.在新圆角矩形下方再绘制一个椭圆，使其宽度与该圆角矩形宽度相同，并填充为深红色，如图18所示。可以通过“变换”调板精确控制其宽度。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170307730.JPG[/img]

图18  
　　17.绘制完毕选中两个圆角矩形及刚绘制的椭圆，然后单击“对齐”调板中的“水平居中”按钮，将三个对象水平居中对齐。对齐后选择菜单命令“对象>编组”(或按快捷键Ctrl G)将三个对象组合到一起。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170307535.JPG[/img]

图19  
　　18.选中新组合，并旋转其角度，然后将其移动到如图20所示的位置，为放大镜安装上手柄。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170308170.JPG[/img]

图20  
[b]四、绘制高光、添加外发光效果[/b]  
  
　　19.在蓝色镜片上面绘制一个小的椭圆形，并填充以浅蓝色到白色的渐变，并在“透明度”调板中适当降低其不透明度，如图21所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170309856.JPG[/img]

图21  
　　20.选中所有对象，按Ctrl G将其组合到一起。然后选择菜单命令“效果>风格化>外发光”，将“不透明度”设置为100%，“模式”选择“正常”，“模糊”为1.76mm，如图22所示。设置完毕单击“确定”按钮。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170309869.JPG[/img]

图22  
　　[b]最终效果[/b]  
　　适当地整体旋转一下，可以得到如图23的最终效果。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170310785.JPG[/img]

图23  
　　加一个背景，如图24所示。  

[img]http://plane.chinaitlab.com/UploadFiles_3897/200604/20060424170310555.JPG[/img]
  
图24