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

战斧大爷

战斧大爷

2016-02-16 04:02

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

先看看效果图

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取消选区。

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/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教程,图老师教程网

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

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

最终效果图

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

展开更多 50%)
分享

猜你喜欢

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

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

Photoshop设计制作好看的贝壳字教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop设计制作好看的贝壳字教程

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop设计制作好看的烟花效果教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop设计制作好看的烟花效果教程

Photoshop制作精美的网页按钮教程

PS PS基础
Photoshop制作精美的网页按钮教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Photoshop制作简洁的网页按钮

PS PS基础
Photoshop制作简洁的网页按钮

Photoshop制作精致大气的绿色网页按钮教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop制作精致大气的绿色网页按钮教程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Photoshop制作皮革针织效果的艺术字教程

Photoshop制作皮革针织效果的艺术字教程

Photoshop制作春季连体艺术字教程

Photoshop制作春季连体艺术字教程
下拉加载更多内容 ↓