PS设计教程网欢迎你!

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

文章来源于 Psdvault.com,感谢作者 活力盒子翻译 给我们带来经精彩的文章!
设计教程/PS教程/设计教程2010-07-13
本教程主要使用Photoshop制作联系我们网页按钮,大家在网页设计中经常用到的,下面你让我们一起来学习.

最终效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

投影

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

渐变叠加

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

描边

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

目前的效果:

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

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa