游戏UI设计-第3章-按钮设计.pptx

1、 PPT模板： PPT课件： 游戏按钮类型介绍游戏按钮类型介绍3.2扁平化按钮设计扁平化按钮设计3.3 Q版风格按钮设计版风格按钮设计3.4 欧美风格按钮设计欧美风格按钮设计目录目录013.1 游戏按钮类型介绍游戏按钮类型介绍3.1 游戏按钮类型介绍游戏按钮类型介绍经常有同学会问一些关于按钮设计的问题，怎么样做些漂亮又特别的按钮，画按钮的技法在网上能找到很多，但是很少有人讲按钮设计的方法论。一个漂亮的按钮，我们要看他的表现方式、形态、质感是否符合整个界面所要传达的整体风格是值得每一个设计师去重视的。随着网络媒体的发展。各行各业都在网络媒体上来展示自己，也相继出现了许多行业界面，那么这些界面的设

2、计风格肯定不会千篇一律，那么涉及到的按钮设计也是各有风格的。“艺术来源于模仿”，“设计来源于生活”，在画按钮的时候主要从生活中发现自己需要的元素。下面就举例来谈谈设计方法。首先，我们知道按钮在效果表现上很大一部分我们是从质感的表现上来识别的，比如我们最常见Vista风格的按钮就是从玻璃质感上表现。如图3-1所示，很明显就能看出玻璃瓶的高光、反光和投影。我们在变现按钮质感的时候也多是从这三方面出发。这里做一个实例分析。图3-1玻璃杯素材3.1 游戏按钮类型介绍游戏按钮类型介绍这里做一个实例分析。如图3-2所示，A按钮是完全按照玻璃瓶质感的方式来画的。如图3-3所示，B按钮是经过对光规律的观察而总

3、结出的自己想要表现方式的一种艺术处理。主要是为了说明我们在进行参照质感进行按钮设计的时候要考虑自己需要的艺术效果进行适当的艺术处理。这样也便于界面制作人员的制作。下面一种是我们经常所见的苹果风格的按钮设计，这种风格的按钮也是我们在生活中经常能见到的，键盘手机就经常采用这种设计方式，但是随着触摸屏手持设备的普遍，绝大数的键盘界面都采用模仿原来手机实物键盘的设计方式，这样是为了让用户对界面产生亲切感，同时这样的设计也看起来更加简洁美观，如图3-4所示。图3-2 A按钮图3-2 A按钮3.1 游戏按钮类型介绍游戏按钮类型介绍如图3-5所示，C按钮是参照键盘的质感做的样稿。D按钮是选择了同一色相不同明

4、度和纯度所做的按钮，之所以列举这个列子，是为了说明我们在做这种风格的按钮设计的时候，一定要把握住一个很重要的问题，那就是一定是在同一种色相中拉渐变，这样的按钮效果才自然，当然除了设计师追求一些不一样的效果，如图3-6所示。如图3-7所示的这张色谱，大家可以看出色相的微妙关系。有利于我们做渐变类型的按钮。图3-5 C按钮图3-6 D按钮图3-7 色谱3.1 游戏按钮类型介绍游戏按钮类型介绍如图3-8所示的E按钮就是采用的45度角径向渐变的按钮，是为了说明渐变方式不同最后按钮的最后出现的效果也会不同，就这一点我们设计师可以设计出很多不同形式的按钮。还有一些生活中的按钮设计，如图所示这个按钮设计是参

5、考常见的复印机上面的按钮来设计的，这种按钮的设计方法也很简单，但是效果很好。同时也加强了用户对界面的亲切感，更加有利于用户的使用。如下图3-9所示。如图3-10所示的按钮是我们常见的调节上下的按钮，按照实物的样式，粗糙的画了一个实例，为的就是说明其实在做按钮设计的时候我们参考的实物是很多的，多观察周围的实物往往会得到一些意想不到的收获，并且我们还可以通过简单的艺术效果处理得到不同的按钮效果。图3-8 E按钮图3-9 开关按钮图3-10 上下调节按钮023.2扁平化按钮设计扁平化按钮设计3.2扁平化按钮设计扁平化按钮设计具体操作步骤如下：1.打开Photoshop CS6软件，单击【文件】【新建

6、】或按【ctrl+N】组合键，【新建】一个【空白文档】，宽度和高度分别设置为2680像素、1280像素，分辨率为300像素/英寸，颜色模式为RGB模式8位图像，背景为白色，如图3-11所示。2.按【Ctrl+O】组合键【打开】一张在网络上保存的图片作为背景，如图3-12所示。图3-11 新建空白文档图3-12 打开素材图片3.2扁平化按钮设计扁平化按钮设计3.单击左侧工具栏中的【钢笔工具】或按快捷键【P】，勾选出一个不规则的矩形，勾选完毕后按【Ctrl+Enter】组合键【转换为选区】，如图3-13所示。4.按【Ctrl+Shift+N】组合键【新建】“图层1”，单击左侧工具栏中的【填充工具】

7、，进入【拾色器（前景色）】，选取颜色【RGB】参数分别为R:214、G:197、B:150，点击【确定】按钮，如图3-14所示。图3-13 转换为选区图3-14 拾色器3.2扁平化按钮设计扁平化按钮设计5.按【Ctrl】键的同时左键点击“图层1”，进行【载入选区】，单击左侧工具栏中的【笔刷工具】，设置【大小】为70像素，如图 所示。再配合【橡皮擦工具】轻微擦拭选区边缘，制造出破旧纸张的效果，绘制效果如图3-15所示。6.在【图层】面板中，将“图层1”的【不透明度】调整为80%，如图3-16所示。调整后的效果如图3-17所示。图3-15 绘制图3-16 调整不透明度3.2扁平化按钮设计扁平化按钮

8、设计7.按【Ctrl+J】组合键【复制】“图层1”，长按鼠标左键将“图层1副本“拖至”图层1“的下方。用单击左侧工具栏中的【填充工具】，进入【拾色器（前景色）】，选取颜色【RGB】参数分别为28、6、1，点击【确定】按钮，并把图层1副本的不透明度改为100%，如图3-18所示。图3-17 效果图图3-18 调整不透明度3.2扁平化按钮设计扁平化按钮设计8.按【Ctrl+T】组合键进行【变形】后，再按【Alt+Shift】组合键将“图层1副本”原位放大,设置参数X：1345.00像素，Y：682.50像素，W:100.00%，H：100.00%，如图3-19所示，修改效果如图3-20所示。图3-

9、19 变形图3-20 修改效果图3.2扁平化按钮设计扁平化按钮设计9.按【Ctrl+O】组合键【打开】一张在网络上保存的图片作为背景，如图3-21所示。10.单击右键“图层”并选择【栅格化图层】，如图3-22所示。图3-21 打开素材图片图3-22 栅格化图层3.2扁平化按钮设计扁平化按钮设计11.按【Ctrl+U】组合键打开【色相/饱和度】的面板，将“图层”的【色相】参数设置为0，【饱和度】设置为-100，【明度】设置为0，如图3-23所示。效果如图3-24所示。12.单击右键“图层”并选择【创建剪贴蒙版】，如图3-25所示。图3-23 色相/饱和度图3-24 效果图图3-25 创建剪贴蒙版

10、3.2扁平化按钮设计扁平化按钮设计13.单击【图层】面板左上方的【混合模式】列表，并选择【线性加深】如图3-26所示。效果如图3-27所示。14.按【Ctrl+Shift+N】组合键【新建】“图层2”，单击左侧工具栏中的【画笔工具】，设置笔刷【大小】为7，如图3-28所示。图3-26 线性加深图3-27 效果图图3-28 设置笔刷3.2扁平化按钮设计扁平化按钮设计15.单击左侧工具栏中的【填充工具】，进入【拾色器】选取颜色参数【RGB】分别为R:105,G:81,B:83，R:72,G:49,B:51，R:44,G:21,B:23，三种颜色绘制出图钉效果。点击【确定】按钮。如图3-29、图3-

11、30、图3-31所示。最后绘制效果如图3-32所示。图3-29 拾色器图3-30 拾色器图3-31 拾色器图3-32 绘制效果3.2扁平化按钮设计扁平化按钮设计16.按【Ctrl+J】组合键【复制】“图层2”，单击左侧工具栏中的【移动工具】并按住【Shift】将“图层2副本”水平拖至右侧，适当调整位置使“图层2”和“图层2副本”中的图钉样式【对齐】，效果如图3-33所示。17.单击左侧工具栏中的【横排文字工具】，输入文本内容为“退出游戏”并选用【字心坊李林哥特体简体中文】的字体样式，如图3-34所示。18.单击左侧工具栏中的【横排文字工具】，在相应图层双击鼠标左键【全选】“退出游戏”文字，如图

12、3-35所示。图3-33 调整位置图3-34 创建文本图3-35 全选文字3.2扁平化按钮设计扁平化按钮设计19.单击将左上方文字工具栏的【拾色器】，如图3-36所示。并将颜色【RGB】调整为R:34,G:30,B:34，如图3-37所示。20.单击【菜单栏】里的【窗口】列表并打开【字符】面板，如图3-38所示。图3-36 填充工具图3-37 拾色器图3-38 字符3.2扁平化按钮设计扁平化按钮设计21.打开字符面板后，将【行距】设置为18.44点，【所选字符的字距调整】设置为200，【水平缩放】设置为100%，如图3-39所示。22.在【图层】面板下双击“退出游戏”的图层，将【图层样式】面板

13、打开，单击【描边】效果，【大小】设置为4像素，【位置】选择外部，【混合模式】为正常，【不透明度】为79%，【填充类型】选择颜色，如图3-40所示，双击颜色框打开【拾色器】。图3-39 设置字符面板图3-40 描边3.2扁平化按钮设计扁平化按钮设计23.选取颜色【RGB】参数为R:231,G：231，B：231，如图3-41所示，最后单击【确定】按钮，填充效果如图3-42所示。24.单击左侧工具栏中的【钢笔工具】，勾选出一个不规则的小矩形作为按钮的底色，按【Ctrl+Enter】组合键【转换为选区】，效果如图3-43所示。图3-41 拾色器图3-42 填充效果图3-43 转换为选区3.2扁平化按

14、钮设计扁平化按钮设计25.按【Ctrl+Shift+N】组合键【新建】“图层3”，单击左侧工具栏中的【填充工具】，选取颜色【RGB】参数为R:118,G:121,B:147，如图3-44所示。26.按【Ctrl+Shift+N】组合键【新建】“图层4”，单击左侧工具栏中的【画笔工具】，Sampled Brush13 70笔刷【大小】设置为7，如图3-45所示。27.单击左侧工具栏中的【填充工具】，选取颜色【RGB】参数为R:75,G:72,B:77，如图3-46所示，最后单击【确定】按钮。在小矩形周围画出边框。图3-44 拾色器图3-45 设置画笔图3-46 拾色器3.2扁平化按钮设计扁平化按

15、钮设计28.继续使用【填充工具】，选取颜色【RGB】参数为R:51,G:53,B:90，最后单击【确定】按钮，如图3-47所示。在小矩形的中间画几条横线作为木纹纹理。29.继续使用【填充工具】，选取颜色【RGB】参数为R:43,G:39,B:43，如图3-48所示。最后单击【确定】按钮。加深小矩形的边框，最后效果如图3-49所示。图3-47 拾色器图3-48 拾色器图3-49 效果图3.2扁平化按钮设计扁平化按钮设计30.按【Ctrl+J】组合键【复制】“图层3”，将复制出来的“图层3副本”拖至“图层4”的上方，如图3-50所示。31.按【Ctrl】键的同时左键单击“图层1”，载入选区后打开【

16、拾色器（前景色）】窗口，选取颜色【RGB】参数为R:74,G:39,B:31，如图3-51所示。按【Alt+Delete】组合键为“图层3副本”【填充】颜色，填充效果如图3-52所示。图3-50 复制图层图3-51 拾色器图3-52 填充效果3.2扁平化按钮设计扁平化按钮设计32.点开【图层】面板左上方的【混合模式】列表，并选择【柔光】效果，如图3-53所示。再将【不透明度】设置为65%，如图3-54所示。33.按【Ctrl】键的同时左键点击“图层3”、“图层4”、“图层3副本”后，按【Ctrl+E】组合键将3个图层【合并】为“图层3副本”，如图3-55所示。图3-53 柔光模式图3-54 调

17、整不透明度图3-55 合并图层3.2扁平化按钮设计扁平化按钮设计34.按【Ctrl+J】快捷键【复制】“图层3副本”，单击左侧工具栏中的【移动工具】并按住【Shift】键将复制出来的“图层3副本2”水平拖至右侧，适当调整位置使“图层3副本”和“图层3副本2”中的按钮框【对齐】，效果如图3-56所示。35.单击左侧工具栏中的【横排文字工具】，并选用【字心坊李林哥特体简体中文】的字体样式，在2个按钮框中间分别输入文本“取消”、“确定”，并将文字【大小】改为23.57点，如图3-57所示。图3-56 调整位置图3-57 创建文本3.2扁平化按钮设计扁平化按钮设计36.使用【横排文字工具】，选择“取消

18、”“确定”文本所在图层，单击左上方文字工具栏的【拾色器】，并将颜色【RGB】调整为R:241,G:230,B:241，如图3-58所示。37.最后单击左侧工具栏中的【移动工具】，在“取消”“确定”的相应文本图层，按方向键移动“取消”“确定”的位置，将它们调至适当位置即可。完成效果如图3-59所示。图3-58 拾色器图3-59 完成效果图033.3 Q版风格按钮设计版风格按钮设计3.3 Q版风格按钮设计版风格按钮设计具体操作步骤如下：具体操作步骤如下：1.打开Photoshop CS6软件，单击【文件】【新建】或按【ctrl+N】组合键，【新建】一个【空白文档】，宽度和高度分别设置为1200像素

19、、640像素，分辨率为300像素/英寸，颜色模式为RGB模式8位图像，背景为白色，如图3-60所示。图3-60 新建空白文档3.3 Q版风格按钮设计版风格按钮设计2.单击【创建新图层】按钮，或按【Shift+Ctrl+Alt+N】组合键，单击左侧工具栏中的【圆角矩形工具】，在画布中双击，在弹出的页面设置【宽度】为200像素，【高度】为100像素，【半径】为30像素，勾选【从中心】，最后单击【确定】按钮。如图3-61所示。效果如图3-62所示。图3-61 创建圆角矩形图3-62 效果图3.3 Q版风格按钮设计版风格按钮设计3.按【Ctrl+T】组合键进行【自由变换】，按【Alt+Shfit】进行

20、【放大】，调整好图形位置，效果如图3-63所示。4.双击“圆角矩形1”的图层，打开【图层样式】窗口，单击【描边】效果，【大小】设置为9像素，【位置】选择外部，【混合模式】为正常，【不透明度】为100%，【填充类型】选择渐变，勾选【与图层对齐】按钮，【倾斜度】为0，【缩放】为100%，如图3-64所示。图3-63 自由变换图3-64 描边3.3 Q版风格按钮设计版风格按钮设计5.然后单击渐变色，设置【渐变编辑色】，再双击【色标】，选择颜色参数分别为【#2f1402】、【#5f2a06】、【#57270a】、【#57270a】、【#311807】，如图3-65所示。6.单击【光泽】效果，【混合模式

21、】为正常，颜色参数设置为【#de8716】，【不透明度】为48%，【倾斜度】为19，【距离】为30像素，大小为166像素，勾选【反相】按钮，如图3-66所示。图3-65 设置渐变色图3-66 光泽3.3 Q版风格按钮设计版风格按钮设计7.单击【颜色叠加】效果，【混合模式】为正常，颜色参数设置为【#783819】，【不透明度】为100%，最后单击【确定】按钮，如图3-67所示。8.按【Ctrl+J】组合键【复制】图层，再次使用【Ctrl+T】组合键进行【自由变换】，【缩放】参数设置为【W】：90%，【H】：85%，如图3-68所示。图3-67 颜色叠加图3-68 自由变换3.3 Q版风格按钮设计

22、版风格按钮设计9.双击“圆角矩形1副本”的图层，打开【图层样式】对话框，点掉【描边】按钮，单击【颜色叠加】效果，【混合模式】为正常，颜色参数设置为【#e7a09f】，【不透明度】为100%，如图3-69所示。10.单击【外发光】效果，【混合模式】为正常，【不透明度】为100%，【杂色】为3%，颜色参数设置为【#893905】,【方法】选择精确，【扩展】为51%，大小为24像素，【范围】设置为50%，如图3-70所示，最后单击【确定】按钮。图3-69 颜色叠加图3-70 外发光3.3 Q版风格按钮设计版风格按钮设计11.单击【新建图层】按钮，单击左侧工具栏中的【钢笔工具】，进行绘制高光点，将菜单

23、栏下的【填充】颜色参数设置为【#e49c2c】，然后将图层【不透明度】设置为30%，如图3-71所示。图3-71 填充工具3.3 Q版风格按钮设计版风格按钮设计12.单击【新建图层】按钮，单击左侧工具栏中的【钢笔工具】绘制饼干碎，然后选中所有饼干碎所在的图层，按【Ctrl+G】组合键，并将图层名更改为“点缀”，然后双击“点缀”图层，打开【图层样式】对话框，添加【斜面和浮雕】样式，【样式】选择内斜面，【方法】为平滑，【深度】设置为32%，【方向】为下，【大小】为2像素，【软化】为1像素。设置阴影的【角度】为120度，【高度】为30度，勾选【使用全局光】按钮。【高光模式】为滤色，颜色参数设置为【#

24、fdf5b6】，【不透明度】为75%。【阴影模式】为正片叠底，颜色参数设置为【#eaad71】，【不透明度】为75%,如图3-72所示。图3-72 斜面和浮雕3.3 Q版风格按钮设计版风格按钮设计13.勾选【等高线】效果，【范围】设置为50%，如图3-73所示。结合整体，调整出立体效果。14.单击【新建图层】按钮，单击左侧工具栏中的【圆角矩形工具】，在画布中双击，在弹出的页面参数设置【宽度】为635像素，【高度】为300像素，【半径】为70像素，最后单击【确定】按钮，调整整体位置，效果如图3-74所示。图3-73 调整出立体效果图3-74 创建圆角矩形3.3 Q版风格按钮设计版风格按钮设计15

25、.用双击“圆角矩形2”图层，打开【图层样式】对话框，单击【内发光】效果，【混合模式】为正常，【不透明度】为78%，【杂色】为0%，颜色参数设置为【#9b5020】,【方法】选择柔和，【源】选择边缘，【阻塞】为24%，大小为13像素，【范围】为50%，如图3-75所示。图3-75 内发光3.3 Q版风格按钮设计版风格按钮设计16.单击【渐变叠加】效果，【混合模式】为正常，【不透明度】为100%，选择颜色参数分别为【#fde345】【#ed566f】，【样式】选择线性，勾选【与图层对齐】按钮，【角度】为-90，【缩放】为100%。如图3-76所示，最后单击【确定】按钮,效果如图3-77所示。图3-

26、77 效果图图3-76 渐变叠加3.3 Q版风格按钮设计版风格按钮设计17.单击【新建图层】按钮，单击左侧工具栏中的【文字工具】打上文本内容“充值”，使用“方正胖娃简体”，【大小】设置为50，【字符间距】调整为300，如图3-78所示。效果如图3-79所示。图3-79 整体效果图图3-78 创建文本3.3 Q版风格按钮设计版风格按钮设计18.单击【新建图层】按钮，单击左侧工具栏中的【钢笔工具】，绘制光亮的奶油感觉，颜色参数设置为【#fbe175】，然后将图层【不透明度】设置为36%，最后把图层移到“充值”文本图层的下方，如图3-80所示。图3-80 填充工具3.3 Q版风格按钮设计版风格按钮设

27、计19.单击【新建图层】按钮，单击左侧工具栏中的【钢笔工具】，绘制高光，双击该图层，打开【图层样式】窗口。单击【内发光】效果，【混合模式】为正常，【不透明度】为75%，【杂色】为0%，颜色参数设置为【#ffe955】,【方法】选择柔和，【源】选择边缘，【阻塞】为46%，大小为33像素，【范围】为50%，如图3-81所示。图3-81 内发光3.3 Q版风格按钮设计版风格按钮设计20.单击【颜色叠加】效果，【混合模式】为正常，颜色参数设置为【#ffffff】，【不透明度】为100%，如图3-82所示。图3-82 颜色叠加3.3 Q版风格按钮设计版风格按钮设计21.单击【外发光】效果，【混合模式】为

28、正常，【不透明度】为75%，【杂色】为0%，颜色参数设置为【#fbdd71】,【方法】选择柔和，【扩展】为0%，大小为5像素，【范围】设置为50%，单击【确定】按钮，如图3-83所示。最后单击【添加图层蒙版】按钮，让高光部分显得更自然，效果如图3-84所示。图3-83 外发光图3-84 效果图3.3 Q版风格按钮设计版风格按钮设计22.双击【背景】图层，并单击左侧工具栏中的【渐变工具】填充颜色，颜色参数设置为【#d4ac8c】和【#966a4f】，如图3-85所示。23.Q版按钮制作完成，最终效果如图3-86所示。图3-86 最终效果图图3-85 渐变工具043.4 欧美风格按钮设计欧美风格按

29、钮设计3.4 欧美风格按钮设计欧美风格按钮设计具体操作步骤如下：具体操作步骤如下：1.打开Photoshop CS6软件，单击【文件】【新建】或按【ctrl+N】组合键，【新建】一个【空白文档】，宽度和高度分别设置为1200像素、640像素，分辨率为300像素/英寸，颜色模式为RGB模式8位图像，背景为白色，如图3-87所示。图3-87 新建空白文档3.4 欧美风格按钮设计欧美风格按钮设计2.单击【创建新图层】按钮，创建“图层1”。在菜单栏下点击【视图】，并且打开【标尺工具】，如图3-88所示。长按鼠标左键拖出参考线。单击左侧工具栏中的【钢笔工具】勾出内侧外形，效果如图3-89所示。图3-88

30、 标尺工具图3-89 拖出参考线3.4 欧美风格按钮设计欧美风格按钮设计3.双击“图层1”图层，打开【图层样式】窗口，添加【斜面和浮雕】效果，【样式】选择内斜面，【方法】为平滑，【深度】设置为100%，【方向】为上，【大小】为5像素，【软化】为0像素。设置阴影的【角度】为120度，【高度】为30度，勾选【使用全局光】按钮。【高光模式】为滤色，颜色参数设置为【#ffffff】，【不透明度】为75%。【阴影模式】为正片叠底，颜色参数设置为【#000000】，【不透明度】为75%。如图3-90所示。图3-90 斜面和浮雕3.4 欧美风格按钮设计欧美风格按钮设计4.在网络上找一张金属纹理贴图，如图3-

31、91所示。5.对其进行【纹理叠加】，并添加图层样式。添加【斜面和浮雕】效果，【样式】选择内斜面，【方法】为平滑，【深度】设置为100%，【方向】为上，【大小】为16像素，【软化】为0像素。设置阴影的【角度】为120度，【高度】为30度，勾选【使用全局光】按钮。【高光模式】为滤色，颜色参数设置为【#ffffff】，【不透明度】为75%。【阴影模式】为正片叠底，颜色参数设置为【#000000】，【不透明度】为75%,如图3-92所示。图3-92 斜面和浮雕图3-91 金属纹理贴图素材3.4 欧美风格按钮设计欧美风格按钮设计6.再单击左侧工具栏中的【钢笔工具】绘制出如图3-93所示的装饰边，并填充不

32、同颜色。7.打开【图层样式】窗口，添加【斜面和浮雕】效果，【样式】选择内斜面，【方法】为平滑，【深度】设置为100%，【方向】为上，【大小】为13像素，【软化】为0像素。设置阴影的【角度】为120度，【高度】为30度，勾选【使用全局光】按钮。【高光模式】为滤色，颜色参数设置为【#ffffff】，【不透明度】为75%。【阴影模式】为正片叠底，颜色参数设置为【#000000】，【不透明度】为75%。使它们有立体感，如图3-94所示。图3-93 填充工具图3-94 斜面和浮雕3.4 欧美风格按钮设计欧美风格按钮设计8.单击左侧工具栏中的【钢笔工具】，在按钮内侧边框勾勒出与内侧相同的形状，并将其【不透

33、明度】设置为60%，如图3-95所示。图3-95 调整不透明度3.4 欧美风格按钮设计欧美风格按钮设计9.打开【图层样式】窗口，单击【外发光】效果，【混合模式】为滤色，【不透明度】为75%，【杂色】为0%，颜色参数设置为【e7fcfc】，【方法】选择柔和，【扩展】为6%，大小为32像素，【范围】设置为50%，如图3-96所示。图3-96 外发光3.4 欧美风格按钮设计欧美风格按钮设计10.继续单击【渐变叠加】效果，【混合模式】为叠加，【不透明度】为100%，【样式】选择对称，勾选【与图层对齐】按钮，【角度】为-90，【缩放】为104%。如图3-97所示，最后单击【确定】按钮。图3-97 渐变叠

34、加3.4 欧美风格按钮设计欧美风格按钮设计11.单击左侧工具栏中的【矩形工具】，绘制出两边的发光晶管的外形，效果如图3-98所示。图3-98 绘制效果3.4 欧美风格按钮设计欧美风格按钮设计12.打开【图层样式】窗口，添加【斜面和浮雕】效果，【样式】选择内斜面，【方法】为平滑，【深度】设置为100%，【方向】为上，【大小】为13像素，【软化】为0像素。设置阴影的【角度】为120度，【高度】为30度，勾选【使用全局光】按钮。【高光模式】为滤色，颜色参数设置为【#ffffff】，【不透明度】为75%。【阴影模式】为正片叠底，颜色参数设置为【#000000】，【不透明度】为75%。使它们有立体感，如

35、图3-99所示。图3-99 斜面和浮雕图3-98 绘制效果3.4 欧美风格按钮设计欧美风格按钮设计13.单击。【渐变叠加】效果，【混合模式】为正常，【不透明度】为100%，颜色参数设置为【225ca6】、【cff1fb】。【样式】选择线性，勾选【与图层对齐】按钮，【角度】为0，【缩放】为100%。如图3-100所示，最后单击【确定】按钮14.在网络上找一张装有液体的玻璃管图片，如图3-101所示。叠加在绘制的按钮上方。图3-101 玻璃管图片素材图3-100 渐变叠加3.4 欧美风格按钮设计欧美风格按钮设计15.打开【图层样式】窗口，单击【外发光】效果，【混合模式】为滤色，【不透明度】为75%

36、，【杂色】为0%，颜色参数设置为【69d2ff】。【方法】选择柔和，【扩展】为0%，大小为29像素，【范围】设置为50%，如图3-102所示，最后单击【确定】按钮。图3-102 外发光3.4 欧美风格按钮设计欧美风格按钮设计16.单击左侧工具栏中的【文本工具】，加上文字内容“主页”。再双击文本图层，打开【图层样式】窗口，单击【外发光】效果，【混合模式】为滤色，【不透明度】为75%，【杂色】为0%，颜色参数设置为【309afd】。【方法】选择柔和，【扩展】为0%，大小为43像素，【范围】设置为50%，如图3-103所示。图3-103 外发光3.4 欧美风格按钮设计欧美风格按钮设计17.单击【颜色叠加】效果，【混合模式】为正常，颜色参数设置为【e7f7fc】。【不透明度】为100%，最后单击【确定】按钮，如图3-104所示。图3-104 颜色叠加3.4 欧美风格按钮设计欧美风格按钮设计18.单击【描边】效果，【大小】设置为6像素，【位置】选择外部，【混合模式】为叠加，【不透明度】为100%，【填充类型】选择颜色，颜色参数设置为【3378cd】。如图3-105所示。图3-105 描边3.4 欧美风格按钮设计欧美风格按钮设计19.按钮制作完成，最终效果如图3-106所示。图3-106 最终效果图 谢谢观赏谢谢观赏