PS五种水晶按钮制作教程集合共27页文档.docx

PS五种水晶按钮制作教程集合共27页文档.docx

《PS五种水晶按钮制作教程集合共27页文档.docx》由会员分享，可在线阅读，更多相关《PS五种水晶按钮制作教程集合共27页文档.docx（28页珍藏版）》请在冰点文库上搜索。

PS五种水晶按钮制作教程集合共27页文档

圆形水晶按钮制作教程

其实,任何一门学科都离不开死记硬背,关键是记忆有技巧,“死记”之后会“活用”。

不记住那些基础知识,怎么会向高层次进军?

尤其是语文学科涉猎的范围很广,要真正提高学生的写作水平,单靠分析文章的写作技巧是远远不够的,必须从基础知识抓起,每天挤一点时间让学生“死记”名篇佳句、名言警句,以及丰富的词语、新颖的材料等。

这样,就会在有限的时间、空间里给学生的脑海里注入无限的内容。

日积月累,积少成多,从而收到水滴石穿,绳锯木断的功效。

1.新建文件，宽、高都为5，单位cm，分辨率200，模式为RGB，白色背景。

其实,任何一门学科都离不开死记硬背,关键是记忆有技巧,“死记”之后会“活用”。

不记住那些基础知识,怎么会向高层次进军?

尤其是语文学科涉猎的范围很广,要真正提高学生的写作水平,单靠分析文章的写作技巧是远远不够的,必须从基础知识抓起,每天挤一点时间让学生“死记”名篇佳句、名言警句,以及丰富的词语、新颖的材料等。

这样,就会在有限的时间、空间里给学生的脑海里注入无限的内容。

日积月累,积少成多,从而收到水滴石穿,绳锯木断的功效。

2.用圆形选框工具画出圆形选框，在选区内点鼠标右键，选“通过拷贝的图层”项（图层1）。

这个工作可让学生分组负责收集整理,登在小黑板上,每周一换。

要求学生抽空抄录并且阅读成诵。

其目的在于扩大学生的知识面,引导学生关注社会,热爱生活,所以内容要尽量广泛一些,可以分为人生、价值、理想、学习、成长、责任、友谊、爱心、探索、环保等多方面。

如此下去,除假期外,一年便可以积累40多则材料。

如果学生的脑海里有了众多的鲜活生动的材料,写起文章来还用乱翻参考书吗?

3.新建图层（图层2），使用渐变工具，设置成“前景色到透明渐变”，前景色设置为R：

255，拉出如图渐变。

4.新建图层（图层3），在新图层上用喷笔画出阴影（也可填充颜色，然后用椭圆选区羽化后删除，但是那样效果没有用喷笔来得自然好看，小魔星就不在此赘述：

P）

5.新建图层（图层4），在新图层上画出椭圆选区。

6.在图层4上使用渐变工具，前景色设置为R：

255；G：

255；B：

255。

7.新建图层（图层5），使用钢笔工具任意画一个图形。

8.在路径工作区中点选“将路径作为选区载入”，将钢笔路径转换成选区。

9.填充前景色。

10.将图层5拉至图层4之下。

11.图层属性设置为“叠加”。

12.把工作区换到图层1（通过拷贝的白色圆形），双击图层，跳出图层样式框，参数设置如图。

13.现在就是大功告成拉~~哈哈哈~~~如果想再做其他颜色的水晶按钮不必再一个个重复做~只要点ctrl+U调整色相就OK了：

）

金属边框按钮

一.背景的制作:

1.打开photoshop新建一个400*400的文件最好是"RGB"颜色

用黑白圆形渐变绘制如<图2>所示渐变 

<图1> 

<图2>

2.选择滤镜>杂色>添加杂色数值如<图3>所示  

<图3>

3.选择滤镜>艺术效果>底纹效果数值如<图4>所示 

<图4>

背景效果图如图5（第一步大功告成）:

<图5>

一.水晶部分的制作:

1.新建一个图层命名为“水晶--底1”，按Ctrl+R调出标尺拉两条如图所示参照线，以参照线的交点为圆心，用椭圆选取工具按住ALT+Shift绘制图6所示的正圆。

<图6>

2.按Ctrl+’隐藏参照线，选择渐变工具在“水晶--底1”这层绘制渐变，渐变颜色：

黑白渐变，渐变方式：

放射性渐变，渐变路线：

由选区的左上角按住Shift向右下方渐变如图7 

<图7>

3.按Ctrl+D取消选区渐变的效果如图8 

<图8>

4.双击图层“水晶--底1”调出图层样式分别选择描边和投影相关参数如图9图10效果如图11 

<图9>

<图10>

5.用椭圆选取工具在刚绘制圆形上绘制如图12所示的椭圆，按Ctrl+Alt+D羽化，数值为25，再按Ctrl+M把所选的区域调成高光如图13 

<图12>

<图13>

6.按Ctrl+D取消选区，在“水晶--底1”上面新建一层命名为：

“水晶--底2”,再按Ctrl+’调出参照线，然后用椭圆选取工具绘制图14所示的正圆。

<图14>

7.用渐变工具绘制渐变：

渐变颜色：

黑白渐变，渐变方式：

放射性渐变，渐变路线：

由选区的右下角按住Shift向左上角方渐变渐变效果如图15。

<图15>

8.不要取消选区，在图层“水晶--底2”上再新建一层命名为：

“水晶--底3”，选择：

选择>修改>收缩数值为：

3如图16。

<图15>

<图16>

9.在图层“水晶--底3”绘制渐变：

渐变颜色：

深绿（R:

0G:

63B:

41）白渐变，渐变方式：

放射性渐变，渐变路线：

由选区的右下角按住Shift向左上角方渐变按Ctrl+’取消参照线渐变效果如图17。

<图17>

10.双击“水晶--底3”调出图层样式，选择描边，数值为1，颜色为黑色，透明度为25%，在“水晶--底3”上面新建一层命名为：

“水晶--内阴影”调出“水晶--底3”的选区，（方法：

用鼠标点击图18红色部分位置，下同）填充黑色。

<图18>

11.选择菜单：

选择>修改>收缩数值为：

3再按Ctrl+Alt+D羽化，数值为5，按删除键删掉选择部分，取消选区（按Ctrl+D）效果如图19。

<图19>

12.在“水晶--内阴影”上新建一层命名为“水晶--内发光”调出“水晶--底3”的选区（方法参照第9步下同），填充白色，选择菜单：

选择>修改>收缩数值为：

3，再按Delete删除中心部分如图20。

<图20>

13.选择橡皮工具，设置如图21，把白圈的部分地方擦除，效果如图22。

<图21>

<图22>

14.在“水晶--内阴影”上新建一层命名为“水晶--底高光”调出“水晶--底3”的选区（方法参照第9步下同），用椭圆选取工具按住ALT键，在选区切出如图23所示的选区，按Ctrl+Alt+D羽化数值为3，再填充白色，取消选区，把图层的透明度调为30%如图24。

<图23>

<图24>

15.在“水晶--底高光”上新建一层命名为“水晶--大光圈”，按Ctrl+’调出参照线，在中心绘制一个正圆填充白色，取消选区，把这层的透明度调为10%效果如图25。

<图25>

16.在“水晶--大光圈”上新建一层命名为“水晶--顶高光”，按Ctrl+’调出参照线，在中心绘制一个正圆填充白色，取消选区，再添加蒙版如图26。

<图26>

17.选择黑白渐变，方向：

从上到下渐变，效果如图27。

<图27>

18.在“水晶--大光圈”上新建一层命名为：

“水晶--底高光1”，调出“水晶--底3”的选区，选择菜单：

选择>修改>收缩数值为：

4,再用椭圆选区工具按住ALT键切出图28所示的选区，然后填充白色。

<图28>

19.取消选区，用钢笔工具把尖角的地方勾出圆角,按Ctrl+Enter调出选区再按Delete删除选区部分。

如图29,30。

<图29>

<图30>

20.取消选区，添加蒙版，用黑白渐变按图31所示方向渐变。

<图31>

21.在“水晶--底高光1”上新建一层命名为：

“水晶--底高光2”,用椭圆选取工具绘制一个小椭圆，填充白色如图32所示，再按Ctrl+T调出变形工具，把椭圆略向上倾斜,按Enter键应用变形如图33所示。

<图32>

<图33>

22.在“水晶--底高光2”上新建一层命名为：

“水晶--顶反光1”,用钢笔工具绘制如图34所示的图形，按Ctrl+Enter调出选区，再填充白色，然后按Ctrl+D取消选区。

<图34>

23.添加蒙版，用黑白渐变按图35所示方向渐变。

<图35>

24.在“水晶--顶反光1”上新建一层命名为：

“水晶--顶反光2”,用椭圆选取工具绘制一个小椭圆，填充白色,再按Ctrl+T调出变形工具，把椭圆略向上倾斜，按一下Enter键，再把这层的透明度调为60，如图36所示。

<图36>

25.按Ctrl+J把“水晶--顶反光2”复制一层命名为“水晶--顶反光2top”,再回到“水晶--顶反光2”这层，选择菜单：

滤镜>模糊>高斯模糊数值为3.5效果如图37。

<图37>

26.到这一步为止水晶部分的效果就算完成了，不过有些不满意的地方，我们自己可以适当的再调整一下，尽量让自己满意。

<图38>

二.文字部分的制作:

1.在图层的最上面新建一个图层用文字工具打上"68ps"几个字如图39。

<图39>

2.双击图层，调出图层样式依次进行：

投影、外发光、斜面和浮雕及描边的设置，设置参数如下图。

<投影>

<外发光>

<斜面浮雕>

<描边>

<效果>

3.删格化图层，并锁定图层，具体设置如图。

<图40>

4.选择渐变工具设置如图41，渐变方向如图42。

<图41>

<图42>

5.用喷枪工具，压力为20%左右，适当的用黑色和白色喷出文字的暗光和高光，整体效果如图43。

<图43>

最后给整个按钮制作一点小装饰，最终效果就做好了！

最终效果

方形水晶按钮

1.新建一个300*200像素的文件，定义圆角矩形大小为250*120

2.复制圆角矩形图层并缩小

3.给底部圆角矩形加个渐变叠加，这里具体颜色头可以先不管，是同一色相调整不同明度就可以了。

4.这是是具体的简便颜色设置

5.给上边的矩形添加样式

6.设置前景颜色为白色，用椭圆工具画出如图形状并设置不透明度为50%，操作如下图

7.载入上部矩形为选区并新建图层用白色描边，并给该图层添加一个蒙版用渐变工具作出下图效果

8.隐藏背景图层，盖印图层，并用自由变换工具做成倒影。

9.加上文字。

10.最后添加一个色相饱和度可以调成自己喜爱的颜色。

最终效果图

1、首先，填充一个浅灰的底，目的是为了突出按钮的高光位置，有其是边缘的。

我现在把文字和高光的图层给去掉了，只留下最重要的部分。

这个图层，就只有样式，你看到的效果，全都是样式做出来的。

看到了吗？

都用了那几种样式？

PS制作水晶长形按钮

2、有了基本认识，接下来，新建一个图层，偶先画了一个倒角的方形，偶比较喜欢倒角的，如果你喜欢其它形状，随便画好了。

如果你不知道怎么画，请看之前的教程。

画好后，随便填个颜色，什么颜色都没关系。

双图层，调出图层样式窗口。

为了让按钮更明显一些，偶先加了个描边。

一个像素就够了，颜色选择黑色，透明一点。

为什么不直接用灰色呢？

那是因为考虑到以后应用的时候，透明的黑色会更容易融入其它环境的。

灰色会显得很生硬，记住拉，用半透明的黑色，更容易融入背景的。

PS制作水晶长形按钮

3、有了描边，再加个渐变，好增加立体感，看看，怎么是正片叠加的？

其实，你也可以用正常模式的，但为什么偶要选择正片叠加？

先买个关子，等一下再告诉你吧～现在先选择好你喜欢的颜色先拉！

加了颜色后，先不急着调整，留待其它效果添加了再调整会容易很多的。

PS制作水晶长形按钮

4、现在还差点什么呢？

阿，对了，还欠个阴影。

那么，我们给他加个阴影吧～看偶的！

夷？

为什么不用阴影，而用外发光呢？

怎么混和模式又不是正常的呢？

呵，别急，下一步告诉你为什么。

先选好黑色的发光，表示阴影吧～

PS制作水晶长形按钮

5、好拉，现在看看效果怎样？

在一个阴影的基础上，就仅仅是多了一条白色的线，但就因为这条小线，令按钮突出来了，细节的东西，可不要忽略了阿。

当你发觉你做的东西不对劲的时候，要考虑一下，是否有某些细节给忽略了。

PS制作水晶长形按钮

6、但现在的按钮好像光的质感还不够，我再加一个内发光！

让他在边缘发光，这个也就只是一些细节，当然，你可能不会一下子发现，你可以在到制作到后期的时候添加和修改也行的。

PS制作水晶长形按钮

7、加了个发光，效果好了点，但现在虽然有了金属包边的感觉，但还是觉得平凡了点。

哈，加个斜线也是个流行的做法阿！

关于斜线的制作，看这里dispbbs.asp?

BoardID=3&ID=188958不要再问偶了。

但你加了斜纹后，可能会看不到？

为什么？

？

？

？

尝试修改混合模式吧～然后调整透明度，让斜线更自然的融入按钮

PS制作水晶长形按钮

4、现在还差点什么呢？

阿，对了，还欠个阴影。

那么，我们给他加个阴影吧～看偶的！

夷？

为什么不用阴影，而用外发光呢？

怎么混和模式又不是正常的呢？

呵，别急，下一步告诉你为什么。

先选好黑色的发光，表示阴影吧～

PS制作水晶长形按钮

5、好拉，现在看看效果怎样？

在一个阴影的基础上，就仅仅是多了一条白色的线，但就因为这条小线，令按钮突出来了，细节的东西，可不要忽略了阿。

当你发觉你做的东西不对劲的时候，要考虑一下，是否有某些细节给忽略了。

PS制作水晶长形按钮

6、但现在的按钮好像光的质感还不够，我再加一个内发光！

让他在边缘发光，这个也就只是一些细节，当然，你可能不会一下子发现，你可以在到制作到后期的时候添加和修改也行的。

PS制作水晶长形按钮

7、加了个发光，效果好了点，但现在虽然有了金属包边的感觉，但还是觉得平凡了点。

哈，加个斜线也是个流行的做法阿！

关于斜线的制作，看这里dispbbs.asp?

BoardID=3&ID=188958不要再问偶了。

但你加了斜纹后，可能会看不到？

为什么？

？

？

？

尝试修改混合模式吧～然后调整透明度，让斜线更自然的融入按钮

PS制作水晶长形按钮

制作网页常用水晶按钮

水晶按钮最终效果图

1、打开PS，新建一个文件，在工具箱中选择圆角矩形工具，如下图所示设置：

2、新建一个图层后，在画布上拉出一个长方形，就得到这样的结果。

（为了更好的给大家讲解，这个图放大了400%显示）

如果大家得到这样的结果。

就需要将“对齐像素”的选项给勾上。

3、为这个图层添加图层样式。

得到结果如图所示，顺便在样式调板中存储着这个样式。

4、使用矩形选框工具，绘制出一个矩形的选区。

5、新建图层后，填充黑色到白色的径向渐变。

6、并将该图层的混合模式改为：

柔光，不透明度：

60%。

7、新建图层，再绘制出一个矩形选区。

8、填充成白色。

9、并将该图层的混合模式改为：

线性减淡，不透明度：

30%。

10、使用文字工具写上要的文字，注意在这里要将字体的边缘设置为：

无。

11、之前我们创建过一个样式，还记得吗，给文字应用这个样式就可以了。

后面的工作就是换换颜色，改改文字就可以了。

来源：

站酷作者：

木可可 

最终效果1

最终效果2

效果1制作过程：

1、新建一个500*300的文件，背景填充颜色：

#242424深灰色。

2、新建一个图层，选择圆角矩形工具，画一个矩形，然后把前景颜色设置为：

#007dee，背景颜色设置为：

#023f78，选择渐变工具，从左至右拉渐变。

3、双击图层1，调出图层样式，选择描边，在这里描边大小为5像素，颜色比背景稍微深一些即可。

4、选择魔棒工具，按Shift键连续选择蓝色区域，点击:

选择>修改>收缩，数位2。

5、新建图层2，填充白色。

6、选择椭圆选框工具画一个椭圆，按Delete删除。

7、设置图层2的图层混合模式为“柔光”，图层不透明度为：

30%。

8、最后打上喜爱的文字，完成最终效果。

效果2制作过程：

1、新建一个300*150像素的画布，背景填充颜色：

#242424深灰色。

2、新建一个图层，选择圆角矩形工具，设固定大小，宽5厘米，高为2厘米，半径200像素，画一个椭圆。

3、选择矩形选框工具在椭圆的右上角画一个框，填充白色。

4、分别设置图层样式，参数设置如下图。

5、写上文字，完成最终效果。

PS制作水晶质感按钮教程

第一步:

把底图层填充成灰色再创建一个新图层在新图层上用矩形选框工具画出一个长方形（大小自己看着来） 用兰色填充（兰色值为#22aff7）.在这里顺便把选区储存起来因为后面要用到.最后给一个5px的下拉阴影如下图:

第二步:

新建一图层起名”深色”用深兰色填充（颜色值为#0141af）如下图:

第三步:

用橡皮擦工具（模式:

画笔直径:

200px 硬度:

0不透明:

100% 流量:

80%）在”深色”层点几下如下图:

第四步:

复制一个”深色”层应用这个层的混合选项里的内阴影具体数值如下图:

第五步:

用椭圆选框工具画出如下图这个样子:

新建一个层起名为”白色”选区反选（Ctrl+Shift+i）后填充白色如下图:

栽入咱们最早保存的那个选区执行反选（Ctrl+Shift+i） 然后Delete多余白色结果如下图:

第六步:

对这个”白色”层应用高斯模糊（滤镜—模糊—高斯模糊）模糊值为:

3px如下图:

第七步:

调整”白色”层的透明度如下图:

OK!

关键步奏都讲完了剩下的就是根据自己的需要加上字啊阴影什么的大家就自己看着来吧…