• 微课视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
微课江湖
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 微课视频
  • photoshop
  • Fireworks
  • CorelDraw
  • Illustrator
  • Painter
  • Freehand
  • Indesign
  • flash
  • maya
  • autocad
  • 3dmax
您的位置:首页 > 平面设计 >Illustrator > Illustrator(AI) CS设计绘制矢量精致网页运用图标组合实例教程步骤详解

Illustrator(AI) CS设计绘制矢量精致网页运用图标组合实例教程步骤详解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-05-23

佚名 向大家分享了Illustrator(AI) CS设计绘制矢量精致网页运用图标组合实例教程步骤详解,其中包含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 按钮展开此合并图形。

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

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 )。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-23只需1分钟 让你掌握Ai画笔预设的安装和使用
  • 2017-05-23超实用:AI绘制照片级的花卉插画技巧
  • 2017-05-23AI制作有吸引力又高点击率的横幅Banner
  • 2017-05-23ai柱形图表中的数值怎么修改?
  • 2017-05-23AI绘制一张简约秋分插画图赏
  • 2017-05-23AI运用纹理绘制复古的山谷小溪风景插画
  • 2017-05-23Illustrator(AI)设计绘制出超绚的发光线条背景图实例教程
  • 2017-05-23ai怎么做饼状图?ai做饼状图的两种方法
  • 2017-05-23Illustrator(AI)设计绘制精致可爱的矢量三维图标实例教程
  • 2017-05-23Ai怎么画四叶草? ai绘制幸运草图标的教程

文章分类

  • photoshop
  • Fireworks
  • CorelDraw
  • Illustrator
  • Painter
  • Freehand
  • Indesign
  • flash
  • maya
  • autocad
  • 3dmax

最近更新的内容

    • AI中 3D效果凸出与斜角运用实例讲解
    • ai怎么将彩色的图片处理成黑白色?
    • AI键盘增量巧绘ICON像素画图标
    • Ai怎么画绿色陶瓷罐子?
    • Illustrator(AI)模仿创建一个3D楼层户型图效果实力教程
    • 仅需5步 Illustrator结合PS快速制作2.5建筑插画
    • Illustrator结合PS设计卡通可爱时尚的花纹插画实例教程
    • AI绘制一个百度logo
    • ai文件怎么保存成jpg? AI保存jpg格式和PS的区别
    • Illustrator利用3D功能制作红色上的立体骰子实例教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2015-2018 All Rights Reserved. 微课江湖 版权所有