金刚区作为产品功能架构重要的组成部分，是设计师重点发挥的区域，不同的设计手法（渐变、透明度变化、投影、晶白、毛玻璃...）可以延展出不同类型的差异化图标，使得金刚区图标质感差异也会有所不同。

下面我们以医疗类图标为例，带你了解金刚区轻质感（渐变、投影、模糊）图标的设计思路，参数仅做参考哦~

本次使用的工具是行空设计，边看边操作效果更佳哦~

设计要点

1.渐变色：使用同色系做渐变打造轻质感。

2.光影处理：内阴影打造出立体感，把图案做出厚度。高光图层加强图案表面光滑的质感，类似反光的效果。图案整体设置外阴影加强重量感，并制造图案和底部圆的空间感 。

3.底部阴影：使用高丝模糊让整体阴影的阴影细节更为丰富。

01绘制背景

利用形状工具绘制底部背景，填充同色系的线性渐变 ，并且给底部背景设置内阴影打造立体感。

底部背景：

尺寸：52*52px

线性渐变填充：#FFAD61-#FE5E25

内阴影1：#000000，不透明度31%，混合模式「叠加」，大小「0、-3、6、0」

内阴影2：#FFFFFF，不透明度50%，混合模式「叠加」，大小「0、3、6、0」

02绘制手柄和药箱

同理，利用形状工具绘制药箱雏形，填充颜色较浅的线性渐变色 ，并设置内阴影。包含：手柄、箱子、箱盖。

手柄是由两个大小不一的圆角矩形进行「减去顶层」得出。

手柄：

外层矩形尺寸：26*15px，圆角半径4

里层矩形尺寸：18*9px，圆角半径1

手柄整体线性渐变填充：#FEF6F2-#FFB091

内阴影1：#FFFFFF，不透明度88%，大小「0、1、1、0」

内阴影2：#000000，不透明度100%，混合模式「叠加」，大小「0、-1、1、0」

箱盖：

尺寸：34*8px，圆角半径「4.5、4.5、0、0」

线性渐变填充：#FFF0E8-#FFCDB9

内阴影1：#FFFFFF，不透明度88%，大小「0、1、1、0」

内阴影2：#000000，不透明度34%，混合模式「叠加」，大小「0、-1、1、0」

箱子：

尺寸：34*20px，圆角半径「0、0、7、7」

线性渐变填充：#FFF4EE-#FFC0A7

内阴影1：#FFFFFF，不透明度88%，大小「0、1、1、0」

内阴影2：#000000，不透明100%，混合模式「叠加」，大小「0、-1、1、0」

03绘制高光

整体图标的高光显示在箱盖和箱子上。因此复制箱盖，修改尺寸去阴影，改变颜色作为箱盖的高光。而箱子的高光同理，但需多绘制一条曲线，并与原小尺寸的箱子进行【减去顶层】得到新的平滑形状，随后填充白色的线性渐变，制造高光点，打造表面光滑的质感。

箱盖高光：

尺寸：30*6px，圆角半径「4.5、4.5、0、0」

线性渐变填充：#FFFFFF（100%）-#FFFFFF（0%）

箱子高光：

小箱子尺寸：30*16px，圆角半径「0、0、7、7」

曲线尺寸：52.7*28.32px

整体线性渐变填充：#FFFFFF（100%）-#FFFFFF（0%）

04 添加装饰

利用矩形工具绘制锁扣与十字架，锁扣进行渐变线性填充，并设置内外阴影打造质感和重量感，十字架填充与底色背景一致的线性渐变色。

锁扣：

尺寸：4*9px，圆角半径「2」

线性渐变填充：#FFBC9A-#FFA584

外阴影：#FE8643，不透明度40%，大小「0、1、1、0」

内阴影1：#FFFFFF，不透明度88%，大小「0、1、1、0」

内阴影2：#000000，不透明度100%，混合模式「叠加」，大小「0、-1、1、0」

十字架：

尺寸：10*2px，圆角半径「1」

线性渐变填充：#FFAD61-#FE5E25

05添加细节

将药箱所有图层打组命名为中心图案，设置外阴影增添重量感，最后复制一个底部背景图层放在最底部作为背景阴影，填充色不变，降低不透明度，设置高斯迷糊，增添整体图案的阴影细节。大家记得注意图层顺序哦

中心图案：

外阴影：#E34005，不透明度63%，大小「0、2、4、0」

背景阴影：

图层不透明度20%

线性渐变填充：#FFAD61-#FE5E25

高斯模糊「3」

以上就是医疗轻质感图标的绘制教程啦，你也来试试吧。期待你的作品哦~

大家有其他疑问可以在评论区讨论哦~

Powered by Froala Editor