Photoshop制作质感的斜纹网页导航按钮

2016-02-16 03:36 22 1 收藏

今天图老师小编要跟大家分享Photoshop制作质感的斜纹网页导航按钮,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - PS 】

效果图:

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

大家好,下面由我来开始教如何做上图效果的简单按钮:

1.首先打开photoshop软件,Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件:

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

①.我们先在图层面板新建一个新的图层,然后把背景图层删除(可按del键快捷键)

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

②.接着在导航器把界面放到最大 可按ctrl+"+" 快捷键,然后选择矩形选框工具,再选择上面的添加到选区,然后按照下图选出那样的选区

并填充(alt+delete)为白色:

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

③接着按快捷键alt+A全选图层,再选择编辑菜单,往下看,找到定义图案,确定!

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

2.接着再新建一个新的文件,500 x 300 px,300dpi(分辨率),确定,背景层填充为深灰色(#494949)!下面我们将开始制作按键!

①我们首先新建一个图层,再用选框工具选出自己需要的大小按钮,填充为黑色。

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

②.我们开始给它美化,双击该图层,设置它的图层样式:分别设置以下的参数:

(设置它的高光,大家可以边设置边留意按钮的变化!参数可以自己来控制)

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

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

(为按钮添加色彩、修改不透明度,可自己选择觉得好看的颜色 :) )

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

(图案选择一开始你所定义的图案,修改参数,你也可以自制diy图案)

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

(最后得出这样的按钮!)

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

③.我们可以多制作几个出来,用不同的颜色来表达:

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

④.我们再用色块,大的画笔修改其不透明度,来优化一下:

(40%不透明的黑色 的色块)

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

(画笔ctrl+T 变形的 背面衬托)

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

(最后加上字体)

Photoshop制作质感的斜纹网页导航按钮,PS教程,图老师教程网

恭喜你,完成了!一个简单的按钮就是这样做出来,整体效果可能有点偏暗,大家可以通过修改参数来改变其中效果,大家不妨试一下。

来源:http://www.tulaoshi.com/n/20160216/1567559.html

延伸阅读
标签: PS PS基础 PS效果
本教程的按钮制作比较简单。大致的过程:先画好想要的按钮形状,可以使任意图形。然后设置一些图层样式,后面加上高光和文字即可。 最终效果 1、把底图层填充成灰色,再创建一个新图层,在新图层上用矩形选框工具画出一个长方形(大小自己看着来) 用兰色填充(兰色值为#22aff7)。在这里顺便把选区储存起来 因为后面要用到。 最后给一个5p...
标签: PS PS基础 PS效果
本教的按钮部分制作比较简单,用图层样式就可以完成。不过作者在介绍按钮的同时也介绍了背景部分的制作。这样搭配起来,做出的按钮更漂亮。 最终效果 1、新建一文件,大小自定,这里是600*400为例。设置前景色:#1592d7,背景颜色:#136da2,选择径向渐变工具。从中间拖动得到下面效果: 2、添加散射光条文。新建一层,左边工具栏...
标签: PS PS基础 PS效果
本教程介绍非常漂亮的导航图示按钮制作方法。按钮的效果非常大气及精美,利用图示图形来制作提示效果,感觉非常的生动。 最终效果 1、首先我们在PS里新建一文件,大小为 500x500px,白色背景。 2、使用圆角矩形(半径为10px),绘制我们的质感图标的轮廓。 3、随后我们使用钢笔工具为每条边的中点增加一个矢量点,随后用直接...
透明物体是通过背景进行参照,体现出质感。而本例里是讲解白色透明背景,如果背景太亮,会导致对比不明显。 最终效果 1、打开下图所示的背景素材,选择菜单:滤镜 模糊 高斯模糊,数值稍微大一点,效果如下图。 2、把前景色设置为绿色,用圆角矩形工具拉一个合适的圆角矩形,然后选择钢笔工具,在属性栏选...
来源:站酷 作者:邵飞Design 透明物体是通过背景进行参照,体现出质感。而本例里是讲解白色透明背景,如果背景太亮,会导致对比不明显。 最终效果 1、打开下图所示的背景素材,选择菜单:滤镜 模糊 高斯模糊,数值稍微大一点,效果如下图。 2、把前景色设置为绿色,用圆角矩形工具拉一个合适的圆角矩形,然后选择钢笔工具,在属性栏...

经验教程

792

收藏

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