人气 1552

[教程] 游戏UI如何做到高精度? [复制链接]

liujiajia796 2017-12-6 17:04:19

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

x
是纯手绘调像素还是有其他的方法??
回复

使用道具 举报

eqwov 2017-12-6 16:48:00
1、ui设计时注意素材质量
2、导出给程序使用的资源时注意图片质量
3、客户端舍得给ui体积,ui重用高避免整包过大。页游就不太需要考虑。
4、像素规整,有时引擎会吃像素或优化非整像素、或优化通明通道。

想到再补充
回复 支持 反对

使用道具 举报

VeronikaMBup 2017-12-6 16:52:10
Mp3pL5bW5QW8ZtkB.jpg


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

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


aZt6511XdBb5hf6f.jpg



------------------------------------------------------------------------------------------------------------------------
如何做到这样的进度表现的设计?
一共有两种主流方法和一种偏门方法。

A方法:智能图层绘画结合制作手法【主推方法】
第一步:首先在制作尺寸画布下面做好设计草稿。如果是端游,那么基本就是1920*1080的画布。
W1RYrZDO499R4Oyr.jpg



uai0pA6rha0FpJaM.jpg


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

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



q8JWc8JCUOziOKPo.jpg


f2cQXjG9PJJTtVJp.jpg


g33Occpj5WPc5gNJ.jpg


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

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




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

B方法:直接原图制作方法【需要耐心与熟练使用钢笔工具】
第一步:还是一样的先画出设计草稿与方向
第二步:在原始画布下面直接用图形和钢笔工具勾选开始制作,在图层划分上面一定要做到清晰明确,如果混乱的话,很难对结构做好拆分与制作(重要)。

轮廓底层--->单结构轮廓层--->细节层--->材质层--->效果层(图层属性)

每块区域应该都是这个逻辑层。每个小结构都需要打组归纳好。
在边缘处理上用内描边结合蒙版效果做渐变。然后适当的地方用喷笔轻轻点两笔。如果需要极限刻画边缘细节的时候,选择铅笔工具直接像素点画。
B方法的诀窍就是钢笔形状结合少量画笔达到效果,适合对制作比较在行的朋友。

C方法:抠图拼接修改方法【不做推荐】
此方法最好只做快速概念设计搭建的时候使用。如果是自己作为工作和作品的话,的确可以快速短暂的得到效果,但是对设计师原创与技术能力的伤害是巨大的。
不可否认也是方法之一,这里也做一下介绍。

第一步:找到相应的素材与参考选择其中的部分结构作为素材扣选出来独立建层。
第二步:素材用智能图层放大后在根据素材开始修改设计,缩小后用USM智能锐化轻度锐化。
第三步:修修改改这个设计就快出炉了,最后处理好外边缘因为抠图对边缘处理不到位会让人觉得粗糙。修好边,开启USM智能锐化调整到自己满意度,增加对比效果来弥补抠图的像素丢失。

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

B、C方法如果看不懂,可留言后期配图。
回复 支持 反对

使用道具 举报

Cruzhymn 2017-12-6 16:55:07
一定是手绘。
同时贴张制作方法的图,里面说的是图标,但UI的道理也是一样的
K4jZ4YQ3zR3P225y.jpg
回复 支持 反对

使用道具 举报

沙地民谣网 2017-12-6 16:58:50
尼玛,部分游戏策划真的素质堪忧。哥大声告诉你:把ui做到高精度是系统性的活!!!
有前辈肯教你整套流程就多学习,别乱喷。简单说一下,还放大一倍再缩小,你知道不同的图像引擎的缩放绘制算法是不一样的么?你试试用mspaint和ps分别把一张图缩放50%效果是一样的吗!

亲!缩放都跟图源的尺寸都还有关系,你再试试弄个奇数尺寸的和偶数尺寸的图看看有区别不。

看起来简单的东西,背后其实都是有很多规范和制作标准的,比如你清楚为毛常用的图源格式要有那么多种吗??做游戏真心是个系统性的活,不要太多想当然!少年!
补充叶斌
1.各种响应控件的尺寸要做整体规划
2.使用字体的种类,字号、字色都要做整体规划
3.手游尤其要注意多分辩率情况的考虑
4.不要用肉眼去解决控件居中,对齐等位置问题,尽量用数学计算坐标
5.根据引擎特性考虑优化,比如减少drawcall,图片打组,使用压缩格式等
回复 支持 反对

使用道具 举报

沙地民谣网 2017-12-6 17:02:45
某游戏UI前来回答:=_=
画很大(不要有笔触感),转智能对象,缩小,锐化。OK完成了。

没错啊我就是这么干的。

(为什么UI题会这么多策划回答,难道是我看错题了0.0 题主你是问的是美术怎么画出来还是程序怎么实现出来?我以为题主问的是UI制作技巧,而不是游戏画质优化。。。)
回复 支持 反对

使用道具 举报

DavidDug 2017-12-6 17:06:30
画大一倍 做完缩小
回复 支持 反对

使用道具 举报

大发 2017-12-6 17:09:16
谢邀。就目前来看,暴雪游戏的设计应该是目前游戏UI高精度所追求的标准。本人入暴雪门已经十年有余了。
简单来说,画大后再缩小是最直观有效的方法。当然这只是入门功夫,想要真正做好UI的,做到精致,高精度,有设计内涵,还是要多参考一些好的游戏UI设计,不只是画出来,或者拷贝别人的内容,更多的是有自己的东西,对素材的质量,图片质量,设计元素的提高才是做好精致UI的关键。
回复 支持 反对

使用道具 举报

大发 2017-12-6 17:12:38
百度 “PS 智能图层”,好像这样放大图片绘制以后再缩小细节就不会丢失。

作为一个程序员,我只能帮你到这儿了。
回复 支持 反对

使用道具 举报

DavidDug 2017-12-6 17:16:15
百度的策划吧、GameRes游资网、知乎  策划咋都跟吃了火药似的
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-3-28 19:16 , Processed in 0.140439 second(s), 25 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.