Photoshop制作简单的蓝色导航按钮

2016-02-02 15:12 37 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的Photoshop制作简单的蓝色导航按钮,希望大家看完后能赶快学习起来。

【 tulaoshi.com - PS 】

本教的按钮部分制作比较简单,用图层样式就可以完成。不过作者在介绍按钮的同时也介绍了背景部分的制作。这样搭配起来,做出的按钮更漂亮。
最终效果

1、新建一文件,大小自定,这里是600*400为例。设置前景色:#1592d7,背景颜色:#136da2,选择径向渐变工具。从中间拖动得到下面效果:

2、添加散射光条文。新建一层,左边工具栏选择-圆角矩形按钮-自定义形状按钮。找到下面这个形状,如果没有可以点击右边的小箭头,追加形状。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)3、选中并在图层上拖动得到如下效果:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)4、前景色设为白色(#ffffff),选择钢笔工具,右击路径--填充路径。得到下图:

5、右击路径--删除路径。选择“滤镜”-模糊-高斯模糊-5个像素。单击确定。图层混合模式改为“柔光”。不透明度为30%。

6、新建一图层命名为“nav”。拖出一个黑色矩形框。高度根据自己需要。

7、填充改为:10%。新建一图层,制作边线。画两根1px线,上边一根黑色,透明度50%,下面一根白色。

8、复制顶线,移动至底部:

9、新建图层,做出如下选区,注意上下边缘:

10、填充黑色,不透明设为“0”,描边:

11、复制上面的图层,清除图层样式,添加如下样式:

12、渐变叠加,颜色由白色 到透明。描边:

13、制作右下角高光边框:

14、添加图层蒙版,前景黑色背景白色。拖动得到如下效果:

15、复制做好的按钮,再打上文字,完成最终效果:

来源:http://www.tulaoshi.com/n/20160202/1534536.html

延伸阅读
标签: PS PS基础 PS效果
网页设计中按钮的制作非常重要,精致的按钮会给网页增色不少。下面的教程介绍一款非常不错的按钮的制作方法。制作过程比较简单:先用图形工具制作出按钮的形状,然后加上一些简单的图像样式做底色。然后再加上高光及文字等即可完成效果。 最终效果 1、打开photoshop,然后新建一个文档250*150,并填充背影:#252a38。 2...
标签: PS PS基础 PS效果
水晶按钮是非常常用的,制作方法按个人操作也有一些区别。下面的教程是用图层样式来完成主体操作。制作的时候只需用选区工具做出想要的按钮形状,然后添加图层样式和高光即可。 最终效果 1、打开Adobe Photoshop,执行菜单:“文件”/“新建”(快捷键Ctrl+N),弹出新建对话框,设置名称:按钮,宽度:570像素,高度:400像素,分辨...
透明物体是通过背景进行参照,体现出质感。而本例里是讲解白色透明背景,如果背景太亮,会导致对比不明显。 最终效果 1、打开下图所示的背景素材,选择菜单:滤镜 模糊 高斯模糊,数值稍微大一点,效果如下图。 2、把前景色设置为绿色,用圆角矩形工具拉一个合适的圆角矩形,然后选择钢笔工具,在属性栏选择“合并形状”,勾...
标签: PS PS基础 PS效果
本教程的按钮构成部分不多,总共为两大部分,金属外框和蓝色玻璃部分。制作的时候只要画好相应的图层,加上图层样式效果就出来了。制作过程比较简单。 最终效果 1、将背景色填充为黑色。前景色设为 #0090ff ,用“形状工具”在画布中央画一个圆。 2、对这个圆应用下面的图层属性: 3、最终,你得到这样的效果: 4、用“矩形...
标签: PS PS基础 PS效果
水晶按钮的制作关键是把水晶质感渲染出来。可能勾出的图层较多,注意好每一个图层都需要用图层样式等添加光感,然后再根据光源方向设定好高光位置,这样做出的按钮不仅质感好,而且比较合逻辑。 最终效果 1、新建文档,800x600像素,背景白色,画2个矩形,分别添加样式。 2、底部矩形样式。 3、上部矩形样式。 4...

经验教程

825

收藏

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