UI技术分享：《暗黑3》高精度UI界面的3种制作方法

GameRes​游资网授权发布 文 / U​灵


《暗黑3》是高精度多细节的界面设计的开山鼻祖，国内很多游戏都效仿其风格来做。写实绘制型风格的设计，主要材质多采用石头，金属的搭配结合。

《暗黑三》界面标头与主功能条


如何做到这样的进度表现的设计？

一共有两种主流方法和一种偏门方法。

A方法：智能图层绘画结合制作手法【主推方法】

第一步：首先在制作尺寸画布下面做好设计草稿。如果是端游，那么基本就是1920*1080的画布。



根据大致轮廓形象开始用钢笔与图形工具勾勒出图形与区域（一定要用PS里面的矢量工具，后期会放大来绘制，不然位图直接糊掉了）。





根据大致轮廓形象开始用钢笔与图形工具勾勒出图形与区域（一定要用PS里面的矢量工具，后期会放大来绘制，不然位图直接糊掉了）。

第二步：将整个组或者单体形状转化为智能对象智能图层制作方法【知道这个PS功能的朋友直接往后拉即可】


放大轮廓2倍或者4倍，根据设计师自身的设计习惯与安排，开始进行对外边框的绘制与制作，注意原图一定要缩小对比来观察刻画，保存后能看到效果。一些结构与结构设计一定要刻画好边缘，尽力把结构都梳理出来绘画。稍微有点笔触的地方在缩小后都会直接像素化看不出来，但是在平涂的区域一定要选择填充或者是渐变进行制作，只有在结构复杂的地方进行绘制，制作类似边框一定只画边框装饰就好了，物品ICON框不要用智能方法。


放大轮廓2倍或者4倍，根据设计师自身的设计习惯与安排，开始进行对外边框的绘制与制作，注意原图一定要缩小对比来观察刻画，保存后能看到效果。一些结构与结构设计一定要刻画好边缘，尽力把结构都梳理出来绘画。稍微有点笔触的地方在缩小后都会直接像素化看不出来，但是在平涂的区域一定要选择填充或者是渐变进行制作，只有在结构复杂的地方进行绘制，制作类似边框一定只画边框装饰就好了，物品ICON框不要用智能方法。

一些特定边缘与边框一定要在1:1的画布下面制作。特别是需要展示描边设计的情况一定要直接制作。精细描边尽力内描边，会显得比较精细和准确，外描边容易造成像素误差。（如图）10

A方法的诀窍就是复杂的结构设计放大画，细小的框体1:1制作。

B方法：直接原图制作方法【需要耐心与熟练使用钢笔工具】

第一步：还是一样的先画出设计草稿与方向

第二步：在原始画布下面直接用图形和钢笔工具勾选开始制作，在图层划分上面一定要做到清晰明确，如果混乱的话，很难对结构做好拆分与制作（重要）。

轮廓底层--->单结构轮廓层--->细节层--->材质层--->效果层（图层属性）每块区域应该都是这个逻辑层。每个小结构都需要打组归纳好。

在边缘处理上用内描边结合蒙版效果做渐变。然后适当的地方用喷笔轻轻点两笔。如果需要极限刻画边缘细节的时候，选择铅笔工具直接像素点画。

B方法的诀窍就是钢笔形状结合少量画笔达到效果，适合对制作比较在行的朋友。

C方法：抠图拼接修改方法【不做推荐】

此方法最好只做快速概念设计搭建的时候使用。如果是自己作为工作和作品的话，的确可以快速短暂的得到效果，但是对设计师原创与技术能力的伤害是巨大的。

不可否认也是方法之一，这里也做一下介绍。

第一步：找到相应的素材与参考选择其中的部分结构作为素材扣选出来独立建层。

第二步：素材用智能图层放大后在根据素材开始修改设计，缩小后用USM智能锐化轻度锐化。

第三步：修修改改这个设计就快出炉了，最后处理好外边缘因为抠图对边缘处理不到位会让人觉得粗糙。修好边，开启USM智能锐化调整到自己满意度，增加对比效果来弥补抠图的像素丢失。

以上3种方法都是能解决这个问题的。

B、C方法如果看不懂，可留言后期配图。

相关阅读：游戏UI设计原则和流程