教你制作Windows Vista风格按钮

2016-03-18 06:01 7 1 收藏

今天图老师小编给大家展示的是教你制作Windows Vista风格按钮,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

【 tulaoshi.com - PS 】

本教程是关于用photoshop制作Windows

转载格按钮。教程主要是应用Photoshop的矩形工具绘制按钮,及图层样式和图层叠加来表现按钮的质感。

最终效果图  


1、新建一个图像文档(快捷键Ctrl + N),背景色为#2a2a2a,宽度和高度依自己需要而定。  

Tulaoshi.com
2、从工具栏选择圆角矩形工具(快捷键U),在选项栏设置其半径为5像素,颜色为黑色,绘制类似如下形状的图形:  


3、将“形状1”图层重命名为“按钮背景”,在空白处双击,打开图层样式对话框。给图层应用“外发光”、“内发光”、“渐变叠加”、“描边”等样式。具体设置如图所示:

  (1) “外发光”图层样式参数设置:

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

(2)“内发光”图层样式参数设置:  

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


(3)“渐变叠加”图层样式参数设置:  


其中渐变色三处色标的颜色分别是:#148791 #000f1b #000f1b,如图所示:  


(4)“描边”图层样式参数设置:  

应用如上图层样式后,我们将得到如下效果:  


4、新建一个图层,并命名为“光泽”。从工具栏中选择“矩形选框工具”(快捷键M),绘制如下所示的选区。  


5、现在我们要得到按钮部分的选区。按住Shift + Ctrl + Alt键不放,用鼠标点击“按钮背景”图层的“图层缩览图”图标,即得到按钮部分的选区。  


得到按钮部分的选区。  

6、从菜单中选择“选择 - 修改 - 收缩”,收缩量设置为1像素,将选区缩小1像素。  


7、点击选择“光泽”图层,使用白色 #ffffff 填充选区,Ctrl + D 取消选区。在图层面板上,将不透明度降低为20%。这样,一款漂亮的质感按钮就制作完成了。  


8、最后在按钮上输入所需要的文字即可。注意使文字图层位于“光泽”图层之下,并且根据需要,适当调整文字图层的不透明度。  

来源:https://www.tulaoshi.com/n/20160318/1874003.html

延伸阅读
最终效果图 1.新建文件,使用矩形选区工具绘制一个矩形按钮,前景色设置为#990000 ,背景色设置为#660000,选择反射渐变工具,填充,并使用自由变换工具对按钮进行扭曲。效果如下: 2.选择按钮底层,调出选区,将选区缩进5个像素(选择-修改-缩小)。新建层,命名为按钮皮肤。按下X键将前景色和背景色进行调换。依旧选...
标签: PS PS教程
初学者入门,Photoshop教程,简单绘制Vista风格网页按钮,效果还是不错的!但是有没有用还要看自己的喜好! photoshop制作一个超酷的蓝色Vista风格网页按钮。文章最后提供PSD源文件。 1、建立一个50*50px文档,背景填充为#121212。 2、建立新图层,使用圆角矩形工具。半径设置为15px,绘制一个在文档正中的形状,然后使用渐变工具,把前景色...
最终效果图 制作工具:Photoshop CS 制作过程: 1、选择一幅背景图片,效果如图01所示。 图01 2、设置前景色的RGB分别为174、174、174。新建一个图层图层1,并填充前景色,效果如图02所示。 图02 3、执行菜单栏中的“滤镜”“杂色”“添加杂色”命令,在打开的添加杂色对话框中设置参数如图03所示,效果如图04所...
 在Authorware的交互方式中有一种按钮交互方式,但是一般用户利用它只能够制作出简单的按钮,无法完成一些复杂和个性按钮。按钮作为Windows下的通用控件之一,使用非常广泛,研究一下按钮的制作技术对于提高我们作品交互性是很有帮助的。     一、“制作”他人按钮       有时看到别人Aut...
标签: windows 操作系统
Windows Vista系统的资源管理器,变化很大,平时我们需要设置文件关联时发现桌面属性中找不到了,那么Vista文件关联设置藏在哪里呢?我们打开“控制面板”-“默认程序”就可以找到“将文件类型或协议与程序关联”了,如图1所示: 图1 假如我们需要设置 RMVB格式的播放类型,可以选择“.rmvb”,单击右上方的“更改程序”就可以设...

经验教程

928

收藏

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