2.2 图形元素设计
在游戏界面中，图形元素主要是由发挥装饰性功能的图案、图像及发挥信息传达功能的图标组成的。图形是游戏界面中最直观、占据空间最多的设计元素，图形元素使用得是否得当直接关系到游戏界面的成败。
1.图形元素的功能
图形元素是以“看”而非“读”为主的元素形式，因此，图形元素的视觉装饰性功能是其主要的功能。比起文字的功能，图形存在更宽泛的信息传递意义。文字的表达是线性的，而图形的表达更加直观，有文字所无法达到的表达意义的功能。
通常情况下，游戏界面中的图形风格是游戏主题内容的延伸，并在表现风格、色调上尽可能与游戏世界构成关联性，这样做的目的主要为了不破坏游戏世界给玩家的整体感觉，不会让玩家因为界面风格的突然改变而产生歧义，并增强游戏世界渲染的氛围，如图2-4所示。
图2-4
2.图形元素的作用
界面中恰当的图形应用可以激发玩家的游戏体验，并能够增强游戏信息传递的效果，甚至可以让玩家在感觉不到这一层面的前提下顺利地完成游戏任务。这在近几年以第一人称为主的射击类和竞速类游戏中的抬头显示界面和仪表盘界面中体现得最为明显。为了给玩家置身其中的游戏感觉，这两类游戏的界面在图形设计上通常会模拟真实世界中的机械仪表盘，在游戏世界中再现虚拟现实功能。如图2-5所示为图形元素在游戏界面中的应用。
图2-5
3.图标设计的重要性
图标在游戏界面中应用非常频繁，也是游戏界面中图形的一种重要表现形式。
很多游戏公司发布一款新的游戏通常面向全球范围，不得不考虑游戏在不同国家使用不同的语言版本，并且由于各国语言文字书写的巨大差异，同样的意思对于不同语言文字来说占用的空间是不同的，设计者在设计文字界面时要预留足够的空间，这给设计师带来了不小的难度。这时如果能将文字转换为图标，就会省去不少麻烦。特别是在策略类游戏中，因为功能非常繁多，如果全部以文字进行说明，则会使玩家看到满屏幕的文字导致游戏无法进行，而将对应的功能配以相应的图标，情况就会好很多。例如，货币图标、军队图标、各种物资的图标等，因为日常事物的结构形态在全球范围内几乎相同，不论语言多么无法沟通，图形总能让人快速理解所要表达的意思。如图2-6所示为游戏界面中的图标设计。
图2-6
同时，这些图标也降低了玩家的记忆负担，不需要记住每个功能的名称，只需要看到图标就可以明白该功能的作用。这就要求同一游戏界面或场景中的图标风格一致，图标的设计要简洁清晰，尽量减少图形的细节设计，太多的细节会造成读图的困难，也会让各个图标之间产生混淆。也许玩家在刚开始接触一款游戏时需要了解部分图标的含义，但总好过学习一门新的语言。如图2-7所示为精美的游戏图标设计。
图2-7
【自测1】设计游戏图标
视频：光盘\视频\第2章\游戏图标.swf 源文件：光盘\源文件\第2章\游戏图标.psd
● 案例分析
案例特点：本案例设计一款游戏图标，通过对基本图形的形状进行调整，将图形调整为不规则的图形效果，从而构成可爱的卡通游戏图标。
制作思路与要点：在游戏界面中图标是非常常见的图形元素，并且游戏图标的表现需要与游戏界面的整体风格相统一。在本案例中绘制基本的形状图形，为所绘制的基本形状图形添加锚点，通过对锚点的调整，形成不规则的图形效果。再通过图层样式和绘制高光、阴影图形的方式，体现出游戏图标的立体感，使得该游戏图标表现出可爱的卡通效果，与游戏的整体风格相统一。
● 色彩分析
本案例的游戏图标使用黄橙色和白色进行搭配，这两种颜色的配合再加上绿色的标题给人眼前一亮的感觉，使图标和图形的整体色调统一。
● 制作步骤
步骤01 执行“文件＞打开”命令，打开素材图像“光盘\源文件\第2章\素材\101.jpg”，如图2-8所示。新建“图层1”，为该图层填充黑色，设置该图层的“不透明度”为60%，效果如图2-9所示。
图2-8
图2-9
步骤02 新建名称为“背景”的图层组，使用“圆角矩形工具”，在选项栏上设置“工具模式”为“形状”、“填充”为RGB（214，167，112）、“半径”为30像素，在画布中绘制圆角矩形，如图2-10所示。使用“添加锚点工具”，在刚绘制的圆角矩形路径上单击添加锚点，如图2-11所示。
图2-10
图2-11
提示
使用“添加锚点工具”，将光标放置于路径上，当光标变为
形状时，单击即可添加一个锚点，如果单击并拖动鼠标，则可以添加一个平滑锚点。
步骤03 使用“直接选择工具”，选中正下方的锚点，对该锚点进行调整，如图2-12所示。使用相同的制作方法，分别对其他相应的锚点进行调整，得到需要的图形，效果如图2-13所示。
图2-12
图2-13
提示
使用“直接选择工具”选择路径上的锚点，被选中的锚点显示为实心点，未被选中的锚点显示为空心点。在使用“直接选择工具”选择锚点时，如果按住Shift键的同时单击锚点，可以同时选中多个锚点。
步骤04 为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-14所示。继续添加“内发光”图层样式，对相关选项进行设置，如图2-15所示。
图2-14
图2-15
步骤05 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-16所示。复制“圆角矩形1”图层，得到“圆角矩形1拷贝”图层，清除该图层的图层样式，修改复制得到图形的填充颜色为RGB（248，232，176），效果如图2-17所示。
图2-16
图2-17
提示
在图层上单击鼠标右键，在弹出的菜单中选择“清除图层样式”命令，可以一次性清除该图层所应用的多个图层样式。如果需要修改形状图形的填充颜色，可以双击该形状图层的缩览图，在弹出的“搭色器”对话框中设置填充颜色即可。
步骤06 执行“编辑＞变换＞缩放”命令，将图形等比例缩小，如图2-18所示。为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-19所示。
图2-18
图2-19
步骤07 继续添加“投影”图层样式，对相关选项进行设置，如图2-20所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-21所示。
图2-20
图2-21
步骤08 使用相同的制作方法，完成相似图形的绘制，如图2-22所示。使用“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入相应的文字，如图2-23所示。
图2-22
图2-23
步骤09 为该图层添加“投影”图层样式，对相关选项进行设置，如图2-24所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-25所示。
图2-24
图2-25
步骤10 选中该文字图层，执行“类型＞文字变形”命令，弹出“变形文字”对话框，具体设置如图2-26所示。单击“确定”按钮，对文字进行变形处理，效果如图2-27所示。
图2-26
图2-27
提示
通过创建变形文字可以将原本呆板生硬的文字变得富有生机和活力，从而更加具有观赏性。在“变形文字”对话框中的“样式”下拉列表中预设了15种文字变形样式，可以选择合适的变形样式，并结合对话框中其他选项的设置，创建出独特的变形文字效果。
步骤11 新建名称为“按钮”的图层组，使用“椭圆工具”，在画布中绘制一个白色的正圆形，如图2-28所示。使用“添加锚点工具”，在刚绘制的椭圆路径上单击添加锚点，如图2-29所示。
图2-28
图2-29
提示
使用“椭圆工具”在画布中绘制椭圆形时，如果按住Shift键的同时拖动鼠标，则可以绘制正圆形；拖动鼠标绘制椭圆形时，在释放鼠标之前，按住Alt键，则将以单击点为中心向四周绘制椭圆形；拖动鼠标绘制椭圆形时，在释放鼠标之前，按住Alt+Shift组合键，将以单击点为中心向四周绘制正圆形。
步骤12 使用“直接选择工具”，选中正上方的锚点，对该锚点进行调整，如图2-30所示。使用相同的制作方法，分别对其他相应的锚点进行调整，得到需要的图形，效果如图2-31所示。
图2-30
图2-31
步骤13 为该图层添加“投影”图层样式，对相关选项进行设置，如图2-32所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-33所示。
图2-32
图2-33
步骤14 使用“椭圆工具”，在选项栏上设置“填充”为RGB（254，189，39），在画布中绘制一个正圆形，如图2-34所示。为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-35所示。
图2-34
图2-35
步骤15 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-36所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-37所示。
图2-36
图2-37
步骤16 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-38所示。使用“钢笔工具”，在选项栏上设置“工具模式”为“形状”、“填充”为RGB（194，128，23），在画布中绘制形状图形，如图2-39所示。
图2-38
图2-39
步骤17 为该图层创建剪贴蒙版，设该置图层的“混合模式”为“正片叠底”、“填充”为25%，效果如图2-40所示。使用相同的制作方法，完成相似图形的绘制，如图2-41所示。
图2-40
图2-41
步骤18 使用“自定形状工具”，在选项栏上的“形状”下拉面板中选择合适的形状，在画布中绘制白色的形状图形，如图2-42所示。使用“直接选择工具”，对刚才绘制的形状图形进行调整，效果如图2-43所示。
图2-42
图2-43
步骤19 为该图层添加“投影”图层样式，对相关选项进行设置，如图2-44所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-45所示。
图2-44
图2-45
步骤20 使用相同的制作方法，完成相似图形的绘制，如图2-46所示。完成该游戏图标的设计制作，最终效果如图2-47所示。
图2-46
图2-47
【自测2】设计游戏启动图标
视频：光盘\视频\第2章\游戏启动图标.swf 源文件：光盘\源文件\第2章\游戏启动图标.psd
● 案例分析
案例特点：游戏启动图标要尽可能体现出游戏的特点。本案例设计的游戏启动图标，使用了拟物化的设计方法，充分体现出了游戏的特点，使用户看到图标就知道该游戏是什么类型，非常直观。
制作思路与要点：该游戏启动图标使用拟物化的设计方式，首先绘制出图标的轮廓外框，并通过“添加杂色”滤镜和木纹的素材图像处理，使得图标的表现效果更加具有质感，表现出真实的纹理效果。接着绘制图标中相应的图形，并通过图层样式使图形产生强烈的立体感和质感，充分表现出真实感。
● 色彩分析
该游戏启动图标充分运用现实生活中相同物体的色彩作为配色依据，使用绿色和咖啡色相搭配，表现出与真实的球桌统一的视觉色彩效果，能够给人们很好的辨识度，也能够与人们印象中的形象相统一。
● 制作步骤
步骤01 打开素材图像“光盘\源文件\第2章\素材\201.jpg”，如图2-48所示。使用“圆角矩形工具”，在选项栏上设置“工具模式”为“形状”、“半径”为30像素，在画布中绘制白色的圆角矩形，效果如图2-49所示。
图2-48
图2-49
步骤02 为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-50所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-51所示。
图2-50
图2-51
步骤03 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-52所示。使用“圆角矩形工具”，设置“填充”为RGB（4，181，32）、“半径”为30像素，在画布中绘制圆角矩形，如图2-53所示。
图2-52
图2-53
步骤04 执行“滤镜＞杂色＞添加杂色”命令，弹出“添加杂色”对话框，对相关选项进行设置，单击“确定”按钮，效果如图2-54所示。设置该图层的“混合模式”为“颜色加深”、“不透明度”为44%，效果如图2-55所示。
图2-54
图2-55
提示
“添加杂色”滤镜可以将随机像素应用于图像。在“添加杂色”对话框中，“数量”选项用于设置杂色的数量；“分布”选项用于设置杂色的分布方式，如果选择“平均分布”单选按钮，则会使用随机数值分布杂色的颜色值，以获得细微效果，如果选择“高斯分布”单选按钮，则将沿一条钟形曲线分布的方式来添加杂点，杂点效果较为强烈；选中“单色”复选框，则滤镜将只应用图像中的色调元素，而不改变颜色。
步骤05 新建名称为“外框”的图层组，使用“圆角矩形工具”，在画布中绘制黑色的圆角矩形，如图2-56所示。使用“矩形工具”，设置“路径操作”为“减去顶层形状”，在刚绘制的圆角矩形上减去相应的矩形，得到需要的图形，效果如图2-57所示。
图2-56
图2-57
提示
设置“路径操作”为“减去顶层形状”后，可以在已经绘制的路径或形状图形中减去当前绘制的路径或形状图形。
步骤06 为该图层添加“描边”图层样式，对相关选项进行设置，如图2-58所示。继续添加“内阴影”图层样式，对相关选项进行设置，如图2-59所示。
图2-58
图2-59
步骤07 继续为该图层添加“内发光”图层样式，对相关选项进行设置，如图2-60所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-61所示。
图2-60
图2-61
步骤08 继续为该图层添加“投影”图层样式，对相关选项进行设置，如图2-62所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-63所示。
步骤09 打开素材图像“光盘\源文件\第2章\素材\202.jpg”，将其拖入到设计文档中，如图2-64所示。设置该图层的“混合模式”为“颜色加深”、“不透明度”为50%，效果如图2-65所示。
提示
设置图层的“混合模式”为“颜色加深”，能够通过减小亮度使像素变暗，与“正片叠底”图层混合模式效果相似，但却可以保留下方图像更多的颜色信息。
图2-62
图2-63
图2-64
图2-65
步骤10 使用相同的制作方法，可以完成相似图形效果的制作，如图2-66所示。新建名称为“内框”的图层组，使用“矩形工具”，在画布中绘制一个白色的矩形，如图2-67所示。
图2-66
图2-67
步骤11 使用“直接选择工具”，对矩形路径上的锚点进行调整，改变矩形形状，效果如图2-68所示。为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-69所示。
图2-68
图2-69
步骤12 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-70所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-71所示。
图2-70
图2-71
步骤13 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-72所示。使用相同的制作方法，可以绘制出相似的图形效果，如图2-73所示。
图2-72
图2-73
步骤14 将“内框”图层组移至“外框”图层组下方，新建名称为“洞”的图层组，使用“直线工具”，在画布中绘制一条黑色直线，如图2-74所示。为该图层添加“投影”图层样式，对相关选项进行设置，如图2-75所示。
图2-74
图2-75
提示
使用“直线工具”在画布中绘制直线或线段时，如果按住Shift键的同时拖动鼠标，则可以绘制水平、垂直或以45°角为增量的直线。
步骤15 单击“确定”按钮，完成“投影”图层样式的设置，效果如图2-76所示。使用“椭圆工具”，在画布中绘制一个黑色的正圆形，如图2-77所示。
图2-76
图2-77
步骤16 为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-78所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-79所示。
图2-78
图2-79
步骤17 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-80所示。使用“椭圆工具”，在画布中绘制一个黑色的正圆形，效果如图2-81所示。
图2-80
图2-81
步骤18 使用“椭圆工具”，在选项栏上设置“路径操作”为“减去顶层形状”，在刚绘制的正圆形上减去相应的图形，使用“矩形工具”，同样减去相应的图形，得到需要的图形，如图2-82所示。为该图层添加相应的图层样式，图形效果如图2-83所示。
图2-82
图2-83
步骤19 使用相同的制作方法，可以完成相似图形效果的制作，如图2-84所示。新建名称为“球”的图层组，使用“椭圆工具”，在画布中绘制一个黑色的正圆形，如图2-85所示。
图2-84
图2-85
步骤20 为该图层添加“光泽”图层样式，对相关选项进行设置，如图2-86所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-87所示。
图2-86
图2-87
步骤21 继续添加“投影”图层样式，对相关选项进行设置，如图2-88所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-89所示。
图2-88
图2-89
步骤22 使用相同的制作方法，可以绘制出相似的图形，效果如图2-90所示。使用“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，如图2-91所示。
图2-90
图2-91
步骤23 新建图层，使用“椭圆选框工具”，在画布中绘制椭圆选区，羽化选区，为选区填充白色，效果如图2-92所示。取消选区，使用相同的制作方法，可以绘制出相似的图形效果，如图2-93所示。
图2-92
图2-93
步骤24 新建名称为“杆”图层组，使用“矩形工具”，在画布中绘制一个黑色矩形，如图2-94所示。执行“编辑＞变换路径＞扭曲”命令，对矩形进行扭曲操作，如图2-95所示。
图2-94
图2-95
步骤25 执行“编辑＞变换路径＞旋转”命令，对图形进行旋转操作，如图2-96所示。为该图层添加“渐变叠加”图层样式，并设置相关选项，如图2-97所示。
图2-96
图2-97
步骤26 继续添加“投影”图层样式，对相关选项进行设置，如图2-98所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-99所示。
图2-98
图2-99
步骤27 使用相同的制作方法，可以完成相似图形效果的制作，如图2-100所示。打开素材图像“光盘\源文件\第2章\素材\203.png”，将其拖入到设计文档中，如图2-101所示。
图2-100
图2-101
步骤28 设置该图层的“混合模式”为“颜色加深”、“不透明度”为50%，效果如图2-102所示。使用相同的制作方法，可以完成相似图形效果的制作，如图2-103所示。
图2-102
图2-103
步骤29 完成该游戏启动图标的设计制作，最终效果如图2-104所示。
图2-104