轻质感等级勋章教程,超细节

用户头像
珠海/设计爱好者/1年前/234浏览
轻质感等级勋章教程,超细节
成就体系是运营常用手段,而等级勋章作为视觉设计的一部分最需要注意的是既要有统一风格,又有明显等级梯度。通常底座是作为统一性的视觉元素,主体图形做等级区别。
这次教程的勋章体系采用的是奖牌形式,设计要点如下。
  • 统一结构:奖牌图形+双层底座+飘带装饰(包括图形大概占比)
  • 等级区别:奖牌图形寓意+底座样式复杂度+飘带装饰复杂度
设计拆解
轻质感成就徽章的绘制可以分为4步:底座绘制,高光质感添加,徽章主体图形的绘制,最后是点缀图形添加。
轻质感等级勋章教程,超细节(图ZMTQ5MjQ3NjQ=) - 教程 - 站酷设计师行空设计原创素材 - 站酷ZCOOL
收藏
底座绘制
绘制勋章底座,一个圆底,两个六边形。
  • 圆底:圆形直径168,填充线性渐变#F2F3F7_#E2E3EE即可。
  • 大六边:高宽138,填充线性渐变#9B63DB_#7E07E0,边框居中40%_#A04CE0 ,外阴影15%_#1D0026_Y轴9_其余参数0。
  • 小六边:高宽96,填充线性渐变#C572F2_#C636FF,边框外部10%_#7800D4,外阴影5%_#000000_Y轴2 _模糊2_其余参数0。
轻质感等级勋章教程,超细节(图ZMTQ5MjQ3Njg=) - 教程 - 站酷设计师行空设计原创素材 - 站酷ZCOOL
收藏
添加质感
轻质感的高光是叠加亮部图层实现的。复制底部大六边形,微调尺寸和圆角内至嵌于底框,设置填充线性渐变#7730CF_#7410CC做暗部,再复制该框截取部分做亮部,填充#FFFFFF20%,层层亮部叠加,最上层高光40%。
轻质感等级勋章教程,超细节(图ZMTQ5MjQ3NzI=) - 教程 - 站酷设计师行空设计原创素材 - 站酷ZCOOL
收藏
主体图形
皇冠图形绘制,需要注意对称。可以直接用钢笔绘制,也可以利用五边形和三角形布尔运算减去顶层获得,本次采用钢笔绘制的方法。
  • 图形绘制:利用多边形工具绘制一个五边形W60*H44,用钢笔工具进行二次编辑,在上方两边中间新增两锚点,移至中点,再同步调整,对称的锚点每次移动距离都一致即可。最后画三个圆和皇冠底座联集。
  • 图形效果:填充线性#FFE712_#FACC00,边框外部#FFFFFF 粗细6px。最后添加高光渐变,#FFFFFF 透明度10%_50%
轻质感等级勋章教程,超细节(图ZMTQ5MjQ3NzY=) - 教程 - 站酷设计师行空设计原创素材 - 站酷ZCOOL
收藏
点缀图形
最后加上点缀的勋章飘带,和底纹即可。
  • 飘带:钢笔工具画一个开口红色旗帜,也可以用矩形和三角形进行减去顶层的布尔运算保证对称,填充线性渐变#FF7F7D_#F21248;同样绘制白旗#FFFFFF,紫旗填充线性渐变
  • 放射性底纹:添加两个一样的正方形,将其中一个旋转60度后,布尔运算交集就得到一个30度三角形,连续复制并连续旋转45度得到底纹。将底纹置于小六边形的蒙版中即可。
轻质感等级勋章教程,超细节(图ZMTQ5MjQ3ODA=) - 教程 - 站酷设计师行空设计原创素材 - 站酷ZCOOL
收藏
本期资源:各等级钻石图标。
轻质感等级勋章教程,超细节(图ZMTQ5MjQ3ODQ=) - 教程 - 站酷设计师行空设计原创素材 - 站酷ZCOOL
收藏
0
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】活动icon
科技医疗透明柜UI界面设计
【新年UI图标】影音icon
【新年UI图标】积分icon
拟物风质感写实UI卡片合集源文件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
新拟态风格 UI设计组件库
UI通用设计素材1
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】礼物/活动icon
我的钱包-UI界面设计-app
手表表盘UI系列
APP/小程序商业项目UI模板|99个高保真UI+79个原型
高级感金属拟物 UI设计组件库
高级表盘系列UI源文件
Security Camera UI kit
3D渐变流体抽象矢量UI背景图
【新年UI图标】珠宝icon
智能家居中心 简约 UI设计组件库
户外旅行飞机情侣假日出行
【新年UI图标】30个图标
【新年UI图标】体育icon
UI界面 组件
盲盒APP UI设计
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册