Fireworks 9亲密接触(3):实用至上的超级缩放

　　更多精彩设计类图文及视频教程，尽在PConline创意设计栏目。

sflj www.it55.com kg^&fgd

　　Fireworks 9亲密接触系列文章目录：

http://www.it55.com/

　　《1.轻松打造Flash相册》
　　《2.效率倍增!fireworks 9创新Pages功能体验》
　　《3.实用至上的超级缩放》（本文）

　　Scaling（缩放）在Fireworks中是经常使用到的一个操作，当我们在设计一些网页或者是UI的界面时，往往会使用到相同的背景或导航，只是宽度和高度不同，这时我们就可以把事先制作好的背景或导航复制，然后进行缩放。但是直接的缩放就会出现问题，如图1.1所示。 免费资源www.it55.com

vd;k;l www.it55.com rdfg

图1.1 圆角矩形的按钮 45398 www.it55.com it55学习IT知识，享受IT生活 4dfkjn

　　我们需要把下面的按钮进行缩放，改变它的宽度或高度，使用Fireworks的缩放工具进行调整，调整后的效果如图1.2所示。

www.it55.com

图1.2 按钮变形后的效果

www.it55.com在线教程

　　通过观察大家会发现，一旦使用缩放工具变形后，圆角矩形的圆角度数发生了改变，包括其阴影特效和文字都发生了改变，这并不是我们需要的效果。对于这种变形，我们可以称之为Fireworks Scaling 3，因为从Fireworks 3开始变形工具的功能就已经是这样了。 那有什么方法可以解决呢？我们先来看看传统的制作方法在Fireworks里是如何完成的。具体操作步骤如下：

　　1、在Fireworks中制作一个按钮，这里直接使用的是Fireworks的样式，同时在按钮上输入文本，效果如图1.1所示。 免费资源www.it55.com

　　2、选中圆角矩形按钮，选择【Modify(修改)】@@【Flatten Setection（平面化所选）】（快捷键：【Ctrl+Alt+Shift+Z】）命令，将其转换为位图的编辑模式。

　　3、选择绘图工具栏中的【矩形选取框】工具，选择圆角矩形的一半，剪切并且粘贴，这样可以把这个圆角矩形拆分成上下两个部分。如图1.3所示。

www.it55.com在线教程

图1.3 把矩形分成上下两个部分

  45398 www.it55.com it55学习IT知识，享受IT生活 4dfkjn

　　4、使用【指针】工具，移动按钮的上下某一部分，使上下之间间隔一定的距离。效果如图1.4所示。 vd;k;l www.it55.com rdfg

免费资源www.it55.com

图1.4 改变矩形之间的距离 www.it55.com

  IT资讯之家 www.it55.com

　　5、继续使用【矩形选取框】工具，选择上方按钮的一小部分，效果如图1.5所示。 www.it55.com在线教程

www.it55.com

图1.5 选择按钮的一小部分 vd;k;l www.it55.com rdfg

  IT资讯之家 www.it55.com

　　6、直接使用Fireworks的任意变形工具，改变这个选中区域的高度即可，效果如图1.6所示。 www.it55.com

  sflj www.it55.com kg^&fgd

http://www.it55.com/

图1.6 改变选择区域的高度

  www.it55.com在线教程

　　这样也是可以任意改变按钮的宽度或者是高度的，但是制作起来比较麻烦，其实它的中心思想就是指变形按钮中的一部分，而另外的区域则不需要变形，那么我们可以使用Fireworks 9的Scaling 9来轻松完成！下面我通过一个实例来给大家介绍一下Fireworks 9的Scaling 9的使用方法，具体操作步骤如下：

www.it55.com在线教程

　　1、同样在Fireworks中制作一个按钮，同时在按钮上输入文本，效果如图1.1所示。 45398 www.it55.com it55学习IT知识，享受IT生活 4dfkjn

　　2、选择按钮和文本，按快捷键【F8】把这个按钮和文本同时转换为元件。这时会打开转化为元件的对话框，效果如图1.7所示。

图1.7 转换为元件对话框 IT资讯之家 www.it55.com

  www.it55.com

　　和Fireworks 8不同的是，Fireworks 9的转换为元件对话框除了可以选择转换元件的类型以外，还多了一个选项菜单，其中的Enable 9-slice scaling guides选项表示是否使用Fireworks 9的Scaling 9功能，这里当然应该选中。而对于转换的元件类型，选择图形元件即可。需要注意的是在Fireworks 9中，只有图形元件和按钮元件可以使用Scaling 9的功能。 www.it55.com在线教程

　　3、点击确定按钮，这时画布中的按钮就转换为元件了，效果如图1.8所示。 www.it55.com

www.it55.com在线教程

图1.8 把按钮转换为元件 www.it55.com在线教程

45398 www.it55.com it55学习IT知识，享受IT生活 4dfkjn

　　4、双击画布中的图形元件，打开元件的编辑窗口，这时大家所看到的蓝色的虚线就是Scaling 9的引导线了。效果如图1.9所示。 45398 www.it55.com it55学习IT知识，享受IT生活 4dfkjn

（阅读次数：）