看点高级的
拿点有用的
学点真干货
找点新财路
发布
登录
注册
轻质感等级勋章教程,超细节
行空设计
珠海
/
设计爱好者
/
1年前
/
234浏览
版权
私信
关注
轻质感等级勋章教程,超细节
行空设计
关注
成就体系是运营常用手段,而等级勋章作为视觉设计的一部分最需要注意的是既要有统一风格,又有明显等级梯度。通常底座是作为统一性的视觉元素,主体图形做等级区别。
这次教程的勋章体系采用的是奖牌形式,设计要点如下。
统一结构:奖牌图形+双层底座+飘带装饰(包括图形大概占比)
等级区别:奖牌图形寓意+底座样式复杂度+飘带装饰复杂度
设计拆解
轻质感成就徽章的绘制可以分为4步:底座绘制,高光质感添加,徽章主体图形的绘制,最后是点缀图形添加。
收藏
底座绘制
绘制勋章底座,一个圆底,两个六边形。
圆底:圆形直径168,填充线性渐变#F2F3F7_#E2E3EE即可。
大六边:高宽138,填充线性渐变#9B63DB_#7E07E0,边框居中40%_#A04CE0 ,外阴影15%_#1D0026_Y轴9_其余参数0。
小六边:高宽96,填充线性渐变#C572F2_#C636FF,边框外部10%_#7800D4,外阴影5%_#000000_Y轴2 _模糊2_其余参数0。
收藏
添加质感
轻质感的高光是叠加亮部图层实现的。复制底部大六边形,微调尺寸和圆角内至嵌于底框,设置填充线性渐变#7730CF_#7410CC做暗部,再复制该框截取部分做亮部,填充#FFFFFF20%,层层亮部叠加,最上层高光40%。
收藏
主体图形
皇冠图形绘制,需要注意对称。可以直接用钢笔绘制,也可以利用五边形和三角形布尔运算减去顶层获得,本次采用钢笔绘制的方法。
图形绘制:利用多边形工具绘制一个五边形W60*H44,用钢笔工具进行二次编辑,在上方两边中间新增两锚点,移至中点,再同步调整,对称的锚点每次移动距离都一致即可。最后画三个圆和皇冠底座联集。
图形效果:填充线性#FFE712_#FACC00,边框外部#FFFFFF 粗细6px。最后添加高光渐变,#FFFFFF 透明度10%_50%
收藏
点缀图形
最后加上点缀的勋章飘带,和底纹即可。
飘带:钢笔工具画一个开口红色旗帜,也可以用矩形和三角形进行减去顶层的布尔运算保证对称,填充线性渐变#FF7F7D_#F21248;同样绘制白旗#FFFFFF,紫旗填充线性渐变
放射性底纹:添加两个一样的正方形,将其中一个旋转60度后,布尔运算交集就得到一个30度三角形,连续复制并连续旋转45度得到底纹。将底纹置于小六边形的蒙版中即可。
收藏
本期资源:各等级钻石图标。
收藏
0
举报
|
声明
2
分享
原创文章
UI
勋章体系
运营设计
相关推荐
换一换
弥散风蛇年海报设计教程
102
行空设计
大厂节气海报灵感解析(7)
36
行空设计
1500+大厂24节气海报,不重设计灵感(附资源)
380
行空设计
多巴胺配色不求人,11个经典案例讲透
1426
行空设计
玫瑰故事✖️刘亦菲Q版头像集.gif✖️基础教程
103
行空设计
关注
IP形象及IP内容
7568
蔡蔡文化
平面理论告诉你,UI设计如何更有吸引力?
239
行空设计
阅读类APP·轻质感缺省图练习
230
行空设计
AICG落地✖️劳动节日海报
25
行空设计
看完59个案例,我总结了用户引导设计方法
16
行空设计
会员精选
易秒付app整理
189
设计师韦兴
推广
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
你可能喜欢
换一换
波点视觉x信谊视觉升级方案
253
POP波点视觉
二爷头条IP形象设计x小脑府
229
小脑府设计团队
原来设计是可以和AI聊出来的
275
Ai训练师大宇
AI动效辅助行业营销设计
268
快手电商设计中心
2026上半年插画总结
261
沸腾牛奶
NAVEE丨Anycubic丨产品站视觉合集系列丨视觉精选
374
创意光谱
相关收藏夹
换一换
关注
IP形象及IP内容
7568
蔡蔡文化
关注
简历/作品集/述职
3718
瘫_ATAN
关注
国潮&国风
6491
曜Shea
关注
地产VI
1721
喾二
关注
一些小动物
253
是小蜥蜴呀
关注
C君精选-吉祥物设计
2931
你好C君
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
勋章体系
品牌、勋章、会员体系
电商勋章体系怎么设计
设计’
a设计
AS设计
by设计
设计in
in设计
it设计
、设计
设计.
设计】
设计
设计、
设计
#设计#
🤮设计
设计‘’
is设计
设计‘
设计
设计。
#设计
if设计
设计,
设计
@设计
an设计
设计 、
设计|
设计/
设计
#设计
#设计
设计#
#设计
设计
登录注册
推荐
登录即可同步推荐记录哦
2
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享