游戏UI设计第5章界面设计课件.pptx

1、 PPT模板： PPT课件： 版式设计原则版式设计原则5.2 登入界面登入界面5.3手游主界面设计扁平化手游主界面设计扁平化风格风格5.4 网页游戏主界面设计网页游戏主界面设计Q版风版风格格 055.5 电视游戏主界面设计欧美风电视游戏主界面设计欧美风格格 015.1 版式设计原则版式设计原则51.1游戏 UI 设计的原则及注意事项游戏界面的好坏直接影响着玩家对游戏的兴趣，所以很多游戏界面设计是需要花费一定心思的来吸引玩家的眼球，若一开始玩家对界面产生了好感，那么在其后的其它项评定后，他的内心就会趋向认同，所以游戏 UI 设计要遵循用户需求这一硬性原则，除了这个，游戏 UI 设计还有其他的原则

2、及注意事项。游戏 UI 设计的原则主要有以下几个方便：1.设计简易界面设计要尽量简洁，目的是便于游戏玩家使用，减少在操作上出现错误。这种简洁性的设计和人机工程学非常相视，也可以说就是同一个方向，都是为了方便人的行为而产生的。在现阶段已经普遍应用于我们生活中的各个领域，幵且在未来还会继续拓展。2代表玩家说话界面设计的语言要能够代表游戏玩家说话而不是设计者。这里所说的代表，就是把大部分玩家的想法实体化表现出来，主要通过造型.色彩.布局等几个主要方面表达，不同的变化会产生不同的心理感受，例如尖锐.红色.交错带来了血腥.暴力.激动.刺激.张扬等情绪，适合打击感和比较暴力的作品，而平滑.黑色.屈曲带来了

3、诡异.怪诞.恐怖的气息，又如分散.粉红.嫩绿.圆钝，则带给我们可爱.迷你.浪漫的感觉，如此多的搭配会系统的引导玩家的游戏体验，为玩家的各种新奇想法助力。3统一性界面设计的风格.结构必须要与游戏的主题和内容相一致，优秀的游戏界面设计都具备这个特点。这一点看上去简单，实则还是比较复杂的，想要统一起来，幵不是一件简单的事情，就拿颜色这点来说，就算我只用几个颜色搭配设计界面，也不容易使之统一，因为颜色的比重会对画面产生不同的影响，所以我们会对统一性做出多种统一方式方法，例如固定一个色版，包括色相.纯度.明度都要确定，另外就是比例.主次，等等，统一界面除了色彩还有构件，这也是一个可以重复利用和统一的最好

4、方式，边框.底纹.标记.按钮.图标，等等，都是用一致的纹样.结构.设计，最后就是必须统一文字，在界面上是必不可少的，每个游戏只能使用 1-2 种文字，文字也是游戏中出现频率的方面，过多就不够统一。4清晰视觉效果的清晰有助于游戏玩家对游戏的理解，方便游戏玩家对功能的使用。对于 IOS 平台上的游戏来说，为了达到更高的效率和清晰度，需要制作不同的界面美术资源，以达到目的，这也是目前无法解决的硬件与软件间的问题。5习惯与认知界面设计在操作上的难易程度尽量不要超出大部分游戏玩家的认知范围，幵且要考虑大部分游戏玩家在与游戏互动时的习惯。这个部分就要提到游戏人群了，不同的人群拥有不同的年龄特点和时代背景，

5、所接触的游戏也大不相同，这就要我们提早定位目标人群，把他们可能玩过的游戏做统一整理，分析幵制定符合他们习惯的界面认知系统。6.自由度游戏玩家在与游戏迚行互动时的方式具有多重性，自由度很高，例如操作的工具不单单局限于鼠标和键盘，也可以是游戏手柄.体感游戏设备。这一点对于高端玩家来说，是非常重要的，因为这群人不会停留在基础的玩法之上，他们会利用游戏中各种细微的空间，来表现出自身的不同和优势，所以我们要在界面的部分为这类人群提供自由度较高的设计。除了上述游戏界面设计的原则，在游戏 UI 设计中还需注意以下事项：（1）突出设计重点减少识别误区。（2）使界面简洁，体现重要信息；找到玩家习惯，隐藏冷门应用

6、。（3）使用普通接受习惯，不轻易尝试新的设计规范。（4）减少学习信息，简化重复操作，节省空间加载资源。025.2 登入界面登入界面设计构思设计构思本节实例制作扁平化风格的手机游戏登录界面。画面中主要采用冷暖色调，太空背景的冷色调对比时钟的暖色调，使画面色彩更加丰富。并用形状工具做出开始和存档游戏按钮以及完成文字制作。设计规格设计规格尺寸规格：1280像素2368像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具设计色彩分析设计色彩分析将画面调整为蓝黑色的色调，使其具有太空的感觉。具体操作步骤如下具体操作步骤如下:R:30、G30、B40 R:30、G30、B40 R:15

7、5、G42、B27最终效果如图5-1所示。图5-1 效果图具体操作步骤如下具体操作步骤如下:具体操作步骤如下具体操作步骤如下:（1）创建画布，名称设为“登录界面”，宽度：1280，高度：2368，分辨率：300，颜色模式：RGB颜色，背景内容：白色，具体参数设置如图5-2所示。（2）创建新图层，如图5-3所示，选区前景色为【1e1e28】，参数【R】为30，【G】为30.【B】为40，设置面板如图5-4所示。图5-2 新建画布图5-3 填充颜色图5-4 颜色参数具体操作步骤如下具体操作步骤如下:（3）导入底图素材，将图层混合模式改为“变亮”，如图5-5所示。图5-5 混合模式改为“变亮”图5-

8、6 选择“渐变”具体操作步骤如下具体操作步骤如下:（4）创建新图层，利用渐变工具，添加效果，如图5-6所示，位置设为100，图5-7所示，背景制作完成，效果如图5-8所示。图5-7 调整“位置”参数 图5-7 调整“位置”参数 具体操作步骤如下具体操作步骤如下:2下面进入登录界面的图形设计下面进入登录界面的图形设计（1）利用钢笔工具.圆角矩形工具.椭圆工具等，制作出如图5-9所示的闹钟图形。（制作方法详细过程见扁平化ICON制作方法章节）。（2）利用AI/ps软件，制作出游戏LOGO，本例LOGO使用字体变形.位移而成，大家可以根据自我发挥设计LOGO，如图5-10所示，在此不再赘述。（3）利

9、用描边（图层效果），制作出游戏名称，如图5-11所示，描边结构大小：3像素，颜色为【9d4f3e】，颜色参数面板如图5-12,图5-13所示。图5-9 制作闹钟图形图5-10 制作游戏LOGO图5-11 制作游戏名称具体操作步骤如下具体操作步骤如下:图5-12 设置【描边】参数 图5-13 颜色参数具体操作步骤如下具体操作步骤如下:（4）利用圆角矩形制作出“开始”按钮.“读档”按钮，如图5-14所示，效果如图5-15所示。图5-14 完成效果图 图5-15 效果图035.3手游主界面设计扁平化风格手游主界面设计扁平化风格设计构思设计构思本节实例制作扁平化风格的手机游戏主界面。以太空作为背景，加

10、入地图、人物、道具、时间等元素丰富画面。设计规格设计规格尺寸规格：1280像素2368像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具设计色彩分析设计色彩分析整个界面以蓝色调为主，以灰色、红色为辅。具体操作步骤如下具体操作步骤如下:R:30、G30、B40 R:30、G30、B40 R:140、G182、B222 R:74、G74、B74手游界面最终效果：图5-16 手游界面最终效果具体操作步骤如下具体操作步骤如下:具体操作步骤如下具体操作步骤如下:1.打开photoshop,【ctrl+n】创建一个宽1280像素，高2368像素，分辨率300像素的画布，参数面板如下图

11、5-17所示。2.创建新的图层，填充前景颜色，如图5-19所示颜色参数为【1e1e28】。3.导入底图素材，将【图层混合】模式改为【变亮】，如图5-20所示。图5-17 photoshop创建画布设置面板 图5-18 填充前景颜色图5-19 颜色设置面板图5-20 修改图层混合模式具体操作步骤如下具体操作步骤如下:4.创建新图层，利用【渐变工具】，添加效果，如图5-21所示。再运用图层面板下【创建新的填充】命令创建【色相/饱和度调整层】，如图5-25所示，单击【色相/饱和度】调整图层左边，打开图5-27所示的属性面板，将明度调整为-14.背景制作完成。图5-21 选择渐变工具图5-22 渐变设

12、置面板图 5-23 渐变设置面板具体操作步骤如下具体操作步骤如下:图5-24 渐变效果图5-25创建新填充图 图5-26 色相/饱和度具体操作步骤如下具体操作步骤如下:5-27 色相/饱和度设置5-28 图层状态栏 图5-29 效果图具体操作步骤如下具体操作步骤如下:5.利用【圆角矩形工具】在图5-30中绘制一个游戏区域，添加【图层样式】添加【描边】大小为12，如图5-31所示，颜色【ffffff】;【内发光】混合模式正常，堵塞100，大小9，颜色【567ca1】，如图5-32所示；效果如图5-34所示。图5-30 绘制游戏区域5-31描边设置图5-32 内发光设置具体操作步骤如下具体操作步骤

13、如下:6.利用【矩形工具】，创建一个在游戏中的无用方块，位于图5-35的右下角的画面中，在此基础上，复制多一个图层，改变其颜色【ctrl+alt+g】叠加至矩形之上，完成扁平化影阴影，如图5-35所示。7.利用相同方法，制作可移动方块，因为要与无用方块区分，故不用制作阴影，在方块上制作出马路线让玩家清楚游戏玩法（运用左右上下移动方块组成一条道路），使用【钢笔工具】绘制出图5-37中所示路线。图5-34形状效果图5-35 创建无用方块图5-36选择钢笔工具图5-37 绘制路线具体操作步骤如下具体操作步骤如下:8.把方块以及无用方块将图5-38中的游戏区域填满，效果如图5-38所示。9.利用【钢笔

14、形状】工具，绘制图5-40卡通人物图形和图5-41火箭图形，丰富游戏主界面效果如图5-42所示。图5-38 无用方块摆放效果图5-39选择钢笔工具图5-40 绘制通人物图形具体操作步骤如下具体操作步骤如下:10.接下来制作道具：同样利用【椭圆工具】形状工具来绘制如图5-43道具面板，效果如图5-45所示。图5-41绘制火箭图5-42 效果图图5-43椭圆工具具体操作步骤如下具体操作步骤如下:图5-44道具面板图5-45 效果图具体操作步骤如下具体操作步骤如下:11.运用调整图层功能【亮度/对比度】叠加至道具图层上，将道具区分为有道具以及没有道具的情况，并在道具上表明道具数量，没有该道具则不用注

15、明，效果如图5-48所示。图5-47图层效果 图5-46亮度/对比度图图5-48效果图具体操作步骤如下具体操作步骤如下:12.加上时间.关闭灯按钮完成制作，效果如图5-49所示。13.最终效果，效果如图5-50所示。图5-49 添加按钮图5-50 最终效果图045.4网页游戏主界面设计网页游戏主界面设计Q版风格版风格设计构思设计构思本节实例制作Q版风格的网页游戏主界面。参考蛋糕造型作为背包界面原型，使用斜面浮雕等效果，使画面更具立体感。设计规格设计规格尺寸规格：3600像素1920像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具、渐变工具。设计色彩分析设计色彩分析整个界

16、面以米白色为主，添加一些彩色的小颗粒，使之更具色彩感。具体操作步骤如下具体操作步骤如下:R:253、G233、B206 R:228、G138、B128 R:166、G103、B58 R:159、G138、B119最终效果：图5-51 效果图具体操作步骤如下具体操作步骤如下:1.打开photoshop,【ctrl+n】根据手机尺寸1200*60，【新建】一个放大5-倍3600*1920大小的文档，先把背景填充黑色。新建图层，绘制一个圆角矩形填充颜色为【e4b780】，效果如图5-52所示。2.用钢笔在圆角矩形上方勾勒出奶油的形状，填充颜色为【fde9ce】，效果如图5-53所示。图5-52 ph

17、otoshop绘制圆角矩形 具体操作步骤如下具体操作步骤如下:图5-53 奶油的形状效果图具体操作步骤如下具体操作步骤如下:3.为奶油添加效果，双击图层的缩略图，调出图层样式对话框，如图5-54选择【内阴影】，参数设置混合模式为正常，不透明度为75，角度为-96，距离为8，堵塞为21，大小为19；然后如图5-55选择【投影】，混合模式为正片叠底，不透明度为75，距离为8，扩展为14，大小为12，参数设置面板如下图5-56所示。图5-54 内阴影设置面板 图5-55投影设置面板图5-56 效果图具体操作步骤如下具体操作步骤如下:4.新建图层，如图5-57所示为奶油绘制一些细小的颗粒状添加物，填充

18、各种不同的颜色，是画面丰富起来。5.绘制一个如图5-58一样的圆，填充颜色为【f29102】，添加【图层样式】，选择【描边】颜色为黑色，大小1，参数设置面板如图5-59所示。图5-57 绘制颗粒状添加物图 5-58 绘制圆图5-59 描边设置面板具体操作步骤如下具体操作步骤如下:6.用【钢笔工具】绘制斜边并填充描边，是图形具有饼干效果，效果如图5-60所示。图5-60绘制斜边效果图5-61描边设置图具体操作步骤如下具体操作步骤如下:7.绘制一个内圆，双击图层的缩略图，调出图层样式对话框，分别设置【描边】颜色黑色，大小1，如图5-61；【渐变叠加】粉红由深到浅，如图5-62；【内阴影】不透明度4

19、9，角度34，距离9，堵塞9，大小24，参数面板如图5-63所示。5-62渐变叠加设置图5-63内阴影设置具体操作步骤如下具体操作步骤如下:8.复制圆形，位置摆放如图5-64所示，然后在圆上打上文字【背包】，设置字体为方正胖娃简体，效果如图5-65所示。图5-64 复制圆形图5-65文字效果图图5-66描边设置面板效果具体操作步骤如下具体操作步骤如下:9.绘制一个圆，填充颜色为【f29102】，双击图层的缩略图，调出图层样式对话框，选择【描边】颜色为黑色，大小1，参数面板如图图5-66所示。图5-67 绘制内圆图 5-68 描边设置具体操作步骤如下具体操作步骤如下:10.(1)绘制一个内圆，效

20、果如图5-67所示。（2）设置圆的图层效果，双击图层的缩略图，调出图层样式对话框，分别设置【描边】颜色为黑色，大小1，如图5-68所示；【内阴影】角度50，堵塞7，大小7，如图5-69所示；【渐变叠加】颜色为黑色到粉红色，如图5-70所示。图5-69 渐变叠加图5-70 内阴影具体操作步骤如下具体操作步骤如下:11.使用【圆角矩形工具】，绘制一个交叉，填充白色，效果如图5-71所示。12.绘制背包物品的内框，使用圆角矩形工具，绘制一个圆角矩形，填充颜色为【#80340f】，再【CTRL+J】复制一个，缩小一点，填充颜色【#9f8a77】，放置在图5-72中矩形的上面,效果如图图5-73所示。图

21、5-71绘制交叉图5-72 绘制圆角矩图5-73 复制缩小圆角矩形具体操作步骤如下具体操作步骤如下:13.连续【CTRL+J】复制9个圆角矩形作为摆放物品内框，按图5-74所示进行摆放。图5-74 圆角矩形摆放效果图 图5-75 自定义绘制图形具体操作步骤如下具体操作步骤如下:14.使用自定义图形绘制，填充颜色【#883f17】，双击图层的缩略图，调出【图层样式】对话框，选择【斜面浮雕】外斜面，平滑深度52，大小15，软化1，角度30，参数面板如下图5-75所示。图5-76斜面浮雕设置面板具体操作步骤如下具体操作步骤如下:15.【CTRL+J】如图5-77所示复制多一个图层在上方。16.新建图

22、层并命名为椭圆7，使用【椭圆形工具】，在图5-78的位置绘制一个圆，填充颜色为【#883f17】，CTRL+J复制两个，移动放置到旁边。图5-77 复制图层 图5-78 绘制圆效果图具体操作步骤如下具体操作步骤如下:17.改变椭圆7的图层样式，双击图层的缩略图，调出【图层样式】对话框，选择【斜面浮雕】如图5-79所示设置为外斜面，平滑，深度为 52，大小为2 7；【颜色叠加】如图5-80设置颜色为【#56c9d9】。图5-79 斜面浮雕设置面板 图5-80 颜色叠加设置面板具体操作步骤如下具体操作步骤如下:18.使用【圆角矩形工具】，在如图5-81的位置绘制一个图形，填充为【#9f8a77】，

23、不透明度改为59%。图5-81 绘制图形具体操作步骤如下具体操作步骤如下:19.使用【圆角矩形工具】，在圆角上方继续绘制一个图形，填充为【#9f8a77】，不透明度为61%，【CTRL+J】复制一个移动到正下方，效果如图5-82所示。20.创建一个新的图层，用手绘板绘制一颗砖石图形，放置到图5-83所示的位置上，使用【方正胖娃简体】，在图中所示的位置上打上文字【砖石：34561】。图5-82 绘制图形图5-83 添加文字具体操作步骤如下具体操作步骤如下:21.使用椭圆工具，按住【ALT+SHIFT】绘制一个正圆，填充为【e9e348】，双击图层，调出图层样式对话框，如图5-84所示选择【描边】

24、颜色黑色，大小；图5-85所示选择【内阴影】角度55，距离41，堵塞15；图5-86所示选择【内发光】混合模式为滤色。图5-84 描边设置面板图5-86 内发光设置面板 图5-85 内阴影设置面板具体操作步骤如下具体操作步骤如下:22.使用椭圆工具，按住【ALT+SHIFT】如图5-87所示绘制一个正圆，填充为【fcee6d】图5-87 绘制一个正圆 图5-88斜面浮雕设置面板具体操作步骤如下具体操作步骤如下:23.使用自定义图形，绘制金币的花样，双击图层，调出【图层样式】对话框，如图5-88所示选择选择【斜面浮雕】内斜面，深度164，角度98，高度2；图5-89所示选择【内阴影】角度50，距

25、离5，大小2.图5-90所示选择【渐变叠加】颜色由橙到黄，参数设置如下图所示。图5-89内阴影设置面板 图5-90渐变叠加设置面板具体操作步骤如下具体操作步骤如下:24.使用方正胖娃简体字体，如图5-91所示打上文字【金币：15789】。25.使用【圆角矩形工具】图5-92所示绘制一个形状，填充为【#80540f】，双击图层，调出图层样式对话框，图5-93所示选择【外发光】颜色由白到透明色。图5-91 添加文字 图5-93 外发光设置面板 图5-92 绘制形状 具体操作步骤如下具体操作步骤如下:26.复制一个形状副本，按住【ALT+SHIFT】等比例缩小图形，填充颜色为【b7a784】，双击图

26、层，调出【图层样式】对话框，如图5-94所示选择【描边】大小4，外部，颜色由棕色深到浅。图5-94 描边设置面板 图5-95内发光设置面板具体操作步骤如下具体操作步骤如下:27.复制一个形状副本，按住【ALT+SHIFT】组合键等比例缩小图形，双击图层，调出图层样式对话框，如图5-95所示选择选择【内发光】颜色由蓝到透明，图5-96所示选择【渐变叠加】颜色为黄色到粉色，角度40。图5-96渐变叠加设置面板 图5-97 内发光设置面板具体操作步骤如下具体操作步骤如下:28.用【钢笔工具】绘制高光，双击图层，调出【图层样式】对话框，如图5-97所示选择【内发光】颜色为黄色至透明，堵塞46，大小46

27、；图5-98所示选择【颜色叠加】颜色为白色；图5-99所示选择【外发光】颜色为黄色至透明，参数设置如下图所示。图5-98 颜色叠加设置面板图5-99 外发光设置面板具体操作步骤如下具体操作步骤如下:29.使用【图层蒙版】，让高光看起来更柔和，效果如图5-100所示。30.如图5-101所示绘制调整高光。图5-100 效果图 图5-101 绘制调整高光具体操作步骤如下具体操作步骤如下:31.新建图层，使用【方正胖娃简体】字体，打上文字【充值】，双击图层，调出【图层样式】对话框，如图5-103所示选择【描边】大小5，颜色为棕红色；图5-104所示选择【内阴影】混合模式为正片叠底，角度50，距离4，

28、堵塞11；大小7；图5-105所示选择【光泽】.不透明度50，角度19，堵塞15，大小19；图5-106所示选择【渐变叠加】不透明度98，角度-9，缩放108，图5-107所示选择【外发光】颜色为棕色至透明，扩展24，大小7，范围57。32.用手绘板绘制如图5-108所示的背包商品道具。图5-102 添加字体 图5-103 描边设置面板具体操作步骤如下具体操作步骤如下:31.新建图层，使用【方正胖娃简体】字体，打上文字【充值】，双击图层，调出【图层样式】对话框，如图5-103所示选择【描边】大小5，颜色为棕红色；图5-104所示选择【内阴影】混合模式为正片叠底，角度50，距离4，堵塞11；大小

29、7；图5-105所示选择【光泽】.不透明度50，角度19，堵塞15，大小19；图5-106所示选择【渐变叠加】不透明度98，角度-9，缩放108，图5-107所示选择【外发光】颜色为棕色至透明，扩展24，大小7，范围57。32.用手绘板绘制如图5-108所示的背包商品道具。图5-104 内发光设置面板图5-105 光泽设置面板具体操作步骤如下具体操作步骤如下:31.新建图层，使用【方正胖娃简体】字体，打上文字【充值】，双击图层，调出【图层样式】对话框，如图5-103所示选择【描边】大小5，颜色为棕红色；图5-104所示选择【内阴影】混合模式为正片叠底，角度50，距离4，堵塞11；大小7；图5-

30、105所示选择【光泽】.不透明度50，角度19，堵塞15，大小19；图5-106所示选择【渐变叠加】不透明度98，角度-9，缩放108，图5-107所示选择【外发光】颜色为棕色至透明，扩展24，大小7，范围57。32.用手绘板绘制如图5-108所示的背包商品道具。图5-106 渐变叠加设置面板图5-107 外发光设置 图5-108 绘制背包商品道具具体操作步骤如下具体操作步骤如下:33.新建图层，用手绘绘制背景，效果如图5-109所示。34.新建图层，使用【矩形工具】如图5-110所示绘制一个矩形，填充为黑色，不透明度为61%。图5-109 绘制背景 图5-110 绘制矩形具体操作步骤如下具体

31、操作步骤如下:35.制作外框的按钮，完成！最终效果如图5-111所示。图5-111 最终效果图055.5电视游戏主界面设计欧美风格电视游戏主界面设计欧美风格设计构思设计构思本节实例制作欧美风格的枪战射击类游戏主界面。参考蛋糕造型作为背包界面原型，使用斜面浮雕等效果，使画面更具立体感。需要设计一个装备背包。该背包用于玩家调整武器装备，通过切换不同种类的武器以适应不同类型的比赛模式。界面的设计理念是重金属，但又能使玩家明确了解操作步骤。设计规格设计规格尺寸规格：4000像素2263像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具。设计色彩分析设计色彩分析界面主要色调是重金属

32、与蓝色科技风格。具体操作步骤如下具体操作步骤如下:R:83、G79、B50 R:83、G85、B80 R:123、G162、B127 R:0、G39、B6最终效果：效果如图5-112所示，装备界面如图5-113所示，该界面主要由三部分组成：外金属框，内武器选择框，内人物展示框，效果如下图5-114,图5-115,图5-116所示。图5-112最终效果图 具体操作步骤如下具体操作步骤如下:图5-113装备界面图图5-114 外金属框 具体操作步骤如下具体操作步骤如下:图5-115 内武器选择框图5-116 内人物展示框具体操作步骤如下具体操作步骤如下:1.制作外框：制作外框：（1）一步是如图5-

33、117所示新建图层：宽度4000像素，高度2263像素，分辨率300像素，先制作外框。（2）用钢笔工具勾勒出外框大致外形，【填充】深灰色，再用【矩形选择工具】删去中间部分，如图5-118所示。（3）同样用【钢笔工具】勾勒出外框的装饰.按钮.文字栏，分别填充不同深色进行区分，如图5-119所示。图5-117画布设置 图5-119 绘制装饰.按钮.文字栏图5-118 绘制外框外形具体操作步骤如下具体操作步骤如下:（4）为外框加上【图层样式】效果，通过添加浮雕，如图5-120所示；渐变叠加如图5-121所示；所示光泽如图5-122所示；描边让它有立体效果。图5-120 浮雕效果图 图5-122斜面浮

34、雕设置面板图5-121 图层面板具体操作步骤如下具体操作步骤如下:（5）为外框简单叠加纹理，找一些金属类纹理贴图，然后进行【叠加】，效果如下图5-123所示。图5-123叠加金属类纹理图5-125 选择叠加模式图5-124 金属类纹理贴图具体操作步骤如下具体操作步骤如下:（6）开始用数位板，通过手绘的方式修饰外框，为其加上装饰，用高光和阴影凸显其立体感，如图5-126所示。图5-126 修饰外框效果图图5-127图层样式效果图具体操作步骤如下具体操作步骤如下:（7）返回按钮的设计，主要通过【图层样式】功能来解决，效果如图5-127所示。（8）以如图5-128所示选择【外发光】参数为滤色，不透明

35、度75，大小65；如图5-129所示选择【渐变叠加】黑色至白色，角度90；如图5-130所示选择【描边】大小9，颜色墨绿色，表现按钮。图5-128 外发光设置面板图5-130描边设置面板图5-129渐变叠加设置面板具体操作步骤如下具体操作步骤如下:（9）用【钢笔工具】如图5-131所示勾勒出内框的外形，并将透明度调整为57，让其有通透感。图5-131 绘制内框的外形 图5-132 调整不透明度具体操作步骤如下具体操作步骤如下:（10）通过复制内框图层，【ctrl+t】放大，再通过内框删去部分获得细边框，给其填充白色，并如图5-134用【外发光】和【内发光】使其有发光效果，效果如图5-133所示

36、。图5-133 图层样式效果图 图5-134 图层状态栏具体操作步骤如下具体操作步骤如下:2.返回按钮的制作返回按钮的制作:用【任意工具】绘出返回箭头，添加【图层样式】效果，如图5-135所示选择【外发光】混合模式为滤色，不透明度为47，扩展为10，大小为29，如图5-137所示选择【斜面和浮雕】里的内斜面，方向上，不透明度为100，大小为8，软化为0，角度为169，如图5-318所示选择【渐变叠加】颜色为绿色至粉绿色，角度为90。图5-135外发光设置图5-136 效果图具体操作步骤如下具体操作步骤如下:（1）开始为外框装饰一些类似齿轮等的小物件，让整个外框有机械风，可以在网上找一些如图5-

37、139所示的机械零件的素材参考。图5-138 渐变叠加设置图5-139 机械零件的素材参考图5-138 渐变叠加设置具体操作步骤如下具体操作步骤如下:（2）挑选适合的物件进行临摹，可以用【钢笔工具】或【手绘】的方式进行绘制，再为其添加【图层样式】效果，如图5-141所示选择【斜面和浮雕】内斜面，深度134，方向下，大小24，角度169，如图5-142所示选择【光泽】混合模式为正片叠底叠，不透明度为24，角度19，距离17，大小7，勾选反相，再添加一些纹理，效果如图5-140所示。图5-140图层样式效果图图5-142光泽设置面板 图5-141 斜面浮雕设置面板 具体操作步骤如下具体操作步骤如下

38、:5.开始设计武器展示框开始设计武器展示框:因为武器展示框是放置很多武器的地方，所以要通过滑动的方式查看，具备滑动条，而且当点击到武器时会显示出该武器的属性。（1）首先通过钢笔工具和路径描边的方式绘制出如图5-143所示的外形。（2）调整每层的透明度使其有通透感，如图5-144所示。图5-143 绘制图形 图5-144调整不透明度具体操作步骤如下具体操作步骤如下:4.滑动条的制作滑动条的制作:（1）用【自定形状工具】的【圆角矩形工具】绘制出圆角矩形的滑动条，如图5-145添加【图层样式】中的【斜面和浮雕】内斜面，深度100，方向下，大小为24，角度为120，高度为30让它有内嵌的感觉。（2）用

39、【钢笔工具】绘制出一个按钮形状，如图5-146所示用【图层样式】的【斜面和浮雕】内斜面向上，深度100，大小8和图5-147【渐变叠加】不透明度为87，渐变橙至黄渐变色，角度0的效果，使其立体。图5-145 斜面浮雕设置面板图5-147斜面浮雕设置面板图5-146 渐变叠加设置面板具体操作步骤如下具体操作步骤如下:（3）如图5-148所示用钢笔工具绘制出放置武器的外框，给其一个描边。（4）再用魔棒工具选中其内侧，并填充一个淡蓝色，如图5-149所示修改其透明度为48。（5）为其添加一个【图层样式】，如图5-150所示选择【内阴影】以蓝色为阴影，混合模式为正片叠底，角度为120，距离为5，阻塞为

40、7，大小为250。图5-148 绘制放置武器的外框 图5-150 内阴影设置面板 图5-149 修改透明度 具体操作步骤如下具体操作步骤如下:（6）从网上下载一张如图5-151所示的金属网格的纹理贴图，再上一步骤的基础上【叠加】上去，并修改其透明度为25。（7）通过不断复制和移动排序，获得如图5-153一样的效果。图5-151金属网格纹理贴图图5-153 图形摆放效果图图5-152叠加并修改透明度具体操作步骤如下具体操作步骤如下:（8）同绘制外形的步骤一样，用【钢笔工具】和【路径描边】的方式设计出两个如图5-154所示的功能按钮，调整其透明度。（9）放置好事先设计的武器后，开始设计出如图5-1

41、55所示的触发显示武器属性栏。图5-154 效果图图5-155 武器属性栏效果图具体操作步骤如下具体操作步骤如下:（10）同样，它的设计也是由【钢笔工具】勾勒绘出，并由【图层样式】为其添加如图5-156所示的【外发光】。设置为滤色，不透明度为75，大小为32，如图5-157所示选择【斜面和浮雕】浮雕效果，平滑，方向为上，大小为2，角度为120，高度为30。图5-156 外发光设置面板图5-157 斜面浮雕设置面板具体操作步骤如下具体操作步骤如下:（11）用魔棒工具选中显示部分，填充一个白色并降低透明度，然后如图6-158所示添加【图层样式】里的【内阴影】正片叠底，不透明度为96，距离为28，堵

42、塞为41，大小为234；如图6-159所示选择【光泽】正片叠底，不透明度为36，角度为19，距离为11，大小为16。（12）为其添加如图5-160所示的文字介绍，因为是机械类的，所以我文字给了一个汉仪菱心体简的字体。图5-158 内阴影设置面板图5-160 添加字体效果图5-159 光泽设置面板具体操作步骤如下具体操作步骤如下:（13）武器指数的显示条，用圆角矩形，并给其【图层样式】，如图5-161所示选择【斜面和浮雕】内斜面，平滑，方向上，大小为2，角度为120，高为度30；如图5-162所示选择【渐变叠加】橙至黄渐变色，角度为-90。图5-161斜面浮雕设置面板 图5-162渐变叠加设置面

43、板具体操作步骤如下具体操作步骤如下:（14）用椭圆选框工具，调大其羽化值，填充一个白色，使其有发光效果，如图5-163所示。（15）用自定形状工具里的星星形状，并添加如图5-164所示【图层样式】-【渐变叠加】不透明度为49，橙至黄颜色渐变，样式棱形，角度为90，作为武器的星级。图5-163调整其羽化值效果图 图5-164渐变叠加设置面板具体操作步骤如下具体操作步骤如下:（16）接下来是为武器加上一些标签，用钢笔工具绘出梯形的外形，并如图5-165所示选择【浮雕效果】枕状浮雕，平滑，方向上，大小为5，角度为120，高度为30，加上“可强化”的文字标签，如图5-166所示选择【图层样式】里的【渐

44、变叠加】颜色为白至黄渐变，角度-42。图5-165斜面浮雕设置面板图5-166 渐变叠加设置面板具体操作步骤如下具体操作步骤如下:图5-167 效果图具体操作步骤如下具体操作步骤如下:5.接下来是内人物展示栏的制作：接下来是内人物展示栏的制作：（1）绘制如图5-168所示的底座。（2）用【椭圆工具】和【钢笔工具】，如图5-169所示改变不同层的透明度绘制出椭圆的底座，如图5-170所示，如图5-171所示，完成最终效果如图5-172所示。图5-168 绘制底座效果图图5-170 绘制椭圆的底座 图5-169 绘制椭圆的底座具体操作步骤如下具体操作步骤如下:（16）接下来是为武器加上一些标签，用

45、钢笔工具绘出梯形的外形，并如图5-165所示选择【浮雕效果】枕状浮雕，平滑，方向上，大小为5，角度为120，高度为30，加上“可强化”的文字标签，如图5-166所示选择【图层样式】里的【渐变叠加】颜色为白至黄渐变，角度-42。图5-171 绘制椭圆的底座图5-172最终效果图具体操作步骤如下具体操作步骤如下:（3）同样用【钢笔工具】和【路径描边】的方式，绘制出如图5-173所示三维几何的效果。（4）加上之前设计的人物得到图5-174。图5-173 绘制三维几何的效果图图5-174 添加设计人物具体操作步骤如下具体操作步骤如下:6.加金属文字加金属文字“人物背包人物背包”：（1）第一步给【投影】

46、如图5-175所示设置为正片叠底，不透明度为52，角度为120，距离为17，扩展为3，大小为6。（2）第二步给【内阴影】如图5-176所示设置不透明度为75，角度为120，距离大小为5。图5-175投影设置面板图5-176内阴影设置面板具体操作步骤如下具体操作步骤如下:（3）第三步给【斜面和浮雕】如图5-177所示设置内斜面，方向下，大小为9，高度为30。（4）第四步给【渐变叠加】如图5-178所示设置叠加，黑至灰渐变，角度为90。图5-177斜面浮雕设置面板 图5-178 渐变叠加设置面板具体操作步骤如下具体操作步骤如下:（5）因为现在文字效果是不太明显的，所以需要强调文字，即需要通过阴影高光的方式表现出来。(6)第五步用【椭圆工具】加大羽化值，填充一个重色来叠加，放置在文字图层下面，强化阴影，如图5-179所示。(7)第六步如图5-180所示同样用椭圆工具加大羽化值，用一个淡黄色来叠加，放置文字图层上方，表现出高光。图5-179 使用椭圆工具加大羽化值效果图5-180 使用羽化值表现出高光具体操作步骤如下具体操作步骤如下:7.装备界面完成装备界面完成:效果如图5-181所示。图5-181 最终效果图 谢谢观赏谢谢观赏