游戏UI设计界面设计

1、 游 戏 UI 设 计1/93 PPT论坛： 目录010203045.1 版式设计标准5.2 登入界面5.3手游主界面设计扁平化格调5.4 网页游戏主界面设计Q版格调055.5 电视游戏主界面设计欧美格调2/93015.1 版式设计标准3/9351.1游戏 UI 设计标准及注意事项游戏界面好坏直接影响着玩家对游戏兴趣，所以很多游戏界面设计是需要花费一定心思来吸引玩家眼球，若一开始玩家对界面产生了好感，那么在其后其它项评定后，他内心就会趋向认同，所以游戏 UI 设计要遵照用户需求这一硬性标准，除了这个，游戏 UI 设计还有其它标准及注意事项。游戏 UI 设计标准主要有以下几个方便：1.设计简易界

2、面设计要尽可能简练，目标是便于游戏玩家使用，降低在操作上出现错误。这种简练性设计和人机工程学非常相视，也能够说就是同一个方向，都是为了方便人行为而产生。在现阶段已经普遍应用于我们生活中各个领域，幵且在未来还会继续拓展。2代表玩家说话界面设计语言要能够代表游戏玩家说话而不是设计者。这里所说代表，就是把大部分玩家想法实体化表现出来，主要经过造型. 色彩. 布局等几个主要方面表示，不一样改变会产生不一样心理感受，比如尖锐. 红色. 交织带来了血腥. 暴力. 激动. 刺激. 张扬等情绪，适合打击感和比较暴力作品，而平滑. 黑色. 屈曲带来了诡异. 怪诞. 恐怖气息，又如分散. 粉红. 嫩绿. 圆钝，则

3、带给我们可爱. 迷你. 浪漫感觉，如此多搭配会系统引导玩家游戏体验，为玩家各种新奇想法助力。4/933统一性界面设计格调. 结构必须要与游戏主题和内容相一致，优异游戏界面设计都具备这个特点。这一点看上去简单，实则还是比较复杂，想要统一起来，幵不是一件简单事情，就拿颜色这点来说，就算我只用几个颜色搭配设计界面，也不轻易使之统一，因为颜色比重会对画面产生不一样影响，所以我们会对统一性做出各种统一方式方法，比如固定一个色版，包含色相. 纯度. 明度都要确定，另外就是百分比. 主次，等等，统一界面除了色彩还有构件，这也是一个能够重复利用和统一最好方式，边框. 底纹. 标识. 按钮. 图标，等等，都是用

4、一致纹样. 结构. 设计，最终就是必须统一文字，在界面上是必不可少，每个游戏只能使用 1-2 种文字，文字也是游戏中出现频率方面，过多就不够统一。4清楚视觉效果清楚有利于游戏玩家对游戏了解，方便游戏玩家对功效使用。对于 IOS 平台上游戏来说，为了到达更高效率和清楚度，需要制作不一样界面美术资源，以到达目标，这也是当前无法处理硬件与软件间问题。5习惯与认知界面设计在操作上难易程度尽可能不要超出大部分游戏玩家认知范围，幵且要考虑大部分游戏玩家在与游戏互动时习惯。这个部分就要提到游戏人群了，不一样人群拥有不一样年纪特点和时代背景，所接触游戏也大不相同，这就要我们提早定位目标人群，把他们可能玩过游戏

5、做统一整理，分析幵制订符合他们习惯界面认知系统。5/936. 自由度游戏玩家在与游戏迚行互动时方式含有多重性，自由度很高，比如操作工具不单单局限于鼠标和键盘，也能够是游戏手柄. 体感游戏设备。这一点对于高端玩家来说，是非常主要，因为这群人不会停留在基础玩法之上，他们会利用游戏中各种细微空间，来表现出本身不一样和优势，所以我们要在界面部分为这类人群提供自由度较高设计。除了上述游戏界面设计标准，在游戏 UI 设计中还需注意以下事项：（1）突出设计重点降低识别误区。（2）使界面简练，表达主要信息；找到玩家习惯，隐藏冷门应用。（3）使用普通接收习惯，不轻易尝试新设计规范。（4）降低学习信息，简化重复操

6、作，节约空间加载资源。6/93025.2 登入界面7/93设计构思本节实例制作扁平化格调手机游戏登录界面。画面中主要采取冷暖色调，太空背景冷色调对比时钟暖色调，使画面色彩愈加丰富。并用形状工具做出开始和存档游戏按钮以及完成文字制作。设计规格尺寸规格：1280像素2368像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具设计色彩分析将画面调整为蓝黑色色调，使其含有太空感觉。详细操作步骤以下:R:30、G30、B40 R:30、G30、B40 R:155、G42、B278/93最终效果如图5-1所表示。图5-1 效果图详细操作步骤以下:9/93详细操作步骤以下:（1）创建画布

7、，名称设为“登录界面”，宽度：1280，高度：2368，分辨率：300，颜色模式：RGB颜色，背景内容：白色，详细参数设置如图5-2所表示。（2）创建新图层，如图5-3所表示，选区前景色为【1e1e28】，参数【R】为30，【G】为30.【B】为40，设置面板如图5-4所表示。图5-2 新建画布图5-3 填充颜色图5-4 颜色参数10/93详细操作步骤以下:（3）导入底图素材，将图层混合模式改为“变亮”，如图5-5所表示。图5-5 混合模式改为“变亮” 图5-6 选择“渐变”11/93详细操作步骤以下:（4）创建新图层，利用渐变工具，添加效果，如图5-6所表示，位置设为100，图5-7所表示，

8、背景制作完成，效果如图5-8所表示。图5-7 调整“位置”参数 图5-7 调整“位置”参数 12/93详细操作步骤以下:2下面进入登录界面图形设计（1）利用钢笔工具. 圆角矩形工具. 椭圆工具等，制作出如图5-9所表示闹钟图形。（制作方法详细过程见扁平化ICON制作方法章节）。（2）利用AI/ps软件，制作出游戏LOGO，本例LOGO使用字体变形. 位移而成，大家能够依据自我发挥设计LOGO，如图5-10所表示，在此不再赘述。（3）利用描边（图层效果），制作出游戏名称，如图5-11所表示，描边结构大小：3像素，颜色为【9d4f3e】，颜色参数面板如图5-12, 图5-13所表示。图5-9 制作

9、闹钟图形图5-10 制作游戏LOGO图5-11 制作游戏名称13/93详细操作步骤以下:图5-12 设置【描边】参数 图5-13 颜色参数14/93详细操作步骤以下:（4）利用圆角矩形制作出“开始”按钮. “读档”按钮，如图5-14所表示，效果如图5-15所表示。 图5-14 完成效果图 图5-15 效果图15/93035.3手游主界面设计扁平化格调16/93设计构思本节实例制作扁平化格调手机游戏主界面。以太空作为背景，加入地图、人物、道具、时间等元素丰富画面。设计规格尺寸规格：1280像素2368像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具设计色彩分析整个界面以蓝

10、色调为主，以灰色、红色为辅。详细操作步骤以下:R:30、G30、B40 R:30、G30、B40 R:140、G182、B222 R:74、G74、B7417/93手游界面最终效果：图5-16 手游界面最终效果详细操作步骤以下:18/93详细操作步骤以下:1. 打开photoshop,【ctrl+n】创建一个宽1280像素，高2368像素，分辨率300像素画布，参数面板以下列图5-17所表示。2. 创建新图层，填充前景颜色，如图5-19所表示颜色参数为【1e1e28】。3. 导入底图素材，将【图层混合】模式改为【变亮】，如图5-20所表示。图5-17 photoshop创建画布设置面板 图5-

11、18 填充前景颜色图5-19 颜色设置面板图5-20 修改图层混合模式19/93详细操作步骤以下:4. 创建新图层，利用【渐变工具】，添加效果，如图5-21所表示。再利用图层面板下【创建新填充】命令创建【色相/饱和度调整层】，如图5-25所表示，单击【色相/饱和度】调整图层左边，打开图5-27所表示属性面板，将明度调整为-14.背景制作完成。图5-21 选择渐变工具图5-22 渐变设置面板图 5-23 渐变设置面板20/93详细操作步骤以下:图5-24 渐变效果图5-25创建新填充图 图5-26 色相/饱和度21/93详细操作步骤以下: 5-27 色相/饱和度设置5-28 图层状态栏 图5-2

12、9 效果图22/93详细操作步骤以下:5. 利用【圆角矩形工具】在图5-30中绘制一个游戏区域，添加【图层样式】添加【描边】大小为12，如图5-31所表示，颜色【ffffff】;【内发光】混合模式正常，堵塞100，大小9，颜色【567ca1】，如图5-32所表示；效果如图5-34所表示。图5-30 绘制游戏区域5-31描边设置图5-32 内发光设置23/93详细操作步骤以下:6. 利用【矩形工具】，创建一个在游戏中无用方块，位于图5-35右下角画面中，在此基础上，复制多一个图层，改变其颜色【ctrl+alt+g】叠加至矩形之上，完成扁平化影阴影，如图5-35所表示。7. 利用相同方法，制作可移

13、动方块，因为要与无用方块区分，故不用制作阴影，在方块上制作出马路线让玩家清楚游戏玩法（利用左右上下移动方块组成一条道路），使用【钢笔工具】绘制出图5-37中所表示路线。图5-34形状效果图5-35 创建无用方块图5-36选择钢笔工具图5-37 绘制路线24/93详细操作步骤以下:8. 把方块以及无用方块将图5-38中游戏区域填满，效果如图5-38所表示。9. 利用【钢笔形状】工具，绘制图5-40卡通人物图形和图5-41火箭图形，丰富游戏主界面效果如图5-42所表示。图5-38 无用方块摆放效果图5-39选择钢笔工具图5-40 绘制通人物图形25/93详细操作步骤以下:10. 接下来制作道具：一

14、样利用【椭圆工具】形状工具来绘制如图5-43道具面板，效果如图5-45所表示。图5-41绘制火箭图5-42 效果图图5-43椭圆工具26/93详细操作步骤以下:图5-44道具面板图5-45 效果图27/93详细操作步骤以下:11. 利用调整图层功效【亮度/对比度】叠加至道具图层上，将道具区分为有道具以及没有道具情况，并在道具上表明道具数量，没有该道具则不用注明，效果如图5-48所表示。图5-47图层效果 图5-46亮度/对比度图图5-48效果图28/93详细操作步骤以下:12. 加上时间. 关闭灯按钮完成制作，效果如图5-49所表示。13. 最终效果，效果如图5-50所表示。图5-49 添加按

15、钮图5-50 最终效果图29/93045.4网页游戏主界面设计Q版格调30/93设计构思本节实例制作Q版格调网页游戏主界面。参考蛋糕造型作为背包界面原型，使用斜面浮雕等效果，使画面更具立体感。设计规格尺寸规格：3600像素1920像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具、渐变工具。设计色彩分析整个界面以米白色为主，添加一些彩色小颗粒，使之更具色彩感。详细操作步骤以下:R:253、G233、B206 R:228、G138、B128 R:166、G103、B58 R:159、G138、B11931/93最终效果：图5-51 效果图详细操作步骤以下:32/931. 打

16、开photoshop,【ctrl+n】依据手机尺寸1200*60，【新建】一个放大5-倍3600*1920大小文档，先把背景填充黑色。新建图层，绘制一个圆角矩形填充颜色为【e4b780】，效果如图5-52所表示。2. 用钢笔在圆角矩形上方勾勒出奶油形状，填充颜色为【fde9ce】，效果如图5-53所表示。图5-52 photoshop绘制圆角矩形 详细操作步骤以下:图5-53 奶油形状效果图33/93详细操作步骤以下:3. 为奶油添加效果，双击图层缩略图，调出图层样式对话框，如图5-54选择【内阴影】，参数设置混合模式为正常，不透明度为75，角度为-96，距离为8，堵塞为21，大小为19；然后

17、如图5-55选择【投影】，混合模式为正片叠底，不透明度为75，距离为8，扩展为14，大小为12，参数设置面板以下列图5-56所表示。图5-54 内阴影设置面板 图5-55投影设置面板图5-56 效果图34/93详细操作步骤以下:4. 新建图层，如图5-57所表示为奶油绘制一些细小颗粒状添加物，填充各种不一样颜色，是画面丰富起来。5. 绘制一个如图5-58一样圆，填充颜色为【f29102】，添加【图层样式】，选择【描边】颜色为黑色，大小1，参数设置面板如图5-59所表示。图5-57 绘制颗粒状添加物图 5-58 绘制圆图5-59 描边设置面板35/93详细操作步骤以下:6. 用【钢笔工具】绘制斜

18、边并填充描边，是图形含有饼干效果，效果如图5-60所表示。图5-60绘制斜边效果图5-61描边设置图36/93详细操作步骤以下:7. 绘制一个内圆，双击图层缩略图，调出图层样式对话框，分别设置【描边】颜色黑色，大小1，如图5-61；【渐变叠加】粉红由深到浅，如图5-62；【内阴影】不透明度49，角度34，距离9，堵塞9，大小24，参数面板如图5-63所表示。5-62渐变叠加设置图5-63内阴影设置37/93详细操作步骤以下:8. 复制圆形，位置摆放如图5-64所表示，然后在圆上打上文字【背包】，设置字体为方正胖娃简体，效果如图5-65所表示。 图5-64 复制圆形图5-65文字效果图图5-66

19、描边设置面板效果38/93详细操作步骤以下:9. 绘制一个圆，填充颜色为【f29102】，双击图层缩略图，调出图层样式对话框，选择【描边】颜色为黑色，大小1，参数面板如图图5-66所表示。图5-67 绘制内圆图 5-68 描边设置39/93详细操作步骤以下:10. (1)绘制一个内圆，效果如图5-67所表示。（2）设置圆图层效果，双击图层缩略图，调出图层样式对话框，分别设置【描边】颜色为黑色，大小1，如图5-68所表示；【内阴影】角度50，堵塞7，大小7，如图5-69所表示；【渐变叠加】颜色为黑色到粉红色，如图5-70所表示。图5-69 渐变叠加图5-70 内阴影40/93详细操作步骤以下:1

20、1. 使用【圆角矩形工具】，绘制一个交叉，填充白色，效果如图5-71所表示。12. 绘制背包物品内框，使用圆角矩形工具，绘制一个圆角矩形，填充颜色为【#80340f】，再【CTRL+J】复制一个，缩小一点，填充颜色【#9f8a77】，放置在图5-72中矩形上面,效果如图图5-73所表示。图5-71绘制交叉图5-72 绘制圆角矩图5-73 复制缩小圆角矩形41/93详细操作步骤以下:13. 连续【CTRL+J】复制9个圆角矩形作为摆放物品内框，按图5-74所表示进行摆放。图5-74 圆角矩形摆放效果图 图5-75 自定义绘制图形42/93详细操作步骤以下:14. 使用自定义图形绘制，填充颜色【#

21、 883f17】，双击图层缩略图，调出【图层样式】对话框，选择【斜面浮雕】外斜面，平滑深度52，大小15，软化1，角度30，参数面板以下列图5-75所表示。图5-76斜面浮雕设置面板43/93详细操作步骤以下:15. 【CTRL+J】如图5-77所表示复制多一个图层在上方。16. 新建图层并命名为椭圆7，使用【椭圆形工具】，在图5-78位置绘制一个圆，填充颜色为【#883f17】，CTRL+J复制两个，移动放置到旁边。图5-77 复制图层 图5-78 绘制圆效果图44/93详细操作步骤以下:17. 改变椭圆7图层样式，双击图层缩略图，调出【图层样式】对话框，选择【斜面浮雕】如图5-79所表示设

22、置为外斜面，平滑，深度为 52，大小为2 7；【颜色叠加】如图5-80设置颜色为【#56c9d9】。图5-79 斜面浮雕设置面板 图5-80 颜色叠加设置面板45/93详细操作步骤以下:18. 使用【圆角矩形工具】，在如图5-81位置绘制一个图形，填充为【#9f8a77】，不透明度改为59%。图5-81 绘制图形46/93详细操作步骤以下:19. 使用【圆角矩形工具】，在圆角上方继续绘制一个图形，填充为【#9f8a77】，不透明度为61%，【CTRL+J】复制一个移动到正下方，效果如图5-82所表示。20. 创建一个新图层，用手绘板绘制一颗砖石图形，放置到图5-83所表示位置上，使用【方正胖娃

23、简体】，在图中所表示位置上打上文字【砖石：34561】。图5-82 绘制图形图5-83 添加文字47/93详细操作步骤以下:21. 使用椭圆工具，按住【ALT+SHIFT】绘制一个正圆，填充为【e9e348】，双击图层，调出图层样式对话框，如图5-84所表示选择【描边】颜色黑色，大小；图5-85所表示选择【内阴影】角度55，距离41，堵塞15；图5-86所表示选择【内发光】混合模式为滤色。图5-84 描边设置面板图5-86 内发光设置面板 图5-85 内阴影设置面板48/93详细操作步骤以下:22. 使用椭圆工具，按住【ALT+SHIFT】如图5-87所表示绘制一个正圆，填充为【fcee6d】

24、图5-87 绘制一个正圆 图5-88斜面浮雕设置面板49/93详细操作步骤以下:23. 使用自定义图形，绘制金币花样，双击图层，调出【图层样式】对话框，如图5-88所表示选择选择【斜面浮雕】内斜面，深度164，角度98，高度2；图5-89所表示选择【内阴影】角度50，距离5，大小2. 图5-90所表示选择【渐变叠加】颜色由橙到黄，参数设置以下列图所表示。图5-89内阴影设置面板 图5-90渐变叠加设置面板50/93详细操作步骤以下:24. 使用方正胖娃简体字体，如图5-91所表示打上文字【金币：15789】。25. 使用【圆角矩形工具】图5-92所表示绘制一个形状，填充为【#80540f】，双

25、击图层，调出图层样式对话框，图5-93所表示选择【外发光】颜色由白到透明色。图5-91 添加文字 图5-93 外发光设置面板 图5-92 绘制形状 51/93详细操作步骤以下:26. 复制一个形状副本，按住【ALT+SHIFT】等百分比缩小图形，填充颜色为【b7a784】，双击图层，调出【图层样式】对话框，如图5-94所表示选择【描边】大小4，外部，颜色由棕色深到浅。图5-94 描边设置面板 图5-95内发光设置面板52/93详细操作步骤以下:27. 复制一个形状副本，按住【ALT+SHIFT】组合键等百分比缩小图形，双击图层，调出图层样式对话框，如图5-95所表示选择选择【内发光】颜色由蓝到

26、透明，图5-96所表示选择【渐变叠加】颜色为黄色到粉色，角度40。图5-96渐变叠加设置面板 图5-97 内发光设置面板53/93详细操作步骤以下:28. 用【钢笔工具】绘制高光，双击图层，调出【图层样式】对话框，如图5-97所表示选择【内发光】颜色为黄色至透明，堵塞46，大小46；图5-98所表示选择【颜色叠加】颜色为白色；图5-99所表示选择【外发光】颜色为黄色至透明，参数设置以下列图所表示。图5-98 颜色叠加设置面板图5-99 外发光设置面板54/93详细操作步骤以下:29. 使用【图层蒙版】，让高光看起来更柔和，效果如图5-100所表示。30. 如图5-101所表示绘制调整高光。图5

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

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

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

30、渐变叠加设置面板图5-107 外发光设置 图5-108 绘制背包商品道具58/93详细操作步骤以下:33. 新建图层，用手绘绘制背景，效果如图5-109所表示。34. 新建图层，使用【矩形工具】如图5-110所表示绘制一个矩形，填充为黑色，不透明度为61%。图5-109 绘制背景 图5-110 绘制矩形59/93详细操作步骤以下:35. 制作外框按钮，完成！最终效果如图5-111所表示。图5-111 最终效果图60/93055.5电视游戏主界面设计欧美格调61/93设计构思本节实例制作欧美格调枪战射击类游戏主界面。参考蛋糕造型作为背包界面原型，使用斜面浮雕等效果，使画面更具立体感。需要设计一个

31、装备背包。该背包用于玩家调整武器装备，经过切换不一样种类武器以适应不一样类型比赛模式。界面设计理念是重金属，但又能使玩家明确了解操作步骤。设计规格尺寸规格：4000像素2263像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具。设计色彩分析界面主要色调是重金属与蓝色科技格调。详细操作步骤以下:R:83、G79、B50 R:83、G85、B80 R:123、G162、B127 R:0、G39、B662/93最终效果：效果如图5-112所表示，装备界面如图5-113所表示，该界面主要由三部分组成：外金属框， 内武器选择框，内人物展示框，效果以下列图5-114, 图5-115,

32、 图5-116所表示。图5-112最终效果图 详细操作步骤以下:图5-113装备界面图63/93图5-114 外金属框 详细操作步骤以下: 图5-115 内武器选择框图5-116 内人物展示框64/93详细操作步骤以下:1. 制作外框：（1）一步是如图5-117所表示新建图层：宽度4000像素，高度2263像素，分辨率300像素，先制作外框。（2）用钢笔工具勾勒出外框大致外形，【填充】深灰色，再用【矩形选择工具】删去中间部分，如图5-118所表示。（3）一样用【钢笔工具】勾勒出外框装饰. 按钮. 文字栏，分别填充不一样深色进行区分，如图5-119所表示。图5-117画布设置 图5-119 绘制

33、装饰. 按钮. 文字栏图5-118 绘制外框外形65/93详细操作步骤以下:（4）为外框加上【图层样式】效果，经过添加浮雕，如图5-120所表示；渐变叠加如图5-121所表示；所表示光泽如图5-122所表示；描边让它有立体效果。图5-120 浮雕效果图 图5-122斜面浮雕设置面板图5-121 图层面板66/93详细操作步骤以下:（5）为外框简单叠加纹理，找一些金属类纹理贴图，然后进行【叠加】，效果以下列图5-123所表示。图5-123叠加金属类纹理图5-125 选择叠加模式图5-124 金属类纹理贴图67/93详细操作步骤以下:（6）开始用数位板，经过手绘方式修饰外框，为其加上装饰，用高光和

34、阴影凸显其立体感，如图5-126所表示。图5-126 修饰外框效果图图5-127图层样式效果图68/93详细操作步骤以下:（7）返回按钮设计，主要经过【图层样式】功效来处理，效果如图5-127所表示。（8）以如图5-128所表示选择【外发光】参数为滤色，不透明度75，大小65；如图5-129所表示选择【渐变叠加】黑色至白色，角度90；如图5-130所表示选择【描边】大小9，颜色墨绿色，表现按钮。图5-128 外发光设置面板图5-130描边设置面板图5-129渐变叠加设置面板69/93详细操作步骤以下:（9）用【钢笔工具】如图5-131所表示勾勒出内框外形，并将透明度调整为57，让其有通透感。图

35、5-131 绘制内框外形 图5-132 调整不透明度70/93详细操作步骤以下:（10）经过复制内框图层，【ctrl+t】放大，再经过内框删去部分取得细边框，给其填充白色，并如图5-134用【外发光】和【内发光】使其有发光效果，效果如图5-133所表示。图5-133 图层样式效果图 图5-134 图层状态栏71/93详细操作步骤以下:2. 返回按钮制作:用【任意工具】绘出返回箭头，添加【图层样式】效果，如图5-135所表示选择【外发光】混合模式为滤色，不透明度为47，扩展为10，大小为29，如图5-137所表示选择【斜面和浮雕】里内斜面，方向上，不透明度为100，大小为8，软化为0，角度为16

36、9，如图5-318所表示选择【渐变叠加】颜色为绿色至粉绿色，角度为90。图5-135外发光设置图5-136 效果图72/93详细操作步骤以下:（1）开始为外框装饰一些类似齿轮等小物件，让整个外框有机械风，能够在网上找一些如图5-139所表示机械零件素材参考。图5-138 渐变叠加设置图5-139 机械零件素材参考图5-138 渐变叠加设置73/93详细操作步骤以下:（2）挑选适合物件进行临摹，能够用【钢笔工具】或【手绘】方式进行绘制，再为其添加【图层样式】效果，如图5-141所表示选择【斜面和浮雕】内斜面，深度134，方向下，大小24，角度169，如图5-142所表示选择【光泽】混合模式为正片

37、叠底叠，不透明度为24，角度19，距离17，大小7，勾选反相，再添加一些纹理，效果如图5-140所表示。图5-140图层样式效果图图5-142光泽设置面板 图5-141 斜面浮雕设置面板 74/93详细操作步骤以下:5. 开始设计武器展示框:因为武器展示框是放置很多武器地方，所以要经过滑动方式查看，具备滑动条，而且当点击到武器时会显示出该武器属性。（1）首先经过钢笔工具和路径描边方式绘制出如图5-143所表示外形。（2）调整每层透明度使其有通透感，如图5-144所表示。图5-143 绘制图形 图5-144调整不透明度75/93详细操作步骤以下:4. 滑动条制作:（1）用【自定形状工具】【圆角矩

38、形工具】绘制出圆角矩形滑动条，如图5-145添加【图层样式】中【斜面和浮雕】内斜面，深度100，方向下，大小为24，角度为120，高度为30让它有内嵌感觉。（2）用【钢笔工具】绘制出一个按钮形状，如图5-146所表示用【图层样式】【斜面和浮雕】内斜面向上，深度100，大小8和图5-147【渐变叠加】不透明度为87，渐变橙至黄渐变色，角度0效果，使其立体。图5-145 斜面浮雕设置面板图5-147斜面浮雕设置面板图5-146 渐变叠加设置面板76/93详细操作步骤以下:（3）如图5-148所表示用钢笔工具绘制出放置武器外框，给其一个描边。（4）再用魔棒工具选中其内侧，并填充一个淡蓝色，如图5-1

39、49所表示修改其透明度为48。（5）为其添加一个【图层样式】，如图5-150所表示选择【内阴影】以蓝色为阴影，混合模式为正片叠底，角度为120，距离为5，阻塞为7，大小为250。图5-148 绘制放置武器外框 图5-150 内阴影设置面板 图5-149 修改透明度 77/93详细操作步骤以下:（6）从网上下载一张如图5-151所表示金属网格纹理贴图，再上一步骤基础上【叠加】上去，并修改其透明度为25。（7）经过不停复制和移动排序，取得如图5-153一样效果。图5-151金属网格纹理贴图图5-153 图形摆放效果图图5-152叠加并修改透明度78/93详细操作步骤以下:（8）同绘制外形步骤一样，

40、用【钢笔工具】和【路径描边】方式设计出两个如图5-154所表示功效按钮，调整其透明度。（9）放置好事先设计武器后，开始设计出如图5-155所表示触发显示武器属性栏。图5-154 效果图图5-155 武器属性栏效果图79/93详细操作步骤以下:（10）一样，它设计也是由【钢笔工具】勾勒绘出，并由【图层样式】为其添加如图5-156所表示【外发光】。设置为滤色，不透明度为75，大小为32，如图5-157所表示选择【斜面和浮雕】浮雕效果，平滑，方向为上，大小为2，角度为120，高度为30。图5-156 外发光设置面板图5-157 斜面浮雕设置面板80/93详细操作步骤以下:（11）用魔棒工具选中显示部

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