成就体系是运营常用手段，而等级勋章作为视觉设计的一部分最需要注意的是既要有统一风格，又有明显等级梯度。通常底座是作为统一性的视觉元素，主体图形做等级区别。

这次教程的勋章体系采用的是奖牌形式，设计要点如下。

• 统一结构：奖牌图形+双层底座+飘带装饰（包括图形大概占比）
• 等级区别：奖牌图形寓意+底座样式复杂度+飘带装饰复杂度

设计拆解

轻质感成就徽章的绘制可以分为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度得到底纹。将底纹置于小六边形的蒙版中即可。
  本期资源：各等级钻石图标。

Powered by Froala Editor