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

2016-02-16 08:15 11 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并应用如下图层样式:

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

投影

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

外发光

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

描边

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

目前的效果:

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

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

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

应用如下设置(3角)

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

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

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

应用如下图层样式:

投影

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

内阴影

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

渐变叠加

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

描边

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

目前效果如下:

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

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

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

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

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

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

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

目前的效果

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

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

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

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

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

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

内阴影:

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

渐变叠加:

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

描边:

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

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

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

最终效果如下:

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

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

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

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

延伸阅读
标签: 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、新建大小自定的文档,背景填充青色。先用钢笔建立路径,如下...
photoshop水晶按钮制作教程 最终效果 1.新建一个300 * 200像素的文件,定义圆角矩形大小为250 * 120 2.复制圆角矩(图老师整理)形图层并缩小 3.给底部圆角矩形加个渐变叠加,这里具体颜色头可以先不管,是同一色相调整不同明度就可以了。 4.这是是具体的简便颜色设置 photoshop水晶按钮制作教程(2) ...
最终效果图 1.新建一个500*250象素的窗口,填充绿色(R:52,G:175,B:125),再新建一层命名为"按钮--底部",选择“圆角矩形工具”如图1,半径数值为“10”如图2,绘制如图3所示的圆角矩形。 图1 图2 图3 2.把圆角矩形局部放大用钢笔工具勾出如图4所示的图形,按“Ctrl+Entr" 调出选区,再按"Delete"键删除选区...
最终效果图   1、新建画布,大小随意,然后新建圆角矩形图形,如图所示:   2、圆角矩形属性。   3、画一个吧,高 宽自定。   4、接下来要出玻璃效果就是靠图层属性设置,选择蒙板图层右键混合属性,描边设置:   5、渐变叠加设置:   6、渐变值:   7、...

经验教程

190

收藏

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