|
以前大家常用线条来表现浅浮雕效果,现在我们在Fireworks MX(以下简称FW MX)里可以用效果(Effect)面板来轻松制作。
$ b8 C5 o6 E2 B, b7 _
7 ^! M# f) o) |; t# R& P 如下图则是用线条来制作的一个Mac风格的边框,我们用FW MX打开源文件就会发现制作比较繁琐,有没有简单的方法来制作呢?答案是肯定的,方法就是用效果(Effect)面板!本例用来说明用FW MX制作边框的过程,希望能为FW MX爱好者提供一个新的思路。
( K' U0 v3 a! _6 i6 }2 o: N: _8 w9 U! z: h9 c$ q6 F" [4 \
9 C! h, M. o, p F8 X+ f# k
.png文件
! V6 Z- F+ ?; K$ y% `7 n 一、边框制作
3 m/ x& @* l; i; Z9 L 1.打开FW MX,建立一个340X110的新文件。: k3 B6 {, F/ Y+ C
2.从工具栏中选择“矩形”工具或按快捷键(U),画一个328X98,填充色为(#CECFCE)无边框的矩形(以下如无说明,所画矩形都为无边框)。+ M, @/ W* A& b
3.要想达到如下图所示的图形时,必须要使用菜单栏:修改==>组合路径==>打孔和联合来制作了。
# P) ^0 o: a. G) ]
) @+ \/ x& W/ |) O* k 7 G6 D0 M9 p8 \
2 ]7 G0 K& M' @6 c& F
按U键画一个320X73的矩形,填充为黑色。移动至合适的位置,本例中为距左4PX,距下为5PX。同时选中两个矩形,使用打孔命令,但得到了效果和我们要求的图形还是有差别的,没关系,画一个18X18的矩形,置于右下角,菜单栏:修改==>组合路径==>联合就得到了我们要求的图形。
+ b& ?" o* C4 A1 n9 d; a9 \ ?2 A 4.选定所生成的图形,按Ctrl+Shift+D或菜单栏:编辑==>克隆,选中效果面板:阴影和光晕==>发光,设置如下图:( h6 Q, {6 P9 k5 V7 u
9 q5 h. o/ w( q) i
2 j6 J* ]0 o- L* s7 D/ R% z# A+ l
0 F% ?+ O5 U4 H" g! Y8 h 设于第三步生成的图层下面,我们的图形不是有了一个好看的边框呀,这样做比只用一个图层来制作有更大的灵活性。
- f" h: A% B. @/ U 5.选中第三步中生成的图形,选中效果面板:阴影和光晕==>内侧阴影,填充色为(#F0F0F0)设置如下图:
+ K% H' V5 Y4 a$ e+ z5 ]$ n6 m. {5 T: g4 T6 r
/ D- O# B' f4 D2 }
2 R: V1 g3 k. h3 s 选中效果面板:阴影和光晕==>内侧阴影,填充为(#ADADAD)设置如下图:
9 S& P" y9 b$ S: c
: a9 T1 ]5 U% w& X+ m
+ i% {1 W+ E" n! f) Y( B
& Z4 b7 ^ ?" \4 \" _ 注意图中的角度,第一次为315,第二次为135,最后我们得到的就是一个有浮雕效果的合成路径了吧,现在知道为何要用两次内侧阴影了吧。效果如下图:( K ]9 Y, k' N
& C* u' R+ B+ h! L' b1 H! A9 g
+ j( d* n: R2 ~0 C; q3 |
二、小按钮的制作 4 ]$ |1 L. f5 H/ A- ~+ p x: i
根据刚才制作的方法,我们来制作一下旁边的小按钮和线条,最后可以得到如下图的小按钮(下图放大300%)' g8 U( L( H; b4 A
$ j% y5 z( _( O9 \8 v" Y* |' a / J+ ]0 `" b7 A1 E% j; V
/ Y/ X+ d& b2 C) a2 E) o4 ?
加以改动就可以得到新的小按钮吧。! P" n8 g( F* s
0 v& w) p4 l2 P/ e, n ]0 n

' u v+ H# l7 r% L3 l9 B+ E9 J( @
线条的制作就很容易了,画一270X12的矩形,放置到合适位置,设置如下,就OK了。
, ], A ~8 `% U& ^+ o3 e6 z. z' z1 N' j9 u/ o
7 s7 s, D$ @$ K
4 D2 F% d+ _+ k$ y5 b( f 用线条画出右下角的装饰线,按(Ctrl+G)组合一下。 三、背景
6 V% j/ d" q4 Q+ J% d. @ 1.画一矩形置于所有图层下面,填充为(#FF9900)放置于合适位置,设置如上图,只不过填充纹理里把“水平线4”改为“网格线1”就OK。
8 b" C3 h3 O% z8 j; m 2.添上合适的文字,最后效果如下图:
% u: i" j, p1 J) J, ]/ u4 M- h5 F: }$ q$ y5 O$ n% q) _! M0 t' n9 I

( L0 l$ L$ f0 h.png文件
" l, J0 P& ~. C' e. b3 l 同样的效果可以有不同的制作步骤,大家如果觉得这种方法比较简单,修改也方便,可以自己动手试一下。 |
|