UI中常见的拟物化图标设计,你还不会吗简 [复制链接]

设计师语录：如果点子冒了出来，记下它；如果一个图案浮了出来，画下它。

使用软件：AdobeIllustrator

效果展示

设计分享

01第一步：了解图标的设计规范及设计小技巧

1.一般情况下，我们按最大的icon图标尺寸是*（16*16的64倍）来进行设计，这样即使是需要小尺寸的icon图标，图标质量也不会损失，我们先新建一个页面，如图

2.打开参考线和网格：执行“编辑”——“首选项”——“参考线和网格”，如图

3.在“首选项”面板中，设置网格间隔为“64px”,确定。如图

4.鼠标右键，选择“显示网格”，这样设置的参考的网格就可以显示出来，如图

5.执行“视图”——“智能参考线”、“对齐网格”、“对齐点”，分别勾选这些，在后面的绘图过程中，会比较严谨和标准。如图（此时设计前的准备工作已做好）

02第二步：绘制icon图标基本元素

1.使用“圆角矩形工具”，点击鼠标，参考如图设置大小和圆角半径，绘制一个*的圆角矩形（设计网格时，一个网格的间隔是64px，所以在绘制圆角矩形时，长和高都只需要16个网格即可），圆角矩形效果如图

2.先切换为“移动工具”，选择圆角矩形，点击“在内部绘制按钮”；然后选择“矩形工具”，绘制3个矩形（为了有所区别，在绘制矩形前，先改变填充颜色），如图

3.“矩形工具”在3条绿色的矩形中间再绘制2个其他颜色的矩形，如图

4.使用“椭圆工具”，按住“Shift”键，绘制一个正圆，“Ctrl+C”、“Ctrl+F”，原位复制几个圆，分别按住“Shift+Alt”键，鼠标向内拉，缩小如图

5.此时基本的元素已绘制完成，隐藏网格和关掉智能的参考线、对齐网格、对齐点，方便后面微调图形属性，如图

03第三步：绘制图标细节，增强视觉效果

1.双击圆角矩形，进入隔离模式，设置一个如图渐变色，使用“渐变工具”，拉出一个渐变色，效果如图

2.双击3条较宽的矩形，设置一个如图渐变色，使用“渐变工具”，拉出一个渐变色，效果如图

3.同样的方法，更改其他矩形和圆的颜色属性，并细化镜头圆的部分，如图

4.使用“椭圆工具”，绘制2个大小不一的圆，作为镜头的高光，如图

5.选择最大的圆，执行“效果”——“风格化”——“投影”，如图

6.参考如图设置投影参数，勾选“预览”，方便查看效果

7.原位复制一个图标，打开属性栏，将中心点移至下方，点击“垂直轴翻转”，作为倒影，如图

8.使用“矩形工具”，在倒影上绘制一个黑白渐变的矩形，用来辅助制作倒影，如图

9.选中黑白矩形和倒影，打开属性面板，点击“不透明度”——“制作蒙版”，如图

10.整个图形设计完成，效果展示如图

总结：

图标尺寸规划绘制：*px使用网格和智能参考线、对齐网格、对齐点规范图标绘制使用工具：圆角矩形、矩形工具、移动工具、椭圆工具、渐变工具使用属性：垂直轴翻转、不透明度——制作蒙版使用效果：风格化——投影使用模式：正常绘制、内部绘制使用快捷键：Ctrl+C（复制）、Ctrl+F（原位复制）重点：

内部绘制制作蒙版渐变方向如果点子冒了出来，记下它；如果一个图案浮了出来，画下它。学设计，感悟人生！