FWMX一例XP风格按钮的制作

[复制链接]
查看: 221|回复: 0
gggds 发表于 2009-12-27 03:25:13 | 显示全部楼层 |阅读模式
我也不知道这算不算XP风格,反正是大家很常见很流行的,今天在经典帮别人回复了源文件,干脆凑篇教程上来。基本上没什么难度,算是新手入门吧。
# i% F4 m' J* y4 k2 H. b# t( ]* ?' c3 `) L+ R
我们使用Fireworks 4制作这样的效果,Fwmx只要在工具与属性面板中找到相应参数设置就行了。  1、新建画布,大小100*100,背景为白色。
' h8 k( _% k# K. G
4 ~4 B! A5 [& n) |7 @, r  2、用圆角矩形工具画一个矩形,大小随意,在OBJECT面板中设置矩形的圆角度。
* L  T6 `! d% n9 q& Y5 U
. T: v: V" I0 a! l: `3 d" l
  n: |( C+ \3 ^4 @" f
; R1 m* }9 T; e7 \4 }  3、设置圆角矩形边框色如下(色系#B6B6B6):
2 z( l& G, F1 s/ |
' t, n* B: ?3 u3 f1 f9 D! n$ X* `2 p* t1 W, D0 D7 Z

5 O% Y. I/ t/ ?/ K4 T' X: r  4、对圆角矩形进行线形填充,参数设置如下:0 E4 f( z1 @: d# q' v

+ F1 G$ m& w/ k3 {! o* y, ]' X2 L7 w. |8 i; Q4 x# b- w
& C' l# ]  S1 i2 W" R
  5、现在把你设置好的这个矩形克隆一个(键盘快捷键CTRL+SHIFT+D),再绘制一个矩形框,利用菜单命令“切割>>>打洞”进行切割:
3 C; M7 f( G' y; _3 J, c/ K2 M/ \4 Z/ g7 r& m" e. y& }0 d
- u: U; A; U0 h4 n, m
1 f. I  `' l0 [. f8 m2 N/ h
  6、现在,你是不是已经得到了以下的这个效果呢?
. E  r0 C5 J5 g& U! V- c) T2 _
) k& z2 Z( u2 j  h
& b; _+ f3 y$ D1 O1 j$ x% @% v2 e* z) {2 U; p- k( s6 n0 s3 |, a
  7、选中你切割好的这半截图形,将边框设置为无,再进行线形填充,参数如下:, ]8 I  G" {' W$ t2 Q* Z

8 F- a% d9 I# Y/ N2 f% N
7 m! k% s/ r) X  ]
: g! k% k7 _$ N" C* w" q4 ?9 U  8、再在图层面板里将这半截圆角的透明度设为70%或80%,看看,是不是有点意思了。不行,还差一点高光的效果。如果用特效或是滤镜来做,无疑是太麻烦了,我们就用一种笨办法吧。  将画布显示的比例调到800%,然后用钢笔绘制如图所示的线条:
1 U& Z: R# r& y) Z; ~9 m: L/ \1 E* j, U* b; \

( L/ r/ r: \; B/ @6 [9 t. S1 }# e  ~7 @8 q' r9 }
  9、设置我们刚绘制的线条颜色为白色,透明度调整为90%,切换回100%的显示比例看看:7 d8 \3 v  a' e$ K3 v
  C# h6 }! z4 v1 L
/ W: m2 D& A0 ?( C/ m9 J8 x" F
1 c; B9 L9 l8 D
  10、添加按钮文字:1 b' H  U. C- g1 T4 g% r

7 {/ M) a! y* Z  g2 P* T4 Q) [+ t& B
- c, [; }" C6 [
  将添加好的文字克隆一下,向上和向左各移动一个像素(用键盘上的方向键来移动),然后再到图层面板中选中下面一层的文字,设置填充颜色为白色。这样使得文字有凹下去的感觉。  11、现在来绘制一个简单的放大镜,将画布显示比例放到到800%,用圆形工具和钢笔绘制如下的图形,线条颜色为白色,无填充:
8 B" D. T, I2 B7 b8 Q: ]# b
  V# @2 s, M, A8 m7 `% g
" s; c+ v% |) y* u2 m5 r1 E( i
7 O, g/ X7 |/ l( W2 m4 h  12、做最后的位置调整,并且为最下面的底层圆角矩形设置阴影:7 _+ ~/ T) ?( A* f; I9 x

. i% }% H  y  k0 o+ c, F$ N0 ]- N* ]) c& E( q

; K# e  ]0 o$ V4 }3 Z  OK,大功告成了。你可以调整填充的各种颜色,来做出多样的按钮,希望大家从这个教程学到FW里最基本的一些东西。  Png源文件:$ J5 ?# b6 U. _

# T4 J1 |7 O9 P& o, j6 H5 j; P5 N
" a; g: G2 `  K  w8 o
4 P9 X8 Y+ a% i; }后记:附moonjeep另一源文件参考,这个图片使用了些不同的效果实现方法。比如右侧白色部分用了遮罩,左侧红色部分的高光用了Inner Shadow内阴影,字体凹陷用的是投影等。7 l  C2 w3 M% A* K! o
' L0 C/ c) Q/ N

本版积分规则

精彩图文

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