Photoshop制作炫目的联系我们按钮

2016-02-16 08:15 2 1 收藏

图老师小编精心整理的Photoshop制作炫目的联系我们按钮希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - PS 】

最终效果

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

1.在photoshop中新建文件,宽度200、高度200px,白色背景,分辨率72px(web图片)注意这就是我们要制作的按钮的实际尺寸。按住Ctrl+R调出标尺,分别拖动4条参考线到画布的四周,如下图:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

按住Ctrl+alt+c调出画布调整面板,分别把宽度、高度设为800px和500px。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

你会得到如下所示效果(为了便于示范我设置背景色为灰色)

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

你可以看到,这样我们就得到了200px*200px按钮的准确位置,参考线后面也不需要移除。

2.我们准备一个简单的背景。我倾向于用亮灰色做渐变填充,颜色设置如下:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

新建图层命名为backlight,使用大、小柔角画笔,大画笔绘制中上方的光影,小画笔用来绘制画布正中间偏上的光影,效果如下:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

重设光影层的大小和位置如下图:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

现在我们的按钮已经有了非常漂亮的背景

3.按快捷键U调出圆角矩形工具,圆角半径设为10px,沿着参考线绘制圆角矩形。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

把该图层命名为button bg,并添加如下图层样式:

投影

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

渐变叠加

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

描边

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

目前的效果:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

4.现在让我们为按钮增加些阴影和高光。在button bg上一层新建图层,使用矩形工具绘制矩形选区并填充深灰色。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

把该图层命名为shadow,滤镜-模糊-高斯模糊,半径设为13px,确保此时图层不存在任何选区。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

Ctrl+T调整投影大小,图层不透明度设为30%,你将获得如下效果:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

新建图层,命名为Highlight,置于所有图层的顶端,混合模式设为叠加,使用白色柔角画笔绘制按钮的顶部,如下图:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

复制图层,改变混合模式为正常,调整大小,位置略高于按钮的上边缘。如图:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

目前的效果如下:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

5.现在我们为按钮绘制信封。做所有图层顶端新建图层,使用矩形工具绘制如图所示白色矩形:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

把该图层命名为envelope并应用如下图层样式:

投影

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

外发光

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

描边

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

目前的效果:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

6.下面我们为信封增加些细节。新建图层命名为envelope top,选择多边形工具

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

应用如下设置(3角)

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

绘制三角如下图,调整其大小以适合信封。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

应用如下图层样式:

投影

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

内阴影

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

渐变叠加

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

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

描边

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

目前效果如下:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

复制图层,把新得到的图层命名为envelope bottom,ctrl+T变形,右击选垂直翻转。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

保留所有的图层样式描边除外,调整位置如下:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

在信封的最顶层和最底层之间新建图层,使用柔角笔刷在信封中央绘制阴影和高光。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

目前的效果

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

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

7.现在基本上已经制作完毕,下面我们来添加文字。输入contact us,颜色设置为#b10000如下:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

这里我们的文字使用了深红色,这样做的目的是要制作浮雕效果。技巧是使用比背景稍浅一些的红色,过会我们应用混合模式以后,我们就会获得理想的效果。

我们为文字应用如下图层样式:

内阴影:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

渐变叠加:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

描边:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

这里要格外注意:在应用描边时,确保要选择比背景色亮的颜色,这样才能营造浮雕效果。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

最终效果如下:

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

教程结束,希望你能从中学到新的东西,下次见。

Photoshop制作炫目的联系我们按钮,PS教程,图老师教程网

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

延伸阅读
最终效果图 1、首先你需要用钢笔工具作出一个和图中相类似的形状,形状完成后用CTRL+ENTER转换成选区;再www.Tulaoshi.com随便使用一个颜色填充;在打开双击此图层打开图层样式对话框,勾选渐变叠加做以下设置: 2、再在其上面建立一个新图层并用链接按钮将它们链接起来,在按CTRL+E将这2个图层合并。(这么做的目的是用一个...
标签: PS PS教程
  这个按钮纯粹是我看着MAC的按钮模仿出来的,自我感觉已经比较象了!废话不多说,开始了。
标签: PS
photoshop滤镜制作按钮教程 最终效图 1、新建一个500X500图象,背景色设为黑色,拖动水平与垂直辅助线到文件的中间,(按Ctrl+R使文件窗口显标尺)选择Elliptical Marquee 工具,按SHIFT+ALT键的同理拖动鼠标,在文件中间画一个圆形选区。新建一层 , 命名为chrome base。 2、起动 KPT 5 Shape Shifter,应用 janspeed chro...
Photoshop制作绿色按钮技巧 对于各界交互界面大师来说,按钮的制作无疑是不可缺少的一个组成部分,(www.tulaoshi.com)但是习惯于运用多个图层叠加出非常漂亮的效果的时候,修改极不方便。下面介绍如何用图形渐变及图层样式简化这些图层。 PS教程最终效果 1、新建大小自定的文档,背景填充青色。先用钢笔建立路径,如下...
最终效果图 1、首先启动功能强大的Photoshop,新建一个合适大小的画布,并且将背景色设置为灰色。如图1所示。 2、接着使用圆角矩形工具,将半径设置为(图老师整理)10像素,绘制出一个圆角矩形。如图2所示。 3、选择渐变工具,打开渐变编辑器,模拟真实金属的光泽,设置黑白灰的渐变。如图3所示。 4、按下C...

经验教程

528

收藏

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