网页常用按钮怎样制作

网页常用按钮怎样制作?最终效果:

步骤/方法

  • 01

    1.新建一个500*250象素的窗口,填充绿色(R:52,G:175,B:125),再新建一层命名为"按钮--底",选择“圆角矩形工具”如<图1>,半径数值为“25”如<图2>,绘制如<图3>所示的圆角矩形。 <图1><图2> <图3>

  • 02

    2.如下图所示锁定透明象素

  • 03

    3.选择渐变工具,颜色设置如下<图5>,由上至下绘制渐变效果如<图6> <图5> <图6>

  • 04

    4.在“按钮-底”上新建一层命名为“按钮--高光”,调出“按钮--底”的选区如<图7>,选择菜单:选择 > 修改 > 收缩,数值为3,再填充白色,按Ctrl + D取消选区。 <图7> <图8> <图9>

  • 05

    5.如<图10>在“按钮--高光”这层添加蒙版,再用黑白渐变工具如<图11>由上往下绘制渐变,效果如<图12> <图10> <图11><图12>

  • 06

    6.回到"按钮--底"这层,调出图层样式,分别调节:内阴影,描边。相关设置分别如<图13>,<图14>,效果如<图15> <图13> <图14> <图15>

  • 07

    7.在"按钮--底"这层上面新建一层命名为“按钮--测光”,调出“按钮--底”的选区如<图16>,选择菜单:选择 > 修改 > 收缩,数值为1,再填充白色,用矩形选取工具适当的把选区向右移几个象素如<图19>然后按"Delete"键删除选区部分如<图20> <图16> <图19><图20>

  • 08

    8.按Ctrl+D取消选区,再用橡皮工具选适当的大小插除下面的部分如<图21> <图21>

  • 09

    9.按Ctrl + J 把"按钮--侧光"复制一层,选择:编辑> 变形 > 垂直翻转,再选择:编辑> 变形 > 水平翻转,把翻转后的图片移到右侧适当的位置如<图22> <图22>

  • 10

    10.在"按钮--底"上面新建一层命名为“按钮--边”调出"按钮--底"的选区如<图23>,再选择菜单:编辑 > 描边 设置如<图24>再按Ctrl + D 取消选区。效果如<图25> <图23> <图24> <图25>

  • 11

    11.在"按钮--高光"上面新建一层命名为“按钮--文字”,在上面打上"WWW.68PS.COM",字体颜色用白色.如<图26> <图26>

  • 12

    12.按Ctrl + J 把文字复制一层,把下面的文字隐藏,为上面文字加投影效果,设置如<图27>,再回到下面的文字层,删格化图层,选择菜单 编辑> 变形 > 垂直翻转 把文字拖到合适的位置如<图28> <图28>

  • 13

    13.如下图添加蒙版用黑白渐变从上至下绘制渐变,制作文字的倒影。 <图29>

(0)

相关推荐

  • FrontPage基础教程特效按钮的制作

    特效按钮的制作 用一般的方法制作网页中的按钮,一点也不好看,还是用个FrontPage来制作一个特效按钮吧. 1.打开FrontPage,点击菜单"插入-Web组件". (图1) ...

  • VisualStudio怎么插入按钮? vs网页添加按钮的教程

    Visual Studio网页想要添加按钮,该怎么制作按钮呢?下面我们就来看看vs给网页插入按钮的教程. 1.打开Visual Studio,创建一个网站,并打开它的首页Default.aspx. 2 ...

  • excel宏按钮如何制作 制作excel宏按钮的方法

    excel宏按钮如何制作?在excel中我们可以通过按钮来执行宏,这样在制作一些交互式的表格的时候,点击按钮就能执行特定的功能,下面小编带来制作excel宏按钮的方法,希望对大家有所帮助. 制作exc ...

  • 字幕制作软件哪个好?2018年八款常用的字幕制作软件推荐

    字幕制作软件哪个好?如今自媒体非常的火爆,大家都在做各种有趣的小视频,而视频怎么少得了字幕呢?有字幕,体验才能棒棒哒!下面给大家推挤几款好用的字幕制作软件! 一.Subtitle Edit Subti ...

  • flash怎么制作网页动态按钮呢?

    我们常常在网页可以看到一些漂亮的按钮,当鼠标经过,点击,都会有不同的效果,那么我们今天就一起来学习怎么做吧! 操作方法 01 我们打开flash,新建按钮原件. 插入->新建原件即可 在对话框里 ...

  • wps常用的课件制作软件相比

    ①flash flash是macromedia公司出品的,用在互联网上动态的、可互动的shockwave。它的优点是体积小,可边下载边播放,这样就避免了用户长时间的等待。 flash可以用其生成动画, ...

  • 12组常用按钮UI KIT(PSD)

    按钮是UI设计中最常用的一个元素,几乎每个项目都会有它的出现,在不同的设计中,Button本身会根据主体风格制作,不同的地方使用的按钮样式会有所不同. 对于学UI设计的同学们,按钮练习也是需要学习的, ...

  • IE浏览器的语言显示问题(无法显示网页文字/按钮使用语言)

    在IE浏览器中,常会有语言显示的问题,例如无法正确显示网页文字、无法正确显示网址列文字,功能表和按钮所使用的语言等,以下针对常见语言问题做说明 一、变更功能表和按钮所使用的语言 请根据您的操作系统以及 ...

  • wps演示教程:仿网页跳转效果制作

    进入以下网页http://sports.163.com/nba/,在首页左上部会有一个图片展示,如图所示,当鼠标指向时,自动跳转到相应的页面,效果很好。 图 1 能不能把这个效果在wps演示中实现那? ...