学院首页 软件应用 编程开发 创意设计 认证培训 软件论坛
Flash Fireworks Dreamweaver Photoshop CorelDraw Illustrator FreeHand 3DsMAX AutoCAD

您的位置:学院 >> 创意设计 >> Fireworks >> Fireworks画矢量立体图标完整流程


Fireworks画矢量立体图标完整流程



  以下是我个人用Fireworks画矢量立体图标的一些流程和习惯,发表出来和大家交流一下。

  用平面软件做立体图标的基本流程也是“先建模,再渲染”,然而这些都得自己去做,虽然在逼真度上和3D软件还是有差距,但是平面软件制作图标可以有更多变的风格和效果,给了设计者更多发挥空间。下面是我画一个USB接头的过程。
  个人认为图标作品还是不要太接近实物为好,更卡通风格、更有代表性才是优秀的图标。虽然我目前还做不到。 -_-!

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  上面为制作的流程和最终效果图。

  首先我要说的是。Fireworks本身不带直接透视功能,不过有透视辅助线(其实也不太方便)和3D插件,但是直接做能够更好地练习透视能力。我这里画的整套图标都是同一个角度透视的,所以我采用一个正方形而不是这个USB插头本身,主要是为了适应更多图标。

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  1 如上,画一个很正的正方形。

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  2 使用扭曲工具把它变形,处理成侧视图的效果。这里可以用FW中的辅助线来制作,或者使用3D插件透视一个正方形。完成变形以后千万记得把这个变形的历史记录保存到命令中。最后我提供了这个命令的JSF文件下载。

  tips:很多朋友在经典问不知道扭曲工具是什么。为什么我的扭曲总是放大或者缩小而不能任意变形呢?
  扭曲工具是变形工具的第三个图标!如果你还不明白这一步的含义请看下面。

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  3 复制一个,然后向右边移动几个象素,再缩小到99%,大致的画出这里画的USB插头的正面和反面所在的平面。为了更准确的达到立体效果不失真,真的能不失真吗?请继续向下看。

  tips:后面的面要比前面的面稍小一点点。近大远小嘛.用过相机拍摄微距的朋友一定知道,镜头越近,前后大小差别越大。

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  4 把画好的两个面收起来(隐藏)''以后再用。然后画上平面图片.USB插头的内容都在一个面上,所以画正面就好了.如果立体图形的几个面内容都很多。那就要画三视图的 平面图了。这张平面图的内容最好把所有你觉得可能出现的都画上,甚至包括很明显的色彩过渡。

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  5 同时选取你画好的正面图和正方形.然后再执行菜单中的 [命令] - [你再第二步保存的变形命令] 好了。不但正方形变了,USB插头的正面图也变成透视图了。完成以后,先不要删除辅助线(被透视的正方形),先把第3步画的两个面拿出来,正面对正面,反面对反面。

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  6.对整齐以后再删除辅助线。现在USB插头的基本形状已经出来了,可以看起来有点失真……后面的那个面太靠下了。现在你可以开始骂我第3步不做会更好了,的确是我的错啊!这就是教程和经验交流的区别。我更希望大家能提出对我的制作过程中的看法。

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  看看这个图片,上一步做的东西真的失真了吗?没有呀!但是真的有点怪怪的——原因是我们把USB插头的金属部分和塑料部分放在一个面上了。再仔细看看上图。侧面来看其实不是在一个面上的。怎么让他们各自到各自的面上去呢?这个只有靠感觉去微调一下了。蓝色的面向右移动一象素,红色的面向上移动两象素,左一象素。

  tips:很多地方我们需要用到微调,比如在立体图形上面有一个凸出的面,但是又凸出的不多。我们当作他在原来的那个面上做透视,然后再微调一下。

  Fireworks绘制矢量三维图标_天极设计在线整理转载

  7.把那些面连接成立体形状。既然已经成了立体图形,我们把侧面也画上去,这里有几个凹入的槽。先画三根线.效果后面做

  到这里模型已经全部完成了。大家画画的时候也会先画线稿再上色,这个就是线稿了。

  • 第1页:造型、完成线稿
  • 第2页:上色、透视、细节
  • 共2页。 1 2 :

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      8.上色.如果是用马克笔,一般就直接在线稿上面画质感了,是的,马克笔五块钱一支,电五毛钱一度。SO,我们不用直接画渐变,先画个基本色,然后再一个一个部分修改为渐变。

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      9.调整渐变来表现光感(谁能告诉我一个更专业的词语),不同的质感对光的反映是有讲究的,塑料比较圆滑,金属比较直爽,玻璃比较活跃.塑料的转角是一个缓慢变化的过程,而金属的转角不能用单一的渐变来表现,一般我会再转角多加几条黑色和白色的线条。

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      10.还是光感.

      塑料部分的正面进行羽化:羽化塑料的正面,达到从正面到侧面的色彩缓慢过渡的目的.你可以和上图比较下,可见上图的菱角是很明显的.。
      半透明渐变:把手握的位置的反光画出来,具体是上面透明,下面白色的渐变,再羽化一下。
      同上制作手握位置的角的高光
      白色实心填充:制作一条细线来表现整个塑料部分的菱角的高光,上一部的作用和这一步是同样的,只是手握的位置的高光线条比较粗,所以我用两步来实现。
      金属部分表面内容的内侧阴影:金属部分表面有一个槽和两个洞。内侧阴影是为了表示他们是凹进去的。
      一象素白色线条:金属部分的高光,金属部分的棱角是很直的.直接变到另外一个面。

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      11.细节部分.操作解释如下理解

      USB标志的原角举行边框:使用1PX内侧阴影表现它们是凹入的。
      USB标志:使用1PX投影,表示它是凸出的,投影和阴影的目的是画出那个很薄的侧面。
      金属质感修改:这里加一个黑色的或者你也可以再加一条白色的再左边。为什么呢?你从凸出的镜子看自己,自己被压扁了.,那么从一个到90度的菱角看景物。每个景物就剩下一根线了,所以金属的原角有一系列无规律的线条。

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      12.来看看金属部分的另外一些细节和全部组成内容
      塑料再金属上的投影:使用表面做内侧阴影,然后选上[去底色],这是塑料挡住了部分照到金属的光。
      自身的边缘:金属的边缘,由于11步说的原理,所以金属的边缘加两条深线条。

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      13.过度仿真的图标在使用起来是没有太大意义的,真正的图标要使用起来必须颜色清晰,容易区分,有体量感(胖一点)。
      在实际制作中,一套图标要风格统一。你可以使用同样角度的透视或者同样的配色或者同样的表现风格,这里我使用了同样的透视,这就意味着整套图标的透视都用同一个透视的命令。

      如下是另一例子

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      14.这里使用了上一个图标制作所保存的命令,这样两个图标就是从同一个角度透视了,这个例子中,我也把 [光影渐变]和[渲染质感]作为两步,这样能更好的调整色彩.。
      

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      放到X:Program Files/Macromedia/Fireworks 8/Configuration/Commands/Web/ 目录下面,然后进入FW,选取正方形,然后执行菜单的 [命令]-[web]就可以直接透视了.也就是直接完成了第2张图片的操作

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      2 使用扭曲工具把他变形成从侧面看的效果.这里可以用FW中的辅助线来制作或者使用3D插件透视一个正方形.完成变形以后千万记得把这个变形的历史记录保存到命令中。第四页我提供了这个命令的JSF文件下载

      tips:很多朋友在经典问不知道扭曲工具是什么。为什么我的扭曲总是放大或者缩小而不能任意变形呢?? 扭曲工具是变形工具的第三个!如果你还不明白这一步的含义请看下面

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      3 复制一个然后向右边移动几个象素,再缩小到99%,大致的画出这里画的USB插头的正面和反面所在的平面。为了更准确的达到立体效果不失真,真的能不失真吗?请继续向下看.

      tips:后面的面要比前面的面稍小一点点。近大远小嘛.用过相机拍摄微距的朋友一定知道,镜头越近,前后大小差别越大

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      4 把画好的两个面收起来(隐藏)''以后再用。然后画上平面图片.USB插头的内容都在一个面上,所以画正面就好了.如果立体图形的几个面内容都很多。那就要画三视图的 平面图了。这张平面图的内容最好把所有你觉得可能出现的都画上,甚至包括很明显的色彩过渡.

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      5 同时选取你画好的正面图和正方形.然后再执行菜单中的 [命令] - [你再第二步保存的变形命令] 好了。不但正方形变了,USB插头的正面图也变成透视图了.完成以后 先不要删除辅助线(被透视的正方形),先把第3步画的两个面拿出来.正面对正面反面对反面.

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      6.对整齐以后再删除辅助线.现在USB插头的基本形状已经出来了,哎呀.有点失真了.后面的那个面太下了.好了,现在你可以开始骂我第3步不做会更好了.我的错啊。对,这就是教程和经验交流的区别.我更希望大家能提出对我的制作过程中的看法,看贴回帖是一种美得!!

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      看看这个图片,上一部做的东西真的失真了吗?其实不然。但是真的有点怪怪的啊,原因是我们把USB插头的金属部分和塑料部分放在一个面上了。再仔细看看上图。侧面来看其实不是在一个面上的.怎么让他们各自到各自的面上去呢?这个只有靠感觉去微调一下了。蓝色的面向右移动一象素,红色的面向上移动两象素,左一象素

      tips:很多地方我们需要用到微调,比如在立体图形上面有一个凸出的面,但是又凸出的不多。我们当作他在原来的那个面上做透视,然后再微调一下

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      7.把那些面连接成立体形状.这个很简单。详细请看"FW制作3D图形"

      既然已经成了立体图形,我们把侧面也画上去,这里有几个凹入的槽.先画三根线.效果后面做

      到这里模型已经全部完成了.大家画画的时候也会先画线稿再上色对把,这个就是线稿了.

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      8.上色.如果是用马克笔,一般就直接在线稿上面画质感了,是的,马克笔五块钱一支,电五毛钱一度。。SO.我们不用直接画渐变,先画个基本色,然后再一个一个部分修改为渐变.

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      9.调整渐变来表现光感(谁能告诉我一个更专业的词语),不同的质感对光的反映是有讲究的,塑料比较圆滑,金属比较直爽,玻璃比较活跃.塑料的转角是一个缓慢变化的过程,而金属的转角不能用单一的渐变来表现,一般我会再转角多加几条黑色和白色的线条。。

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      10.还是光感.

      塑料部分的正面进行羽化:羽化塑料的正面,达到从正面到侧面的色彩缓慢过渡的目的.你可以和上图比较下,可见上图的菱角是很明显的.

      半透明渐变:把手握的位置的反光画出来,具体是上面透明,下面白色的渐变,再羽化一下.

      同上:同上制作手握位置的角的高光

      白色实心填充:制作一条细线来表现整个塑料部分的菱角的高光,上一部的作用和这一步是同样的,只是手握的位置的高光线条比较粗,所以我用两步来实现

      金属部分表面内容的内侧阴影:金属部分表面有一个槽和两个洞。内侧阴影是为了表示他们是凹进去的.

      一象素白色线条:金属部分的高光,金属部分的菱角是很直爽的.直接变到另外一个面

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      11.细节部分.操作解释如下理解

      USB标志的原角举行边框:使用1PX内侧阴影表现它们是凹入的

      USB标志:使用1PX投影,表示它是凸出的,投影和阴影的目的是画出那个很薄的侧面.

      金属质感修改:这里加一个黑色的或者你也可以再加一条白色的再左边.为什么??你从凸出的镜子看自己,自己被压扁了.,那么从一个到90度的菱角看景物。每个景物就剩下一根线了,所以金属的原角有一系列无规律的线条。

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      12.来看看金属部分的另外一些细节和全部组成内容

      塑料再金属上的投影:使用表面做内侧阴影,然后选上[去底色],这是塑料挡住了部分照到金属的光.

      自身的边缘:金属的边缘,由于11步说的原理,所以金属的边缘加两条深线条

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      13.过份仿真的图标在使用起来是没有太大意义的,真正的图标要使用起来必须颜色清晰,容易区分,有体量感(胖一点).而且实际制作中,一套图标要风格统一.你可以使用同样角度的透视或者同样的配色或者同样的表现风格.这里我使用了同样的透视,这就意味着整套图标的透视都用同一个透视的命令.如下另一例子

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      14.这里使用了上一个图标制作所保存的命令,这样两个图标就是从同一个角度透视了,这个例子中,我也把 [光影渐变]和[渲染质感]作为两步,这样能更好的调整色彩.

      Fireworks绘制矢量三维图标_天极设计在线整理转载

      你可以到网上找到透视命令command.jsf,把文件放到X://Program Files/Macromedia/Fireworks 8/Configuration/Commands/Web/ 目录下面,然后进入FW,选取正方形,然后执行菜单的 [命令]-[web]就可以直接完成透视处理了。


      
    技术文章快速查找

    栏目导航
    软件应用
    ·操作系统 ·杀毒防黑 ·应用软件
    ·聊天软件 ·网络软件  
    Web开发
    ·ASP ·JavaScript ·CGI
    ·JSP ·VbScript ·Web服务器
    ·PHP ·XML  
    开发语言
    ·VB ·VC ·ASP.NET
    ·Java ·C/C++ ·Delphi
    数据库开发
    ·MySQL ·SQL/Access ·PowerBuilder
    ·Oracle ·DB2  
    网站设计
    ·Flash ·Dreamweaver ·HTML/CSS
    ·Fireworks ·FrontPage  
    平面设计
    ·Photoshop ·CorelDraw ·AutoCAD
    ·FreeHand ·Illustrator ·3DsMAX
    媒体动画
    ·Director ·Authorware ·Maya
    ·视频处理    


    相关软件 产品库推荐
    ·笔记本 ·台式机 ·服务器
    ·数码相机 ·手机 ·GPS
    ·DV摄像机 ·MP3 ·MP4
    ·CPU ·硬盘 ·内存
    ·主板 ·显卡 ·显示器
    ·打印机 ·投影机 ·路由器

    还没人留言,抢个先,哈哈!
    对"Fireworks画矢量立体图标完整流程"的评论 - 快速回贴
    内容:
      [完成后可按Ctrl+Enter发布]

    百度中 Fireworks画矢量立体图标完整流程 相关内容
    Google搜索中 Fireworks画矢量立体图标完整流程 相关内容
    雅虎中 Fireworks画矢量立体图标完整流程 相关内容
    Sogou搜索中 Fireworks画矢量立体图标完整流程 相关内容

    相关软件 最新回复帖子:

    ·Windows Vista 中卸载软件的不同方式
    ·没有mysql支持时的替代方案
    ·一个可以发送附件及HTML格式邮件的PHP类
    ·AutoCAD打造精致三维鸟笼实例详解
    ·Photoshop自定义水晶字特效样式
    ·AutoCAD三维基础实例教程
    ·PS为黑背景长发美女照片抠图换背
    ·用Photoshop自制个性摩托车贴花小经验
    ·轻松几步将美女照片处理为手工素描
    ·巧用Photoshop画笔轻松绘制创意特效


      相关软件 Fireworks画矢量立体图标完整流程相关文章
    用Fireworks为照片做精美边框 用Fireworks绘制网页视觉设计稿
    Fireworks绘矢量风格“大雪盖顶”特效 Fireworks绘XP风格精致图标
    Fireworks滤镜模拟滴溅油漆斑点效果 Fireworks三维插件辅助绘制转动立体球
    Fireworks做马赛克文字特效 Fireworks精细描绘甲壳虫汽车
    Fireworks打造精致播放器水晶图标 Fireworks轻松绘制简单卡通海景画
    Fireworks巧绘水晶葡萄 Fireworks绘制精致立体IPOD
    Fireworks去照片红眼功能使用详解 Fireworks绘制精致三维仿真金属小球
    Fireworks绘精致矢量美女插画 Fireworks轻松绘制简单漂亮的立体Logo
    Fireworks逐帧动画效果及实例剖析 初学必读:怎样学习Fireworks?
    再玩图片魔术:黑白照片的彩色秘密 亮闪闪的美丽 Fireworks巧绘精美闪图动画