Illustrator CS绘制矢量精细图标详解(3)

作者:rokey 来源:蓝色理想 时间:2007-01-02

 

  17.下面为这个基本成型的平板电脑增加更多细节,左边的图形,以及右边的三个凹槽,这里需要注意的是所有图形我都复制了两遍,下面的图形填充白色并向右下方位移若干像素,是为了体现凹槽的高光。

Illustrator CS绘制矢量精细图标详解

  18.下面我们来制作凹槽上面的按钮,虽然面积很小,也要体现出高光的渐变,我在这里采用了 Blend 混合来制作着两个按钮。双击 Blend Tool 图标可以调出 Blend 混合参数面板。选取工具栏目中的 Blend Tool ,单击混合的第一个图形,随后点击第二个图形完成混合。

Illustrator CS绘制矢量精细图标详解

  19.用钢笔工具以及各种标准图形的组合完成下面的图形,使之组合成为电脑上的其他各个元素(绿色按钮同样采用 Blend 混合完成)

Illustrator CS绘制矢量精细图标详解

20.这样我门完成了这个图标的创建工作,随后作的是输出。绘制一个 128 X 128( 单位:像素 ) 的正方行,精确的图形调整可以在 Transform 面板中完成,随后是在 Transparency 面板中将 Opacity 值调整为 0%

Illustrator CS绘制矢量精细图标详解

  21.使用 Flie 菜单下的 Save for web 命令,在弹出的窗口中选用 PNG 格式输出(选择透明输出: Transparency )

Illustrator CS绘制矢量精细图标详解

Illustrator CS绘制矢量精细图标详解

  22.随后在 Photoshop 中打开刚才输出的 PNG 文件,在其下方新建一个图层填充为白色以为图标加入阴影时便于看到效果)

Illustrator CS绘制矢量精细图标详解

  23.双击图标图层在 Layer Style 中为其增加了一个阴影效果。以增强图标再生成后在各种色彩桌面上的识别率。

Illustrator CS绘制矢量精细图标详解

  24.随后删除白色辅助图层,效果如下。

Illustrator CS绘制矢量精细图标详解

  25.新建一个图层,使之与图标图层连接,使用 Ctrl+E 合并连接图层把效果应用于图标,随后保存这个 PNG 文件。

Illustrator CS绘制矢量精细图标详解

  26.使用 ICONWORKSHOP 打开这个 PNG 文件,使用 Save Icon Form Image 按钮转换 PNG 图象为 ICO 文件。

Illustrator CS绘制矢量精细图标详解

  27.选择你要输出的 ICO 的文件规格。

Illustrator CS绘制矢量精细图标详解

  28.存储后的 ICO 格式文件你就可以直接通过 Window 或第三方图标管理软件浏览了(推荐使用 Microangelo )。

Illustrator CS绘制矢量精细图标详解

标签:图标