【世界新视野】UI设计如何表达金属质感

先看整体效果

这个狮子头整体效果集合了拟物化的手法，模拟了游戏里道具的视觉效果。

那今天就来分享一下制作方法，类似的效果举一反三也是很简单的。

【资料图】

工具我用的是sketch，但用到的功能绝大部分UI工具都有，原理都一样。

首先拆解一下大致结构：

分别是内部背景、外框、主体

背景很简单，就是一个渐变色，工具是【角度渐变】

下面重点来了，这个金属框的效果怎么画

首先分析一下它的大致光影和结构

其次这个形态是一个斜角凸起又是一个斜角下落的，类似三角形

这样的话外侧坡面还是原先的受光规则：上亮下暗，

那内侧坡面就变成了上面背光，下面受光，正好相反：上暗下亮，

按着这个思路去绘制，这样一个大体的形态就出来了

每一个凸起或凹陷的棱角都是一个转折面，需要去表达亮面与暗面的关系

至于为什么这两个色值要紧挨着，一方面是表现形态的需要，一方面是金属材质的视觉属性使然

内外坡面都处理好以后，大体的样子就有了

但总感觉缺少点细节，那就加点

如果把它理解为是一个拼合金属，那它们之间就一定有接缝

接缝自然就好画，一个细细的黑圈，然后呢？

内部的金属片是拼上去的，金属肯定有厚度，这个厚度是不是也会受光背光？

那就把这个厚度的感觉也加上

这样一个有细节的感觉就做好了

为了避免图层太多，缩放的时候会失真，可以把这些样式都做在一个路径上

需要注意的是，这里的描边宽度和先后顺序需要计算一下，

比如刚才说到的黑色缝隙在外侧，那它的顺序就应该在下面

白色厚度高光在上面，且上方图层的描边宽度永远小于下方的，不然就看不见咯

接下来的工作就是画主体

主体由一块块小的金属片拼接而成，那就可以通过路径把这一个个的小金属片画出来，再拼接

这里的工作大同小异，就是画出路径填充基体渐变表达转折面增加细节

举一个小：

1、画出路径

2、填充基本渐变（根据形体来）

3、表达转折面（要考虑厚度、光影、质感差异等等），可以使用蒙版嵌套

这里用到的就是一个图层嵌入在刚才的基本面里面

4、增加细节

阴影、内阴影什么的，可根据整体效果联调

最后画狮点睛，这里的眼睛我用了一个发光的效果

一个金属质感的狮子头盾牌就完成了

好了，本期分享就到这里

喜欢记得一键三连～