• Hello!欢迎来到网页设计学!
当前位置: 首页 > 设计理论 > 网页制作教程 > ps教程:photoshop制作网页中的按钮

ps教程:photoshop制作网页中的按钮

.................................................................................................................................................................

这篇文章属于新手教程,比较简单,主要教大家如何用photoshop中的图层样式、混合模式和图层蒙板创建一个简单的网页按钮。

我们经常会在一些资源下载网站上看到两个按钮,就是演示和下载按钮,今天我们先来创建一个演示按钮,预览图:

buttona_14
步骤:
1、创建一个photoshop文件,大小为640px*480px,分辨率为72。

buttona_1

2、将背景图层解锁,双击背景图层,进入图层样式面板,选择渐变叠加,渐变范围从#f3f3f3 到#c6c6c6。样式选择径向,角度35,缩放105%。

buttona_2

3、新建图层(图层一),用圆角矩形选框工具创建一个圆角矩形,圆角半径为5px。

buttona_3

4、双击图层一,进入图层样式面板,选择渐变叠加,渐变范围从#0d3079 到#0d3079。样式选择线性。

buttona_4

5、选择描边,大小为1px,颜色为#0b2258。

buttona_5

6、选择内发光,不透明度为30%,颜色选择白色。

buttona_6

7、新建图层(图层二),按住ctrl,鼠标左键点击图层一,得到选区,在图层二上填充黑色,ctrol+d取消选区,然后执行滤镜>杂色>添加杂色,数量为33%。

buttona_8

8、将涂层二的混合模式改为滤色,不透明度为15%。

buttona_9

9、新建图层(图层三),按住ctrl,鼠标左键点击图层一,得到选区,在图层三上填充白色,ctrol+d取消选区,用矩形选区工具选择如下图区域,delete删除。

buttona_10

10、将图层三的不透明度改为10%。

buttona_11

11、添加文字和图标。

buttona_14

本文链接:ps教程:photoshop制作网页中的按钮

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流