游戏UI金属边框是怎么做出来的

游戏界面里那些泛着冷光、边缘锋利或带有拉丝纹理的金属质感装饰，并非靠一套滤镜通吃。不同引擎、不同分辨率、甚至不同交互状态下的金属质感，制作路径截然不同。但底层逻辑始终围绕“反射”和“边缘”两个词。

金属和塑料、木头最大的区别在于反射率。几乎所有的金属质感都依赖高强度的高光对比。一个粗糙的金属表面反射模糊，抛光表面反射锐利。而游戏UI中的金属边框通常处于小尺寸，所以打磨重点不是物理正确，而是视觉可信度。

最传统的做法是在Photoshop里逐层叠加。先画一个基础形状，比如一条2像素宽的矩形条。填充一个中间调灰色，比如#808080。复制一层，用钢笔或选区工具切出斜角部分，填充亮灰色#E6E6E6，再切出另一侧填充暗灰色#333333。这就是最原始的“两刀切”金属感。但这样做出来过于平整，像塑料贴片。

进阶做法是使用图层样式中的“斜面与浮雕”。参数设置上注意，深度要控制在200%到300%之间，方向选“向上”，大小设定为3到5像素，软化值设0。阴影模式选“正片叠底”，颜色选深灰但不要纯黑，透明度70%。高光模式选“滤色”，颜色用白色，透明度80%。这样能快速得到一个受光均匀的斜面。但只有斜面还不够，需要叠加“内发光”制造金属的二次反光。内发光混合模式选“滤色”，源选“边缘”，大小5像素，颜色选择一个偏冷的淡蓝#B0C4DE，透明度30%到40%。这一层蓝灰色光模拟了环境光在金属边缘的反射，是打破塑料感的关键。

如果要更真实的划痕和磨损，就不能只用图层样式。需要手工绘制或者素材叠加。拉丝金属的做法是：新建一个图层，用1到2像素的黑色或白色水平线随机排布，降低透明度到15%，再叠加一个轻微的高斯模糊，半径0.3像素。然后把这个图层混合模式设为“叠加”，并裁剪到边框图层内。注意，UI中的金属往往需要表现“使用过的痕迹”，比如四角磨损。做法是给边框的四个端点添加暗角，用橡皮擦或者蒙版在两端擦出参差不齐的缺口，再叠加一层柔和的笔刷阴影。

很多团队现在使用Substance 3D Painter或Designer制作程序化纹理，然后输出成雪碧图。流程是建立一个平面模型，赋予一个PBR材质，金属度设为1，粗糙度设为0.35到0.5，基色是一个纯灰度值。然后在软件里添加生成器，比如“边缘磨损”和“灰尘”。这样输出的纹理自带环境遮蔽和法线信息。在Unity或虚幻引擎里，把输出的一张粗糙度贴图和法线贴图叠加到UI的Canvas或UMG上，就不需要实时计算反射，而是用烘焙好的光照贴图。这种方法适合MMORPG和强调装备感的游戏，因为需要批量生成不同品质的金属边框，只需调整粗糙度系数和磨损遮罩的参数。

另一种程序化做法是直接在Shader里写噪波。适用于移动端休闲游戏的极简金属感。用一个正方形框的内边距做UV尺寸，计算边缘距离场的梯度值。然后叠加三层噪声：Perlin噪声模拟金属颗粒，较宽的Voronoi噪声模拟深浅不一的拉丝，再加上一个一维的渐变控制整体的高光位置。最后用smoothstep函数钳制亮部宽度。这种做法成本极低，一个像素着色器就能跑，而且不依赖贴图。但缺点是非常扁平，只能做小面积装饰，比如按钮外框或进度条两侧的端点。

网上很多教程喜欢用渐变工具一拉到底，但那是大忌。金属的反光不是简单的线性渐变，而是多段式的。一个光亮的金属边框从左上到右下依次应该有：暗部、次亮部、高光、光线反弹区、暗部。高光区通常只有总宽度的一成左右，且边缘锐利。所以手工绘制时建议用“色阶条”的方法：先画出三个窄矩形，分别填充暗灰、白色、灰白，然后左右拉伸模糊或者直接移动位置反复试验。在视觉上形成一个“光线扫过”的效果。

对于小尺寸的UI图标，很多美术人员会忽略一个细节：金属边缘在暗背景上要比在亮背景上亮得多。游戏界面通常背景较暗，金属框的亮度值需要上调。比如同样的金色金属，在明亮商店界面里基色用#8B7355，高光用#FFF0C0，但在暗色战斗界面里基色要提到#C9A063，高光直接用#FFFFFF。如果不调整，金属框会显得脏和旧。

性能上也有讲究。实时渲染的UI金属不能直接用粗糙度太低的高光材质，因为会产生锯齿。一般移动端的UI材质里，高光强度设置在0.3到0.5之间，光滑度不超过0.6。同时把金属框的贴图画得稍微粗糙一点，比如在法线贴图里加入0.5像素半径的噪声，能有效避免摩尔纹。

无论用哪种方法，最终都离不开一遍遍调整明暗交界线的位置。所谓做金属，本质上就是在做光的切割。做得好的UI金属框，高光宽度不超过整个边框宽度的四分之一，暗部至少保持一像素的封闭环境。做到这两点，即便没有纹理和划痕，也会比盲目叠加特效的塑料感作品可信得多。