分享
 
 
 

巧用Fireworks创建假3D按钮

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

使用Fireworks中的渐变效果来制作一个看上去很象真的3D按钮。闲话少说,我们开始吧。

第一步:

开一个新文件,选椭圆(Ellipse)工具,画一个圆(按住SHIFT键可画正圆)。

第二步:

选取刚画的这个圆,用填充工具(Fill),以线性渐变进行填充。我在这里用的是红黑渐变,如图1。

图1

第三步:

选取这个圆,打开效果(Effect)面板,在下拉菜单中选择Bevel and Emboss >Inner Bevel,然后设置以下参数:

Bevel edge shape : Flat

Width : 5

Contrast :

Softness :

Angle : 135

Button preset : Raised

你的图片应该变成这样,如图2:

图2

第四步:

克隆这个圆(Ctrl+Shift+D),这时,第二个圆已经位于原来那个圆的上部。

鼠标右击这个这个圆,选择Transform >Numeric transform ,并在Constrain Proportions 前打勾,输入数值75%。确定。

第五步:

选取这个圆,选油漆筒(Paint bucket)工具。这时你会看到两个调整手柄,其中方形的那个是用于旋转渐变方向用的,而圆形的则用于调整偏移量。下面将方形手柄旋转180度并稍微拖动圆形手柄,让它看起来象下图那样,如图3s:

图3

将该文件存为illusion.png。

瞧!一个漂亮的3D按钮就完成了!

下面我们要给这个按钮加一个“按下”的动态效果。

第一步:

打开illusion.png。打开层(Layers)面板,你可以清楚地看到这个图片包含两层,如图4。

图4

第二步:

双击层的名字,将第一层的名字改为button,将第二层的名字改为button_rollover(如下图),如图5。

图5

第三步:

点击眼睛图标,隐藏button_rollover那一层。

第四步:

选择button层。在图片上面击鼠标右键并选择 Insert slice 命令。

第五步:

打开Window(窗口) >Frames(帧)面板。你看到的是缺省的Frame1。选上它并把它拖到该面板右下角的“New/Duplicate frame”图标上。

第六步:

选择第二帧(Frame 2),打开Windows(窗口)>Layers Palette(层面板)。点击button_rollover层左边的眼睛图标,让该层可见。

第七步:

在帧面板,选择第一帧(Frame 1),确认层面板的“button_rollover”层处于隐藏状态。

第八步:

点击Web layer层,确认该层可见。在图片窗口的切片上击鼠标右键,选“Add Swap Image Behaviour(添加交换图片行为)”。这时出现一个对话框,如图6。

图6

* 选上用于图片交换的切片

* 选择帧号码(frame number),在这里选Frame 2。

* 选中“Preload Image”及“Restore Image onMouseOut”两项。

* 按OK钮。

这时你的图片将变成这样,如图7:

图7

第九步:

选文件(File)>输出(Export),打开一个输出对话框。输入文件名,在保存类型中选择“HTML and Images”,“Slices”右边选择“Export as Slices”。

你的3D按钮到此顺利完成,还不赶紧用鼠标点击看效果!

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有