Photoshop设计漂亮精致的网页按钮

2016-02-17 03:14 4 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的Photoshop设计漂亮精致的网页按钮,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - 平面设计 】

先看看效果图

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

步骤1:

打开Photoshop,快捷键 Ctrl+N 打开新建窗口,按照下图内的参数设置好后,确定。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

步骤2:

选定背景层,快捷键 Shift+F5 打开填充对话个,下拉菜单中选择颜色,然后使用颜色#141d28,确定。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

步骤3:

接下来,我们使用圆角矩形工具,设置圆角为2px,拉出一个适当大小的矩形。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

然后在右侧的图层面板中,如下图位置,单击,然后设置颜色为#17202b

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

步骤4:

好的,接下来我们给这个图层设置图层样式。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

最后设置渐变描边,颜色分别为#090e13(深)#0d1b2a(浅),即由下至上,由深到浅。

这里我们发现,刚才设置的渐变叠加也是上浅下深的,为什么能,因为我们这里假设了光源是从上方射下来的,要塑造逼真的立体感,我们必须注意光源对物体表面所造成的影响。

我想学过素描的朋友一定都清楚三大面,五大调子吧,很简单的道理,这里我就不细说了。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

步骤6:

好了,图层样式的设置告一段落,但是,不管在任何时候,我们花一些时间来尝试各种样式的组合已达到满意的效果,都是很值得的。

现在我们再来看看这个按钮,会发现按钮表面与下面的投影之间,似乎少了些对比。接下来我们尝试给按钮加一个很酷的渐变边框来解决这个问题。

首先我们需要获得这个按钮的选区,然后新建一个图层。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

好的,接下来使用渐变工具,快捷键G,从中心向外拉出一个渐变。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

颜色为#050607到#ffffff,模式为对称渐变。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

然后使用选区工具(M),将选区向上移动1px(是用方向键↑),然后点击delete删除选区中的内容,再用 Ctrl+D 取消选区,这样就只保留了最下方的1px的一条细线。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

接着,我们用快捷键 Ctrl+I 进行反相,然后将图层属性设置为叠加。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

我们复制一个这个图层,这样可以提高亮度

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

这样,一个不错的效果就出来了。

步骤6:

接下来我们用同样的方法获取选区,并新建一个图层。

然后使用渐变工具,白到黑,模式为径向渐变,绘制如下效果。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

然后我们用 Ctrl+D 取消选区,并设置图层模式为叠加,然后设置透明度为50%,获得如下效果。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

步骤7:

添加文字,完成。

Photoshop设计漂亮精致的网页按钮,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160217/1577973.html

延伸阅读
标签: PS PS基础 PS效果
作者寄语:本教程教大家制作一款简单又美观的玻璃按钮,不用任何图层样式就可以做出非常漂亮的效果。用最简单的方法制作最漂亮的作品。 最终效果 新建一个400 * 250像素的文档,背景填充蓝色:#106D98。 1、新建一个图层,命名为“玻璃边框”,选择矩形工具,半径设置为25,然后拉出下图所示的选区并填充白色。填色后...
标签: PS PS基础 PS效果
对于各界交互界面大师来说,按钮的制作无疑是不可缺少的一个组成部分,但是习惯于运用多个图层叠加出非常漂亮的效果的时候,修改极不方便。下面介绍如何用图形渐变及图层样式简化这些图层。 最终效果 1、新建大小自定的文档,背景填充青色。先用钢笔建立路径,如下图。 2、创建渐变调整图层,渐变颜色位置随意,如下图。 ...
最终效果图 1、新建一个图片大小为376x188像素,背景白色,创建一个新图层,然后画一个黑色的圆角矩形。 2、选择“图层—图层样式”,添加内发光、描边、渐变叠加这3种图层样式。 效果如下。 3、创建一个新图层,使用“圆角矩形工具”画一白色的圆角矩形,如图所示。 ...
说起 按钮 ,不得不先提一下链接,因为在大部分人看来,似乎按钮与链接差不多,都是完成一个页面的跳转。其实不然,按钮与链接还是有一定的区别。 先简单说说他们的区别吧。 按钮:按钮代表着做某件事,即点击了按钮代表着操作了一个功能,做的这件事是有后果的,不易挽回的。例如典型的google,QQ邮箱。像信息搜索、回复、注册,他们的共同...

经验教程

753

收藏

26
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部