Fireworks合成图像法设计化妆品网站首页

　本例是一个以女性化妆品为主打产品的企业宣传网站的形象页面效果图设计。该公司一直致力于结合科技和自然的化妆品产品的研发，主打自然健康的产品理念，因此在整体的页面设计中以绿色为主要的风格，同时配以女性模特、植物和蝴蝶的素材来体现清新、自然的感觉。如图1.1所示。　　借这个例子我们可以学习到Fireworks 8的位图工具的使用，以及如何利用素材设计网页设计稿的方法。
　　



1.1 效果图
5 n1 C, O- W" ]! L; P8 d. N素材如下
. \" U% _. D$ ]3 y: k
' J$ e/ ?. k9 p2 {$ [) s& h) x
) X4 d+ s8 J0 ~0 |

! v- ~3 G4 ], a9 c" ?: _
+ @; E5 H6 u$ f4 ]+ @

　　设计过程：
0 X; O- z2 {9 e6 ]4 Y! v0 T　　1．新建一个Fireworks文件。
　　2．在弹出的【新建文档】对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。如图1.2所示。　　
( e. U8 }: O) f
' ^- j' F+ Q5 B) U
- H/ I5 \1 `7 K& X! u
图1.2 【新建文档】对话框
% ~$ y3 S: ~+ |5 ]% W* ~! N　　3.选择绘图工具栏中的【选取框】工具，在【属性】面板中进行相应的设置，如图1.3所示。
/ }# m8 p: j7 {+ G; V! T. U% I　　



1 D2 O5 U: Y. C+ F( E4 |  n图1.3 【选取框】工具的属性设置
　　4.使用【选取框】工具在画布的右侧绘制一个矩形选区，如图1.4所示。　　
4 B4 P4 Q* W6 u2 |* R# }2 G/ J
: L3 q/ f  q; v- b9 U
& [9 n4 i3 U! j/ \
图1.4 使用【选取框】工具绘制选区
$ F& K: v0 G4 B  A　　5.选择绘图工具栏中的【渐变】工具 ，这时【属性】面板会自动变成渐变色的调节属性。设置渐变的类型为线性渐变，渐变颜色为白色过度到绿色。如图1.5所示。　
/ R1 R# g0 p; P　　

" Q  H' Y5 J6 x7 c8 v: E& ]

1 N: F6 e! d: G图1.5 【渐变】工具的属性设置
" N  ]  b, R& n" }( H　　6.使用【渐变】工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。如图1.6所示。填充完毕，按快捷键【Ctrl+D】推出位图编辑模式。　　

: T. J' z1 B8 k+ a' {; @1 Y. `
8 T: F5 @+ {! Y5 o9 ^
# b4 I" {0 i9 V+ i" [7 o, t% B" p图1.6 给选区填充渐变色
8 I3 r( `! a( v9 Y2 ?3 a+ J　　【说明】使用【渐变】工具在选区单击，得到的渐变色方向默认为水平方向，如果希望得到不同方向的渐变色，可以使用【渐变】工具在选区中拖拽填充。　　7.在Fireworks 8的新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的【椭圆选取框】工具，在【属性】面板中进行相应的设置，如图1.7所示。　　
  h3 V2 X0 R- o* l* \  x1 J

% D7 `( y' b4 @' n) E7 g
: D8 y  Z- E# z( t: m& h
图1.7 【椭圆选取框】工具的属性设置
6 b( m8 B4 t; ?9 l6 r9 N3 G( h1 A& i　　8.使用【椭圆选取框】工具在图像“花草.jpg”中绘制一个正圆的选区。如图1.8所示。　
  Q4 M& \$ f9 R1 J  f

4 z; d' T& I( q& u( N$ q1 o1 x
; k' N- c: `2 I2 S0 O1 u图1.8【渐变】工具的属性设置
　　9.按住键盘的【Shift】键，这时在鼠标指针的右下角会显示一个小【+】号，表示添加选区。使用【椭圆选取框】工具在当前选区的基础上增加一个新的选区。如图1.9所示。　　
. |8 y; A8 j0 V. I8 ^


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

1 x- ]+ j* H  l$ ]1 b0 w; I

; I  _, I: e* C, f6 c图1.10 把选中的像素区域复制到画布中
+ i* ?, S: x3 k0 _- n) y　　11. 在Fireworks 8的新窗口中打开事先准备好的图像素材“模特.jpg”，选择绘图工具栏中的【多边形套索】工具，在【属性】面板中进行相应的设置，如图1.11所示。　　

" ]! `) W4 I, S% V- G* d
6 ?2 F6 L1 K6 r0 p2 @- d$ \
图1.11 【多边形套索】工具的属性设置
　　12.使用【多边形套索】工具,把图像素材“模特.jpg”的人物区域选中，如图1.12所示。在选择的过程中，不需要完全的压边，因为有羽化的设置。同时如果不小心选择错误的话，必须重新绘制选区。　　


5 Y! M% _  p! B3 M- c5 X& {
图1.12 使用【多边形套索】工具选择像素区域
　　13.把选中的像素区域复制到前面新建的画布中，如图1.13所示。　　


! V" i3 D4 g; s5 l) Q# X
: D" r/ M4 o; s4 s6 B9 h图1.13 复制选中的像素区域到新的文档中
　　14.选择绘图工具栏中的【椭圆选取框】工具，其属性设置和前面一致。在画布中绘制一个椭圆的选区。如图1.14所示。　　



! z* ]5 ~9 S3 y! d# M/ E图1.14 使用【椭圆选取框】工具绘制选区
　　15.选择【选择】【反选】命令（快捷键为【Ctrl+Shift+I】），对选区进行反选操作，这样选中的就是椭圆选区以外的部分。如图1.15所示。　　
- L* J5 L. s; x% R+ g


图1.15 对选区进行反选操作
　　11.在图层中选择图像素材“模特.jpg”所在的图层，按键盘的【Delete】键，即可删除所选中的像素区域。根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除，最终效果如图1.16所示。　　



; L* T* q" `# ?( D  {图1.16 删除选中的像素区域
1 u2 ~# G7 D1 S5 K& J/ Q- d+ l　　17.选择【修改】【变形】【水平翻转】命令，改变模特素材的水平方向。并且使用【缩放】工具适当调整图像的尺寸，对齐到相应的位置。　　18.打开【属性】面板中的【亮度/对比度】滤镜命令，适当增加其【亮度】和【对比度】属性，使图像素材更清晰明亮。如图1.17所示。　　
4 E3 Q: S1 B* l5 v
7 M1 B/ S8 w4 t) {* z

图1.17 对图像素材进行色彩调整
  h) f, M  C1 W　　19.使用绘图工具栏中的【直线】工具，在画布中绘制一个十字坐标，并且在【属性】面板中设置其笔触样式为虚线。如图1.18所示。　　
1 _5 M; m+ K2 A* |; G
  R( a/ @3 f  g0 O' \
/ `4 T! i  j: X7 t* ^" O: n
图1.18 绘制十字坐标

% v6 R# t) J% j) {　　20.在Fireworks 8的新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的【多边形套索】工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。如图1.19所示。　　
. F9 G' x" ?- n) }8 X" X
. g8 B6 u3 O" c; H& T# q  p3 w# o
. e6 _' u( D0 x7 f) h
图1.19 使用【多边形套索】工具选择像素区域
- y6 r' P' c$ @4 e; z+ y* A) ]+ z! |　　21.首先把向日葵复制一个，选中复制的向日葵图像，在【属性】面板的【滤镜】菜单中选择【模糊】【运动模糊】命令。
　　22.在弹出的【运动模糊】对话框中设置好相应的属性，效果如图1.20所示。　　


" [  Z- A/ p& |3 q0 v
; g, _( o1 E$ X# x6 J5 v图1.20 给图像添加【移动模糊】滤镜
　　23.在【图层】面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，并且同时设置其【透明度】为40。如图1.21所示。　　
! U& K7 M& u  g* R: N, F7 t
* g8 O* w/ i: `: O
" R0 o9 \0 R9 `4 }
  b+ |8 {& g) _- h  [8 d0 r图1.21 调整图像的排列顺序和透明度
, s  D0 c( j7 V. W% ^0 w( y2 M　　24.把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上，如图1.22所示。　　



图1.22 缩小向日葵图像的尺寸，并且移动到相应的位置
　　25.使用绘图工具栏中的【选取框】工具，选中图像中多余的像素区域，依次删除。如图1.23所示。　　
; V& d. [& o3 |4 H& n) t4 e3 U

; d& }5 |$ ^* G" o& Y
% n) Z' a- F' S* i  N% \5 E  L图1.23 使用【选取框】工具，删除图像多余的部分
　　21.最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。效果如图1.1所示。