Illustrator绘制可爱的圣诞节小图标

今天来教同学们绘制一组SVG格式的圣诞图标，利用神器生成字体图标，界面全中文，步骤清晰明了，简单易学，文末还有个人专属福利资源送上，节日过后别错过这种好教程咯。

前言

圣诞节虽然与西方人的信仰有关，但对于我们中国人来说，这是一个和浪漫、娱乐和送礼有关的节日。那么，就让我们用AI来绘制一组SVG格式的圣诞嘉年华图标吧。网页设计师们应该并不陌生，网络的网页字体图标就是利用SVG插入网页显示的，它保持了高清的完美细节，在多平台的网页里受到追捧，这篇教程将教大家如何通过AI绘制SVG图标，并利用在线工具生成字体图标。

一、认识SVG图标

首先，我们来说说SVG这个图片格式。SVG对WEB端非常友好，尤其是近些年显示屏的革新。适应无数手机屏幕尺寸不一的要求，矢量图发挥了自身的特性，那就是无论屏幕尺寸大小，它都显示得非常清楚，而像素级图片相形见绌。

对于WEB来说，“全屏”一直是个问题(因为没有任何人愿意通过手机端去等待一张重量级图片的加载)，而SVG是经过简化的矢量格式，它是由XML传输，许多没必要的“细节”被清除，剩下的是相对更轻量的文件。

最后，一个SVG文件的内容是可以被复制，它也可以像其他WEB里的元素一样被美化，SVG里有一部分可以被独立出来，并且可以更改图片的颜色，重置描边大小，设置透明度，我们还可以给它用上某种效果(例如模糊)，甚至动画效果……这一切通过CSS和JS就可以做到。而SVG不仅可以做成图标，还可以做成LOGO，标语，文字等。

二、绘制图标

1、尺寸大小的确定

在我们绘制图标前，我们要对整个图标的大小有个比较明确的概念。也就是，有时候你撑开全屏画出的图标，等到缩小使用后(图标通常都是缩小使用的)，往往效果却是另一回事。

矢量图标的大小通常不是特别大的问题，因为矢量的好处就在于无限的伸缩性，但是，在开始绘制前，最好有这样两个规划。

图标文件的尺寸大小是多少?

图标线条是多少像素?

在规划好后，可以尝试着画一个很简单的粗略的图，然后缩小后略微看看效果。这样才能判断出线条大小多少比较合适。

2、利用网格线

打开AI，新建文档。在这里，我建立的是一个800px*800px的文档。根据刚刚的粗略判断，我把我要画的图标定为：描边为16px，内部线条为8px，在这里8px是一个基本单位。那么，我们可以知道我们要画的矩形格子也是8pt为边长。

因此，新建后的文档，选择【视图>显示网格】以及【对齐网格】，在【编辑>首选项>参考线和网格】中“网格线间隔”就可以设置为8px，其他可参考我所提供的设置参数。

3、绘制轮廓线

尽量选用钢笔工具和基础图形的描边来绘制，描边大小我在这里设置的是16pt。先勾勒出圣诞袜子的轮廓。

在使用钢笔工具绘制时，出现用鼠标控制不当造成的失误，线条不够平滑。这时，可以在工具栏中找到【平滑工具】，对准路径进行平滑处理。这个工具往往可以帮你把手绘线条自动处理平滑。在进行平滑处理前，请记得选中对应的路径。