[组图]Fireworks仿MSN浏览器按钮的制作

[复制链接]
查看: 260|回复: 0
gggds 发表于 2009-12-27 12:06:02 | 显示全部楼层 |阅读模式
  现在不管是Windows Media Player播放器,还是MSN浏览器,甚至于腾讯的QQ浏览器都将前进后退的按钮改成了这种哑铃形状,下面我就教给大家如何在Fireworks MX 2004中制作这种简单的按钮。  1.新建300像素白色画布,选择“椭圆”工具按住Shift键画一个正圆形,复制这个圆形,并按住Shift键将其缩小,放在紧贴在第一个大一些的圆形的旁边。(如果怕对不整齐,可以按Ctrl+Alt+R打开工作区中的标尺,并从标尺中拖出辅助线用以助于对齐圆形)# @7 {* V% X$ q* p+ r
, ^0 v8 N$ s* l% b5 w$ c

) k: E  S% Z& r+ E: E3 g  2.注意刚刚大小两个圆形的相交处刚刚是汇合了一点点,然后选中两个圆形,选择菜单--修改--组合路径--联合,这样两个圆形就形成了一个路径。, L9 ~7 _: v$ B+ n( K/ g$ ]3 d/ }
' f( g1 n9 x  L3 `# ?

' \, S+ C% Y. z; P2 E8 ]  O- K
/ ^3 L6 t/ f$ F! w# J  3.选择“部分选定”工具,调节组合后双园型路径的上半部分中间处的锚点,仔细调节成尽量平滑的过渡。如图:  f  i7 c3 u5 {$ y& G  o' ^! z- i3 G- t
& E6 o7 b0 N2 k4 F/ |( {
" r9 {' W) U" r' @% l) {: e4 u5 ^

; X6 m, X9 I% m/ e7 `  4.选择“刀子”工具,延中间的横向辅助线将双圆形切开,删除下半部分(因为没有对下半部锚点做调解,所以就删掉了)
! t- X7 r: g3 p% h5 |* R1 X* w7 q
. A4 n; r; E7 n6 E# q" g) v$ Z( |0 U
+ v" L8 k3 r3 A( E) F
  5.选中剩下的上半部分轮廓,复制,垂直翻转,然后对齐到中间辅助线位置,在选择上半部分路径联合。
( E% i/ O6 R7 v6 U9 e6 u$ I6 p7 W
5 q) c2 ?, I8 c/ p) N, {/ d- m: ~! ]  L5 F9 D
 6.使用线性过渡色填充,方向是从上到下,颜色参照#CBDCED---#FFFFFF,当然这里也可以自己根据需要随便填充。2 |& |1 c8 U. i; S$ S
) R( [# ~- x, T: N4 ^$ s

# |3 v3 s! g5 [7 {2 K7 l
  h+ [, u) ~$ C4 {) z5 p9 P  7.选择效果--内侧阴影,距离4-透明度65%-柔化3-角度315-颜色#4775A3& d2 X( R; W4 a
- e" z* |% O, Z/ {/ Z" |$ K
, g0 e# {6 _3 j1 m9 E
/ [  x9 k: k! @3 n3 f9 L
  8.依旧画一个正圆形,内部用放射性填充,填充颜色可以参照刚才的#CBDCED---#FFFFFF,边框可以选择稍微深一些的蓝色,然后在效果中选择投影,设置为距离2-透明度100%-柔化1-角度135-颜色#FFFFFF;  再作一次投影效果,设置为距离2-透明度100%-柔化1-角度315-颜色#000000;增加圆形按钮的隆起感觉。  选择自定义形状中的箭头形状,在圆形按钮上画一个箭头,如果方向不对选择水平翻转,加效果内侧阴影,设置为距离3-透明度65%-柔化2-角度315-颜色#000000,再增加效果投影,设置为距离2-透明度100%-柔化1-角度135-颜色#FFFFFF;  复制刚才的圆形按钮和箭头,做水平翻转,并缩小,如有的效果会翻转,根据情况修改投影的角度即可。. n$ N+ n8 P2 V  _/ i

6 W) p! T0 R+ {2 l9 }# X9 E# p# n
- K# K# f9 `- q& l6 y" Q$ p, m
  9.给做好的哑铃按钮选择一个背景,增加效果投影,设置为距离2-透明度100%-柔化2-角度315-颜色#FFFFFF,再增加一次投影效果,设置为距离2-透明度65%-柔化2-角度135-颜色#73A2D0;这样就可以叫按钮和背景完美融合在一起了。
$ N4 y+ l' E  c% Y4 c) T' K
% T0 }( O# I" B- S% u7 T
! d- z0 i7 O/ P, i4 i8 j
# d5 V! l! q7 M# Z: w' G/ l  色彩的搭配大家可以根据自己所需自行改变,以上只是一个制作过程的参考。  源文件下载:点击下载# y$ P' d4 v& e

' @$ A. P0 P5 [7 Q$ `

本版积分规则

精彩图文

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