Photoshop制作好看的网页按钮教程

2016-02-16 04:02 5 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享Photoshop制作好看的网页按钮教程吧。

【 tulaoshi.com - PS 】

先看看效果图

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

打开photoshop,新建空白文档。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

为了不让白色背景看起来乏味,增加一个渐变叠加效果。渐变颜色为# f3f3f3到# c6c6c6。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

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

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

添加渐变叠加图层样式。渐变颜色从#0d3079到#557bc9。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

现在让按钮从背景中突显出来,添加1 px描边,颜色为深蓝色(#0b2258)。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

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

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

现在给按键添加杂色,新建图层,按ctrl+图层蒙版缩略图,选择油漆桶工具,填充颜色为黑色(#000000)。按ctrl+d取消选区。

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

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

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

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

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

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

新建图层,按ctrl+图层蒙版缩略图,选择油漆桶工具,填充颜色为白色(#FFFFFF)。按ctrl+d取消选区。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

现在开始创建漂亮的灯光效果,选择矩形工具,选中按钮的一半。按delete键删除选区,设置图层的不透明度不10%。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

添加文字,字体为Arial(Bold,14pt)。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

现在给文字添加雕刻效果,最简单的方式是复制文字层(ctrl + J),然后移动复制到原文字图层下方。添加一个深色的叠加颜色。右键点击混合选项 混合叠加颜色 #124d89。分别向上,向左移动1px。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

选择自定义形状工具,画的放大镜,应用上一步骤方法,制作雕刻效果。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

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

设置按钮高光效果。新建一组,命名为light effect,设置混合模式为颜色减淡。按ctrl+图层蒙版缩略图。选择画笔工具,大小80px,硬度为0,给按钮添加高光。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

最终效果图

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

来源:https://www.tulaoshi.com/n/20160216/1567814.html

延伸阅读
这是一篇photoshop按钮制作教程,教程中将为大家介绍如何使用photoshop中的图层样式功能制作出水晶按钮的透明和立体效果,大家一起来动手制作吧。 先看效果图。 1、新建文档,尺寸自定,背景白色,建新层,画一黑色圆角矩形。 2、分别添加投影、描边这两个图层样式。 效果如下图所示。 ...
红砖墙壁大致由两部分构成:砖块及砖缝间的水泥。制作的时候我们先制作出砖块部分,用填充色及简单的滤镜做出一块砖,然后复制做出想要的墙壁。再用选区和滤镜制作出水泥部分。后期用图层样式增强一下立体感即可,方法非常简单实用。 最终效果1 最终效果2 1、新建一个800 * 600像素的文档,背景选择白色。新建一个图层,用矩形...
标签: PS PS教程
本文由 中国 龟爬树(邓志峰) 原创,转载请保留此信息! 1、打开PHOTOSHOP,新建一个300X300像素,背景为白色的文档。 2、新建一个图层,用圆角矩形工具  画一个长圆角矩形,并打开图层样式,选择渐变叠加,具体设置如下图 [next] 3、新建一个图层,用铅笔工具  给按钮画上1个像素的细线。 ...
标签: PS PS基础
效果图: 大家好,下面由我来开始教如何做上图效果的简单按钮: 1.首先打开photoshop软件,Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件: ①.我们先在图层面板新建一个新的图层,然后把背景图层删除(可按del键快捷键) ②.接着在导航器把界面放到最大 可按ctrl+"+" 快捷键,然后选择矩形选框工具,再选择上面的添加到选...
标签: 耳环 耳钉 手工
珍珠耳环制作视频教程 准备教程 制作好看的耳环我们首先要准备好热缩片、耳环一对、夹铁圈、打孔器、彩铅、钳子。 画出图片 我们用彩铅在热缩片上画好自己喜欢的图案,比如下图,我画的是一个三角形的形状,几何元素。 打孔 将三角形用剪刀剪下来,然后用打孔器去打两个孔,记得方向位置哟啊固定好,然后用吹风机...

经验教程

996

收藏

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