2.3 文字元素设计

在信息的传播过程中，文字作为信息传递的基本元素仅次于口语，成为比图形更直接、更清晰，表达更准确的传播工具，也与图形元素并列成为游戏UI设计元素中不可缺少的部分。

1.文字在游戏界面中的作用

文字的出现弥补了图形在信息传递过程中的模糊性，有着其他设计元素无法替代的功能。在游戏界面中，文字的作用主要集中于两个方面：一是作为文字最原始的功能性元素，进行信息和情感的传递，如图2-105所示；二是作为视觉图形元素减弱信息传递功能，增强文字字形的审美价值，如图2-106所示。

2.文字是信息传递的媒介

作为信息传递的媒介，文字在游戏界面中主要发挥了解释说明的功能，例如玩家在面对一款新的游戏时，在游戏规则说明性界面中，文字可以清晰地表达出游戏的玩法。当然，很多游戏规则说明界面中使用了文字与图形相结合的方式，增添了说明的生动性，如图2-107所示。

使用简单的图形对复杂的游戏进行解释说明是很困难的，此时文字便发挥了巨大的作用。但需要注意的是，没有哪个游戏玩家喜欢在游戏世界中阅读大量的文字，因此游戏界面中的文字内容必须适量，在必要的时候出现，并以最简洁的语句表达最清晰的意思。字体的大小、间距应该保持文字的易读性，否则玩家将会直接忽视跳过这些文字信息而继续游戏，如图2-108所示。

除了解释说明的功能，文字还作为提示媒介，很多游戏中会在图标或角色上设置鼠标悬停界面，界面中的文字则是对图形或角色功能的提示，这种方式使大量的文字信息隐藏于游戏界面中，只在玩家需要时进行显示，减少了文字过多给玩家带来厌烦感，如图2-109所示。

3.文字作为视觉图形元素

文字作为视觉图形元素在游戏界面中还具有审美与情感传递的功能。文字是在原始图形的基础上演变而来的，是一种抽象的符号、静态的语言，其本身就具有图形之美。将文字作为视觉图形元素进行处理时，文字的易读性和清晰性并不重要，文字会作为图形或背景起到渲染游戏气氛的作用。文字的这一功能通常体现在根据游戏的主题内容进行设计的游戏标题上，传递给玩家符合游戏体验的情感。例如，在一些竞速或格斗类游戏界面中，字体常被设计成带有强烈撕裂效果的样式。如图2-110所示为文字作为视觉图形元素的表现。

【自测3】设计游戏文字

视频：光盘\视频\第2章\游戏文字.swf 源文件：光盘\源文件\第2章\游戏文字.psd

● 案例分析

案例特点：游戏主题文字需要能够体现游戏的特点，本案例的游戏文字使用的是可爱的卡通字体，并通过添加图层样式体现出了游戏文字的立体感和层次感。

制作思路与要点：本案例的游戏文字效果相对比较简单，主要是通过一种特殊的卡通字体输入文字，将文字图层复制3次，分别为各层文字添加相应的图层样式，从而表现出文字的层次感，体现出游戏文字的卡通和可爱的感觉，让人感觉轻松、愉悦。

● 色彩分析

使用蓝色作为游戏文字的背景颜色，在对游戏文字进行设计时，使用同色系的不同明度和纯度的渐变蓝色来为文字配色，使得游戏文字的效果与背景颜色相统一；通过高明度的黄色和绿色等颜色构成按钮图标，活跃整体的氛围。

● 制作步骤

步骤01 执行“文件＞新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-111所示。使用“渐变工具”，在选项栏上单击渐变预览条，弹出“渐变编辑器”对话框，设置渐变颜色，如图2-112所示。

步骤02 单击“确定”按钮，完成渐变颜色的设置，在画布中填充线性渐变，效果如图2-113所示。新建名称为“字体”的图层组，使用“横排文字工具”，在“字符”面板上进行相关设置，并在画布中输入文字，如图2-114所示。

步骤03 为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-115所示。继续添加“描边”图层样式，对相关选项进行设置，如图2-116所示。

步骤04 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-117所示。复制“欢乐”图层，得到“欢乐 拷贝”图层，清除该图层的图层样式，为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-118所示。

步骤05 继续添加“描边”图层样式，对相关选项进行设置，如图2-119所示。继续添加“内阴影”图层样式，对相关选项进行设置，如图2-120所示。

步骤06 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-121所示。复制“欢乐 拷贝”图层，得到“欢乐 拷贝2”图层，清除该图层的图层样式，为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-122所示。

提示

选择需要添加图层样式的图层，执行“图层＞图层样式”命令，通过选择“图层样式”子菜单中相应的命令可以为图层添加图层样式；或者单击“图层”面板下方的“添加图层样式”按钮，在弹出的菜单中也可以选择相应的样式；在需要添加图层样式的图层名称外侧区域双击，也可以弹出“图层样式”对话框，为该图层添加相应的图层样式。

步骤07 继续添加“描边”图层样式，对相关选项进行设置，如图2-123所示。继续添加“内阴影”图层样式，对相关选项进行设置，如图2-124所示。

步骤08 继续添加“内阴影”图层样式，对相关选项进行设置，如图2-125所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-126所示。

步骤09 使用相同的制作方法，完成其他文字的制作，如图2-127所示。使用“圆角矩形工具”，在选项栏上设置“填充”为RGB（34，158，255）、“半径”为40像素，在画布中绘制圆角矩形，如图2-128所示。

步骤10 为该图层添加“描边”图层样式，对相关选项进行设置，如图2-129所示。继续添加“内阴影”图层样式，对相关选项进行设置，如图2-130所示。

步骤11 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-131所示。使用“横排文字工具”，在“字符”面板上进行相关设置，并在画布中输入文字，如图2-132所示。

步骤12 为该文字图层添加“描边”图层样式，对相关选项进行设置，如图2-133所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-134所示。

步骤13 使用“自定形状工具”，在选项栏上的“形状”下拉面板中选择合适的形状，在画布中绘制五角星形，如图2-135所示。为该图层添加“描边”图层样式，对相关选项进行设置，如图2-136所示。

提示

除了可以使用系统提供的形状，在Photoshop中还可以将自己绘制的路径图形创建为自定义形状。只需要将自己绘制的图形选中，执行“编辑＞定义自定形状”命令，即可将其保存为自定义形状。

步骤14 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-137所示。复制“形状1”图层，得到“形状1拷贝”图层，清除该图层的图层样式，为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-138所示。

步骤15 继续添加“描边”图层样式，对相关选项进行设置，如图2-139所示。继续添加“内阴影”图层样式，对相关选项进行设置，如图2-140所示。

步骤16 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-141所示。复制“形状1拷贝”图层，得到“形状1拷贝2”图层，清除该图层的图层样式，为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-142所示。

步骤17 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-143所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-144所示。

步骤18 使用相同的制作方法，完成相似图形的绘制，如图2-145所示。在“背景”图层上方新建“图层1”，使用“画笔工具”，设置“前景色”为白色，选择合适的笔触与大小，在选项栏上设置“不透明度”为83%，在画布中绘制图形，设置该图层的“混合模式”为“叠加”，效果如图2-146所示。

提示

设置图层的“混合模式”为“叠加”后，可以改变图像的色调，但图像的高光和暗调将会被保留。

步骤19 新建“图层2”，使用“椭圆选框工具”，在画布中绘制椭圆选区，如图2-147所示。为选区填充白色，取消选区，执行“滤镜＞模糊＞高斯模糊”命令，弹出“高斯模糊”对话框，具体设置如图2-148所示。

步骤20 单击“确定”按钮，关闭“高斯模糊”对话框，效果如图2-149所示。复制“图层2”图层，得到“图层2拷贝”图层，执行“编辑＞变换＞旋转”命令，在选项栏上设置“旋转”为30°，如图2-150所示。

步骤21 按住Shfit+Alt+Ctrl组合键不放，多次按T键，对图形进行多次旋转复制操作，如图2-151所示。同时选中“图层2”至“图层2拷贝5”图层，执行“图层＞合并图层”命令，设置该图层的“混合模式”为“叠加”、“不透明度”为25%，效果如图2-152所示。

步骤22 为该图层添加图层蒙版，使用“画笔工具”，设置“前景色”为黑色，选择合适的笔触与大小进行涂抹，如图2-153所示。完成设计的制作，最终效果如图2-154所示。