Photoshop制作透明大气的导航按钮教程

2016-03-18 05:47 13 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的Photoshop制作透明大气的导航按钮教程懂PS的网友们快点来了解吧!

【 tulaoshi.com - PS 】

透明物体是通过背景进行参照,体现出质感。而本例里是讲解白色透明背景,如果背景太亮,会导致对比不明显。

最终效果

Photoshop制作透明大气的导航按钮,图老师

Photoshop制作透明大气的导航按钮,图老师

1、打开下图所示的背景素材,选择菜单:滤镜 模糊 高斯模糊,数值稍微大一点,效果如下图。

Photoshop制作透明大气的导航按钮,图老师

Photoshop制作透明大气的导航按钮,图老师

2、把前景色设置为绿色,用圆角矩形工具拉一个合适的圆角矩形,然后选择钢笔工具,在属性栏选择“合并形状”,勾出底部三角形形状,如下图。

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

把当前图层填充改为:0%,此时形状的颜色就消失了,但是你会发现形状路径还在。

Photoshop制作透明大气的导航按钮,图老师

3、给当前形状添加图层样式,设置:内发光、内阴影,投影,参数及效果如下图。

Photoshop制作透明大气的导航按钮,图老师

Photoshop制作透明大气的导航按钮,图老师

Photoshop制作透明大气的导航按钮,图老师

4、输入想要的文字,文字用白色,再添加投影样式,如下图。

Photoshop制作透明大气的导航按钮,图老师

5、按照下面的过程给顶部边框,边角位置增加高光效果。

Photoshop制作透明大气的导航按钮,图老师

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

Photoshop制作透明大气的导航按钮,PS教程,图老师教程网

6、这样一个透明的质感就完成了,导航的技法是一样的。

Photoshop制作透明大气的导航按钮,图老师

最终效果:

Photoshop制作透明大气的导航按钮,图老师

来源:http://www.tulaoshi.com/n/20160318/1873761.html

延伸阅读
来源:PS联盟 作者:Sener 按钮分为两个大的部分来制作:中间的蓝色水晶及边缘透明度玻璃部分。制作方法基本相同,只需要找出相应的高光部分并渲染出来即可。 最终效果 1、新建一个800 * 600像素的文档,背景填充暗紫色:#752874,如下图。 图1 2、先来制作中间的蓝色水晶部分,需要完成的效果如下图。 图2 3、新建一个组,选择椭圆选...
标签: PS PS基础 PS效果
对于各界交互界面大师来说,按钮的制作无疑是不可缺少的一个组成部分,但是习惯于运用多个图层叠加出非常漂亮的效果的时候,修改极不方便。下面介绍如何用图形渐变及图层样式简化这些图层。 最终效果 1、新建大小自定的文档,背景填充青色。先用钢笔建立路径,如下图。 2、创建渐变调整图层,渐变颜色位置随意,如下图。 ...
标签: PS PS基础
本教程主要使用Photoshop绘制绿色风格的网页下载按钮,整体的立体效果表现的非常的漂亮,光泽方面也非常的漂亮,喜欢的朋友让我们一起来学习吧。 先看看效果图 最终效果图
标签: PS PS基础 PS效果
作者寄语:本教程教大家制作一款简单又美观的玻璃按钮,不用任何图层样式就可以做出非常漂亮的效果。用最简单的方法制作最漂亮的作品。 最终效果 新建一个400 * 250像素的文档,背景填充蓝色:#106D98。 1、新建一个图层,命名为“玻璃边框”,选择矩形工具,半径设置为25,然后拉出下图所示的选区并填充白色。填色后...
标签: PS PS基础 PS效果
按钮是网页中不可缺少的部分,好的按钮可以给网页增色不少。下面的教程介绍水晶风格的导航按钮制作。制作的时候先制作按钮的一部分,然后再复制组成导航栏。 最终效果 1、新建文件,大小500x 200px ,选择渐变工具(G),(径向渐变)从#363636到#252525。 最左边拖动到右下角。 2、新建层, 选择选区工具(M),固定大小为100 x 40px角...

经验教程

262

收藏

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