Fireworks 8 制作网页效果图

这里主要介绍的是Fireworks 8的位图工具的使用，如果你用过ps的话，会感觉这两个软件在位图处理中有很多相似的地方，本例是一个以女性化妆品为主打产品的企业宣传网站“北京达美”的形象页面效果图设计。达美公司一直致力于结合科技和自然的化妆品产品的研发。由于达美公司主打自然健康的产品理念，因此在整体的页面设计中以绿色为主要的风格，同时配以女性模特、植物和蝴蝶的素材来体现清新、自然的感觉。如图1.1所示。
4 L! `, c; T. P: F
  m2 ~1 V5 g0 G: t" F# i+ s' [
# T; L( C1 H6 \- r1.1 北京达美公司网站形象页面效果图（点击放大）。
1．新建一个Fireworks文件。
2．在弹出的【新建文档】对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。如图1.2所示。


图1.2 【新建文档】对话框
3.选择绘图工具栏中的【选取框】工具，在【属性】面板中进行相应的设置，如图1.3所示。
9 P( ^* W( U; I3 g& U4 f! }* ]
' O. j, `1 ^$ C: S& _  k) M
& u9 V! U6 f8 E8 n8 y4 W图1.3 【选取框】工具的属性设置
2 A% K3 p$ l8 b4.使用【选取框】工具在画布的右侧绘制一个矩形选区，如图1.4所示。
; r5 ^& F# p) n: R
6 a& C5 p2 c/ N
图1.4 使用【选取框】工具绘制选区
+ g9 Y3 a* m3 m: M! O6 f" g+ F5.选择绘图工具栏中的【渐变】工具 ，这时【属性】面板会自动变成渐变色的调节属性。设置渐变的类型为线性渐变，渐变颜色为白色过度到绿色。如图1.5所示。
* B6 J' q9 o' P/ S: [* K
- d1 \  H1 q) t; v, ?/ B
图1.5 【渐变】工具的属性设置
" s; k3 h! Q9 A- H4 B' U6.使用【渐变】工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。如图1.6所示。填充完毕，按快捷键【Ctrl+D】推出位图编辑模式。
2 L9 t+ g3 ^9 U0 I% L, |3 w
$ S) G  [2 f' }& `& x% T% ~
, c- Y. `. e8 Z4 R图1.6 给选区填充渐变色
【说明】使用【渐变】工具在选区单击，得到的渐变色方向默认为水平方向，如果希望得到不同方向的渐变色，可以使用【渐变】工具在选区中拖拽填充。
7 \6 C2 K: t+ P0 l0 C/ q) H7.在Fireworks 8的新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的【椭圆选取框】工具，在【属性】面板中进行相应的设置，如图1.7所示。

! D. M: |5 p' n1 m- C! j- f  y
. H. j5 s2 y: X6 k# Y5 X& I图1.7 【椭圆选取框】工具的属性设置
; W, z: M! b5 F" L8 \6 A1 Q8.使用【椭圆选取框】工具在图像“花草.jpg”中绘制一个正圆的选区。如图1.8所示。

' o6 e  E& A: L
图1.8【渐变】工具的属性设置
) O3 e( C. D; h. X
9.按住键盘的【Shift】键，这时在鼠标指针的右下角会显示一个小【+】号，表示添加选区。使用【椭圆选取框】工具在当前选区的基础上增加一个新的选区。如图1.9所示。


图1.9 使用【椭圆选取框】工具增加选区
10.现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区，如果需要调整选区在图像中的位置，在【椭圆选取框】工具选中的状态下，直接用鼠标移动即可。把选择的像素区域，复制到前面新建立的画布中来。如图1.10所示。

$ K6 d0 [- x; a6 U. A, B
图1.10 把选中的像素区域复制到画布中
# k, V3 H# F& P  c11. 在Fireworks 8的新窗口中打开事先准备好的图像素材“模特.jpg”，选择绘图工具栏中的【多边形套索】工具，在【属性】面板中进行相应的设置，如图1.11所示。


  J# A5 M  K: ~图1.11 【多边形套索】工具的属性设置
: m6 L* r" E, q5 @  W7 F4 ?( \12.使用【多边形套索】工具,把图像素材“模特.jpg”的人物区域选中，如图1.12所示。在选择的过程中，不需要完全的压边，因为有羽化的设置。同时如果不小心选择错误的话，必须重新绘制选区。
3 ?6 P' d) a* N
3 D# q) k/ X- I& \0 t& f" N' x
8 z# `$ T6 q6 h6 f$ D图1.12 使用【多边形套索】工具选择像素区域
, C) I4 N  A" f( {! ?13.把选中的像素区域复制到前面新建的画布中，如图1.13所示。


4 V- f$ e( U- [, N* f& f5 R图1.13 复制选中的像素区域到新的文档中
14.选择绘图工具栏中的【椭圆选取框】工具，其属性设置和前面一致。在画布中绘制一个椭圆的选区。如图1.14所示。
+ B  t: v# w! U1 y1 G

图1.14 使用【椭圆选取框】工具绘制选区
15.选择【选择】@@【反选】命令（快捷键为【Ctrl+Shift+I】），对选区进行反选操作，这样选中的就是椭圆选区以外的部分。如图1.15所示。


& j  \( p) R, H9 m图1.15 对选区进行反选操作
11.在图层中选择图像素材“模特.jpg”所在的图层，按键盘的【Delete】键，即可删除所选中的像素区域。根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除，最终效果如图1.16所示。
; I! N; @! o" ?( @4 f/ [

图1.16 删除选中的像素区域

, |0 i  L# Y( W$ K2 y+ W& B/ A17.选择【修改】@@【变形】@@【水平翻转】命令，改变模特素材的水平方向。并且使用【缩放】工具适当调整图像的尺寸，对齐到相应的位置。
. Y4 y1 m( N4 M& J9 y4 d18.打开【属性】面板中的【亮度/对比度】滤镜命令，适当增加其【亮度】和【对比度】属性，使图像素材更清晰明亮。如图1.17所示。

6 u6 k6 X' V4 Y' y) ~3 w8 t5 t
图1.17 对图像素材进行色彩调整
0 N+ I8 b0 Y8 B19.使用绘图工具栏中的【直线】工具，在画布中绘制一个十字坐标，并且在【属性】面板中设置其笔触样式为虚线。如图1.18所示。
2 J- S# R+ @" t2 z3 D! ~* n; L
0 C2 l8 i# C; ~  S2 `
. H6 B( k5 K( k* @' ?/ _' R图1.18 绘制十字坐标
& ^9 j7 @; Y: B20.在Fireworks 8的新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的【多边形套索】工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。如图1.19所示。

$ M; y, X! q- T" \* K0 o) y
图1.19 使用【多边形套索】工具选择像素区域
21.首先把向日葵复制一个，选中复制的向日葵图像，在【属性】面板的【滤镜】菜单中选择【模糊】@@【运动模糊】命令。
* X/ |! F1 q7 S- N, E" f22.在弹出的【运动模糊】对话框中设置好相应的属性，效果如图1.20所示。
% w$ m8 g. S$ e, Y2 K* b# @0 i
1 C% j( i& g, i
图1.20 给图像添加【移动模糊】滤镜
; f5 N6 q, J( D+ W' v: d  {/ h23.在【图层】面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，并且同时设置其【透明度】为40。如图1.21所示。
! X) x" Q+ L+ p/ Q6 d- D9 |

$ i9 r6 s7 N6 @4 e0 z. d; ^图1.21 调整图像的排列顺序和透明度
24.把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上，如图1.22所示。
0 `, x* z' ]/ d2 `* W' \
- r# |( M# ]% M4 x
% {6 L% E& S$ @. r图1.22 缩小向日葵图像的尺寸，并且移动到相应的位置
25.使用绘图工具栏中的【选取框】工具，选中图像中多余的像素区域，依次删除。如图1.23所示。


1 Z* y) M  q3 U; M, {( h6 x, J图1.23 使用【选取框】工具，删除图像多余的部分
" P. _  }3 w" F  _1 N+ j21.最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。效果如图1.1所示。


点击放大
素材：


! }, N& Q* R: c/ w. l点击放大
  D1 o0 z& b) f. v2 r, M7 B1 K6 j

: N5 ^5 r7 B1 i' M( m# w& l
$ ~  C" d  w3 t5 M8 X* n! N8 Y