火星网校
如何通过游戏素材打造个性化主题头像框设计
发布时间：2024-07-12 16:41:14 浏览量：132次
在APP的日常运营中，我们设计的同学经常会接到主题活动类的设计需求，其中活动头像框就是一个主要的类型。
主题头像框能满足用户的个性化需求，可以充当活动奖品，提高用户对活动的参与积极性，也有着一定的活动推广作用。
对于大部分手绘能力并不突出的UI设计师，如何利用素材制作活动主题的头像框呢？本文将结合以往的经验，分享制作思路与方法。
素材分析与制作思路
在需求开始前，我们一定要和需求方做好沟通，确定好需求方的想法与要求，提出自己对于元素、颜色、质感等元素大致思路，避免大改。
首先是色调的分析，整个kv色调以蓝白色为主，亮暗分明，上方天空融入五彩的极光，有很好的丰富整体色调的作用，我们可以大致上直接按这种布局给框体配色。同时下方的积雪也可以做冬季的点题，可以加在头像框底部，刚好之前设想的底部深蓝色也能很好的衬出积雪轮廓。
再就是一些装衬元素的选取，例如空中的飘雪、人物身上的装饰等，又或者一些图案纹理、特效等，都可以用来丰富头像框，一般我会倾向找一些偏三角形的元素去搭配圆形的框体来做一个方圆结合。
框体的制作
框体制作上首先是框体粗细不宜过细，要记住头像框始终是应用在界面上很小的一个元素，框体太细会压不住元素导致整体看上去很散乱，同时看上去也不够份量，而且框体的内圈最好略微小于头像（下图红色区域），让框体与头像产生一些重叠。
接下来我们可以用颜色渐变与色块模糊给框体做亮暗丰富体积，还可以试着添加一点特殊结构，增加趣味性。
可以看到框体完整度看起来差不多了，接下来我们可以去叠一些半透明纹理，清晰度不需要太高。
最后根据具体情况再做下调整，这里想要给框体增加一些发光的感觉，于是添加了一层白色描边做高光，以及模糊化的蓝色外发光。
总结一下，以上做的每个步骤都是为了元素丰富同时更好地融入框体，让头像框有整体性，还有很多方法可以继续优化但这里就不再赘述了。
元素的使用
首先需注意点是元素的大小与位置，所有元素尽量避免相同大小，我们可以以优先级去给每组元素做大小排序，例如标题>ip>配角>其他。
然后元素的摆放位置与朝向也可以去做呼应，让元素之间产生互动感，这么做也能让整体看起来更整体和谐。
还有一个元素摆放方法，我们可以复制框体的外圈做蒙版，然后选择一些元素置入，例如积雪、云朵和黑色星球。这么做也是为了丰富整体层次，让元素与框体产生联系。
最后我们可以给元素添加投影，投影只需要铺在框体上即可，让元素看起来更晶莹闪耀、更有质感。
AI工具的结合
有时候我们拿到的素材没什么可用之处时，我们可以用AI去炼制元素。目前在SD上有模型可以直接炼制整个头像框，但效果并不是特别好，所以我更推荐大家用AI生成元素去做拼贴。
基本的AI炼制方法相信大家都会了，这里我们需要强调下画风的提示词，以及记得加上black background，方便抠图。
后续就是结合上面元素使用的思路去做即可，这里放两个古风向的头像框，可以看到AI元素的应用效果还是挺不错的。
OK这期教程就到这里啦，希望对大家有所帮助，欢迎在评论区提出不同的见解。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
1、PSCC—首选项，选择界面颜色
最新文章
