先看整体效果
这个狮子头整体效果集合了拟物化的手法,模拟了游戏里道具的视觉效果。
那今天就来分享一下制作方法,类似的效果举一反三也是很简单的。
(资料图)
工具我用的是sketch,但用到的功能绝大部分UI工具都有,原理都一样。
首先拆解一下大致结构:
分别是内部背景、外框、主体
背景很简单,就是一个渐变色,工具是【角度渐变】
下面重点来了,这个金属框的效果怎么画
首先分析一下它的大致光影和结构
其次这个形态是一个斜角凸起又是一个斜角下落的,类似三角形
这样的话外侧坡面还是原先的受光规则:上亮下暗,
那内侧坡面就变成了上面背光,下面受光,正好相反:上暗下亮,
按着这个思路去绘制,这样一个大体的形态就出来了
每一个凸起或凹陷的棱角都是一个转折面,需要去表达亮面与暗面的关系
至于为什么这两个色值要紧挨着,一方面是表现形态的需要,一方面是金属材质的视觉属性使然
内外坡面都处理好以后,大体的样子就有了
但总感觉缺少点细节,那就加点
如果把它理解为是一个拼合金属,那它们之间就一定有接缝
接缝自然就好画,一个细细的黑圈,然后呢?
内部的金属片是拼上去的,金属肯定有厚度,这个厚度是不是也会受光背光?
那就把这个厚度的感觉也加上
这样一个有细节的感觉就做好了
为了避免图层太多,缩放的时候会失真,可以把这些样式都做在一个路径上
需要注意的是,这里的描边宽度和先后顺序需要计算一下,
比如刚才说到的黑色缝隙在外侧,那它的顺序就应该在下面
白色厚度高光在上面,且上方图层的描边宽度永远小于下方的,不然就看不见咯
接下来的工作就是画主体
主体由一块块小的金属片拼接而成,那就可以通过路径把这一个个的小金属片画出来,再拼接
这里的工作大同小异,就是画出路径填充基体渐变表达转折面增加细节
举一个小:
1、画出路径
2、填充基本渐变(根据形体来)
3、表达转折面(要考虑厚度、光影、质感差异等等),可以使用蒙版嵌套
这里用到的就是一个图层嵌入在刚才的基本面里面
4、增加细节
阴影、内阴影什么的,可根据整体效果联调
最后画狮点睛,这里的眼睛我用了一个发光的效果
一个金属质感的狮子头盾牌就完成了
好了,本期分享就到这里
喜欢记得一键三连~