|
以前大家常用线条来表现浅浮雕效果,现在我们在Fireworks MX(以下简称FW MX)里可以用效果(Effect)面板来轻松制作。
" s( t0 D, a1 m! J7 `
& Z! s, G$ f! a H+ K3 S& d1 b9 k 如下图则是用线条来制作的一个Mac风格的边框,我们用FW MX打开源文件就会发现制作比较繁琐,有没有简单的方法来制作呢?答案是肯定的,方法就是用效果(Effect)面板!本例用来说明用FW MX制作边框的过程,希望能为FW MX爱好者提供一个新的思路。1 s3 b0 S3 f, a5 ^# |
$ y0 {0 i C2 Q) G; u& K9 {
% X" H* I) E1 m2 `2 P! l
.png文件
8 a+ O* z: C0 g8 d 一、边框制作
- k- f& e w: O 1.打开FW MX,建立一个340X110的新文件。
" B7 ~0 g) [1 Z" F f2 G5 g1 T 2.从工具栏中选择“矩形”工具或按快捷键(U),画一个328X98,填充色为(#CECFCE)无边框的矩形(以下如无说明,所画矩形都为无边框)。2 z: v2 F+ h u# J
3.要想达到如下图所示的图形时,必须要使用菜单栏:修改==>组合路径==>打孔和联合来制作了。
" `8 c, q& f! [% X- @: b/ Q2 s1 K3 j! R+ k5 H' P& C" h& M& l
* H y5 e) v3 R, D
/ n2 Y& p# Q( V' Y
按U键画一个320X73的矩形,填充为黑色。移动至合适的位置,本例中为距左4PX,距下为5PX。同时选中两个矩形,使用打孔命令,但得到了效果和我们要求的图形还是有差别的,没关系,画一个18X18的矩形,置于右下角,菜单栏:修改==>组合路径==>联合就得到了我们要求的图形。5 L5 D4 S0 S' Z4 [
4.选定所生成的图形,按Ctrl+Shift+D或菜单栏:编辑==>克隆,选中效果面板:阴影和光晕==>发光,设置如下图:
5 q* f2 a6 G9 o/ Z( M z% O: |! |& M5 V! ^, c/ d4 O8 n
; |2 o `( P/ o6 N' Z6 M, S. Q* }2 V- k7 }
设于第三步生成的图层下面,我们的图形不是有了一个好看的边框呀,这样做比只用一个图层来制作有更大的灵活性。
( w) U) r1 K( `4 n% E 5.选中第三步中生成的图形,选中效果面板:阴影和光晕==>内侧阴影,填充色为(#F0F0F0)设置如下图:4 e. v; X3 Z2 B5 M9 G
8 S) a/ d& H6 P0 |$ {
' D' L- O c m" t, v) y. c
: D4 W; e+ \2 V* o9 p/ t# V; ^ 选中效果面板:阴影和光晕==>内侧阴影,填充为(#ADADAD)设置如下图:
' T* t- j# p0 s
% \0 Y+ B% b7 N( Y X) z& O& F# x$ y
; H7 e+ f( E5 T+ F! M; v4 {; W
注意图中的角度,第一次为315,第二次为135,最后我们得到的就是一个有浮雕效果的合成路径了吧,现在知道为何要用两次内侧阴影了吧。效果如下图:
' Z- m! K x# ?+ P F+ Q* n
, V+ w6 y2 x9 Y& o) ]2 n- S5 O) L6 M; k2 F5 V; Q4 _
二、小按钮的制作 ( `: D2 a- y8 Z2 y
根据刚才制作的方法,我们来制作一下旁边的小按钮和线条,最后可以得到如下图的小按钮(下图放大300%)! o& e0 K7 i+ P' S6 P
) `) H& u5 D9 O) V$ k3 D+ P
* Y y7 [7 r l) Y1 ?" W* s1 A7 [" S i. l
加以改动就可以得到新的小按钮吧。+ k) ~! J& G. v8 V0 S: _2 b, c
+ O) X" o9 |. }9 A/ o* v4 Z ~! t3 e: G6 b# Q. Y
' ^" L6 i( Q" Z, W' b 线条的制作就很容易了,画一270X12的矩形,放置到合适位置,设置如下,就OK了。
7 @9 L& }! L, t0 K& W( j: t6 ]
# S6 `; ]+ T0 {8 i' B* j! b8 P. |! G' H9 Q3 k+ W. t
+ h: L6 H6 y' V8 ~8 Z7 u
用线条画出右下角的装饰线,按(Ctrl+G)组合一下。 三、背景
0 l/ W$ ~/ g- W; X1 W4 Y+ \6 H4 N 1.画一矩形置于所有图层下面,填充为(#FF9900)放置于合适位置,设置如上图,只不过填充纹理里把“水平线4”改为“网格线1”就OK。
5 x. K1 m4 Y3 G4 L) N, k ]& J# z 2.添上合适的文字,最后效果如下图:6 i; a# x$ P3 p: d
; c D: n; F8 q6 F7 p
7 @. f+ {) o0 c+ c: g8 z' A% E
.png文件/ K' y+ N& x) p0 C/ Z+ G2 \
同样的效果可以有不同的制作步骤,大家如果觉得这种方法比较简单,修改也方便,可以自己动手试一下。 |
|