Illustrator(AI) CS设计绘制矢量精致网页运用图标组合实例教程步骤详解
我要评论图标是界面设计领域重要的一项设计内容，这次我们以在 2004 度中由 stardock 公司主办的 GUI 国际奥林匹克大赛中获全场大奖的图标包的 The Last Order 中的一个图标作为例子给大家讲述一下图标制作的详细过程。
下图是这套图标的部分截图。
教程中所应用到的软件主要有 Adobe Illustrator CS/Adobe Photoshop/Axialis Icon-workshop等。我们用Adobe Illustrator CS 进行图标设计，并在Photoshop 中进行后期处理，最后用Iconworkshop 输出成 .ico 格式的图标文件。
1．打开 Adobe Illustrator CS ，选取工具栏上的圆角矩形工具，单击画板任意位置在弹出的窗口中开可以设定圆角曲度。（如果第一次圆角矩形长宽不合适，可以删除，直接拖拽得到合适大小）。
2．选中菜单 Effect/3D/Rotate 命令调出 3D 旋转设置窗口，用于生成 3D 透视图形（只有最新的 Illustrator CS 版 本具有此功能）。
3．调整至合适角度（如过制作一整套图标，请记住保留设置参数，以应用于整套图标设计保持风格统一）选中 Preview 可以既时的看到画板中图形的应用效果。
4．可以在 Appearance 棉板里看到所应用的 3D Rotate 效果，并可以随时通过双击调出 3D Rotate 窗口进行调节。
5．调整至合适角度，使用 object 菜单下的 Expand Appearance 命令把应用效果的图形“打散”： 即不再具有 Appearance 的属性。
6．选用工具栏中的白色箭头选中我们需要的图形用 Ctrl+c( 复制 ) Ctrl+v （粘帖）提取出来， 其余的无用图形删除。
7．随后我们用渐变色给这个图形上色，用 Gradient 面板设计渐变颜色，用 Swatch 面板调整颜色，这里采用的是线型（linear）渐变，假设光源来自左上角，这将是后面所有图标上色的依据。
8．把此图形复制一遍，按图中方式排列，同时选中两个图形，然后调出 Pathfinder 面板， 使用 Subtract form sharp area 制作出此图形的立体厚度。然后可以点击 Expand 按钮展开此合并图形。
21．使用 Flie 菜单下的 Save for web 命令，在弹出的窗口中选用 PNG 格式输出（选择透明输出： Transparency ）
22．随后在 Photoshop 中打开刚才输出的 PNG 文件，在其下方新建一个图层填充为白色以为图标加入阴影时便于看到效果）
23．双击图标图层在 Layer Style 中为其增加了一个阴影效果。以增强图标再生成后在各种色彩桌面上的识别率。
24．随后删除白色辅助图层，效果如下。
25．新建一个图层，使之与图标图层连接，使用 Ctrl+E 合并连接图层把效果应用于图标，随后保存这个 PNG 文件。
26．使用 ICONWORKSHOP 打开这个 PNG 文件，使用 Save Icon Form Image 按钮转换 PNG 图象为 ICO 文件。
27．选择你要输出的 ICO 的文件规格。
28．存储后的 ICO 格式文件你就可以直接通过 Window 或第三方图标管理软件浏览了（推荐使用 Microangelo ）。
相关文章
- 这篇AI快速绘制房车图标教程是我刚刚学习过的，教程仅仅使用了简单的七个步骤就绘制出了一个房车的造型，原作者的灵感来源是《绝命毒师》中的房车造型2013-09-26
- 这篇AI创建规则图标技巧教程对于正在学习UI设计的朋友们来说非常有用，我最近也在学习UI设计，APP图标最近挺火，不与时俱进不行了2013-09-19
Illustrator(AI)模仿制作逼真的mediaplayer11媒体播放器图标实例教程
mediaplayer11.0 是微软媒体播放器的最新版本， 作为VISTA 系统自带的播放工具。它的图标质感很强。下面我们来使用AI做mediaplayer11.0 的图标2013-07-31Illustrator(AI)设计绘制精致可爱的矢量三维图标实例教程
本章教大家利用Illustrator绘图软件中的三维功能来设计绘制三维图标，当然以此类推可以制作更多中的三维图片2013-07-26Illustrator(AI)设计制作卡通立体效果的小熊图标实例教程
本章给大家分享用Illustrator制图软件设计制作立体的卡通效果的小熊图标图片，希望大家喜欢2013-07-10
在设计一个图标之前，在脑海中应有个大体的意象，意象形成后，可以通过画些草稿图来具象图标2013-07-10- 本教程使用AI制作质感超炫的红色立体@图标，教程不算难，适合初学者学习，喜欢的朋友可以一起来学习吧2013-05-31
- Hi all! 今天很高兴请到了我们可爱的太空熊做为麻豆，他将会协助我一起为大家展示一下卡通角色造型图标的设计流程与方法。OK，废话不多说，我们先来看一下最终的效果图。2013-04-03
- 这篇AI实例教程将向朋友们介绍用AI绘制卡通士兵图标的方法，这是一篇国外翻译教程，学习制作难度适中，适合有一定AI基础的朋友学习，绘制完成的效果也很漂亮，喜欢的朋友快2013-02-07
当我们在做一些立方造型的时候会用到一些带颜色的参考线，来保持个图标形体间的大小相似。2013-02-06
最新评论