制作漂亮的网页按钮方法步骤详解

详细操作

打开photoshop，新建一个空白文档640×790的空白

给背景添加一个渐变效果。在空白文档的底部选择渐变叠加

点击编辑渐变，进入渐变颜色的设置

点击右底的色标按钮

编辑色标的颜色（渐变结束的颜色）：底部填入#c6c6c6,这个颜色

编辑色标颜色（渐变开始的颜色）：底部填入#f3f3f3,这个颜色

确定后的渐变叠加效果如下：

点击右下角创建新的图层

选择圆角矩形工具，创建按钮的的主要形状，半径为5 px

添加图层样式

添加渐变叠加

点击编辑可渐变颜色，进入编辑渐变颜色

更改色标颜色

填入渐变的左边的色标颜色#0d3079

右边的色标颜色#557dc9

添加描边

描边设置为1px，颜色为深蓝色(#0b2258)

为了增加按钮立体感，添加一个1像素内发光。颜色为白色(#FFFFFF)，减少不透明度到30%。

再复制一个图层1

图层转化为智能对象

按ctrl+图层蒙版缩略图，选择油漆桶工具，填充颜色为黑色(#000000)。按ctrl+d取消选区。

选择滤镜-杂色-添加杂色，数量为33%。

设置图层混合模式为滤色，不透明度为15%。

再复制图层1，得到图层1 副本2

按ctrl+图层蒙版缩略图，选择油漆桶工具，填充颜色为白色(#FFFFFF)，然后按CTRL+D取消选区

选择矩形工具，选中按钮的下面一半。按delete键删除选区，设置图层的不透明度不10%。

新建文字图层，添加文字 “报名”，字体为仿宋

复制文字图层至原图层下方。添加一个深色的叠加颜色 #124d89

复制的文字图层分别向上，向左移动1px，这样文字的浮雕效果就实现了，本“报名”网页按钮制作完毕！

用户类似问题：

问题1：网页制作怎么做按钮，最好带步骤。谢谢

你到“WEB标准之路”之路上去看看吧，有详细的教程，教你用"css雪碧”技术，用美丽的背景图片美化按钮的。还有按钮的样式下载，非常漂亮，直接可以用的。那是个非常实用的网站，不管是对初学者，还是熟手，都很有帮助的。但是前提是你要有一定的HTM... >>详细

问题2：如何制作网页按钮

制作相应的按钮，设置颜色，加上文字，添加函数，flash中有相应的函数，点击：onclick(n);//找到on函数选取就行，n是操作后跳到第n帧 >>详细

问题3：制作个人网站的流程？

制作个人网站的流程如下： 写网站模版，首页，内容页，列表页等等的模版写好。 根据不同的CMS系统（网站后台）在模版中调用数据。 在服务器中测试各种浏览器的兼容性。 购买域名和服务器。 上线运营。 >>详细

问题4：在网页制作中用CSS弄个好看的按钮，默认的那个与网...

我教你一个方法： 下一个好看的按钮图片，作为按钮的背影图片，最好是GIF的，这样你没必要一定是长方形按钮， 把按钮的大小设置成跟图片一样，如果图片太大，你得先修改图片尺寸。用图片作按钮的背影，同时把按钮的边线和底色都设置成NONE 另外... >>详细

问题5：谁有PS制作网页按钮的教程

百度视频有个教育频道 里面有还多ps视频教程免费的，可以系统的学一下 >>详细