目前矢量图的运用越来越广泛,特别是对于喜欢Flash动画的闪客来说,完成一个好作品经常需要大量精美的矢量图片。如果你善于手绘,那当然最好了,可毕竟不是每个人都能画得很好,而网上能找到的现成的矢量图片并不多,所以很多人会选择采用把位图转化为矢量图的方法。目前可以完成这项工作的软件很多,今天我们就试试Freehand内置的trace工具来实现位图到矢量图的转化工作。
首先要把需要转化的位图导入Freehand,请使用 Import 命令,当出现直角符号的时候,在作图区点击一下就行了。如果你是新建的空白文件的话,位图会导到Foreground层,有必要的话先调整好位置,为了防止以后不小心移动它,请先把位图所在层锁起来,然后点击层面板右上方的黑色三角形在Foreground层上面新建一层,这一层用来单独放置转化后的矢量图。(现在层面板的情况如图)

这里我导入了一幅桃花的图片来做实验。看到浮动工具栏上魔术棒样子的图标



可以说,按照trace默认的设置可以应付大多数的转化,不过多于精益求精的你来说,不可以就此满足,我们还要学会 根据实际情况配置不同的转化参数 ,以得到最佳转化效果。 双击trace图标

1、 Color mode: 用于选择颜色模式,在这里你可以设置最终的矢量图是彩色的还是灰度的,RGB或者打用的CMYK模式,并且你能确定下颜色的数量,颜色数量越多最终效果越细腻,最多为256色,实际使用中16色已经足够。

3、 Trace layers: 转化图层的选择,Foreground——前景层,Background——背景层,All——所有的层,这里我们的位图处于Foreground层,所以我们选择它。
4、 Path conversion : 转化方式。这是最重要的一项设置了,将直接影响最终效果,我们一项项来看看:
Outline :它会把位图转化为一个个独立的矢量色块,它们之间可以互相重叠,这是默认的选项,可以说适合大部分情况,它下面还有个小的选项——Path overlap,路径重叠项一般设为Loose或者Tight,其中Tight可以产生更精细的效果,而None适用于转化纯线条或文字的位图。
Centerline :和Outline相反,它是用线条来呈现效果的,比较适合那些线条很多而填充很少的图像。下面的Uniform lines选中时表示将采用1个point的统一线宽,而取消选中后线宽就会有粗细变化了。(如图)

Centerline/Outline :综合了上面两种情况,线条色块兼而有之,主要由软件自己分析,你也可以设置下它们转化的临介值,Open path below,数值越大,最终转化为线条也越多,反之,色块将相应地增加。(如图)

Outer edge :比较特殊的一项,它只产生外围的轮廓,你可以在里面填色制作些特殊的效果,当然如果和paste inside配合,可以很方便地去掉位图的背景。(如图)

6、 Noise tolerance: 杂色的容忍度,这也是一个非常重要的设置,容忍度低越接近原图,容忍度太高将丧失更多细节。为了说明问题,我们只转化树枝部分看看,左边这张图容忍度设为5,而右边这张为15,我们移开顶部色块看的清楚些,左边的因为容忍度低,所以内部保留了杂色,而右边的就忽略不记了,不要小看这些细微的杂色,因为是矢量图的缘故,图像的字节数很容易因为它们而迅速提升上去。对于这张图来说,我们并不需要太多的细节,所以采用15的容忍度就比较合适了。


容忍度为5的移开树枝容忍度为15的移开树枝
7、 Wand color tolerance : 颜色容忍度,这一项只有在根据颜色选取转化区域时候才有意义,如果你用过photoshop的话就应该记得,它在魔术棒设置里也有类似的项目,设置的数值越大,选择时候就越宽松,所有接近的颜色都会被选中。
对于这张图,我们只要修改下杂色容忍度就行了,转化后的效果如图。


容忍度为5的整个树枝容忍度为15的整个树枝

最终的优化 :对于最终的矢量图,最好的情况莫过于尽可能地接近原图而存储的字节数又越小越好,所以有必要的话可以进一步的优化一下。这里提供有两种方法:
第一种:在Freehand里面做,请选中所有的矢量图片,从菜单中选中Modify>Alter path>Simplify,设置一个Amount数值,切记不要太贪心了,设为1就差不多了,太高容易变形。
第二种:在Flash里优化。先选中所有矢量图,然后按下Ctrl+B,打散它们,选择Modify>Optimize进行优化,不过我们并不推荐用它来优化,因为有时候会使图形变化比较大。