如何根据游戏素材制作主题头像框?实战教程来了!

在 APP 的日常运营中,我们设计的同学经常会接到主题活动类的设计需求,其中活动头像框就是一个主要的类型。 主题头像框能满足用户的个性化需求,可以充当活动奖品,提高用户对活动的参与积极性,也有着一定的活动推广作用。 那么对于大部分手绘能力并不突出的 UI 设计师,怎样能在短期内利用素材制作活动主题的头像框呢?本期文章我将结合以往我做过的主题头像框,给大家讲解我的思路与方法。 相关干货:一、素材分析与制作思路 在需求开始前,我们一定要和需求方做好沟通,确定好需求方的想法与要求,提出自己对于元素、颜色、质感等元素大致思

如何根据游戏素材制作主题头像框?实战教程来了!

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

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

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

相关干货:

如何根据游戏素材制作主题头像框?实战教程来了!

一、素材分析与制作思路

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

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

二、框体的制作

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

三、元素的使用

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

如何根据游戏素材制作主题头像框?实战教程来了!

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

四、AI 工具的结合

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

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

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

如何根据游戏素材制作主题头像框?实战教程来了!

如何根据游戏素材制作主题头像框?实战教程来了!

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

相关资讯

老板让我做个APP,我用AI半小时完成了120+UI界面!

Halo,这里是设计夹,今天分享的是「AI 界面设计」。 之前分享过利用 Midjourney 直接生成 UI 界面!详细介绍了如何使用「页面、配色、风格」指令来生成 UI 界面。这次借着做金融类 APP 的设计需求,探索利用 AI 生成具有「科技感、仪表盘、图表、数据可视化」等属性的界面素材。 本次利用 AI 关键词提示,共生成了 4 种风格类型、120 UI 界面,以此满足更多的设计场景,一起来看看吧~ 一、浅色简约风格 浅色主题更能凸显高级感,是当前大多数产品优先选择的设计风格。浅色调金融类产品提到的 Mid

AIGC如何赋能UI设计?5篇简短教程帮你快速入门!

本篇文章主要是AIGC在图标设计上的一个应用,希望对大家有所帮助。 更多落地教程:一、Midjourney 生成 APP 活动弹窗1. 花瓣网找参考图,处理不必要的元素 这个弹窗设计我尝试了很多方法,发现还是需要垫图才能生成符合我想要的效果,所以这个方法还是得去找参考图才行,以下这张图来自花瓣网。 用 ps 处理下文字,别偷懒~(百度直接搜“花瓣网”即可,然后搜索“弹窗设计”)。尝试了图生文功能,这里没能如愿生成合适的,不过也给了我写关键词的灵感,突然发现图生文还可以这样用,牛~2. 关键词描述并垫图生成 然后我开

大厂落地实战!如何用Stable Diffusion完成B端和C端图标设计?

伴随着 AIGC 异常火爆,各种各样的 AI 工具如雨后春笋般涌现,除了各位设计师知道的 Midjourney(以下简称“MJ”),同样还有十分亮眼的 Stable Diffusion。 所以今天我们主要教大家如何使用 Stable Diffusion(以下简称“SD”)来进行 B 端图标和 C 端图标的创作,充分将 AIGC 灵活的运用在项目的工作流程之中。 往期AIGC 生成图标干货:一、B 端图标 那首先我们先来看看 B 端图标,有哪些特点?从上图可以发现主要特点为:立体块面感、轻科技、材质多为毛玻璃、光泽金