Fireworks实用设计:电话IC卡

[复制链接]
查看: 375|回复: 0
gggds 发表于 2009-12-27 13:25:30 | 显示全部楼层 |阅读模式
 完成效果: # J  P" Y- C; d% }/ K6 \3 p2 o  L" w$ M

5 g/ P* H+ P; X! A- C5 y4 N# M: j! ~- I$ L% e$ W; b" T6 K: Z& O
?“电话卡”图像  下面我们看具体操作步骤。
0 L5 Y& Q7 Y, y5 Q! o
* o  o9 c  t( s3 N  (1)新建一个大小为400×300的图像,点击工具箱上的圆角矩形工具
6 D. }4 j& E& }$ q
' y0 M6 z  N) m7 B8 Z; I! V3 Q 绘制一个大小为360×240的圆角矩形,设置其填充类型为放射状填充。第一个色块为白色,第二个色块为#CCCCFF,得到图1所示的图像。
. F4 A. z4 D! @, s% }0 r- u; S2 T
7 R+ b) n% |3 _9 @0 a
8 h$ Z# W: E, u; @: u& M! N3 j 图1 绘制圆角矩形
) b7 j$ @/ e) P' G  (2)为了增强图像效果,我们选中该圆角矩形,在其属性面板中点击
: C/ U7 r8 U& J: H
  C  _) B( f  [4 _4 n; T+ A 在弹出菜单中选择“Shadow and Glow”>>“Drop Shadow”为其添加阴影,得到图2所示的图像效果。$ d7 F  h3 Y# O
% y( P5 v& a$ o  {2 A5 Q

9 C% k. i- u$ D2 s" A( k 图2 为圆角矩形添加阴影1 d/ n6 b; G" M+ d
  (3)现在我们需要导入一幅图像作为电话卡的背景图。点击“File”菜单,在下拉菜单中选择“Import”导入一幅图像,如图3所示。
6 u% K4 |( k& q3 h' ^! f
* g9 k7 x/ ?" s; [' P" R2 t. ?* i: I5 {( J* y+ }1 a) x/ O4 @& j! j& e
图3导入一幅图像( ]- j0 x+ X* e
  (4)由于导入的图像不够大,这样做的“电话卡”的效果不会很好,所以我们需要对该图像进行大小调整。选中这幅图像,点击工具箱上的缩放工具 1 d. i) Z6 w$ p/ w' ~8 F- z2 G

+ E5 J* L. ?) B1 } 对该图像进行大小调整,然后将其放置到适当位置,如图4所示。% X8 n4 @' L1 q6 G+ b: a

5 I1 ?. I! p9 N/ J. ^& \
4 V0 q& a% [! \5 O& i% r( Z7 T8 [& L0 W 图4 调整图像大小并放置到适当位置% ^4 _8 _/ q5 ?: G' J, [+ v
  (5)选中调整大小后的图像然后点击“Command”菜单,在下拉菜单中选择“Creative”>>“Fade Image”,这时候跳出图49所示的Fade Image(淡化图像)对话框,我们选择一种淡化方式,然后点击“OK”得到图5所示的图像效果,我们还可以淡化控制杆来调整淡化效果。
- O+ y4 \# q+ U& o1 ~3 |/ r8 }3 z: p# R. X& F/ z" L1 ]. {

+ F9 g6 H6 K/ }& X$ J3 V9 E, c 图5 Fade Image对话框
! N- |' U! }- |  
0 N2 n2 z& Q) S9 Y+ @
, M2 |1 ^9 j% ]' E 图6 淡化导入的图像后所得图像6 E3 _: D% ]- _5 N6 E" t" `
  注意:这里的Fade Image命令实际上是一个由外部开发的Fireworks扩展插件,它是由Joseph Lowery开发的,目前版本是1.0版,使用这个扩展我们可以对选中的对象实施淡化效果。
& P  @: N9 m6 H8 Y# o7 s( m' I  (6)选择工具箱上的椭圆工具并同时按住Shift键我们再为图像绘制一个正圆形,并设置填充颜色为#0066CC。接着点击工具箱上的文字工具,再圆形上添加一个“皖”字,代表电话卡的发行单位标识。如图7所示。" V3 T# j0 i: g7 c! x
& c0 \" @- [% ?
# z( i/ \% {1 R8 K) _
图7 绘制圆形并添加文字  h7 S2 h4 b7 s6 }* v& J' m
  (7)同理为图像添加其他文字,并适当为一些文字添加发光效果,发光的颜色为白色,文字颜色为黑色,得到图8所示的图像。
7 ?! j. E# B* b) w# [1 T- Y  a$ ^/ g7 j: g5 j: {# f* }: m6 v' @0 e
" s9 F/ U% f, Y, g) o
图8 添加文字并为文字添加发光效果' {, G3 x4 e' n# Y% ~0 y! K" V
  (8)点击工具箱上的多边形工具
( c" z0 s0 l5 R% R- y1 |: Y, t: z8 f' ?4 [3 p
,在多边形工具的属性面板中设置边数为3,绘制一个三角形,如图9所示。
6 e9 B4 h  d. N  n% T7 Q5 t8 V
  Y) n$ {3 P5 g8 X7 n4 p* e4 ~5 r( m# c% k
图9 绘制三角形/ }3 h/ i/ z1 B9 J3 D
  (9)点击工具箱上的次选择工具 % y/ c$ _! E0 k. P. z6 ?  k1 S

8 A0 q. f8 r( X8 V  m$ q# B( |* s ,对三角形的定点进行调整,使得顶角的度数比较大,如图10所示。
8 a3 }, D4 f6 ^) q' v( j
6 [" N8 O  k1 R1 \# J$ C0 w; P+ }( F* n$ S* c5 M
图10 用次选择工具调整三角形
0 Z9 V) N' G- J* t$ B0 j; Z! d* I  (10)接着我们需要对该三角形进行逆时针旋转,绘出电话卡的插入金属片效果。选中该对象单击鼠标右键,在弹出的快捷菜单中选择“Transform”>>“Rotate 90。CCW”即可将对象逆时针旋转90度,得到图11所示的图像。
: p% z! a& o' x* V# v
3 J% _$ v" r( P2 {3 `2 ~( i- `5 k5 s' m; @$ r: ~9 A! F3 T
图11 将三角形逆时针旋转90度; |- @! d, p9 F! T8 H
  (11)接着设置三角形填充色为#CCCC33。然后使用工具箱上的矩形工具绘制一个矩形,设置同样的填充颜色,得到图12所示的图像。8 z4 s: A0 ?1 I# \. q9 _
  z' C& \. `2 l0 s. e
# p! i" z2 @- z$ Q: A! `  m
图12 绘制矩形/ I2 g/ ^/ r- E- ^+ |) ]" C
  (12)由于电话卡的存储片上都存在有花纹图案。这里我们也需要表现出这个效果。Fireworks MX 2004中增添了一个连接线工具
1 v( w% q) y) E$ u  p! }+ f. K% W/ h% v7 D
,我们这里就使用它来制作存储片上的花纹效果。点击工具箱上的连接线工具。在矩形内部绘制一条连接线,如图13所示。/ y2 P( T- {# J4 z2 ~5 m7 J- _3 v
3 G7 S, B( |1 }" ^

% m% r" B8 W- N; U& k2 J1 _6 P) P 图13 绘制连接线- e$ _3 k- a5 N: J; _
  (13)由于连接线现在折角处是直角,所以我们需要调整连接线折角的弧度,其实这里很简单。只需要点击工具箱的选定工具,然后选择折角处的控制点,按住鼠标左键不放就可以改变连接线的折角了,如图14所示。0 s  J/ I2 i- p" f8 a) e  r

! o* Q, K% p* f7 c% m  y
. m! P( Q8 v) g9 O! A 图14 调整连接线折角8 W. Y$ F8 d  l
  (14)前面我们已经改变了连接线的折角,我们需要在绘制几个同样的连接线就可以了。这里只需要选择原来的连接线,按Ctrl+C然后Ctrl+V复制粘帖即可。然后我们选中复制所得的连接线,单击鼠标右键,在弹出的快捷菜单中选择“Transform”>>“Flip Horizontal”即可将连接线水平翻转。得到图15所示的图像。
+ G8 b2 ~/ C, i8 N) }' g' K( Q' s. E, \

. b0 U5 N$ z5 E% F 图15 水平翻转连接线. f/ D) y0 j0 n0 [7 L' C
  (15)同时选中两条连接线,按Ctrl+G将二者组合起来。然后按Ctrl+C然后Ctrl+V复制粘帖。选中复制所得的对象,单击鼠标右键在弹出的快捷菜单中选择“Transform”>>“Flip Vertical”即可将对象垂直翻转,然后将翻转所得的对象移动到适当的位置,最终我们得到图16所示的“电话卡”图像。
  H! O0 m3 G, o& x1 W
7 h* n* B2 r. f% ?& ~, F$ j( _# l- L) I5 ^6 K9 A
图16 “电话卡”图像

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )