Photoshop设计金属质感的网页按钮

2016-02-16 02:20 20 1 收藏

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

【 tulaoshi.com - PS 】

先看看效果图

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

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

让我们开始!创建一个新的文件,本ps教程分辨率为500×300,填补这个白色画布。然后选择圆角矩形工具(半径30像素)绘制一个形状使用#d61d23的颜色。

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

之后,应用下面的图层样式到这一层:

内阴影

渐变叠加

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

您的按钮应该看起来像我的:

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

现在,时间,使反射按钮。使用Ctrl + J键复制当前层,然后创建一个新的,然后将其翻转复制的图层,得到一个层中的所有图层样式。之后,翻转,垂直与编辑变换垂直翻转上我的照片下面:

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

为了使反射更透明的底部的图片适用于快速蒙版模式,梯度如下:

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

然后返回到标准模式。现在,我们有一些选择的区域。按删除所选区域到清晰的图像。

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

Ctrl + D键删除选择。进入到下一步骤。我想添加的按钮,有些刺眼。要做到这一点,选择圆角矩形工具(半径:80像素),并创建一个新的形式使用白色。

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

栅格化这个图层与图层栅格化形状。之后,应用快速蒙版模式更多的时间和填充下一个渐变:

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

回到标准模式,我们收到了再次选择的区域。按删除,清除选定部分的图像。

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

取消选择选择的区域,按Ctrl + D和改变图层模式叠加,为当前层。

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

我们完成了按钮。现在,移动到下一个步骤。我认为它会看起来更好时,我们将会把它的一些设计元素上。要做到这一点得到我的照片下面用白色的椭圆工具,创建圆润的造型:

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

之后,应用这些混合选项到这一层:

内阴影

内发光

渐变叠加

行程

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

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

结果如下:

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

时间带来了一些图片,我们的圆形设计元素。地球上找到了一些图片,谷歌图片或使用地雷,或找到它的地方。打开它,并减少一点点,然后将图片,如下图所示。

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

好,那么它的黑色和白色图像调整去色(按Ctrl + Shift + U),并改变图层模式为叠加,这一层:

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

选择锐化工具(刷:100像素,模式:普通,强度:40%),以使该片段的清晰度。

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

我们需要做的最后一件事,。要完成的教程让我们添加一些文字。的横排文字工具,并喜欢上我的照片下面写出来的白色的东西。

Photoshop设计金属质感的网页按钮,PS教程,图老师教程网

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

延伸阅读
标签: PS PS基础
效果图: 大家好,下面由我来开始教如何做上图效果的简单按钮: 1.首先打开photoshop软件,Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件: ①.我们先在图层面板新建一个新的图层,然后把背景图层删除(可按del键快捷键) ②.接着在导航器把界面放到最大 可按ctrl+"+" 快捷键,然后选择矩形选框工具,再选择上面的添加到选...
   先看看最终效果吧,哈哈是不是有点复杂. 不过不要急,心情放松...注意力集中...现在我们就来"肢解"他.不难看出这个按钮主要由3部分构成:背景,水晶按钮及文字,下面我们就开始动手. 一.背景的制作: 1.打开photoshop 新建一个400*400的文件 最好是"RGB"颜色 用黑白圆形渐变绘制如图2所示渐变 图1 图2 2.选择滤镜 杂色 ...
标签: PS PS基础
如果你是设计师,那么创建界面元素是非常重要的技能。本次教程中,我们会创建一个简单漂亮的切换开关按钮。切换开关经按钮常用于某项功能的启用与关闭,他们经常出现在UI设计与网页应用设计中,好了,来开始我们的教程吧。 先看看效果图 下面是教程 第1步: 打开Photoshop,Ctrl+N新建一个文档,尺寸选择600×500px。 第2步: 按住...
PS制作灰色金属质感按钮 教程向图老师的朋友们介绍利用PS制作灰色金属质感按钮。教程难度不大,适合中高级PS学习者学习。下面我们下来看看制作好的效果图。 终极效图 下面我们一起来学习制作过程: 1、打开photoshop,新建一图层并按Shift使用椭圆工具画Tulaoshi.Com一圆形。 2、然后双击图层1,在图层1的混合属...

经验教程

805

收藏

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