如何用AI制作游戏里的头像框UI效果

Sponsor

在APP的日常运营中，我们设计的同学经常会接到主题活动类的设计需求，其中活动头像框就是一个主要的类型。

主题头像框能满足用户的个性化需求，可以充当活动奖品，提高用户对活动的参与积极性，也有着一定的活动推广作用。

那么对于大部分手绘能力并不突出的UI设计师，怎样能在短期内利用素材制作活动主题的头像框呢？本期文章我将结合以往我做过的主题头像框，给大家讲解我的思路与方法。

1、素材分析与制作思路

在需求开始前，我们一定要和需求方做好沟通，确定好需求方的想法与要求，提出自己对于元素、颜色、质感等元素大致思路，避免大改。

这里举例用一张AI素材做一个头像框，主题是冬天雪景，给用户带来冬天的感觉，那我们便可以围绕这点分析这张素材和提取可用元素。

首先是色调的分析，整个kv色调以蓝白色为主，亮暗分明，上方天空融入五彩的极光，有很好的丰富整体色调的作用，我们可以大致上直接按这种布局给框体配色。同时下方的积雪也可以做冬季的点题，可以加在头像框底部，刚好之前设想的底部深蓝色也能很好的衬出积雪轮廓

再就是一些装衬元素的选取，例如空中的飘雪、人物身上的装饰等，又或者一些图案纹理、特效等，都可以用来丰富头像框，一般我会倾向找一些偏三角形的元素去搭配圆形的框体来做一个方圆结合

2、框体的制作

框体制作上首先是框体粗细不宜过细，要记住头像框始终是应用在界面上很小的一个元素，框体太细会压不住元素导致整体看上去很散乱，同时看上去也不够份量，而且框体的内圈最好略微小于头像（下图红色区域），让框体与头像产生一些重叠

接下来我们可以用颜色渐变与色块模糊给框体做亮暗丰富体积，还可以试着添加一点特殊结构，增加趣味性

可以看到框体完整度看起来差不多了，接下来我们可以去叠一些半透明纹理，清晰度不需要太高

最后根据具体情况再做下调整，这里想要给框体增加一些发光的感觉，于是添加了一层白色描边做高光，以及模糊化的蓝色外发光

对比后可以看到框体看上去更晶莹闪耀，而且更有质感了

3、元素的使用

首先需注意点是元素的大小与位置，所有元素尽量避免相同大小，我们可以以优先级去给每组元素做大小排序，例如标题>ip>配角>其他

然后元素的摆放位置与朝向也可以去做呼应，让元素之间产生互动感，例如图中生物望向小人，小人望向标题等，这么做也能让整体看起来更整体和谐

还有一个元素摆放方法，我们可以复制框体的外圈做蒙版，然后选择一些元素置入，例如下图中的积雪、云朵和黑色星球。这么做也是为了丰富整体层次，让元素与框体产生联系

最后我们可以给元素添加投影，投影只需要铺在框体上即可，否则一些半透明模糊化的像素会超出画板的尺寸，所以我们可以最后确定好所有内容后，再以整个头像框区域为蒙版做这一步

总结一下，以上做的每个步骤都是为了元素丰富同时更好地融入框体，让头像框有整体性，还有很多方法可以继续优化但这里就不再赘述了

4、AI工具的结合

有时候我们拿到的素材没什么可用之处时，我们可以用AI去炼制元素。目前在SD上有模型可以直接炼制整个头像框，但效果并不是特别好，所以我更推荐大家用AI生成元素去做拼贴

基本的AI炼制方法相信大家都会了，这里我们需要强调下画风的提示词，以及记得加上black background，方便抠图。

后续就是结合上面元素使用的思路去做即可，这里放两个古风向的头像框，可以看到AI元素的应用效果还是挺不错的

OK，这期教程就到这里啦，希望对大家有所帮助，欢迎在评论区提出不同的见解。

来源：ASAK （ID:ASAK_Design）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。