动态网站制作指南 [  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 图形图象 > Illustrator教程
图形图象:Photoshop,Fireworks,CorelDraw,Flash,3Dmax,AutoCad,Maya,Director,Authorware,Illustrator,相关软件
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ Illustrator教程 ]的信息

本月文章推荐
.巧用Illustrator裁剪标记设置界限.
.Illustrator CS2十大新功能.
.Illustrator CS新功能.
.Illustrator绘制高科技风格抽象壁.
.Illustrator CS2体验:PDF支持.
.Illustrator 8.0 入门基础教程.
.Illustrator 10的新特点.
.Adobe Illustrater绘制萝卜.
.用Illustrator CS设计质感图标.
.初学AI渐变网格心得——叶片的制.
.Illustrator绘制矢量XP图标风格放.
.关于Ill中Apprearance面板的一点.
.Illustrator CS2体验:增强的专色.
.Illustrator巧绘布娃娃矢量图.
.Illustrator表现立体感和光滑质感.
.用AI封套改造你的作品.
.图表 ----Illustrator 基础教程.
.Illustrator QQ2005风格小图标.
.Illustrator intuos2 画招贴.
.月亮图腾系列教程之五——最后一.

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

发表日期:2007-11-17 |


 

  图标是UI(用户界面)设计领域的一个重要组成部分,Windows XP的用户界面设计堪称UI的经典,各种我们再熟悉小图标、按钮非常精致。本文以绘制XP风格放大镜搜索图标为例,介绍如何使用Illustrator CS2中文版打造出精致的按钮图标。其它版本的Illustrator在操作步骤上可能会略有差异。文章末尾提供.ai源文件供读者下载参考。

  具体操作步骤如下。

  一、绘制外框

  1.选择工具箱中的“椭圆工具”,在工具箱中将填色设置为无,描边设置为黑色,然后在画板上绘制1个椭圆。使用“选择工具”在按住Shift+Alt键的同时向下拖动椭圆,在正下方复制出一个同样的椭圆,如图1所示。

Illustrator绘制矢量XP图标风格放大镜(图一)
图1

  2.选中两个椭圆中上方的一个,按快捷键Ctrl+C,再按Ctrl+F(对应的菜单命令为“编辑>贴在前面”),将其粘贴在原位置的上方,现在粘贴得到的副本处于选中状态,按Ctrl+3(对应的菜单命令为“编辑>隐藏>所选对象”)将其暂时隐藏。

  3.使用“直接选择工具”选中上方椭圆最上方的锚点,然后将其删除,如图2所示。

Illustrator绘制矢量XP图标风格放大镜(图二)
图2

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

Illustrator绘制矢量XP图标风格放大镜(图三)
图3

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

Illustrator绘制矢量XP图标风格放大镜(图四)
图4

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

Illustrator绘制矢量XP图标风格放大镜(图五)
图5

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

Illustrator绘制矢量XP图标风格放大镜(图六)
图6

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

Illustrator绘制矢量XP图标风格放大镜(图七)
图7

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

Illustrator绘制矢量XP图标风格放大镜(图八)
图8

  先不要太介意渐变的颜色,如果不满意,可以在最后做仔细调整。

  8.选中这两个图形,然后将其描边色设置为无,如图9所示。

Illustrator绘制矢量XP图标风格放大镜(图九)
图9

二、绘制镜片

  9.选中上方的椭圆,按Ctrl+C复制,再按Ctrl+F贴在前面,然后按住Alt键和Shift键的同时改变椭圆的大小,结果如图10所示。

Illustrator绘制矢量XP图标风格放大镜(图十)
图10

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

Illustrator绘制矢量XP图标风格放大镜(图十)
图11

  三、绘制手柄

  11.选择工具箱中的“圆角矩形工具”,在画板的空白处单击,按如图12所示比例设置圆角矩形的大小。单击“确定”在画板上创建一个圆角矩形,如图13所示。

Illustrator绘制矢量XP图标风格放大镜(图十二)
图12

Illustrator绘制矢量XP图标风格放大镜(图十三)
图13

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

Illustrator绘制矢量XP图标风格放大镜(图十四)
图14

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

Illustrator绘制矢量XP图标风格放大镜(图十五)
图15

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

Illustrator绘制矢量XP图标风格放大镜(图十六)
图16

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

Illustrator绘制矢量XP图标风格放大镜(图十七)
图17

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

Illustrator绘制矢量XP图标风格放大镜(图十八)
图18

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

Illustrator绘制矢量XP图标风格放大镜(图十九)
图19

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

Illustrator绘制矢量XP图标风格放大镜(图二十)
图20

四、绘制高光、添加外发光效果

  19.在蓝色镜片上面绘制一个小的椭圆形,并填充以浅蓝色到白色的渐变,并在“透明度”调板中适当降低其不透明度,如图21所示。

Illustrator绘制矢量XP图标风格放大镜(图二十)
图21

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

Illustrator绘制矢量XP图标风格放大镜(图二十二)
图22

  最终效果

  适当地整体旋转一下,可以得到如图23的最终效果。

Illustrator绘制矢量XP图标风格放大镜(图二十三)
图23

  加一个背景,如图24所示。

Illustrator绘制矢量XP图标风格放大镜(图二十四)

图24

上一篇:Illustrator绘制时尚少女矢量插画 人气:1226
下一篇:Illustrator绘制矢量XP图标风格放大镜 人气:870
浏览全部Illustrator的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-12-1 MyBB v1.4.4 简体中文版 bulid 2
2008-12-1 新云网站内容管理系统 v4.0.0.11
2008-12-1 网趣网上购物系统时尚版 v8.8
2008-12-1 Textpattern v4.0.7 多国语言版
2008-12-1 Piwik ( PHP统计系统,可以和GOOG
2008-12-1 天空网络电影系统SKYUC! v2.6.2
2008-12-1 SiteDynamic企业网站管理系统 v1
2008-12-1 KindEditor HTML在线编辑器 v3.0
2008-12-1 0451sky高校教务管理系统2008 v4
2008-11-29 Tencent Traveler 4.4
2008-11-29 龙卷风网络收音机 v3.0.0.0
2008-11-29 Intel Chipset Software Install
2008-11-29 TweakVI 1.0 Build 1100
2008-11-29 Opera 9.62 Build 10469
2008-11-29 MPlayer WW编译版 SVN-r28044(20
2008-11-29 NetTools网络工具v1.0.0破解版
2008-11-29 3DGallery三维体验1.1破解版
2008-11-29 SecretBook保密本v1.0破解版
  发表评论
姓 名: 验证码:
内 容:
站长工具:网站收录查询 | Google PR查询 | ALEXA排名查询 | CSS在线编辑器 | OPEN参数生成器 | 弹出式窗口代码产生器 | 密码登录生成器 | 在线按钮生成器 | Meta标签生成器 | 多色彩特效字代码生成器 | 网页代码调试器 | 在线FTP登陆 | Flash取色器 | 配色代码对照表 | 配色辞典 | CSS生成器 | 广告代码 | 框架网页代码生成器 | js/vbs加密 | md5加密 | 进制转换 | UTF-8 转换工具 | 在线调色板 | Html转换js | Html转换asp | Html转换php | Html转换perl
实用工具:汉字翻译拼音 | 拼音字典 | 符号对照表 | 个税计算 | 实时汇率查询换算 | 经典小工具 | 汉字简繁转换 | 普通单位换算 | 公制单位换算 | 生辰老黄历 | 国内电话区号 | 国家代码与域名缩写 | 文字加密解密 | 元素周期表 | 健康查询 | 世界时间 | 万年历 | 二十四节气 | 汉字横竖排版 | 手机号码查询 | 计算器 | ip搜索
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報
防水工事·改修工事 フットサル大会 探偵
SEO対策 中国語教室 ホームページ作成