用Fireworks制作漂亮按扭


  如左图所示,在经典论坛看到这款按钮,觉得极为漂亮,忍不住动手试了试,觉得制作难度不算太高,所以在此做篇教程,有兴趣的朋友可以看看…… :)

  制作步骤:


  一、打开fireworks,新建一图,背景为白色。按住shift画一个圆,颜色为蓝色。RGB值分别为51,153,255。

  在effect面板中,选择shadow and glow->drop shadow增加阴影,其中distance(距离)为8,opacity(透明度)为60%,softness(柔和)为20。柔和度设置得大点,挺重要。


  二、把上面这个圆进行复制,(点住圆,按住alt键,拖到空白处即可。)去掉阴影。RGB值改


  为:51,51,204。再作同样方法复制一个圆,颜色为白色。用变形工具,把白色的圆稍稍拉小一点。放上蓝球的上面。如左图所示位置。把二个圆一起选中,菜单modify->combine->punch.就出来一个月牙形的形状 :)。接着对这个月牙形进行设置。fill面板中edge->feather:19;object面板中:stroke选择路径的外部,混合模式选darken。第一个深颜色的月牙形就OK了。


  三、把上面所做的月牙形进行复制,填充颜色的RGB改为:102,255,255。其objet面板的选项分别是:透明度为84,混合模式为lighten,stroke选择路径中央。fill面板中:feather为18。此时月牙形为透明,按CTRL+G ,就能看到原来的颜色了。

  四、再接着做二个相同的月牙形,颜色为白色。其中object面板同绿色的那个月牙形,fill面板一个feather为30,另一个为17。

  五、再做二个小的月牙形,用上面的方法,颜色为白色,圆的半径大至为52px。object面板中模式模式为正常,stroke选择路径中央,透明度为100。fill面板中其中一个feather为2,另一个为8。

  六、至此,做这个按扭所有的零件全部完成,所剩下的就是拼起来了。大家自己看吧。我简单地派个流水帐:

  从最底层开始:有阴影的圆形->深蓝色的月牙形->浅绿色的月牙形-> feather为30的白色月牙形->feather为17的月牙形->再是两个小的月牙形,如果大家位置排得正确的话,这个按钮就已经成功地做出来。

时间: 2024-10-31 04:55:25

用Fireworks制作漂亮按扭的相关文章

使用Fireworks制作漂亮的礼花

   1.在Fireworks中新建一文档,画布大小为 200 * 200,底色为黑(#000000). 2.用画圆工具画一个圆形,大小为 10 * 10,Fill 为 None,调节 Stoke 如图-1. 3.选中刚画好的圆形(其实这时已经就是静态的礼花了),按 F8 键转换为 Animation Symbol. 4.调节弹出的对话框如图-2. 5.此时,一个简单的礼花效果已经作成. 6.天空中如果只有一个礼花,不觉得很孤单吗?呵呵,让我们继续增加几个. 在 Frame 面版中选择第三帧,打

Fireworks制作漂亮的礼花

1.在Fireworks中新建一文档,画布大小为 200 * 200,底色为黑(#000000). 2.用画圆工具画一个圆形,大小为 10 * 10,Fill 为 None,调节 Stoke 如图-1. 3.选中刚画好的圆形(其实这时已经就是静态的礼花了),按 F8 键转换为 Animation Symbol. 4.调节弹出的对话框如图-2. 5.此时,一个简单的礼花效果已经作成. 6.天空中如果只有一个礼花,不觉得很孤单吗?呵呵,让我们继续增加几个. 在 Frame 面版中选择第三帧,打开 L

Fireworks制作炫光效果

向朋友们介绍运用Fireworks制作漂亮的炫光效果,主要学习画笔.滤镜.复制.变形.渐变填充.混合模式以及钢笔路径工具的应用,希望朋友们喜欢. 1.新建画布600×400,填充黑色 2.设置画笔大小,柔化边缘,用画笔工具在画布中涂画,如图 3.对刚才的图形做运动模糊,设置角度90,距离100,效果如下 4.平面化刚才的图形,通过复制和变形工具达到如下效果 5.新建矩形框,填充渐变,图层模式为叠加,效果如图

Photoshop制作漂亮笔记本网站首页模板

Photoshop制作漂亮的笔记本电子商务网站首页模板教程,效果确实很好. 1.在PS中新建一个文档,768*800px,并填充#1e2528. 2.添加LOGO,在左上角,并给它新建一个图层. 3.新建一个图层.并使用图层样式为其添加一个渐变效果. 4.使用减淡工具,并设置10%的不透明度,给图像加个高光.如图: 5.现在加入菜单文字.使用文字工具并设置如图,颜色#444b44. 6.在文字下面加入下划线.也在菜单上面加入一条线,来做区分用. 7.在头部加个产品图像和产品介绍. 8.来看一下如

Fireworks制作文字探照灯效果实例教程

  我们经常可以看到一些用Flash做文字遮罩效果的教程文章,这种效果用Fireworks也同样可以做出来,并且可以生成GIF格式的小动画.下面,就让我引导大家一步步用Fireworks制作文字探照灯效果. 1.点击"File>New",建立一个新文件,将背景设置为黑色. 2.点击工具面版中的椭圆形工具,用鼠标在新画布上拖动一个椭圆,将椭圆的填充色设置为"None". 3.点选工具面版上的文字工具,在弹出的文字编辑对话框中输入文字,在此我们输入"ta

Fireworks制作Vista风格强劲光束

  本教程是向大家介绍利用Fireworks制作Vista风格强劲光束过程,教程难度不是很大,介绍的很详细,转发过来,希望脚本之家的朋友喜欢! 效果图: 首先,我们先制作那些彩色的弧线. 先新建一条绿色的弯曲路径,选择发光滤镜,设置如图: 接着,在这个路径上方新建一个白色矩形,选择放射状渐变填充,不要边框,如图: 将这个新建的矩形剪切,快捷键是Ctrl+X,然后粘贴为刚才做的那条曲线的蒙板. 将蒙板设置为灰度外观. 这时,路径就有了首尾渐隐的效果.我们这时还可以调节手柄来调节渐变的细节. 下面这

Fireworks制作美女背景的时钟动画

  本教程叫你利用Fireworks,通过简单的几个步骤,制作漂亮的时钟指针动画,时钟的背景可以是美女的,也可以是你自己的. 先看看效果图 下面是教程

Fireworks制作精致浪漫的彩色网格背景

  网格化图像效果在设计中很常见,这种效果很适合作为网页或者通栏的背景图像,给人浪漫精致的感觉. 下面就是我们用Fireworks制作的网格化马赛克的背景效果,以及添加了前景人物之后的效果.很漂亮吧? 图示:网格化图像效果 图示:网页通栏效果 具体制作方法如下: 1.在Fireworks中打开素材图像,如下图所示. 注意选择色彩丰富的背景,处理效果会比较好. 图示:打开素材图像 2.按快捷键[Ctrl+6],把图像的显示比例放大到原来的1600%,如下图所示. 图示:放大显示比例 3.按键盘上的

Photoshop制作漂亮的蓝色曲线光束

Photoshop制作漂亮的蓝色曲线光束 教程介绍非常实用的曲线光束的制作方法.制作的时候需要把曲线分开来制作,先用钢笔勾出想要的曲线路径,再用设置好的画笔来描边路径.得到曲线好还需要添加图层样式做出发光效果.其它曲线制作方法相同. 最终效果 1.新建一个400 * 400像素的文档,如下图.  2.选择渐变工具,颜色设置为暗蓝色:#005d8b至黑色.然后由中心向边角拉出下图所示的径向渐变. 3.把拉好的渐变背景复制一层,图层混合模式改为"颜色减淡",如下图. 4.新建一个图层,按字