模仿Photoshop效果制作按钮

[复制链接]
查看: 380|回复: 0
gggds 发表于 2009-12-27 13:00:24 | 显示全部楼层 |阅读模式
蓝色简变按钮:' f5 O) L2 P# N* r4 a/ S
3 h' z! P/ D( d. Y1 A# P
Eysondesign.net有这个教程的Photoshop原版本。我很喜欢这个按钮的外观,也非常希望用Fireworks做出这样的效果。实际上,模仿过程是十分简单易行的。记住,如果你想撤消每一正在进行步骤的操作,只需要用ctrl+Z来恢复上一次的外观。首先在Fireworks中的菜单选择Files-New或者Ctrl+N来创建一个新文档。文档设置大小为:200*200 pixels。如果这个图案是为了网络方法所使用,最好保持默认分辨率为72不变。我的选择是分辨率为72,画布颜色为默认的白色。选择圆角矩形工具,创建新大小为 100*30的矩形。形状大小可以由 info panel来精确确认。 我设置的矩形描边为 1 pixel stroke ,填充为矩形填充(什么颜色现在无所谓),效果如下所示:
8 L$ Y4 C+ Z6 K1 |& }9 \; o% j& |
& F" w* a  c/ l# d% W; b' m 
. r1 ^. g( R8 @* f% O6 s7 h2 u% L' U
现在你要去创建一个蓝色渐变填充,在fill(填充)属性面板中选择线性渐变。1 J5 G5 \( X! x' Y4 A7 D( d) X5 k3 r9 z6 z

- |, U7 k  A  i" \/ `4 O7 T6 K设置渐变类似与我下面的演示。在设置渐变填充前,要确认已经选择了我们刚才创建的圆角矩形。颜色(从左到右)依次是#004878,#84C0E8,#98D2FD,#93CBFD,#020B2B,#97CBFB.每创建一个新渐变转折点只需要在中间的灰色长条上左击鼠标。8 Z; z# o9 U4 b  d# Q3 j8 d3 H
& e. H- K7 |! N9 g' l
旋转移动渐变控制柄如下图所示。完成后,克隆(ctrl+shift+d)此图片四次。. n; T0 e9 I2 c# n- O

' t% ~* e. L# \1 b现在可以在你的图层面板里(Layers Panel)看到五个完全一致的图形,他们的名称均为Rectangle(矩形)。让我们重新给他们编好名称:点击图层面板上物体两次,会出现命名输入框,从上到下,依次将他们命名为layer5至layer1.现在你的图层面板如下所示:
3 z7 N* w1 X7 M5 A7 f
% W, Z6 A& S7 Y1 D4 H& R. _2 B 
" K0 Q) j  J4 T
- N, y6 Y4 g3 m5 q7 S- X8 ]在图层面板里选择layer5,然后使用 Skew tool(倾斜工具)将矩形的下面的两侧向中间靠拢。调整完毕后你的图形如左下所示:% {$ z3 q( u# s0 E+ `
* F. m! K8 ^) f: W
 
$ k& |% k- \; \6 [% t5 s% Z% Q+ x  G" N2 V1 v) W! _
在图层面板里选择图层 layer4, 然后在填充(fill)面板里重新设置如下所示:
! L% P/ n! I+ f# S
3 ]$ p" t$ |: G( }' d  q(困猫提示:注意选择了透明transparet)在图层面板里选择图层 layer2,然后在 信息 (info)面板里将长度修改为108,高度为26。使用小键盘的方向键盘进行移动,使它如左所示:
1 u9 Q, _1 C, w2 U* O% w, s  H/ d  v6 J
 
9 [) z+ H' H5 V1 v% e! w! ^: a
4 _+ y5 m% I5 x) {; Z6 W好了!我把所有的图层进行了群组(ctrl+G),然后给他们增加了drop shadow特效,重新设置了文档背景,添加了文字。我希望你能够喜欢这个教程,他正展示了使用Fireworks同样可以做到Photoshop的效果。

本版积分规则

精彩图文

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