Fireworks 4功能指南之一

　这是一个演示，将带你感受在一个典型站点中创造几个新页面的全过程。本演示按照这个过程的不同阶段被分成几个部分。如果你需要更多的帮助信息，在Fireworks里也包括了一个帮助。 　　第一步：安装 　　
9 I; T. B/ m" J9 h1 K
Fireworks：CD中包括了Fireworks的安装程序。CD中还有Alien Skin提供的Alien Skin Eye Candy的演示版本。安装Eye Candy文件夹到你的xtras文件夹中。 　　Dreamweaver 4 CD中包括了Dreamweaver Demo版的安装程序。　　Macromedia Flash 5 CD中包括了Macromedia Flash 5 Demo版的安装程序。　　在我们开始以前，先讲一个名词--“选择物体”：　　在这整个演示中，我将经常提起“选择物体”这个名词。意思是，在工具栏中选择指针工具，点击你想选择的物体。如果想一下子选择多个物体，你也能这样做。方法有两种：　　1. 按下Shift键，然后再用指针工具选择别的物体。　　2. 用指针工具，点击并拖出一个区域，被这个区域所包含的物体都被选中。
/ p7 i1 w* j1 ~1 x% R) d( P7 l
6 W( _( Q3 z* T! e在本地输出带有层的Photoshop文件......打开Demo_04.png或者继续刚才你的演示文件。　　现在我们有了我们网页的基本构思，我们可以把它输出成带有层的Photoshop文件。Fireworks可以将每个遮照物体输出为每个图标的遮照层，因此在Photoshop中进行设计工作可以使用相同的遮照，并且保证图标一样大小。　　在本地输出带有层的Photoshop文件
5 K% I  F& `8 p# [: F8 }

从菜单中选择File/Export
+ ~4 y: j( I' L6 k2 |+ ?

在对话框中，在下拉菜单中选择Photoshop PSD格式

输出的名字为\\\"Layout.psd\\\"

4 N4 T* H# m5 Y2 e) T　　矢量编辑
6 k' P1 A5 |. f! N, t+ X' v: O$ `

打开Demo_04.png或者继续工作在你的演示文件中。我们将在活动图标下面的主要白色区域创建三个带有软边斜角的按钮
( S# i8 c: [3 O2 ]  D

在菜单中选择File/Import
* s0 G6 t/ M0 B  u; B2 C% L

定位Icons.png
- ?" ^6 U) U4 I+ F; m* a% \5 m

在主要的白色区域的活动的位图图标下面单击放置icons.png文件
2 {& j4 M1 ~. A8 S% o; l
' U8 [$ ]+ J0 ^( H2 w  @3 L8 t创建倾斜的按钮在图标后面...... 　　现在,我们将创建倾斜的按钮在图标后面

选择长方形工具
$ x/ S' B6 m3 z/ B+ i* |

拖出长方形

在Info面板中，尺寸设置为70W×40h

在Object面板中，设置圆角为30

7 C7 @6 F0 O# I  g6 S) r- t8 i
5 W- j- n6 q9 r  F! X+ E

在Fill面板，选择linear模式
6 l2 ?: X0 `9 y

在Fill面板中，单击edit按钮来编辑渐变色

单击左面的颜色方块选择米色#CCCC99


2 n( T7 i) U+ Z8 R1 ~

单击右边的方块，并且选择高亮的兽皮颜色#cc9966

在渐变编辑器外面单击来关掉它

在Fill面板，改变填充的Edge，把Hard改成Anti-aliased

现在，让我们调整渐变色以便我们可以从上到下，在矩形按钮上垂直地渐变
8 P0 W2 \* W  a/ {8 o

在矩形物体上，拖动渐变填充线上的黑色小园点，将它拖到靠近物体顶端
; r& P3 J9 m8 \

拖动渐变填充线上的黑色矩形小方框，将它移动到物体的底端。确保连接这两个小点的线是完全垂直的

" c6 r, M: `5 m6 x& _, d! D' T

在Effects panel面板中，选择Bevel&Emboss/Inner Bevel
( [( @# z' U6 L* e6 n. {3 k

在下拉菜单中把\\\"Flat\\\"改成\\\"Smooth\\\"

在Bevel窗口外单击关掉这个窗口

当按钮还是被选择时，按住Option键（Mac）或者按住Alt键（PC），单击按钮向下拖来进行复制
, z) _$ N) Z3 |' M! B9 D

再次进行复制，这样你就有了三个按钮，三个图标各有一个
3 W5 V% w; X1 n* d  C1 r2 P# X

放置每个按钮在图标的上面，并且按钮的左边缘和文字块的左边缘对齐
+ U( T# k3 }0 h. |! ]& [5 a

按住Shift选个全部的按钮，并选择Modify/Arrange/Send to Back

优化图象......打开 Demo_05.png 或继续在你的演示文件中工作。　　优化图象

·在这段中，我们将在网页中切割图片进行优化。在上面有文字的罗盘图象需要进行选择性的JPEG优化。文本区域应该用于其它部分不同的设置保存

打开Optimize面板，什么都不选择，设置全部缺省的页面输出设置为Gif，Web Adaptive 128种颜色
+ N# _# ~% A- A/ F
　　开启背景层并且用指针工具，选择这个Compass 图象
. O* x! ^3 ^  D2 N: R) m

用索套工具，在这个Compass图象的\\\"N/W\\\"文字边上画一个选择区域

按下Shift键，再次选择Compass图象的每个数字（70,60,50,40&30）

选择Modify/Selective JPEG/Save Selection as Jpeg Mask
3 A  i! y! @; E: V- f+ X

& B/ d: X# C3 m7 L8 B6 k* z' K% H& S

按ESC键取消选定，并退出图象编辑模式
( c! V( _  G8 \$ K) U* Y4 @# m" O

在罗盘和\\\"The Latest In Adventure Travel\\\"的周围画一个切片

当切片被选择，在Optimize面板中，选择JPEG，质量为50%

; a! h* t- b" v) m6 \) P

在优化面板中，接下来选择Selective Quqlity，键入90然后按回车

单击90旁边的图标来访问Selective Quality菜单

在弹出窗口中，检查\\\"Enable Selective Qualilty\\\"复选框，同样也要确定\\\"reserve Text Quality\\\"被选中，单击OK

) |( Q% y! x+ b- R  Z  a; b

单击文件中的Preview标签来观察你的佳化效果