Fireworks仿MSN浏览器制作哑铃按钮

   在这篇教程里,我们将学会如何利用Fireworks MX 2004仿MSN浏览器制作哑铃按钮过程,制作出来的按钮非常质感,而且方法很简单,推荐过来,希望脚本之家的朋友喜欢!

  我们先来看看最终效果图:


  现在不管是Windows Media Player播放器,还是MSN浏览器,甚至于腾讯的QQ浏览器都将前进后退的按钮改成了这种哑铃形状,下面我就教给大家如何在Fireworks MX 2004中制作这种简单的哑铃按钮。

  1.新建300像素白色画布,选择“椭圆”工具按住Shift键画一个正圆形,复制这个圆形,并按住Shift键将其缩小,放在紧贴在第一个大一些的圆形的旁边。(如果怕对不整齐,可以按Ctrl+Alt+R打开工作区中的标尺,并从标尺中拖出辅助线用以助于对齐圆形)


  2.注意刚刚大小两个圆形的相交处刚刚是汇合了一点点,然后选中两个圆形,选择菜单--修改--组合路径--联合,这样两个圆形就形成了一个路径。


  3.选择“部分选定”工具,调节组合后双园型路径的上半部分中间处的锚点,仔细调节成尽量平滑的过渡。如图:


  4.选择“刀子”工具,延中间的横向辅助线将双圆形切开,删除下半部分(因为没有对下半部锚点做调解,所以就删掉了)


  5.选中剩下的上半部分轮廓,复制,垂直翻转,然后对齐到中间辅助线位置,在选择上半部分路径联合。


  6.使用线性过渡色填充,方向是从上到下,颜色参照#CBDCED---#FFFFFF,当然这里也可以自己根据需要随便填充。


  7.选择效果--内侧阴影,距离4-透明度65%-柔化3-角度315-颜色#4775A3


  8.依旧画一个正圆形,内部用放射性填充,填充颜色可以参照刚才的#CBDCED---#FFFFFF,边框可以选择稍微深一些的蓝色,然后在效果中选择投影,设置为距离2-透明度100%-柔化1-角度135-颜色#FFFFFF;

  再作一次投影效果,设置为距离2-透明度100%-柔化1-角度315-颜色#000000;增加圆形按钮的隆起感觉。

  选择自定义形状中的箭头形状,在圆形按钮上画一个箭头,如果方向不对选择水平翻转,加效果内侧阴影,设置为距离3-透明度65%-柔化2-角度315-颜色#000000,再增加效果投影,设置为距离2-透明度100%-柔化1-角度135-颜色#FFFFFF;

  复制刚才的圆形按钮和箭头,做水平翻转,并缩小,如有的效果会翻转,根据情况修改投影的角度即可。


  9.给做好的哑铃按钮选择一个背景,增加效果投影,设置为距离2-透明度100%-柔化2-角度315-颜色#FFFFFF,再增加一次投影效果,设置为距离2-透明度65%-柔化2-角度135-颜色#73A2D0;这样就可以叫按钮和背景完美融合在一起了。


  色彩的搭配大家可以根据自己所需自行改变,以上只是一个制作过程的参考。

  源文件下载


  教程结束,以上就是用Fireworks 仿MSN浏览器制作哑铃按钮的过程,希望大家看完之后会有所帮助,谢谢大家观看教程!

时间: 2024-10-03 00:12:57

Fireworks仿MSN浏览器制作哑铃按钮的相关文章

Fireworks仿MSN浏览器按钮的制作

按钮|浏览器 现在不管是Windows Media Player播放器,还是MSN浏览器,甚至于腾讯的QQ浏览器都将前进后退的按钮改成了这种哑铃形状,下面我就教给大家如何在Fireworks MX 2004中制作这种简单的按钮. 1.新建300像素白色画布,选择"椭圆"工具按住Shift键画一个正圆形,复制这个圆形,并按住Shift键将其缩小,放在紧贴在第一个大一些的圆形的旁边.(如果怕对不整齐,可以按Ctrl+Alt+R打开工作区中的标尺,并从标尺中拖出辅助线用以助于对齐圆形) 2.

使用Fireworks制作水晶按钮

按钮 案例欣赏对于水晶按钮的效果,大家应该见得很多了,我们使用Fireworks软件可以制作各种各样的立体水晶效果,但是不管什么样的水晶立体效果,都有一个共同的特点,为了能够实现按钮的立体效果,我们可以通过渐变色和制作高光效果来实现.效果如图1.1所示. 图 1.1卡通表情图标效果 思路分析我们首先来看看按钮的构成图,如图1.2所示: 图 1.2按钮构成图 1.任何光滑的东西都会产生镜面反射,水晶按钮当然不会例外.2.要让按钮浮出画布,阴影是少不了的.有了正确的阴影,人们感觉才会更逼真.3.这个

fireworks制作苹果按钮

按钮 在这篇教程里,我们要制作一个按钮,像苹果站点那样.曾经在5D多媒体站有用Photoshop制作这种按钮的方法,这次我们使用Fireworks,下面的每一个步骤,有些可以合并和忽略,当然得看您的理解能力了.教程PNG文件下载. 首先建立新文件,大小为420*220,背景设置为透明然后画出按钮的轮廓,我们可以使用画笔,建立一个圆角矩形.打开标尺,选择菜单View>Rulers,然后拖曳出两根水平导线定好按钮的上边和下边.建立一个圆,将鼠标指针放在上面的导线上,按住Shift拖曳出圆形,终止于下

Fireworks 制作一个按钮

按钮 FW制作一个按钮(适合初学者) 效果图: 用("椭圆"工具)画出一个圆,用("圆角"矩形)画出一个圆角矩形,然后把矩形叠放在圆上面: 执行>>修改-组合路径-联合: 复制一个,去底色,边为黑色: 加到上面来,作为边(在原图上直接填底色,色彩太淡所以新加一个): 在上面画一个填充线形渐变以及边的颜色: 在上面再加一个圆,也是用线形渐变填充,把圆调为透明度50%: 完成:

JS+CSS实现仿msn风格选项卡效果代码_javascript技巧

本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换,实例代码如下,感兴趣的朋友可以参考下哈   复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片

FW快速制作动态按钮四状态

按钮|动态 按钮是网页的重要组成元素之一,在网页中发挥着十分重要的作用.它主要起着两个作用:第一是起到提示性的作用,有提示性的文本或者图形来告诉浏览者点击后会有什么作用,这样的按钮可以是静态的图片,主要是让浏览者了解点击它起到什么作用,甚至可能仅仅是一个小的较为美观的图片.第二是动态响应的作用,即是指浏览者在进行不同的操作时,按钮能够呈现出不同的效果,响应不同的鼠标时间. 这样的动态网页按钮一般有四个状态,即Up(释放).Over(滑过).Down(按下)和Over While Down(按下时

Fireworks绘制IE浏览器图标教程

  本教程向大家介绍如何利用Fireworks 绘制IE浏览器图标过程,制作方法不是很难,教程介绍的非常详细,推荐给的朋友学习,希望对大家有所帮助! 1.新建画布,选取椭圆工具,按SHIFT绘制一个圆形,再在圆形的内部绘制一个略小的椭圆,使用菜单对齐命令将两者居中对齐. 2.同时选中圆形和椭圆对象,选择菜单"修改|组合路径|打孔"命令,组合得到圆环图形. 3.选取矩形工具,在圆环中心位置绘制一个矩形框,同时选中两个对象,选择菜单"修改|组合路径|联合"命令. 4.使

Android仿UC浏览器左右上下滚动功能_Android

本文要解决在侧滑菜单右边加个文本框,并能实现文本的上下滑动和菜单的左右滚动.这里推荐可以好好看看android的触摸事件的分发机制,这里我就不详细讲了,我只讲讲这个应用.要实现的功能就像UC浏览器(或其它手机浏览器)的左右滚动,切换网页,上下滚动,拖动内容. 本文的效果:   一.功能要求与实现1.功能要求:(1)手指一开始按着屏幕左右移动时,只能左右滚动菜单,如果这时手指一直按着,而且上下移动了,那么菜单显示部分保持不变,但文本框也不上下移动!                       (2