|
8 D% D2 J' P6 U* V/ k. z 前段时间我们一起了解了《Studio MX 2004新功能》,今天我们一起来细细品味Fireworks MX 2004的新鲜功能,并试用这些新功能制作各种精彩的实例效果。
- P7 h" N- K* ^1 X+ C
! n4 K U5 q. y( R( @% o 下面的大图是Fireworks MX 2004新版本的主界面(图片较大,读者可以拖动滚动条观看全图),图中用红圈标出了Fireworks MX 2004为我们带来的新的设计、特效工具。. ?* `; k- L$ V$ F. l6 y% X
文章导读7 ~. {$ V5 ]1 ~' {; {( V/ V
G! S3 ^4 f+ A [/ o6 ~
轻松移除红眼丰富的形状图库轻松画箭头快速渐变色填充模糊滤镜
/ Z' x5 q* v4 U1 u# p更多造型工具各式各样的虚线笔刷杂色滤镜颜色替换自定义反锯齿效果
: U# j2 f# V6 Q, s, m! R5 u9 k) Y6 a( A0 P8 h: y
8 W; m, y N+ h Fireworks MX 2004为我们带来的新工具有消除红眼、替换色彩、多样式绘图工具、箭头命令、Shape图形工具等等,特效包括增强的模糊效果、添加杂色、多填充样式效果、系统反锯齿和自定义反锯齿等等。我们将在新体验的旅程中亲身感受这些新功能,下面我们就出发吧!
: a% q1 S" T+ h 一、移除红眼3 n9 E- i3 o2 B9 x4 U( B8 C
移除红眼功能是2004版本中新增的一个功能,主要是为了使Fireworks能处理时下流行的数码相片的工作。下面我们来处理一张有红眼的数码相片。 首先在Fireworks MX 2004中导入一张相片图片,这张相片中的猴子眼睛在拍照的时候形成了红眼。如图1-1。 下面我们使用放大工具将猴子的眼睛部分的显示比例放大,好让我们看得清楚再进行处理。在工具栏中选择放大工具,如图1-2。/ L: J$ K0 I% r' ]8 I
9 y; g+ a% {. P( J
$ p( x) @1 X* b5 [5 ^2 c
% b% _1 I, [, i5 w/ A" O
- L0 E7 N: c# ?" b6 l' P. p$ _* T
图1-1 图1-2
' J* X2 s# @* X6 R! X7 c 然后在猴子的眼睛周围使用放大工具,这样我们就可以更清楚地看到猴子脸部的红眼。如图1-3" R; q" u$ m2 d' A+ ?
; I* X5 h: |9 X' h0 ?8 m7 N. c3 R# \9 Q$ [6 g" Z/ [; P
图1-3+ M/ F. u; ]9 K- ^" D
在工具箱中的图章工具下拉菜单中找到消除红眼工具,如图1-4。
) C; k- |5 |; ]6 A Z$ J; b: x% F1 `! b; V* x
m4 ^2 {. D. R' V+ b0 }& ^& ^图1-4
6 ?! `$ m9 y% k) w) R% r6 x 下面在属性面板中设定红眼工具的形状、大小、压力等等参数,这里我们选择圆形,工具大小(Size)为12,容差(Tolerance)为32,压力(Strength)为25。如图1-5
4 `) |3 f- G# s& T1 {) v2 X
8 B5 `% y7 _( m6 C6 M- p
/ N" S7 L, g& B s图1-5 H7 [- w6 d. z- ~; a1 {
然后在图片上猴子的红眼位置点击鼠标,消除红眼,最后的效果如图1-6,一只可爱有趣的小猴子。( A8 K% p, V: ^/ |1 u6 ]1 }6 W
% `; `3 W) N( @$ |
( V4 F* D5 @: S1 @
图1-6( @! u2 K+ o# F: L% ]/ |
二、巧用形状图库制作小时钟动画
" p0 a3 @* W4 \0 w$ Y" c* k 在Fireworks MX 2004中,新增了形状图库,在样式面板中我们可以看到这些新增的图形,如图2-1。
& M& x( i8 _6 f
; K5 L$ i% k6 i4 m
/ ]2 l; V, L" _图2-1
0 X- B9 p7 [4 B8 V5 d9 H 下面我们利用其中的时钟图形制作一个动态的小时钟,如图2-2。
. L) P' U$ M! }3 ?
/ P; |" } D+ ~* p5 f
, g, I! y3 G! \5 \, M0 Q图2-2. M- t2 p9 i2 v: `+ w- {
首先将时钟图形添加在编辑区内,然后看到时钟上有各个节点,鼠标点击时针中间的节点位置,将弹出一个JavaScript设置窗口,如图2-3,在窗口中输入相应的时间,时钟图形上的指针会根据设定的时间排列好位置,表示出设定的时间。+ a1 S% H @2 O( j
^! @+ K& `4 O" N$ e# h4 J; h, G
! M; M9 v B, z$ Q图2-35 `' B6 F ]/ J* C0 G8 P9 I: b
根据这个原理,在第一帧位置设定时间为13:00,我们可以依次增加5帧,然后每隔10分钟设定一次指针位置,再设定帧的时间间隔为30/100秒。如图2-4,最后播放一下动画看看。
2 [% `0 X, A2 O+ X$ Z
9 }) I2 A6 r& O, T! Z9 L1 a$ B1 k* g% x& R/ h t
图2-45 Q4 Q6 b8 v0 C
三、轻松画箭头
; S0 M+ j$ e5 U 很多图形工具都有自动生成箭头图形的功能,但是Fireworks一直都没有这个功能,2004版本终于有了它,让我们绘画箭头图形轻松上手。0 V7 H8 j& @$ [/ b7 A0 S
首先我们画一个简单的单箭头图形。在工具箱中选择钢笔工具,在编辑区绘制一条直线。在Commander菜单下,选择Creative中的Add Arrowheads。如图3-1
- F# l( W( c% H
/ G5 ]# o5 @1 e. V4 Y2 q7 x3 G" {! M) j
图3-1# N, Z1 o1 r K/ ]* c: r/ [
下面弹出箭头设置对话框,我们可以看到对话框主体分为左右两部分,表示两个方向,我们可以选定直线需要添加箭头的那个方向,勾选Add to End。如图3-2; }: R/ r9 ?; P6 \+ x, H3 ?
) f8 [* ]- [; `' I& J+ `4 G7 ?
1 P7 S/ _1 w% H, X7 {图3-2
! _- |. a1 w4 q) a i: `) v 在箭头预览窗口下方有一个“1/17”的选项,表示箭头的有17个基本形状,我们可以自选。如图3-3
! B6 j8 P7 [0 V1 ~: c. h
, `# D4 P% v) _8 r
r5 Y; u+ c# Z/ I5 C图3-3) K& e! O2 [1 U! l, i
下面我们为直线添加了一个箭头图形,使用移动工具,可以将箭头和直线分离开来,再进行编辑,如图3-4。
# @! A1 R- z- J/ n0 ^' @) E% z# X7 Q3 U3 G4 R* Y9 z+ l% y
7 u n' j/ R" G$ v l* i5 n( p y" z
图3-4
6 ?$ T- G+ L9 j- b J 根据这个设计原理,我们可以绘制出各种风格的箭头效果。如图3-5. v% R/ z' i$ [0 l; _2 \' P
- a% l( v- Y7 S! D! ^) x1 V( T7 e8 V; z% ]( Z% |- X/ Y
图3-5, y9 {: U9 a* [9 D
四、立体环绕球体
_6 J# E! m* c% p 我们做一个立体的环绕球体效果,顺便享受一下2004版本带来的快速填充图像渐变色的新功能。如图4-1。; [" n" E5 k7 i( a9 L X' X
( Y& _. j! g- d" J
/ F0 O; Y) G# K' \
图4-10 J# j. E6 T& P) a( u0 ^* |) e
首先使用圆形工具画一个圆形,锁定当前层。然后新建一层,画一个椭圆,复制这个椭圆,在Modify菜单下选择数字变形命令(Numeric Transform),变形数字为80%,即这个椭圆比原始的大小缩小80%的尺寸。如图4-2
6 ^. A" q' I3 `1 S, v% O F
! ]& j7 r2 p* ^$ j# E* `! C/ o) X" G( t2 l8 }* e
图4-27 V @7 |9 u5 E( `; ^
将两个椭圆选中,在Modify菜单选择打孔命令(Punch),两个椭圆通过打孔合并在一起形成一个椭圆环,如图4-3。
6 w+ q) b1 W; x' b: _# ~
; v. E, C' \2 B# K3 \: [7 _' G- h
% ^7 B6 k* @, x _2 C' }图4-37 o K# z" V+ Q: p; o
下面再画一个椭圆,不过位置有些特别,遮盖住椭圆环的一半,如图4-4,并且调节一下这个椭圆的节点使其沿着底图圆形的边缘,将它们选中并打孔。
+ N# d; @/ r3 @+ e. l1 }* E$ g: S+ M6 A$ }. @1 @# U
0 g1 }* ?/ ~ | }6 `
图4-4
2 V- w. D, z7 A S 图形的基本形状出来了,我们给它们填充渐变颜色。选中底图的圆形,在属性面板中找到渐变填充色,渐变方式为圆形,如图4-5。选定两个色调,添加在圆形上。" ^8 R$ V+ ^3 q
' _$ C% v; p8 f( O7 \% e' f
2 P J& }2 F) f0 u8 U; i+ |+ {, l" C图4-5
; _% y& ]1 X' d$ _ 同理给圆环也增加渐变效果,渐变方式为斜线,两个图形颜色深浅的方向要相同。最后添加阴影效果,得到图4-1的最终图形。 . A( G: S7 ^; G9 e& u6 a
五、光芒四射
* Z* P6 ]9 E% q6 k$ x+ C- K F Fireworks MX2004在滤镜特效中增强了模糊功能,除了以前的模糊和高斯模糊特效之外,还增加了动感模糊(Motion Blur)、径向模糊(径向模糊滤镜)、放大模糊(Zoom Blur)三个效果。下面我们使用这几个新特性,制作一个光芒四射的效果。
5 i; ?" @/ F5 w: G- v; Z. e 首先将文件的背景颜色设定为黑色,然后输入几个文字,我们写上“Yesky”几个字。下面使用放大模糊滤镜处理文字,将数值和质量都设定为100。如图5-1
5 _) h8 y9 R" f; h c. K8 H+ L0 p1 L; ]( z# z b# e
! i% D8 j; ^0 o4 G4 [0 l( P
图5-1
% i; U4 P$ q, W! _' Q; ~9 o9 o 最后我们在文字光芒前再加上文字,给文字添加内阴影(Inner Glow)效果就得到不错的文字光芒效果。如图5-2$ C4 H, ], @2 R% N' z
; d: H2 j2 ~3 }3 U6 F' v$ W6 L) c+ |8 t1 B/ S% V+ `" E% y
图5-2
: G. ^2 w7 I( o4 W 六、快速造型
8 |. v3 A, W0 s2 d) ^ Fireworks MX 2004再也不是只有矩形、圆形、多边形这几种单调的图形工具了,它为了准备了不同形状的绘图工具,让我们轻松获得矢量图形。下面我们这些工具快速画一幅夜空景色,空中有闪亮的星星和美丽的月亮。3 i( R& a9 S# F7 j
首先将背景填充为黑色,然后使用工具箱中的星星图形,在黑色背景上画出星星形状,填充灰、白的渐变色效果,如图6-1。" P7 o. p/ d! `6 O
2 o5 B$ ~# x: |# \9 _; `
t# _( v! W) C图6-1& ? }4 B: y0 s; V' Q& Z
在星星图形上,有几个节点通过鼠标拉动节点,可以从这个基本的图形上演变出其他的效果,如图6-2。% s; R0 ^( T1 n4 {
S4 p8 l' `& J
! Z# k. `/ W; s图6-2
8 S) q- H, y' {5 L9 \! H, W/ l4 z 通过这样的变形,还将改变星星的边数目,如图6-3。; \) [' Q" V; W
" [6 R1 f$ |0 e3 o+ Z' w1 K$ m j7 d8 c8 Z5 S2 C% ]7 Q: O# K
图6-3
5 {" M5 s3 g- P0 B% ~ 这里我们不做复杂的图形了,我们只将星星变瘦一点就行了。然后在属性面板中增加一个内阴影(Inner Glow)的特效,其参数设置如图6-4。
2 N" L$ K' t% K1 i
( Z6 z8 A ?+ O5 v0 X- T- e* r5 v% o
图6-43 M, I! S6 r* n- V1 A3 `" q
最后我们多复制几个星星图形,改变大小和方向,布满在黑色夜空中,如图6-5。. B' d9 q: k; C
. A: ?4 D' g; T5 u5 p. X3 M
: _$ T2 t3 R, y% P1 h图6-5
/ D) U6 {. s( ~6 F; l 接着我们来做夜空中的一轮弯月效果,在新增的图形工具中找到圆形工具(Ellipse tool),如图6-6。( _, @& ~3 C5 a0 `+ P5 k9 X, H1 r5 l
. W- {* t0 J+ L, f! K
; u8 h% j# R, z8 v. A" n图6-6& s) @1 f8 S ^' r3 l; J* k
在夜空中画出一个圆形,用白色箭头选中一边中间的那个节点,将它向内拖动,变成弯月的形状,如图6-7。
: \2 r% i, P+ C# Z1 k; _' M
/ ]# `! N2 p: m; ?6 r! @0 r b! h& X2 v3 h6 z( C
图6-7! `( D3 Q4 C3 t# q C
最后我们把月亮的颜色改为黄色,增加边线条。再加一个光晕的效果,在属性面板中加入Glow发光,发光的颜色为黄色。如图6-8; W$ C$ ~% G5 N& T( f3 U* W
图6-82 h) g/ e. Y9 S+ L8 O1 \& b
旋转、缩小月亮图形的方向和大小,最后得到夜空中的一轮弯月。如图6-9
: k# n0 t5 p! f' @- |
1 \5 l( a& z2 g9 Q- {5 C! o
Q& B# {: I- a' I" J9 p图6-9% l( C* y. t Y0 N" M- g( E
七、虚线任你画; w5 k$ x4 k& j( S' I% O5 O
Fireworks MX 2004增加了虚线笔刷,让我们能随意画出各种样式的虚线效果,如图7-1- }- Q+ e4 ]" n( s: ]
; U# b1 g4 R/ C$ t: b
1 Y. h9 e9 d2 U 图7-1
, F7 |" f& n3 U' X5 L 利用虚线笔刷,我们可以制作很多效果,例如文字的边框,下面我们来试试。先书写一个文字,然后在属性面板中找到笔触的颜色调节板,点开它看到有一个“Stroke Options”的选项,选择这个选项。如图7-2# L m, |( L/ ?# a! s/ I
, b0 v9 b1 T- c) |: ^( A
* d* r. f: A# }# C& i图7-2$ A2 ^7 r' m; }' @
然后弹出笔刷设定对话框,选择笔刷的样式为虚线,再设定虚线笔刷的样式,如图7-3
7 {3 L, U- S, v; B! R1 e& w- E- } G2 g# v8 S% Y
8 u; z+ w$ G, Q8 ]5 G# h& }9 i
图7-3
5 U2 t" X: |! ]1 L- w+ ^ 在虚线笔刷的样式中,我们还可以修改其参数,得到各种效果的虚线,最后得到文字的虚线边框效果,如图7-4。
1 B7 R8 v9 m [9 Z7 _; D" G
; b6 B2 S9 \7 n8 I) N% r+ o$ u% d- n
图7-4/ N) o7 x3 |) t: T$ n7 W+ t
八、更丰富的滤镜- B# g$ y/ D+ v: j7 h8 d0 h
除了模糊效果,2004 版本还增加了添加杂色(Add Noise)的滤镜特效, 有了这个功能我们可以在Fireworks中设计自己的材质了。先画一个矩形,然后添加杂色,数值设定为50。如图8-1。
5 N; E" j. ~1 \. w2 }$ A, X
! f$ C, E8 q L' \
2 f* [! j4 P8 ~) w6 e0 n( o3 }图8-1" b& r' C( \9 t& b
再使用动感模糊,将杂色颜色一个方向模糊,如图8-2。
* W- Q: F2 G! ]6 _
3 X0 n# |; @7 k) d8 y2 @& |- s0 [: O0 x; g
图8-2: Y5 A. ]: |' ?6 b: K/ B7 T( o- B
制作的材质,我们可以添加在文字的填充效果上,下面在矩形框上面再输入一个文字,如图8-3.
1 s9 q, x& ^3 t! N9 d. q. P0 P5 N! k3 ~5 y: T$ M' w
9 X6 t7 G2 @& u) ?% C) w
图8-3
1 S0 q+ o, x: G2 X! ]0 r6 g# d# p 将它们全部选中,在修改菜单下选择遮照(Mask),然后选择“Group as Mask”,如图8-4
+ p; M4 m$ C2 j) H! }
* o4 f% r3 ^7 e; k" D( u" A9 ^$ U; F% M3 S; v
图8-4; K$ f4 T1 p( M
再来看看文字效果,我们自定义的材质已经附加在文字填充图案里了,如图8-5。$ Y2 n- `( P: n5 Q1 F2 ]- t `
Z+ P6 `: S% {' g9 @% z5 D4 O5 f6 v2 V" {" J. V0 ]
图8-5
% f7 M. `# ]$ v. M 九、颜色替换3 [- k: c. _+ v# |7 L
Fireworks MX 2004版本最大的一个特点是提供了颜色替换工具,如图9-1。
$ d9 [3 n8 N. P% t% F& V8 X- E: Z L/ k, S. [. ] D7 ^
7 Q$ o. R( E) S* w$ ~& \6 G 图9-1
! \, E2 W" @3 T* ]* f* s7 S& M& \ 下面我们来试一试这个新功能,打开一张盛开的鲜花的图片,如图9-2。 E( b0 D1 y" n! z2 M1 H" X
) |) l& q/ G# u9 i/ m U$ u4 a
w6 F( ?& ~4 O$ c8 N. a" {# `5 B
图9-2- a# F( ~6 s! I a
我们将这紫红色鲜花,部分花瓣的颜色替换成其他的色彩。使用替换色彩工具,然后在属性面板中设定工具的形状为圆形,大小为20,容差为255,压力为200。特别注意的是我们要设定将图片中的哪种颜色,替换成哪种颜色,这里将Change中准备替换的颜色设定为紫红色(用墨水笔在图片的花瓣上取色),在To替换后的颜色设定为浅蓝色。如图9-3。
7 J2 q. G7 g! x" y- \# y2 p! t: S
5 h1 x; e; z5 y0 b8 I4 p6 }, E, o0 o3 K) p8 g
图9-38 b+ o8 D3 d& _2 O) u0 x
下面使用颜色替换工具在花瓣上进行颜色处理了,处理时将显示比例放大,让我们看得清楚一些,根据花瓣的大小我们随时更改工具的尺寸。如图9-4。$ k; p3 x/ ~, d: g( a* v3 s
2 T$ N) b5 r7 ~& k" m1 p6 ]% m
# T. m% N& A9 g) H# Q
图9-4
) g8 E3 k/ F# e& w 通过这个方法,我们将部分花瓣的颜色替换成为浅蓝色,整张图片的效果变了,如图9-5。
, l) @/ l& V6 }! D1 o
$ P5 ]5 J% U/ N' G3 r% P# |
0 t6 }4 ]) l7 d8 r# A% U图9-5( T: c' ]+ b `
十、系统反锯齿和自定义反锯齿
; t X8 \7 |2 I1 \9 K 这个功能是为了解决在Fireworks中字体边缘不光滑的问题,如图10-1,这个字母“A”,放大后看到它的边缘有锯齿不光滑。: U, N1 {: D! K! Y
+ U! A1 a' |2 d3 `3 G" t
2 [7 V, K4 C1 V. q
图10-1
8 a: _. P$ ~) O3 R# H3 Y. o5 i 我们在属性面板的字体边缘设定选项,看到2004版本增加了系统反锯齿(System Anti-Alias)和自定义反(Custom Anti-Alias)锯齿两个选项,如图10-2。
$ Z( @# d7 B0 \' w' ~2 z7 ?$ ~. w+ I @. _* E( H
8 P! M) z( `" s7 X1 H/ |( m图10-2; o6 b- X% q1 | R: r8 |* e
使用系统反锯齿功能,将由系统自动调节文字边缘的光滑度。使用自定义反锯齿功能,将由用户自己定义光滑度,如图10-3,我们选择自定义反锯齿之后,看到自定义的选项。
- D$ x, E4 m) n' C# U$ @. Z( v2 Y5 Y) \
* M4 W: B: {2 N9 r图10-3
+ i# K) e( v# J; r5 d) y7 I0 Z, T 在oversampling中设定反锯齿混合的次数,有三个选择4次(times)、8次、16次,混合次数越多,边缘越光滑。Sharpness和Strength是设定边缘的尖锐程度和压力度,它们的数值越小,文字边缘越光滑。按照图10-3的参数设定,我们可以看到字母“A”的边缘明显光滑得多了。如图10-4
6 c% g1 ]5 J/ W0 i3 A; j! B) X& C' M$ Y5 @0 Y
1 y$ m6 t- M0 H图10-4; v6 D! T* F/ p0 Z7 I3 U
到这里Fireworks MX 2004新功能体验旅程就结束了,作者使用这些新添加的工具制作了上面十种简单的效果,也许你可以比我做得更多更精彩!赶快加入Fireworks MX 2004新功能体验旅程吧,别忘了把你的体验心得,总结的经验及时告诉我们哟! |
|