手把手教你用Fireworks做按钮
网络与通信
编者按:Fireworks是大家常用的Web图像编辑、处理软件之一,很多初学者只用到了分割图形之类的功能,却忽视了Fireworks图像编辑、Web发布能力。下面通过一个简单按钮的制作,引导大家尽快熟悉几个重要控制面板使用,相信对大家掌握该软件会有帮助。
1.首先是在Fireworks中新建一个图形,然后打开辅助线,并确保对象对齐辅助线,便于我们在制作中更精确地控制。选取菜单View\Guides的Show Guides和Snap to Guides两个命令。
2.用鼠标选取工具条上的矩形工具(Rectangle tool)((图1))。

3.将矩形工具(Rectangle tool)指针贴近辅助线(Guides)矩形区域的一个角,按下鼠标并拖动到对角上((图2))。OK,现在矩形创建完成。不像按钮吧,现在我们要给这个矩形进行必要的修饰。

4.按“Shift+F7”,打开Fill(填充)面板,保持矩形选中状态。在Fill面板上的Fill Category 下拉菜单上选择Linear(线型渐变)方式((图3))。

5.然后在Fill name下拉菜单上选择“Black,White”方式(黑色向白色渐变)((图4))。

6.点击编辑按钮(Edit),然后把左边的颜色样本向右边拖一点,使黑白渐变更加暗淡一点((图5))(注意这里增加或者减少颜色标本,都是用“拖”完成的,自己多试试)。渐变效果有了,还差点立体感。

7.选取菜单Windows\Effect命令,调出Effect控制面板。它主要就是对选取的对象做些诸如颜色调整、浮雕之类的效果((图6))。

8.在Effects(效果)面板最上面的下拉菜单中选择Bevel and Emboss\Inner Bevel(渐变和浮雕内斜面,(图7)),这里有很多效果可以选择,在练习的时候可以多试试其他的效果。

9.在斜边形状的下拉菜单中选择Sloped,然后把边缘宽度设为4((图8))。

注意:在加上效果以后如果想修改应先选中作用对象,然后可以点击Effects面板上的Edit and arrange effect按钮((图9))。

在Fireworks中我们要把对象创建为Symbols(符号)。Fireworks中的(符号)是存储在文档的库(Library)中可以重复利用的元素。记住这点很重要。
10.现在选中我们刚才做的矩形按钮,选取菜单Insert\Convert to Symbol命令,将物件转化为符号。
11.在Name(名称)一栏中填入 “网页作坊按钮”。 再在Type(符号类型)选项中选择“Button”,再点“OK”((图10)0)。

现在这个按钮应被一层绿色所覆盖(如果你没发现一定是你上面哪步出了问题),并且在左下角有一个小箭头。绿色表示分割区,箭头表明这个矩形区域是存储在库中的符号例图。
12.选择菜单Window\Library命令,可以看到在库(Library)中的按钮((图11)1)。

现在我们再来给按钮添加上必要的文字。
13.鼠标双击这个按钮打开按钮编辑器。
14.选择Text tool (文字工具),然后在按钮编辑器中的按钮上单击鼠标。
15.在Text Editor (文字编辑器)中可以选择字体选择,字号对齐方式等。在这里我们选择“黑体”(系统默认字体,字体你可以随便设),大小为20—point。颜色我们暂设为蓝色吧((图12)2)。

16.输入“网页作坊”,并单击“OK”,接下来把文字放到刚才制作的矩形按钮上面。
17.按下F11,调出Library(库)双击我们刚才制作的按钮符号(注意是点击符号前端的“Button标识”,在弹出的对话框中,选择Over (鼠标滑过)项,然后单击下面的Copy Up Graphic (复制弹起图像)按钮。在Over (鼠标滑过)中的图像是指在已完成的网页中当鼠标指针滑过这个按钮时显示的图像((图13)3)。在Over视图中,我们可以对按钮进行编辑,使之变化一下。例如我们可以改变渐变色的方向((图14)4)。


20.差不多了,现在我们来预览一下。点击工具面板下面的隐藏切片图标,就可以隐藏掉按钮上覆盖的绿色((图15)5)。

21.点击preview标签,把鼠标移到按钮上面就可以看到变色的效果了((图15)5)。
22.按钮没链接怎么行,加上。点击Object面板上的“Link Wizard”(链接向导)在Link Wizard (链接向导)上的link标签上输入链接地址,例如我们输入:http://www.cpcw.com((图16)6)。

注:按钮虽然简单,但是站长们如果配合Web图形使用,一定事半功倍。这里只是给大家提供按钮制作的一些基本思路。比如在Effect控制面板中我们通过参数调节,可以为按钮制作出很多效果。熟练应用这就要靠大家摸索了。