当前位置: 首页 > 设计教程 > 网页设计教程 > 用PS制作炫目的联系我们按钮

用PS制作炫目的联系我们按钮

最终效果

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制作炫目的联系我们按钮

  • 共4页:
  • 上一页
  • 1
  • 2
  • 3
  • 4
  • 下一页
  • 上一篇:网页PNG标签:PS制作质感的网页PNG标签教程
    下一篇:Photoshop设计简洁的iphone网站首页布局

    图集推荐

    • 灵感
    • 美图