Illustrator绘制SVG圣诞图标教程一览

给各位Illustrator软件的使用者们来详细的解析分享一下绘制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。先勾勒出圣诞袜子的轮廓。

 


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

 


4、绘制花纹

接下来我准备为圣诞袜子添加一些纹饰,但是,这里请记住,我们要做成SVG图标,就要避免使用图案。图标的绘制过程中每一个细节都要采用路径来绘制。

雪花的绘制方法有两种,一种是直接用矩形来绘制,这时我们要把描边关掉;另一种就是依然使用线条。选择哪一种完全是看个人的习惯。我们利用矩形来构建出雪花的形状。

先画出三个矩形,将矩形旋转-45°,排列出下图1的样式。将这三个矩形编组,编组后再复制,将复制后的形状对称到左边,形成如下图2的样式。将这个图形编组后,在顶部增加一个矩形,旋转45°,然后将这两个形状正中对齐。再将其编组。

 


接下来我们利用这个已经做好的图样,做一个花型。这时,你可以采用比较“笨”的办法,也就是直接复制粘贴后旋转角度。当然,对于想要提高技能的童鞋来说,还有另一种方式——旋转工具。

选择这个对象,然后点击旋转工具,按住ALT键,将中心点拖动到如下图所示的下方,也就是我们将要建立的花型的中心。

 


松开ALT键后,会弹出一个旋转工具的设置面板,我们将旋转角度设置为90°,点击“复制”,就会出现新的复制出的图样,围绕中心点旋转了90°。这时,保持新的图样被选中的情况下,点击“ctrl+D”,重复两次上一步的操作。这样一个花型就做好了,我们可以再在中心加上一个矩形。

 


将上面做好的雪花图样编组,然后复制粘贴两份到另外的地方做装饰。如图所示。

 


接下来,让我们在其余空白的地方增加一点格子花样。由于我们最后要做成的是SVG图片,SVG图标生成前要注意的就是,路径里不能有重叠。换句话说,我们做出的图形,第一是必须得是矢量,可自由伸缩。第二就是要全部扩展成为封闭的填充图案。

为此,我放弃了采用建立图案的方式来画格子,而剩下的方法就只能一个个矩形这样去拼凑吗?还好,和几个网友讨论这个问题后,我找到了便捷有效的方法,那就是使用虚线来画格子。

在这里,我要画的格子大小是8pt边长的正方形,因此,我在这里先选用直线工具,将直线描边大小设置为8pt。点击“描边”,进入描边的设置面板,将虚线设置为8pt。这样就能将线条变为一行行的格子来绘制格子图案了。

 


接下来,我们可以继续一点点去增加格子图案,在我们喜欢的地方都画上虚线线条。

 


我们的圣诞袜子图样终于完成。但请一定记住,要做成SVG图标之前,还要下面的步骤哦~

5、SVG图标的准备

选中所有对象,进入【对象>扩展】,然后弹出的扩展设置面板中勾选“描边”和“填充”。

 


按住ctrl+shift+f9,调出“路径查找器”,选择“联集”,也就是合并形状的按钮。这时,整个图样都已形成一个封闭路径的图案了。

 


三、生成SVG图标

生成SVG图标只需要将文件保存为.SVG的格式,然后进入到icomoon(https://icomoon.io)在线字体图标生成,点击网站左上角的“import icon”选择SVG文件开始上传。在我的收藏夹(www.ifeiwu.com)里还有其他字体图标在线生成工具网站资源合集(www.ifeiwu.com,大家可以点击进入去看看。

 


上传成功后,选择右下角的“generate font”,进入到编辑页面,这里可以修改文件名等方式进行编辑。在图标的下方有一个“get code”的按钮,点击后,就能弹出字体图标的代码,仍由你在做网页时复制使用了。

 


 


四、圣诞嘉年华福利

学习了教程,自己动手操作当然必不可少,为了让圣诞节过得更轻松一点.在此提前祝大家圣诞节快乐!

 


好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的绘制SVG圣诞图标的教程解析分享的全部内容了,各位看到这里的使用者们呢小编相信大家看到这里了是很清楚了制作教程吧,那么大家就快去按照小编的教程自己去制作下吧。

时间: 2024-09-23 15:01:13

Illustrator绘制SVG圣诞图标教程一览的相关文章

Illustrator绘制SVG圣诞图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制SVG圣诞图标的教程. 教程分享: 一.认识SVG图标 首先,我们来说说SVG这个图片格式.SVG对WEB端非常友好,尤其是近些年显示屏的革新.适应无数手机屏幕尺寸不一的要求,矢量图发挥了自身的特性,那就是无论屏幕尺寸大小,它都显示得非常清楚,而像素级图片相形见绌. 对于WEB来说,"全屏"一直是个问题(因为没有任何人愿意通过手机端去等待一张重量级图片的加载),而SVG是经过简化的矢量格式,它是由XML传输,许多没必要的

Illustrator快速绘制简洁UI图标教程一览

给各位Illustrator软件的使用者们来详细的解析分享一下快速绘制简洁UI图标的教程. 教程分享:   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的快速绘制简洁UI图标的教程解析分享的全部内容了,各位使用者们看到这里了现在是非常的清楚了制作方法了吧,那么各位就快去按照小编的教程自己去制作一下吧.

Illustrator绘制精致APP图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制精致APP图标的教程. 分享一览: 我们先来看看最终的效果图吧:   消息/聊天应用程序图标,头脑风暴你会联想到什么,这里想到的是送邮件的小鸟.本教程主要讲解图标从最初的草图到矢量图标设计思路.简易教程,大神勿喷. 开始绘制草图 把头脑中的想法大概画出来,多画几版,可以不用画的很细.前期也可以收集一些相关的素材,设计应用程序图标时就要考虑图标放在应用程序商店时怎样识别度更高.所以这里选了小鸟的头部为主体,加上邮递员的帽子.   多

Illustrator绘制质感电池图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制质感电池图标的教程. 教程一览: 最后效果   下面我们开始学习制作过程: STEP 1 先新建一个文档,把背景设成黑色.设成任何尺寸都可以,我的是600px乘以400px的.我们先做这个电池尾部的金属帽.首先先画出它的形状,就像下面的这样.过渡颜色为90%灰度的灰色,白色和黑色.此外,要给对象1px的羽化,并把透明度调为75%.   STEP 2 复制(ctrl+C)这个对象然后直接把它粘贴到前面(ctrl+F).然后按向右的箭

Illustrator绘制精美圣诞花环教程分享

给各位Illustrator软件的使用者们来详细的解析分享一下绘制精美圣诞花环的教程. 教程分享: 1.做一个杉木枝的笔刷 第1步 首先,我们想想冷杉是什么样的.一条很细的枝干上被许多细长的针形的杉木叶子包围,看起来柔软,毛茸茸的.为了不让大家画叶子画到吐血,让我们来创建一个冷杉叶的笔刷. 使用椭圆工具(L),绘制一个压扁的椭圆形,并用过深绿色填充它.然后单击椭圆上方的锚点,使用[转换锚点工具](Shift-C)稍微拖拽,把顶部变成尖角.复制这个形状两次,使每个副本的颜色都更浅一些. 把每个针状

Illustrator绘制化学玻璃容器图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制化学玻璃容器图标的教程. 教程分享: 1.在Ai软件中,新建一个800*800的文档,选择矩形工具,按住shift画一个正方形,并填充颜色,如图所示   2.然后选择矩形工具,画一个矩形图形,并填充颜色,再选择椭圆工具,画一个椭圆图形,并填充颜色,如图所示   3.选中圆形和矩形,按ctrl+c复制,按ctrl+f粘贴,再按shift+Alt等比例缩放,并填充颜色,如图所示   4.接下来选择椭圆工具,按住shift画3个正圆图形

Illustrator绘制精致APP图标教程分享

给各位Illustrator软件的使用者们来详细的解析分享一下绘制精致APP图标的教程. 教程分享:             好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的绘制精致APP图标的教程解析分享的全部内容了,各位看到这里的使用者们,小编相信大家现在是非常的清楚了精致APP图标的制作教程了吧,那么各位就快去按照小编的教程自己去尝试着绘制吧.

Illustrator绘制手机振动图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制手机振动图标的教程. 教程分享: 在Ai软件中,新建一个800*800的文档,选择椭圆工具,按住shift画一个正圆图形,并填充颜色,如图所示   然后选择圆角矩形工具,画一个圆角图形,并填充颜色,如图所示   接着选择矩形工具,画一个矩形图形,并填充颜色,如图所示   接下来选择圆角矩形工具,画一个圆角图形,并填充颜色,如图所示   最后选择钢笔工具,勾出两条路径,并描边改为6pt,如图所示   效果如下图所示   好了,以上的

Illustrator绘制手机亮度图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制手机亮度图标的教程. 教程分享: 在Ai软件中,新建一个800*800的文档,选择椭圆工具,按住shift画一个正圆图形,并填充颜色. 然后再选择椭圆工具,按住shift画一个正圆图形. 接着选择椭圆工具,按住shift画一个正圆图形,并填充颜色,再选择直接选择工具,把圆形的锚点删除掉. 接下来选择圆角矩形工具,画一个圆角图形,并填充颜色,再选中圆角图形,按R键,按Alt移动圆角图形锚点的位置到中心点,再按ctrl+D复制,如图所